1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
|
# APcom
The source code of [my personal website](https://www.armandphilippot.com/).
## Introduction
The website is built with [Next.js](https://nextjs.org/), [WordPress](https://wordpress.org/) as headless CMS and [MDX](https://mdxjs.com/). To translate the website in French, I use [Formatjs](https://formatjs.io/). For syntax highlighting, I use [Prism](https://prismjs.com/). Others dependencies are used, feel free to take a look at `package.json`.
In addition to WordPress, the backend use:
- [ACF](http://advancedcustomfields.com/)
- [acf-post2post](https://github.com/Hube2/acf-post2post)
- [apcom-cpt](https://github.com/ArmandPhilippot/apcom-cpt) (the custom post types used)
- [wp-graphql](https://www.wpgraphql.com/)
- [wp-graphql-content-stats](https://github.com/ArmandPhilippot/wp-graphql-content-stats)
- [wp-graphql-get-extended](https://github.com/ArmandPhilippot/wp-graphql-get-extended)
- [wp-graphql-gravatar](https://github.com/ArmandPhilippot/wp-graphql-gravatar)
- [wp-graphql-send-mail](https://github.com/ashhitch/wp-graphql-send-mail)
## Private dependencies
Even if the source code and the contents are under free licenses, I don't want to see pure clones of my website. So I use a private repo as submodule to handle MDX content. Its structure looks like:
```
/
|--assets/
|-- image.jpg
|-- image2.jpg
|--pages/
|-- page1.mdx
|-- page2.mdx
|--projects/
|-- project1.mdx
```
Other contents come from WordPress as headless CMS.
## Production
### First step
Clone this repo, then:
```bash
cp .env.example .env
```
Then, in any case, you need a reverse-proxy if you want to bind the live app to a domain.
### With Docker
Make sure Docker and Docker Compose are installed then, you can run: `sudo docker-compose up -d --build <service-name>`.
`<service-name>` is optional. You don't need it the first time. However, if you want to rebuild and update only one container, it can be useful.
If you wish to use custom ports, you can edit your `.env` file and specify `APP_DOCKER_PORT` and `APP_STAGING_DOCKER_PORT` variables. By default the ports are respectively `3000` and `3200`.
If you are using Docker Swarm, you can instead use the deploy script to ensure that environment variables are loaded:
```bash
sh ./bin/deploy.sh
```
### Without Docker
Just run `yarn build && yarn start`.
## Development
### First step
Clone this repo, then:
```bash
cp .env.example .env
```
And edit the different values.
### Second step
Run the development server:
```bash
yarn dev
```
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. Then, you can make your changes.
### Storybook
You can search for a component or develop a new component in isolation thanks to Storybook.
```bash
yarn storybook
```
The different components are divided into 4 categories (atomic design):
- Atoms
- Molecules
- Organisms
- Templates
But, to be honest, between _Molecules_ and _Organisms_ some components may be misclassified.
### i18n
When editing strings that require translation, run:
```bash
yarn run i18n:extract
```
Then copy/edit the corresponding strings inside `src/i18n/fr.json`.
If you need another language:
```bash
cp src/i18n/en.json src/i18n/[locale].json
```
Replace `[locale]` with your desired locale. Then edit this file to translate all the strings.
Once ready, run to update the website translation:
```bash
yarn run i18n:compile
```
## Testing
This project is configured to support both [Jest](https://jestjs.io/) and [Cypress](https://docs.cypress.io/) tests with [Testing Library](https://testing-library.com/).
You can run both tests with `yarn test`.
### Jest
The tests are located alongside components (`src/components/`).
You can run Jest tests with `yarn test:unit`.
### Cypress
The tests are located in `tests/cypress/e2e/`. All texts (to find an element) needs to be written in French since Next.js is configured to only accept this language.
You can run Cypress tests with `yarn test:e2e`.
## Licenses
The source code is licensed under the [MIT license](./LICENSE).
The contents are licensed under the [CC BY SA license](https://creativecommons.org/licenses/by-sa/4.0/deed.fr).
|
