112 lines
5.0 KiB
Markdown
112 lines
5.0 KiB
Markdown
# Accords-library.com
|
|
|
|
[](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml)
|
|
[](https://github.com/Accords-Library/accords-library.com/blob/main/LICENSE)
|
|
|
|
|
|
## Technologies
|
|
|
|
#### [Back](https://github.com/Accords-Library/strapi.accords-library.com)
|
|
|
|
- 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](https://github.com/Accords-Library/img.accords-library.com)
|
|
|
|
- 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](https://github.com/Accords-Library/accords-library.com) (this repository)
|
|
|
|
- Language: [TypeScript](https://www.typescriptlang.org/)
|
|
- Framework: [Next.js](https://nextjs.org/) (React)
|
|
- Queries: [GraphQL Code Generator](https://www.graphql-code-generator.com/)
|
|
- Fetch the GraphQL schema from the GraphQL back-end endpoint
|
|
- Read the operations and fragments stored as graphql files in the `src/graphql` folder
|
|
- Automatically generates a typesafe ready to use SDK using [graphql-request](https://www.npmjs.com/package/graphql-request) as the GraphQL client
|
|
- Markdown: [markdown-to-jsx](https://www.npmjs.com/package/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](https://tailwindcss.com/)
|
|
- Manually added support for scrollbar styling to Tailwind CSS
|
|
- Support for [Material Icons](https://fonts.google.com/icons)
|
|
- Support for creating any arbitrary theming mode by swapping CSS variables
|
|
- Support for Container Queries (media queries at the element level)
|
|
- The website has a three-column layout, which turns into one-column + 2 toggleable side-menus if the screen is too narrow.
|
|
- State Management: [React Context](https://reactjs.org/docs/context.html)
|
|
- Persistent app state using LocalStorage
|
|
- Accessibility
|
|
- Gestures using [react-swipeable](https://www.npmjs.com/package/react-swipeable)
|
|
- Keyboard hotkeys using [react-hot-keys](https://www.npmjs.com/package/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](https://www.npmjs.com/package/@fontsource/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 metadata and OpenGraph properties
|
|
- Each page can provide the thumbnail, title, description to be used
|
|
- Automatic generation of the sitemap using [next-sitemap](https://www.npmjs.com/package/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
|
|
|
|
```bash
|
|
git clone https://github.com/Accords-Library/accords-library.com.git
|
|
cd accords-library.com
|
|
npm install
|
|
```
|
|
|
|
Create a env file:
|
|
|
|
```bash
|
|
nano .env.local
|
|
```
|
|
|
|
Enter the followind information:
|
|
|
|
```txt
|
|
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
|
|
NEXT_PUBLIC_UMAMI_URL=https://url-to.umami-accords-library.com
|
|
NEXT_PUBLIC_UMAMI_ID=abcdef0123456789
|
|
```
|
|
|
|
Run in dev mode:
|
|
|
|
```bash
|
|
./run_accords_dev.sh
|
|
```
|
|
|
|
OR build and run in production mode
|
|
|
|
```bash
|
|
npm run build
|
|
./run_accords_prod.sh
|
|
```
|