You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Zap is a fast, lightweight, developer-specific blog open source built on top of Gatsby. The principles for developing Zap are as follows.
16
16
17
-
### Install
17
+
- It should be incredibly fast, the content should load within the user's browser in 50ms.
18
+
- It should be aesthetic. Readability is the most important principle, and for this we aim for simple functionality and UI.
19
+
- All information in the Zap project should be accessible to anyone. This applies to everything including design, decision, and remaining tasks.
20
+
- It should be easy, easy to install, easy to contribute, and easy to use.
21
+
- It must be multi-platform compatible.
22
+
- It must conform to the Modern Web Specification. This includes PWA, AMP, a11y, and means to prefer video instead of gif, svg instead of png, icon font set instead of svg icon whenever possible.
18
23
19
-
First, You need `gatsby-cli` to use gatsby features. Type the following command on your terminal.
24
+
## Getting started
25
+
26
+
If you type as follows, You can see the project structure.
20
27
21
28
```bash
22
-
// yarn
23
-
yarn global add gatsby-cli
29
+
tree -L 2 -I 'node_modules'.
30
+
```
24
31
25
-
// npm
26
-
npm install -g gatsby-cli
32
+
Below is the project structure of zap.
33
+
34
+
```plaintext
35
+
zap/
36
+
|-- LICENSE # project license (MIT)
37
+
|-- README.md # project main document
38
+
|-- assets # document assets (images)
39
+
| `-- logo.svg
40
+
|-- commitlint.config.js
41
+
|-- gatsby-browser.js
42
+
|-- gatsby-config.js
43
+
|-- gatsby-node.js
44
+
|-- gatsby-ssr.js
45
+
|-- jest.config.js # jest test settings
46
+
|-- package.json # dependency list, yarn scripts
47
+
|-- node_modules/ # dependency packages
48
+
|-- public # gatsby static folder
49
+
| |-- chunk-map.json
50
+
| |-- favicon-32x32.png
51
+
| |-- favicon.svg
52
+
| |-- icons
53
+
| |-- manifest.webmanifest
54
+
| |-- page-data
55
+
| |-- render-page.js
56
+
| |-- render-page.js.map
57
+
| |-- static
58
+
| `-- webpack.stats.json
59
+
|-- src # project main sources
60
+
| |-- __generated__
61
+
| |-- components
62
+
| |-- content
63
+
| |-- images
64
+
| |-- layouts
65
+
| |-- pages
66
+
| |-- stories
67
+
| |-- styles
68
+
| |-- templates
69
+
| `-- typings.d.ts
70
+
|-- tsconfig.json # typescript configuration
71
+
`-- yarn.lock # package lock files
27
72
```
28
73
29
-
Then, run following command
74
+
### Installation
75
+
76
+
This project uses [yarn](https://yarnpkg.com/) as a package manager, If you don't have yarn, Follow [this link](https://yarnpkg.com/getting-started/install) to get download one.
77
+
78
+
```bash
79
+
yarn install
80
+
```
81
+
82
+
Then, run following command.
30
83
31
84
```bash
32
85
yarn start
@@ -36,15 +89,55 @@ yarn start
36
89
37
90
## Testing
38
91
92
+
This project uses [Jest](https://jestjs.io/) and [React Testing Library](https://testing-library.com/docs/react-testing-library/intro/), If you want to run test, Run as follows.
93
+
94
+
```bash
95
+
yarn test
96
+
```
97
+
98
+
## Coverage
99
+
100
+
For coverage, You can run as follows.
101
+
102
+
```bash
103
+
yarn test:coverage
104
+
```
105
+
106
+
## Linting
107
+
108
+
This project uses two lint systems as follows.
109
+
110
+
- eslint ([link](https://eslint.org/))
111
+
- prettier ([link](https://prettier.io/))
112
+
113
+
And, if you commit the husky will handle the lint automatically.
114
+
115
+
- See husky setting
116
+
117
+
If you want to run the lint manually, You can run as follows.
0 commit comments