# Accords-library.com

[![Node.js CI](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Accords-Library/accords-library.com/actions/workflows/node.js.yml)
[![GitHub](https://img.shields.io/github/license/Accords-Library/accords-library.com?style=flat-square)](https://github.com/Accords-Library/accords-library.com/blob/main/LICENSE)
![Libraries.io dependency status for GitHub repo](https://img.shields.io/librariesio/github/Accords-Library/accords-library.com?style=flat-square)

## 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
  - Support for [Material Icons](https://fonts.google.com/icons)
  - Support for creating any arbitrary theming mode by swapping CSS variables
  - Support for many screen sizes and resolutions
- 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 metadate 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
./run_accords_build.sh
./run_accords_prod.sh
```