accords-library.com/README.md

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

## Introduction

Accord’s Library is a fan-site that aims at gathering and archiving all of Yoko Taro’s work.
Yoko Taro is a Japanese video game director and scenario writer. He is best-known for his work on the NieR and Drakengard (Drag-on Dragoon) franchises.

## Technologies

### Overview

![](docs/project-mind-map.png)

_Purple connections are actions done at build-time only. Grey connections can be at build-time or run-time._

### [strapi.accords-library.com](https://github.com/Accords-Library/strapi.accords-library.com)

Our Content Management System (CMS) that uses [Strapi](https://strapi.io/).

- Use the official [GraphQL plugin](https://market.strapi.io/plugins/@strapi-plugin-graphql)
- Multilanguage support
- Markdown format for the rich text fields
- Use webhooks to notify the front-end, search engine, and image processor when new content/media has been created/modified/deleted

### [img.accords-library.com](https://github.com/Accords-Library/img.accords-library.com)

A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images.

Each image in Strapi's media library is converted to four different formats:

- Small: 512x512, quality 60, .webp
- Medium: 1024x1024, quality 75, .webp
- Large: 2048x2048, quality 80, .webp
- Og: 512x512, quality 60, .jpg

### [search.accords-library.com](https://github.com/Accords-Library/search.accords-library.com)

A search engine that uses [Meilisearch](https://www.meilisearch.com/).
The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes.

### [gallery.accords-library.com](https://github.com/Accords-Library/gallery.accords-library.com)

An image board engine, uses [Szurubooru](https://github.com/rr-/szurubooru), a lighweight engine inspired by Danbooru (and Booru-type galleries in general). Unlike the other subdomains, this repo is completely separated from the rest of the stack.

### [watch.accords-library.com](https://github.com/Accords-Library/watch.accords-library.com)

A set of tools to archive videos on multiple platforms. The repo contains a CLI tool to archive YouTube videos. There is also a Python script which import the videos metadata to Strapi using GraphQL mutations. Finally, there's a server to serve the video files and thumbnail.

### [umami.accords-library.com](https://umami.is/)

An open-source self-hosted alternative to Google Analytics which doesn't require a cookie notice to be GDPR compliant.

### [accords-library.com](https://github.com/Accords-Library/accords-library.com) (this repository)

A detailled look at the technologies used in this repository:

- Language: [TypeScript](https://www.typescriptlang.org/)

- Framework: [Next.js 13](https://nextjs.org/) (React 18)

- SSG + ISR (Static Site Generation + Incremental Static Regeneration)

  - The website is built before running in production
  - Performances are great, and it's possible 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 pages.

- 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

- Styling: [Tailwind CSS](https://tailwindcss.com/)

  - Support for creating any arbitrary theme 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

- Markdown

  - Use [Marked](https://www.npmjs.com/package/marked) to convert markdown to HTML (which is then sanitized using [DOMPurify](https://www.npmjs.com/package/isomorphic-dompurify))
  - Support for arbitrary React Components and Component Props using [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)
  - Autogenerated multi-level table of content and anchor links for the different headers

- 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

- UI Localizations

  - The translated wordings use [ICU Message Format](https://unicode-org.github.io/icu/userguide/format_parse/messages/) to include variables, plural, dates...
  - Use a custom ICU Typescript transformation script to provide type safety when formatting ICU wordings
  - Fallback to English if a specific working isn't available in the user's language

- 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)
  - Support for [Material Symbols](https://fonts.google.com/icons)
  - Custom lightbox using [react-zoom-pan-pinch](https://www.npmjs.com/package/react-zoom-pan-pinch)
  - Handle query params using [Zod](https://zod.dev/)
  - A secret "Terminal" mode. Can you find it?

## 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 following 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_MEILISEARCH=https://url-to.search-accords-library.com
NEXT_PUBLIC_MEILISEARCH_KEY=abcdef0123456789
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
```