2614ca1ac9
|
||
|---|---|---|
| .github/workflows | ||
| public | ||
| src | ||
| testing_logs | ||
| .eslintignore | ||
| .eslintrc.js | ||
| .gitignore | ||
| .hintrc | ||
| .prettierignore | ||
| LICENSE | ||
| README.md | ||
| next-env.d.ts | ||
| next-sitemap.js | ||
| next.config.js | ||
| package-lock.json | ||
| package.json | ||
| postcss.config.js | ||
| run_accords_build.sh | ||
| run_accords_dev.sh | ||
| run_accords_prettier.sh | ||
| run_accords_prod.sh | ||
| run_accords_testing.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
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
- Queries: GraphQL
- GraphQL Code Generator to automatically generated types for the operations variables and responses
- The operations are stored in a graphql file and then retrieved and wrap as an actual TypeScript function
- Markdown: markdown-to-jsx
- Support for Arbitrary React Components and Component Props!
- Styling: Tailwind CSS
- Good typographic defaults using Tailwind/Typography
- Beside the theme declaration no CSS outside of Tailwind CSS
- Manually added support for scrollbar styling
- Support for Material Icons
- Support for light and dark mode with a manual switch and system's selected theme by default
- Support for creating any arbitrary theming mode by swapping CSS variables
- Framework: Next.js (React)
- Multilanguage support
- State Management: React Context
- Persistent app state using LocalStorage
- Support for many screen sizes and resolutions
- SSG (Static Site Generation):
- The website is built before running in production
- Performances are great, and possibility to deploy the app using a CDN
- OpenGraph and Metadata
- Good defaults for the metadate and OpenGraph properties
- Each page can provide the thumbnail, title, description to be used
- 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=genatedcode-by-strapi-api
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_SELF=https://url-to-front-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