b22cd5f76a
* #10 add localization * #10 revert locale from dev page * #10 add more examples * #10 localize auth panel * #10 localize some comment message * #10 localize some comment form message * #10 translate vote messages * #10 translate comment message * #10 use messages value for translate reference * #10 fix compile issue * #10 use messages value for translate reference * #10 use messages value for translate reference * #10 use messages value for translate reference * #10 use messages value for translate reference * #10 use messages value for translate reference * #10 translate comment message * #10 translate comment form * #10 translate comment form * #10 translate root component * #10 translate user info * #10 translate settings * #10 translate settings * #10 translate toolbar * #10 translate errors messages * #10 sort dict * #10 fix after rebase * #10 localize anonymousLoginForm * #10 localize emailLoginForm * #10 update size-limit * #10 localize subscribe by rss * #10 localize subscribe by email * #10 add de locale * #10 increase limit size * #10 auto generate loadLocale * #10 add some documentation * #10 fix error messages * fix typo * don't bundle en locale * fix message id * change size limits * Update extract message pattern Co-Authored-By: Pavel Mineev <pavel@mineev.me> Co-authored-by: Pavel Mineev <pavel@mineev.me>
41 lines
2.2 KiB
Markdown
41 lines
2.2 KiB
Markdown
# Frontend guide
|
|
|
|
### Code Style
|
|
|
|
- project uses typescript to statically analyze code
|
|
- project uses `eslint` to check frontend code. You can manually run via `npm run lint`.
|
|
- git hooks (via husky) installed automatically on `npm install` and check and try to fix code style if possible, otherwise commit will be rejected
|
|
- if you want IDE integration, you need `eslint` plugin to be installed.
|
|
|
|
### CSS Styles
|
|
|
|
- although styles have `scss` extension, it is actually pack of post-css plugins, so syntax differs, for example in `calc` function.
|
|
- component styles use BEM notation (at least it should): `block__element_modifier`. Also there are `mix` classes: `block_modifier`.
|
|
- component base style resides in the component's root directory with name of component converted to kebab-case. For example `ListComments` style is located in `./app/components/list-comments/list-comments/scss`
|
|
- component's element style resides in its own subdirectory, with name consisting of full elements selector, for example `ListComments` `item` element is placed in `__item` directory under name `./list-comments__item.scss`
|
|
- each style should be `require`d in `index.ts` of component's root directory
|
|
|
|
### Imports
|
|
|
|
- imports for typescript, javascript files should be without extension: `./index`, not `./index.ts`
|
|
- if file resides in same directory or in subdirectory import should be relative: `./types/something`
|
|
- otherwise it should start from `@app` namespace: `@app/common/store` which mapped to `/app/common/store.ts` in webpack, tsconfig and jest
|
|
|
|
### Testing
|
|
|
|
- project uses `jest` as test harness.
|
|
- jest check files that match regex `\.test\.(j|t)s(x?)$`, i.e `comment.test.tsx`, `comment.test.js`
|
|
- tests are running on push attempt
|
|
- example tests can be found in `./app/store/user/reducers.test.ts`, `./app/components/auth-panel/auth-panel.test.tsx`
|
|
|
|
### how to add new locale.
|
|
|
|
- add new item to `./tasks/supportedLocales.json`
|
|
- run `npm run generate-langs`
|
|
- commit all changed files
|
|
- translate all string in new generated dictionary `./app/locale/<new-locale>.json`
|
|
|
|
### Notes
|
|
|
|
- Frontend part being bundled on docker env gets placed on `/src/web` and is available via `http://{host}/web`. for example `embed.js` entry point will be available at `http://{host}/web/embed.js`
|