87 lines
3.1 KiB
Markdown
87 lines
3.1 KiB
Markdown
# Accords-library.com
|
|
|
|
## Technologies
|
|
|
|
#### [Back](https://github.com/Accords-Library/strapi.accords-library.com)
|
|
|
|
- CMS: Stapi
|
|
- GraphQL endpoint
|
|
- Multilanguage support
|
|
- Markdown format for the rich text fields
|
|
|
|
#### [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
|
|
|
|
#### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)
|
|
|
|
- Language: [TypeScript](https://www.typescriptlang.org/)
|
|
- Queries: [GraphQL](https://graphql.org/)
|
|
- [GraphQL Code Generator](https://www.graphql-code-generator.com/) to automatically generated types for the operations variables and responses
|
|
- The operations are stored in a graphql file and then retrieved and wrap as an actual TypeScript function
|
|
- Markdown: [markdown-to-jsx](https://www.npmjs.com/package/markdown-to-jsx)
|
|
- Support for Arbitrary React Components and Component Props!
|
|
- Styling: [Tailwind CSS](https://tailwindcss.com/)
|
|
- Good typographic defaults using [Tailwind/Typography](https://tailwindcss.com/docs/typography-plugin)
|
|
- Beside the theme declaration no CSS outside of Tailwind CSS
|
|
- Manually added support for scrollbar styling
|
|
- Support for [Material Icons](https://fonts.google.com/icons)
|
|
- Support for light and dark mode with a manual switch and system's selected theme by default
|
|
- Support for creating any arbitrary theming mode by swapping CSS variables
|
|
- Framework: [Next.js](https://nextjs.org/) (React)
|
|
- Multilanguage support
|
|
- State Management: [React Context](https://reactjs.org/docs/context.html)
|
|
- Persistent app state using LocalStorage
|
|
- Support for many screen sizes and resolutions
|
|
- SSG (Static Site Generation):
|
|
- The website is built before running in production
|
|
- Performances are great, and possibility to deploy the app using a CDN
|
|
- OpenGraph and Metadata
|
|
- Good defaults for the metadate and OpenGraph properties
|
|
- Each page can provide the thumbnail, title, description to be used
|
|
- 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
|
|
|
|
```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=genatedcode-by-strapi-api
|
|
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_SELF=https://url-to-front-accords-library.com
|
|
```
|
|
|
|
Run in dev mode:
|
|
|
|
```bash
|
|
./run_accords_dev.sh
|
|
```
|
|
|
|
OR build and run in production mode
|
|
|
|
```bash
|
|
./run_accords_build.sh
|
|
./run_accords_prod.sh
|
|
```
|