166 lines
7.2 KiB
Markdown
166 lines
7.2 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
|
||
|
||
#### [Content Management System](https://github.com/Accords-Library/strapi.accords-library.com)
|
||
|
||
- CMS: [Stapi](https://strapi.io/)
|
||
- 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](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
|
||
|
||
#### [Search Engine](https://github.com/Accords-Library/search.accords-library.com)
|
||
|
||
- Search Engine: [Meilisearch](https://www.meilisearch.com/)
|
||
|
||
#### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)
|
||
|
||
- Language: [TypeScript](https://www.typescriptlang.org/)
|
||
|
||
- Framework: [Next.js 13](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
|
||
|
||
- 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
|
||
|
||
- Styling: [Tailwind CSS](https://tailwindcss.com/)
|
||
|
||
- Support for [Material Symbols](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
|
||
|
||
- 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 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](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)
|
||
- Handle query params using [Zod](https://zod.dev/)
|
||
- A special "Terminal" mode. Can you find it?
|
||
|
||
## Design
|
||
|
||
Check out our [Design System Showcase](https://accords-library.com/dev/showcase/design-system)!
|
||
|
||
## 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
|
||
```
|