Trivia Expert

Basic commands

Command	Description
`start`	Runs the development environment (`start-webpack` + `watch-sass` + `watch-convert-assets`)
`style-fix`	Fixes all fixable javascript syntax errors (May show not auto-solvable errors that need to be fixed)
`css-style-fix`	Fixes all fixable css syntax errors (May show not auto-solvable errors that need to be fixed)
`style-fix-backend`	style-fix but for backend code
`build`	Generates the production build inside public with the necesary assets (`build-webpack` + `convert-assets`
`run-build`	Builds and start a local server to see the build in http://localhost:8080
`kill`	Kills any running node project

Other commands

Command	Description
`start-webpack`	Starts webpack development server
`watch-scss`	Watches for changes in scss files and generates *.d.scss
`build-webpack`	Generates a production build inside public
`convert-assets`	Generates the corresponding webp files from /assets/images in public/images
`watch-convert-assets`	Watches for changes in the images from /assets/images and generates the webp file in public/images
`style-check`	Shows all javascript syntax error without fixing them
`css-style-check`	Shows all css syntax error without fixing them
`style-check-backend`	style-check but for backend code
`postinstall`	Copies the precommit script into the git directory

GIT

Commits wont be valid if either style-check or css-style-check fail, to solve this work with style-fix and css-style-fix to fix all syntax errors in the conde, these command automatically fix some errors and give you hints on how to fix the rest of the errors. Some warnings (‼) can be ignored in the case of style-check

Paths

`/assets`

Store SVGs inside /assets/icons
Store png and jpg inside /assets/images
Images stored as jpg, jpeg or png are automatically transformed to webp.
To reference an image from anywhere use the path /images/imagename.webp <-- Remember the webp extension
Example: <img src="/images/test.webp"/> or background-image: url('/images/FONDO-1080.webp')

`/public`

Public files are stored here, these files will be accessible to anyone from the path /

`/config`

Config files and custom scripts

`/src/components`

Components code including typescript, css and type definitions
To use new components please define them in /src/components/index.ts
Component structure:

Folder structure

/src/components

componentName (camelCase)

ComponentName.tsx (PascalCase)
ComponentName.scss
ComponentName.types.ts - (Optional) Type definitions for the component

`/src/components/app`

This is the main component that is mounted to the site, this is rendered inside /public/index.html in the body tag.
This is the components responsible for rendering all the pages, if you add a new page you should import it here just like the rest.

`/src/pages`

Same structure as components but for pages.

TODO

Image lazy loading and auto blurhash

ilarramendi / PreactBase