Precommit, updated README

2022-10-29 21:26:11 +02:00 · 2022-10-29 21:26:11 +02:00 · 42821a7490
commit 42821a7490
parent fe24a77d6e
9 changed files with 31 additions and 23 deletions
--- a/README.md
+++ b/README.md
@ -25,20 +25,20 @@
 #### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)

 - Language: [TypeScript](https://www.typescriptlang.org/)
- Framework: [Next.js](https://nextjs.org/) (React)
+- Framework: [Next.js 12](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!
+  - Support for arbitrary React Components and Component Props!
  - Autogenerated multi-level table of content and anchor links for the different headers
 - Styling: [Tailwind CSS](https://tailwindcss.com/)
  - Support for [Material Icons](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.
-  - Show out the Design System Showcase [here](https://accords-library.com/dev/showcase/design-system)
+  - Check out our [Design System Showcase](https://accords-library.com/dev/showcase/design-system)
 - State Management: [React Context](https://reactjs.org/docs/context.html)
  - Persistent app state using LocalStorage and SessionStorage
 - Accessibility
@ -52,18 +52,28 @@
  - 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
- SSG + ISR (Static Site Generation + Incremental Static Regeneration):
+- 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 the thumbnail, title, description to be used
+  - 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)

 ## Installation

--- a/src/components/AppLayout.tsx
+++ b/src/components/AppLayout.tsx
@ -149,7 +149,7 @@ export const AppLayout = ({
      <div
        id={Ids.ContentPanel}
        className={cJoin(
-          "texture-paper-dots bg-light [grid-area:content]",
+          "bg-light texture-paper-dots [grid-area:content]",
          cIf(contentPanelScroolbar, "overflow-y-scroll")
        )}>
        {isDefined(contentPanel) ? (
@ -167,8 +167,8 @@ export const AppLayout = ({
        <div
          id={Ids.SubPanel}
          className={cJoin(
-            `texture-paper-dots z-20 overflow-y-scroll border-r border-dark/50
-              bg-light transition-transform duration-300 scrollbar-none`,
+            `z-20 overflow-y-scroll border-r border-dark/50 bg-light
+              transition-transform duration-300 scrollbar-none texture-paper-dots`,
            cIf(
              is1ColumnLayout,
              "justify-self-end border-r-0 [grid-area:content]",
@ -185,8 +185,8 @@ export const AppLayout = ({
      {/* Main panel */}
      <div
        className={cJoin(
-          `texture-paper-dots z-30 overflow-y-scroll border-r border-dark/50
-            bg-light transition-transform duration-300 scrollbar-none`,
+          `z-30 overflow-y-scroll border-r border-dark/50 bg-light
+            transition-transform duration-300 scrollbar-none texture-paper-dots`,
          cIf(is1ColumnLayout, "justify-self-start [grid-area:content]", "[grid-area:main]"),
          cIf(is1ColumnLayout && isScreenAtLeastXs, "w-[min(30rem,90%)]"),
          cIf(!mainPanelOpen && is1ColumnLayout, "-translate-x-full")
@ -197,8 +197,8 @@ export const AppLayout = ({
      {/* Navbar */}
      <div
        className={cJoin(
-          `texture-paper-dots z-10 grid grid-cols-[5rem_1fr_5rem] place-items-center
-            border-t border-dotted border-black bg-light [grid-area:navbar]`,
+          `z-10 grid grid-cols-[5rem_1fr_5rem] place-items-center border-t
+            border-dotted border-black bg-light texture-paper-dots [grid-area:navbar]`,
          cIf(!is1ColumnLayout, "hidden")
        )}>
        <Ico
--- a/src/components/Inputs/OrderableList.tsx
+++ b/src/components/Inputs/OrderableList.tsx
@ -58,7 +58,7 @@ export const OrderableList = ({ onChange, items, insertLabels }: Props): JSX.Ele
            }}
            className="grid cursor-grab select-none grid-cols-[auto_1fr] place-content-center gap-2
            rounded-full border border-dark bg-light px-1 py-2 pr-4 text-dark transition-all
-            hover:shadow-shade hover:bg-dark hover:text-light hover:shadow-lg"
+            hover:bg-dark hover:text-light hover:shadow-lg hover:shadow-shade"
            draggable>
            <div className="grid grid-rows-[.8em_.8em] place-items-center">
              {index > 0 && (
--- a/src/components/Inputs/Switch.tsx
+++ b/src/components/Inputs/Switch.tsx
@ -22,7 +22,7 @@ export const Switch = ({ value, onClick, className, disabled = false }: Props):
      className={cJoin(
        `relative grid h-6 w-12 content-center rounded-full border-mid outline
        outline-1 -outline-offset-1 outline-mid transition-colors`,
-        cIf(value, "border-none bg-mid shadow-inner-sm shadow-shade outline-transparent"),
+        cIf(value, "border-none bg-mid shadow-inner-sm outline-transparent shadow-shade"),
        cIf(disabled, "cursor-not-allowed opacity-50 grayscale", "cursor-pointer"),
        cIf(disabled, cIf(value, "bg-dark/40 outline-transparent", "outline-dark/60")),
        className
@ -36,7 +36,7 @@ export const Switch = ({ value, onClick, className, disabled = false }: Props):
      onPointerUp={() => setIsFocused(false)}>
      <div
        className={cJoin(
-          "ml-1 h-4 w-4 rounded-full bg-dark transition-transform touch-none pointer-events-none",
+          "pointer-events-none ml-1 h-4 w-4 touch-none rounded-full bg-dark transition-transform",
          cIf(value, "translate-x-6"),
          cIf(isFocused, cIf(value, "translate-x-5", "translate-x-1"))
        )}
--- a/src/components/LightBox.tsx
+++ b/src/components/LightBox.tsx
@ -85,8 +85,8 @@ export const LightBox = ({
                }}>
                {isDefined(src) && (
                  <Img
-                    className={`shadow-shade drop-shadow-2xl h-[calc(100vh-4rem)] w-full
-                    object-contain`}
+                    className={`h-[calc(100vh-4rem)] w-full object-contain drop-shadow-2xl
+                    shadow-shade`}
                    src={src}
                    quality={ImageQuality.Large}
                  />
--- a/src/components/SmartList.tsx
+++ b/src/components/SmartList.tsx
@ -1,4 +1,5 @@
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import naturalCompare from "string-natural-compare";
 import { Chip } from "./Chip";
 import { PageSelector } from "./Inputs/PageSelector";
@ -9,7 +10,6 @@ import { useScrollTopOnChange } from "hooks/useScrollTopOnChange";
 import { Ids } from "types/ids";
 import { useLocalData } from "contexts/LocalDataContext";
 import { useContainerQueries } from "contexts/ContainerQueriesContext";
-import { useHotkeys } from "react-hotkeys-hook";

 interface Group<T> {
  name: string;
--- a/src/components/ThumbnailHeader.tsx
+++ b/src/components/ThumbnailHeader.tsx
@ -48,7 +48,7 @@ export const ThumbnailHeader = ({
  return (
    <>
      <div className="mb-12 grid place-items-center gap-12">
-        <div className="shadow-shade drop-shadow-lg">
+        <div className="drop-shadow-lg shadow-shade">
          {thumbnail ? (
            <Img
              className="cursor-pointer rounded-xl"
--- a/src/styles/rc-slider.css
+++ b/src/styles/rc-slider.css
@ -177,11 +177,9 @@
  left: -9999px;
  visibility: visible;
  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip * {
  box-sizing: border-box;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 .rc-slider-tooltip-hidden {
  display: none;
--- a/src/styles/tippy.css
+++ b/src/styles/tippy.css
@ -5,8 +5,8 @@
  max-width: calc(100vw - 10px);
 }
 .tippy-box {
-  @apply relative rounded-lg bg-light transition-[transform,visibility,opacity]
-  shadow-shade shadow-xl;
+  @apply relative rounded-lg bg-light shadow-xl
+  transition-[transform,visibility,opacity] shadow-shade;
 }
 .tippy-box[data-placement^="top"] > .tippy-arrow {
  @apply bottom-0;