README.md 4.73 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
57
58
59
60
61
62
63
64
65
66
67

```ascii
.
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── config.development.js
├── config.production.js
└── src
    ├── components
    ├── context
    ├── images
    ├── intl
    ├── markdown
    ├── 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.
68

Sandro Lutz's avatar
Sandro Lutz committed
69
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).
70

Sandro Lutz's avatar
Sandro Lutz committed
71
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.
72

Sandro Lutz's avatar
Sandro Lutz committed
73
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.
74

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

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

Sandro Lutz's avatar
Sandro Lutz committed
79
80
81
82
   1. **`/src/components`**: This directory contains all components used somewhere on the website.
   2. **`/src/context`**: This directory contains all custom [React Context](https://reactjs.org/docs/context.html)
   3. **`/src/images`**: This directory contains all static images.
   4. **`/src/intl`**: This directory contains all translation files used by `react-intl`.
Sandro Lutz's avatar
Sandro Lutz committed
83
   5. **`/src/markdown`**: This directory contains markdown source files used on specific pages.
Sandro Lutz's avatar
Sandro Lutz committed
84
   6. **`/src/pages`**: Every `js` file represents a page which path is exactly like the folder structure and filename.
85

Sandro Lutz's avatar
Sandro Lutz committed
86
87
      **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
88
      _Example: The file `/src/pages/amiv/about.js` will serve the component defined in that file as a page at the path `/amiv/about`._
89

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

Sandro Lutz's avatar
Sandro Lutz committed
94
## 💫 Deployment
95

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

Sandro Lutz's avatar
Sandro Lutz committed
98
## ⚙ Technologies
99

Sandro Lutz's avatar
Sandro Lutz committed
100
### Frontend Frameworks & Libraries
101

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

Sandro Lutz's avatar
Sandro Lutz committed
107
### Backend
108

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

Sandro Lutz's avatar
Sandro Lutz committed
111
### Build Tools
112

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

Sandro Lutz's avatar
Sandro Lutz committed
116
### Development Tools
117

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

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