Files

T

* #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>

2020-03-04 14:56:00 -06:00

app

Add localization (#602 )

2020-03-04 14:56:00 -06:00

tasks

Add localization (#602 )

2020-03-04 14:56:00 -06:00

.babelrc.js

optimize bundle sizes

2020-02-22 00:48:22 -06:00

.eslintignore

Cleanup embed.ts and add limit-size checker (#601 )

2020-02-19 16:08:35 -06:00

.eslintrc.js

Nice inputs and buttons (#510 )

2020-01-05 14:58:10 -06:00

.gitignore

Add localization (#602 )

2020-03-04 14:56:00 -06:00

.lintstagedrc.js

Introduce stylelint (#600 )

2020-02-16 11:25:59 -06:00

.prettierignore

mv web -> frontend

2019-04-28 19:27:36 +03:00

.prettierrc

Run prettier on all files

2020-01-05 17:52:25 -06:00

.size-limit.js

Add localization (#602 )

2020-03-04 14:56:00 -06:00

.stylelintignore

Introduce stylelint (#600 )

2020-02-16 11:25:59 -06:00

.stylelintrc.js

Introduce stylelint (#600 )

2020-02-16 11:25:59 -06:00

comments.ejs

Define remark host in runtime (#325 )

2019-05-13 10:51:17 -05:00

counter.ejs

Define remark host in runtime (#325 )

2019-05-13 10:51:17 -05:00

deleteme.html

Refactor preloader

2020-01-07 11:14:59 -06:00

iframe.html

Introduce stylelint (#600 )

2020-02-16 11:25:59 -06:00

index.ejs

Add localization (#602 )

2020-03-04 14:56:00 -06:00

jest.config.js

Add localization (#602 )

2020-03-04 14:56:00 -06:00

last-comments.ejs

Run prettier on all files

2020-01-05 17:52:25 -06:00

markdown-help.html

Add API methods for setting and deleting email (#483 )

2019-12-16 16:39:55 -06:00

package-lock.json

Add localization (#602 )

2020-03-04 14:56:00 -06:00

package.json

Add localization (#602 )

2020-03-04 14:56:00 -06:00

privacy.html

mv web -> frontend

2019-04-28 19:27:36 +03:00

Readme.md

Add localization (#602 )

2020-03-04 14:56:00 -06:00

remark.image

mv web -> frontend

2019-04-28 19:27:36 +03:00

tsconfig.json

Add localization (#602 )

2020-03-04 14:56:00 -06:00

webpack.config.js

Add localization (#602 )

2020-03-04 14:56:00 -06:00

Readme.md

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 required 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