README.md 4.5 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
11
    Navigate into the project directory, install all dependencies and run the development server using the following commands:

    _Please note that the parameter `-g` is optional. It is 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
20
21
    You can visit the website now under http://localhost:8000

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
A quick look at the most important files and directories of this Gatsby project.

```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
      _Example: The file `/src/pages/amiv/about.js` will serve the component defined in that file as a page at the path `/amiv/about`._
87

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

Sandro Lutz's avatar
Sandro Lutz committed
92
## 💫 Deployment
93

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

Sandro Lutz's avatar
Sandro Lutz committed
96
## ⚙ Technologies
97

Sandro Lutz's avatar
Sandro Lutz committed
98
### Frontend Frameworks & Libraries
99

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

Sandro Lutz's avatar
Sandro Lutz committed
105
### Backend
106

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

Sandro Lutz's avatar
Sandro Lutz committed
109
### Build Tools
110

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

Sandro Lutz's avatar
Sandro Lutz committed
114
### Development Tools
115

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

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