188 lines
9.0 KiB
Markdown
188 lines
9.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)
|
||
|
||
|
||
## 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
|
||
|
||
|
||
|
||
_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
|
||
```
|