From be1ea95b71d102b5ba3b10357f4529961334e0f1 Mon Sep 17 00:00:00 2001 From: DrMint <29893320+DrMint@users.noreply.github.com> Date: Mon, 30 Jan 2023 18:29:47 +0100 Subject: [PATCH 1/3] Wordings can now use ICU format --- .eslintignore | 1 + README.md | 57 +++- docs/project-mind-map.minder | 129 ++++++++ docs/project-mind-map.png | Bin 0 -> 2150212 bytes package-lock.json | 186 ++++++++++- package.json | 9 +- public/local-data/websiteInterfaces.json | 312 +++++++----------- src/components/AnchorShare.tsx | 9 +- src/components/AppLayout.tsx | 5 +- src/components/Containers/Paginator.tsx | 5 +- src/components/Library/PreviewCardCTAs.tsx | 13 +- src/components/Markdown/Markdawn.tsx | 5 +- .../PanelComponents/ReturnButton.tsx | 5 +- src/components/Panels/MainPanel.tsx | 41 +-- src/components/Panels/SearchPopup.tsx | 67 ++-- src/components/Panels/SettingsPopup.tsx | 27 +- src/components/PostPage.tsx | 11 +- src/components/RecorderChip.tsx | 9 +- src/components/SmartList.tsx | 15 +- src/components/ThumbnailHeader.tsx | 7 +- src/components/Wiki/DefinitionCard.tsx | 12 +- src/contexts/localData.ts | 8 + src/graphql/getPostStaticProps.ts | 2 +- src/graphql/icuParams.ts | 181 ++++++++++ src/graphql/icuToTypescript.ts | 53 +++ .../localDataGetWebsiteInterfaces.graphql | 26 +- src/helpers/formatters.ts | 21 +- src/helpers/others.ts | 26 +- src/hooks/useFormat.ts | 90 +++++ src/pages/404.tsx | 7 +- src/pages/500.tsx | 7 +- src/pages/about-us/accords-handbook.tsx | 7 +- src/pages/about-us/contact.tsx | 21 +- src/pages/about-us/index.tsx | 17 +- src/pages/about-us/legality.tsx | 7 +- src/pages/about-us/sharing-policy.tsx | 7 +- src/pages/archives/index.tsx | 11 +- src/pages/archives/videos/c/[uid].tsx | 44 ++- src/pages/archives/videos/index.tsx | 44 ++- src/pages/archives/videos/v/[uid].tsx | 21 +- src/pages/chronicles/[slug]/index.tsx | 15 +- src/pages/chronicles/index.tsx | 9 +- src/pages/contents/[slug].tsx | 33 +- src/pages/contents/all.tsx | 29 +- src/pages/contents/folder/[slug].tsx | 17 +- src/pages/library/[slug]/index.tsx | 119 ++++--- src/pages/library/[slug]/reader.tsx | 51 ++- src/pages/library/index.tsx | 43 ++- src/pages/merch/index.tsx | 11 +- src/pages/news/[slug].tsx | 5 +- src/pages/news/index.tsx | 15 +- src/pages/wiki/[slug]/index.tsx | 21 +- src/pages/wiki/chronology.tsx | 18 +- src/pages/wiki/index.tsx | 19 +- 54 files changed, 1254 insertions(+), 676 deletions(-) create mode 100644 docs/project-mind-map.minder create mode 100644 docs/project-mind-map.png create mode 100644 src/graphql/icuParams.ts create mode 100644 src/graphql/icuToTypescript.ts create mode 100644 src/hooks/useFormat.ts diff --git a/.eslintignore b/.eslintignore index 54a9d41..4dd37a6 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,4 +1,5 @@ src/graphql/generated.ts +src/graphql/icuParams.ts src/shared .eslintrc.js graphql-codegen.config.js diff --git a/README.md b/README.md index 88bb83b..07bb428 100644 --- a/README.md +++ b/README.md @@ -1,18 +1,25 @@ # 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 -#### [Back](https://github.com/Accords-Library/strapi.accords-library.com) +#### [Content Management System](https://github.com/Accords-Library/strapi.accords-library.com) -- CMS: Stapi +- CMS: [Stapi](https://strapi.io/) - GraphQL endpoint - Multilanguage support - Markdown format for the rich text fields - - Use webhooks to notify the front-end and image processor of updates + - 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) @@ -22,51 +29,81 @@ - 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: [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx) - - Support for arbitrary React Components and Component Props! + +- 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 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 + +- 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) @@ -76,6 +113,12 @@ - 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 diff --git a/docs/project-mind-map.minder b/docs/project-mind-map.minder new file mode 100644 index 0000000..47ae629 --- /dev/null +++ b/docs/project-mind-map.minder @@ -0,0 +1,129 @@ + + + + +