accords-library.com/README.md

Accords-library.com

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

Content Management System

• CMS: Stapi
  • GraphQL endpoint
  • Multilanguage support
  • Markdown format for the rich text fields
  • Use webhooks to notify the front-end, search engine, and image processor of updates

Image Processor

• 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

Search Engine

• Search Engine: Meilisearch

Front (this repository)

• Language: TypeScript

• Framework: Next.js 13 (React 18)

• Queries: GraphQL Code Generator

  • 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 as the GraphQL client

• Markdown

  • Use Marked to convert markdown to HTML (which is then sanitized using DOMPurify)
  • Support for arbitrary React Components and Component Props using markdown-to-jsx
  • Autogenerated multi-level table of content and anchor links for the different headers

• Styling: Tailwind CSS

  • Support for Material Symbols
  • 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

• State Management: Jōtai

  • Jōtai is a small-weighted library for atomic state management
  • Persistent app state using LocalStorage and SessionStorage

• Accessibility

  • Gestures using react-swipeable
  • Keyboard hotkeys using 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

• 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 to include variables, plural, dates...
  • Use a custom ICU Typescript transformation script to provide type safety when formatting ICU wordings
  • Fallback to English if the working isn't available in one language

• 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

• 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 with eslint-plugin-import, typescript-eslint
  • Prettier with prettier-plugin-tailwindcss
  • ts-unused-exports to find unused exported functions/constants...

• Other

  • Custom book reader based on Okuma-Reader
  • Custom lightbox using react-zoom-pan-pinch
  • Handle query params using Zod
  • A special "Terminal" mode. Can you find it?

Design

Check out our Design System Showcase!

Installation

git clone https://github.com/Accords-Library/accords-library.com.git
cd accords-library.com
npm install

Create a env file:

nano .env.local

Enter the followind 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_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:

./run_accords_dev.sh

OR build and run in production mode

npm run build
./run_accords_prod.sh