# 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 12](https://nextjs.org/) (React 18)
- 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/)
  - 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.
  - Check out our [Design System Showcase](https://accords-library.com/dev/showcase/design-system)
- State Management: [Jōtai](https://jotai.org/)
  - Jōtai is a small-weighted library for atomic state management
  - Persistent app state using LocalStorage and SessionStorage
- Accessibility
  - Gestures using [react-swipeable](https://www.npmjs.com/package/react-swipeable)
  - Keyboard hotkeys using [react-hotkeys-hook](https://www.npmjs.com/package/react-hotkeys-hook)
  - 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 on a CDN
  - On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted
  - UI localizations are downloaded separetely into the `public/local-data` to avoid fetching the same static props for every page.
- SEO
  - Good defaults for the metadata and OpenGraph properties
  - Each page can provide a custom 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
- Code quality and style

  - React Strict Mode
  - [Eslint](https://www.npmjs.com/package/eslint) with [eslint-plugin-import](https://www.npmjs.com/package/eslint-plugin-import), [typescript-eslint](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin)
  - [Prettier](https://www.npmjs.com/package/prettier) with [prettier-plugin-tailwindcss](https://www.npmjs.com/package/prettier-plugin-tailwindcss)
  - [ts-unused-exports](https://www.npmjs.com/package/ts-unused-exports) to find unused exported functions/constants...

- Other
  - Custom book reader based on [Okuma-Reader](https://github.com/DrMint/Okuma-Reader)
  - Custom lightbox using [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch)

## 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
```