dfcf728e6f
by @akellbl4 * create infrastructure for site * wip * fix docker build and add readme * add docker-compose as a build and a run method * rename compose file yaml -> yml * add `src` as volume for watching changes * update configs * update README * add padding at the end of the pages * move demo settings in config * fetch latest release from github * update docs navigation - add sections - redirect from root of the section to first doc - nice styles for navigation - add brand colors * cache github data from first load * add redirects and fix link to docs * fix docs nav styles * add installation page placeholder * fix demo * add 404 * add dark theme, add theme switcher, remove unused files * fix dark theme on main page * fix dark theme background * fix node version * change installation docs * add note block * minor fixes * add code highlighting styles * fixes * fixes * mobile navigation, fix code highlighting colors * fix dev server * fix fetching error * fix path to edit Co-authored-by: Pavel Mineev <pavel@mineev.me> Co-authored-by: Dmitry Verkhoturov <paskal.07@gmail.com>
Frontend guide
Code Style
- project uses typescript to statically analyze code
- project uses
eslintandstylelintto check frontend code. You can manually run vianpm run lint. - git hooks (via husky) installed automatically on
npm installand check and try to fix code style if possible, otherwise commit will be rejected - if you want IDE integration, you need
eslintandstylelintplugin to be installed.
CSS Styles
- now we are migrating to css-modules and this is recomended way to stylization. A file with styles should be named like
component.module.css - old component styles use BEM notation (at least it should):
block__element_modifier. Also there aremixclasses:block_modifier. - new way to naming CSS selectors is camel-case like
blockElemenModifierand useclassnamesto combine it - component base style resides in the component's root directory with name of component converted to kebab-case. For example
ListCommentsstyle is located in./app/components/list-comments/list-component.tsx - any other files should be named also in kebab-case. For example
./app/utils/get-param.ts
Imports
- imports for typescript, javascript files should be without extension:
./index, not./index.ts - if file resides in the same directory or in subdirectory import should be relative:
./types/something - otherwise it should be imported by absolute path relative to
srcfolder likecommon/storewhich mapped to./app/common/store.tsin webpack, tsconfig and jest
Testing
- project uses
jestas test harness. - jest check files that match regex
\.(test|spec)\.ts(x?)$, i.ecomment.test.tsx,comment.spec.ts - 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
Please see this documentation.
Notes
- Frontend part being bundled on docker env gets placed on
/src/weband is available viahttp://{host}/web. for exampleembed.jsentry point will be available athttp://{host}/web/embed.js