Accords-Library-Archive
/
accords-library.com
1
0
Fork 0
Code Issues Pull Requests 5 Packages Projects Releases Wiki Activity
accords-library.com/README.md

5.0 KiB
Raw Blame History

Accords-library.com

Node.js CI GitHub Libraries.io dependency status for GitHub repo

Technologies

Back

  • CMS: Stapi
    • GraphQL endpoint
    • Multilanguage support
    • Markdown format for the rich text fields
    • Use webhooks to notify the front-end 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

Front (this repository)

  • Language: TypeScript
  • Framework: Next.js (React)
  • 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: markdown-to-jsx
    • Support for Arbitrary React Components and Component Props!
    • Autogenerated multi-level table of content and anchor links for the different headers
  • Styling: Tailwind CSS
    • Manually added support for scrollbar styling to Tailwind CSS
    • Support for Material 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.
  • State Management: React Context
    • Persistent app state using LocalStorage
  • Accessibility
  • 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
  • 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 using a CDN
    • On-Demand ISR to continuously update the website when new content is added or existing content is modified/deleted
  • SEO
    • Good defaults for the metadata and OpenGraph properties
    • Each page can provide the 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

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