README.md 4.7 KB
Newer Older
Sandro Lutz's avatar
Sandro Lutz committed
1
# amiv Website
2

Sandro Lutz's avatar
Sandro Lutz committed
3
This is the home of the amiv website.
4
5
6

## 🚀 Quick start

Sandro Lutz's avatar
Sandro Lutz committed
7
1. **Development**
8

Sandro Lutz's avatar
Sandro Lutz committed
9
10
    Navigate into the project directory, install all dependencies and run the development server using the following commands:

Sandro Lutz's avatar
Sandro Lutz committed
11
    _Please note that the parameter `-g` is optional. It is being used to install the package `gatsby-cli` globally on the system._
12
13

    ```shell
Sandro Lutz's avatar
Sandro Lutz committed
14
15
16
    npm install -g gatsby-cli
    npm install
    gatsby develop
17
18
    ```

Sandro Lutz's avatar
Sandro Lutz committed
19
    You can visit the website now at http://localhost:8000
Sandro Lutz's avatar
Sandro Lutz committed
20
21

2. **Linting & Formatting**
22

Sandro Lutz's avatar
Sandro Lutz committed
23
    We use `eslint` and `prettier` for linting and formatting of the javascript code. You can use the following commands:
24
25

    ```shell
Sandro Lutz's avatar
Sandro Lutz committed
26
27
    npm run eslint
    npm run format
28
29
    ```

Sandro Lutz's avatar
Sandro Lutz committed
30
3. **Production Build**
31

Sandro Lutz's avatar
Sandro Lutz committed
32
    You can prepare a production build manually and serve it using gatsby's built-in webserver. This will run the server-side rendering part.
33

Sandro Lutz's avatar
Sandro Lutz committed
34
    It is very possible, that some things do not work correctly when ssr is used, so you should definitively test this one before deploying a new version!
35

Sandro Lutz's avatar
Sandro Lutz committed
36
37
38
39
40
41
    ```shell
    gatsby build
    gatsby serve
    ```

    For more information about deployment, read the section about deployment below.
42
43
44

## 🧐 What's inside?

Sandro Lutz's avatar
Sandro Lutz committed
45
A quick look at the most important files and directories of the project.
Sandro Lutz's avatar
Sandro Lutz committed
46
47
48
49
50
51
52
53
54
55
56

```ascii
.
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── config.development.js
├── config.production.js
└── src
    ├── components
Sandro Lutz's avatar
Sandro Lutz committed
57
    ├── content
Sandro Lutz's avatar
Sandro Lutz committed
58
    ├── context
Sandro Lutz's avatar
Sandro Lutz committed
59
    ├── hooks
Sandro Lutz's avatar
Sandro Lutz committed
60
61
62
63
64
65
66
67
68
    ├── images
    ├── intl
    ├── pages
    ├── store
    ├── utils
    └── theme.js
```

1. **`gatsby-browser.js`**: This file is where Gatsby expects to find any usage of the [Gatsby browser APIs](https://www.gatsbyjs.org/docs/browser-apis/). These allow customization/extension of default Gatsby settings affecting the browser.
69

Sandro Lutz's avatar
Sandro Lutz committed
70
2. **`gatsby-config.js`**: This is the main configuration file for the Gatsby site. This is where you can specify information about your site (metadata) like the site title and description, which Gatsby plugins you’d like to include, etc. (Check out the [config docs](https://www.gatsbyjs.org/docs/gatsby-config/) for more detail).
71

Sandro Lutz's avatar
Sandro Lutz committed
72
3. **`gatsby-node.js`**: This file is where Gatsby expects to find any usage of the [Gatsby Node APIs](https://www.gatsbyjs.org/docs/node-apis/). These allow customization/extension of default Gatsby settings affecting pieces of the site build process.
73

Sandro Lutz's avatar
Sandro Lutz committed
74
4. **`gatsby-ssr.js`**: This file is where Gatsby expects to find any usage of the [Gatsby server-side rendering APIs](https://www.gatsbyjs.org/docs/ssr-apis/). These allow customization of default Gatsby settings affecting server-side rendering.
75

Sandro Lutz's avatar
Sandro Lutz committed
76
5. **`config.development.js` / `config.production.js`**: This file contains configuration values used with our custom components and pages.
77

Sandro Lutz's avatar
Sandro Lutz committed
78
6. **`/src`**: This directory contains all source code.
79

Sandro Lutz's avatar
Sandro Lutz committed
80
81
82
83
84
85
86
   1.  **`/src/components`**: Contains all components used somewhere on the website.
   2.  **`/src/content`**: All content only files (e.g. board or teams portraits or static texts)
   3.  **`/src/context`**: Custom [React Context](https://reactjs.org/docs/context.html)
   4.  **`/src/hooks`**: Custom React hooks.
   5.  **`/src/images`**: Static images.
   6.  **`/src/intl`**: Translation files used by `react-intl`.
   7.  **`/src/pages`**: Every `js` file represents a page which path is exactly like the folder structure and filename.
87

Sandro Lutz's avatar
Sandro Lutz committed
88
       **Note**: Every file starting with an underscore (`_`) in the pages directory is ignored. Those pages are mostly being used for client-only routes. Therefore no page route is created and no server-side rendering performed.
Sandro Lutz's avatar
Sandro Lutz committed
89

Sandro Lutz's avatar
Sandro Lutz committed
90
       _Example: The file `/src/pages/amiv/about.js` will serve the component defined in that file as a page at the path `/amiv/about`._
91

Sandro Lutz's avatar
Sandro Lutz committed
92
93
94
   8.  **`/src/store`**: This directory contains all files related to data handling using `react-redux`.
   9.  **`/src/utils`**: Collection of utility functions.
   10. **`/src/theme.js`**: Theme definition for light/dark mode (dimensions, colors, etc.)
95

Sandro Lutz's avatar
Sandro Lutz committed
96
## 💫 Deployment
97

Sandro Lutz's avatar
Sandro Lutz committed
98
TODO: Add information about the deployment process of the project.
99

Sandro Lutz's avatar
Sandro Lutz committed
100
## ⚙ Technologies
101

Sandro Lutz's avatar
Sandro Lutz committed
102
### Frontend Frameworks & Libraries
103

Sandro Lutz's avatar
Sandro Lutz committed
104
105
106
107
* [Gatsby](https://www.gatsbyjs.org)
* [React](https://reactjs.org/)
* [react-intl](https://github.com/formatjs/react-intl)
* [React-Redux](https://react-redux.js.org/)
108

Sandro Lutz's avatar
Sandro Lutz committed
109
### Backend
110

Sandro Lutz's avatar
Sandro Lutz committed
111
* [AMIV API](https://github.com/amiv-eth/amivapi)
112

Sandro Lutz's avatar
Sandro Lutz committed
113
### Build Tools
114

Sandro Lutz's avatar
Sandro Lutz committed
115
116
* [NPM](https://www.npmjs.com/)
* [gatsby-cli](https://www.npmjs.com/package/gatsby-cli)
117

Sandro Lutz's avatar
Sandro Lutz committed
118
### Development Tools
119

Sandro Lutz's avatar
Sandro Lutz committed
120
121
* [ESlint](https://github.com/eslint/eslint)
* [Prettier](https://github.com/prettier/prettier)
122

Sandro Lutz's avatar
Sandro Lutz committed
123
  Most IDEs have plugins for those tools. VS Code is the recommended IDE.