efcf01e8a0
|
||
|---|---|---|
| .github/workflows | ||
| public | ||
| src | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .hintrc | ||
| .prettierignore | ||
| LICENSE | ||
| README.md | ||
| design.config.js | ||
| graphql-codegen.config.js | ||
| next-env.d.ts | ||
| next-sitemap.config.js | ||
| next.config.js | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| run_accords_dev.sh | ||
| run_accords_prod.sh | ||
| tailwind.config.js | ||
| tsconfig.json | ||
README.md
Accords-library.com
Technologies
Back
- CMS: Stapi
- GraphQL endpoint
- Multilanguage support
- Markdown format for the rich text fields
- Use webhooks to notify the front-end and image processor of updates
Image Processor
- Convert the images from the CMS to 4 formats
- Small: 512x512, quality 60, .webp
- Medium: 1024x1024, quality 75, .webp
- Large: 2048x2048, quality 80, .webp
- Og: 512x512, quality 60, .jpg
Front (this repository)
- Language: TypeScript
- Framework: Next.js (React)
- Queries: GraphQL Code Generator
- Fetch the GraphQL schema from the GraphQL back-end endpoint
- Read the operations and fragments stored as graphql files in the
src/graphqlfolder - Automatically generates a typesafe ready to use SDK using graphql-request as the GraphQL client
- Markdown: markdown-to-jsx
- Support for Arbitrary React Components and Component Props!
- Autogenerated multi-level table of content and anchor links for the different headers
- Styling: Tailwind CSS
- Manually added support for scrollbar styling
- Support for Material Icons
- Support for creating any arbitrary theming mode by swapping CSS variables
- Support for many screen sizes and resolutions
- State Management: React Context
- Persistent app state using LocalStorage
- Accessibility
- Gestures using react-swipeable
- Keyboard hotkeys using react-hot-keys
- Support for light and dark mode with a manual switch and system's selected theme by default
- Fonts can be swaped to OpenDyslexic
- Multilingual
- By default, use the browser's language as the main language
- Fallback languages are used for content which are not available in the main language
- Main and fallback languages can be ordered manually by the user
- At the content level, the user can know which language is available
- Furthermore, the user can temporary select another language then the one that was automatically selected
- SSG + ISR (Static Site Generation + Incremental Static Regeneration):
- The website is built before running in production
- Performances are great, and possibility to deploy the app using a CDN
- On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted
- SEO
- Good defaults for the metadate and OpenGraph properties
- Each page can provide the thumbnail, title, description to be used
- Automatic generation of the sitemap using next-sitemap
- Data quality testing
- Data from the CMS is subject to a battery of tests (about 20 warning types and 40 error types) at build time
- Each warning/error comes with a front-end link to the incriminating element, as well as a link to the CMS to fix it
- Check for completeness, conformity, and integrity
Installation
git clone https://github.com/Accords-Library/accords-library.com.git
cd accords-library.com
npm install
Create a env file:
nano .env.local
Enter the followind information:
URL_GRAPHQL=https://url-to.strapi-accords-library.com/graphql
ACCESS_TOKEN=abcdef0123456789
REVALIDATION_TOKEN=abcdef0123456789
SMTP_HOST=email.provider.com
SMTP_USER=email@example.com
SMTP_PASSWORD=mypassword123
NEXT_PUBLIC_URL_CMS=https://url-to.strapi-accords-library.com
NEXT_PUBLIC_URL_IMG=https://url-to.img-accords-library.com
NEXT_PUBLIC_URL_WATCH=https://url-to.watch-accords-library.com
NEXT_PUBLIC_URL_SELF=https://url-to-front-accords-library.com
NEXT_PUBLIC_URL_SEARCH=https://url-to.search-accords-library.com
Run in dev mode:
./run_accords_dev.sh
OR build and run in production mode
./run_accords_build.sh
./run_accords_prod.sh