updated README
This commit is contained in:
DrMint
parent
d888588a07
commit
00da77d785
98
README.md
98
README.md
|
|
@ -11,48 +11,72 @@ Yoko Taro is a Japanese video game director and scenario writer. He is best-know
|
|||
|
||||
## Technologies
|
||||
|
||||
#### [Content Management System](https://github.com/Accords-Library/strapi.accords-library.com)
|
||||
### Overview
|
||||
|
||||
- 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)
|
||||
_Purple connections are actions done at build-time only. Grey connections can be at build-time or run-time._
|
||||
|
||||
- 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
|
||||
### [strapi.accords-library.com](https://github.com/Accords-Library/strapi.accords-library.com)
|
||||
|
||||
#### [Search Engine](https://github.com/Accords-Library/search.accords-library.com)
|
||||
Our Content Management System (CMS) that uses [Strapi](https://strapi.io/).
|
||||
|
||||
- Search Engine: [Meilisearch](https://www.meilisearch.com/)
|
||||
- Use the official [GraphQL plugin](https://market.strapi.io/plugins/@strapi-plugin-graphql)
|
||||
- Multilanguage support
|
||||
- Markdown format for the rich text fields
|
||||
- Use webhooks to notify the front-end, search engine, and image processor when new content/media has been created/modified/deleted
|
||||
|
||||
#### [Front](https://github.com/Accords-Library/accords-library.com) (this repository)
|
||||
### [img.accords-library.com](https://github.com/Accords-Library/img.accords-library.com)
|
||||
|
||||
A custom made image processor to overcome the lack of customization offered by Strapi build-in image processor. There is a python script to bulk process all images uploaded to Strapi. Subsequent changes to Strapi's media library can be handled using webhooks. The repo includes a server that listen to these webhook calls, and another to serve the images.
|
||||
|
||||
Each image in Strapi's media library is converted to four different formats:
|
||||
- Small: 512x512, quality 60, .webp
|
||||
- Medium: 1024x1024, quality 75, .webp
|
||||
- Large: 2048x2048, quality 80, .webp
|
||||
- Og: 512x512, quality 60, .jpg
|
||||
|
||||
### [search.accords-library.com](https://github.com/Accords-Library/search.accords-library.com)
|
||||
|
||||
A search engine that uses [Meilisearch](https://www.meilisearch.com/).
|
||||
The repo includes a docker-compose file to run an instance of Meilisearch. There is also a server that populates Meilisearch's documents at startup, then listen to webhooks sent by Strapi for subsequent changes.
|
||||
|
||||
### [gallery.accords-library.com](https://github.com/Accords-Library/gallery.accords-library.com)
|
||||
|
||||
An image board engine, uses [Szurubooru](https://github.com/rr-/szurubooru), a lighweight engine inspired by Danbooru (and Booru-type galleries in general). Unlike the other subdomains, this repo is completely separated from the rest of the stack.
|
||||
|
||||
### [watch.accords-library.com](https://github.com/Accords-Library/watch.accords-library.com)
|
||||
|
||||
A set of tools to archive videos on multiple platforms. The repo contains a CLI tool to archive YouTube videos. There is also a Python script which import the videos metadata to Strapi using GraphQL mutations. Finally, there's a server to serve the video files and thumbnail.
|
||||
|
||||
### [umami.accords-library.com](https://umami.is/)
|
||||
|
||||
An open-source self-hosted alternative to Google Analytics which doesn't require a cookie notice to be GDPR compliant.
|
||||
|
||||
### [accords-library.com](https://github.com/Accords-Library/accords-library.com) (this repository)
|
||||
|
||||
A detailled look at the technologies used in this repository:
|
||||
|
||||
- Language: [TypeScript](https://www.typescriptlang.org/)
|
||||
|
||||
- Framework: [Next.js 13](https://nextjs.org/) (React 18)
|
||||
|
||||
- SSG + ISR (Static Site Generation + Incremental Static Regeneration)
|
||||
|
||||
- The website is built before running in production
|
||||
- Performances are great, and it's possible 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 pages.
|
||||
|
||||
- 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 creating any arbitrary theme 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)
|
||||
|
|
@ -62,6 +86,12 @@ Yoko Taro is a Japanese video game director and scenario writer. He is best-know
|
|||
- Jōtai is a small-weighted library for atomic state management
|
||||
- Persistent app state using LocalStorage and SessionStorage
|
||||
|
||||
- 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
|
||||
|
||||
- Accessibility
|
||||
|
||||
- Gestures using [react-swipeable](https://www.npmjs.com/package/react-swipeable)
|
||||
|
|
@ -81,14 +111,7 @@ Yoko Taro is a Japanese video game director and scenario writer. He is best-know
|
|||
|
||||
- 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.
|
||||
- Fallback to English if a specific working isn't available in the user's language
|
||||
|
||||
- SEO
|
||||
|
||||
|
|
@ -111,13 +134,11 @@ Yoko Taro is a Japanese video game director and scenario writer. He is best-know
|
|||
|
||||
- Other
|
||||
- Custom book reader based on [Okuma-Reader](https://github.com/DrMint/Okuma-Reader)
|
||||
- Support for [Material Symbols](https://fonts.google.com/icons)
|
||||
- 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?
|
||||
- A secret "Terminal" mode. Can you find it?
|
||||
|
||||
## Design
|
||||
|
||||
Check out our [Design System Showcase](https://accords-library.com/dev/showcase/design-system)!
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -133,9 +154,9 @@ Create a env file:
|
|||
nano .env.local
|
||||
```
|
||||
|
||||
Enter the followind information:
|
||||
Enter the following information:
|
||||
|
||||
```txt
|
||||
```
|
||||
URL_GRAPHQL=https://url-to.strapi-accords-library.com/graphql
|
||||
ACCESS_TOKEN=abcdef0123456789
|
||||
REVALIDATION_TOKEN=abcdef0123456789
|
||||
|
|
@ -146,7 +167,8 @@ 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_URL_MEILISEARCH=https://url-to.search-accords-library.com
|
||||
NEXT_PUBLIC_MEILISEARCH_KEY=abcdef0123456789
|
||||
NEXT_PUBLIC_UMAMI_URL=https://url-to.umami-accords-library.com
|
||||
NEXT_PUBLIC_UMAMI_ID=abcdef0123456789
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?xml version="1.0"?>
|
||||
<minder version="1.14.0" parent-etag="565269084" etag="3671330291">
|
||||
<minder version="1.14.0" parent-etag="2844169042" etag="3777682473">
|
||||
<theme name="dark" label="Dark" index="-1"/>
|
||||
<styles>
|
||||
<style level="0" isset="true" branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="rounded" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="10" nodepadding="11" nodefont="Sans 11" nodemarkup="true" connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
|
|
@ -14,54 +14,54 @@
|
|||
<style level="9" isset="true" branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true" connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<style level="10" isset="true" branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true" connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
</styles>
|
||||
<drawarea x="-706.6563110351558" y="37.12041219075536" scale="1.5"/>
|
||||
<drawarea x="-736.36765543619742" y="32.05864461263036" scale="1.5"/>
|
||||
<images/>
|
||||
<nodes>
|
||||
<node id="0" posx="619.05682373046852" posy="496.07335408528627" width="181" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="0" posx="648.76816813151015" posy="501.13512166341127" width="181" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="638.05682373046852" posy="515.07335408528627" maxwidth="200">
|
||||
<nodename posx="667.76816813151015" posy="520.13512166341127" maxwidth="200">
|
||||
<text data="accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="1" posx="573.47979736328057" posy="193.53715006510404" width="228" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="1" posx="603.1911417643222" posy="198.59891764322904" width="228" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="592.47979736328057" posy="212.53715006510404" maxwidth="200">
|
||||
<nodename posx="622.1911417643222" posy="217.59891764322904" maxwidth="200">
|
||||
<text data="strapi.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="2" posx="479.06459554036411" posy="352.9875793457029" width="230" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="2" posx="508.77593994140574" posy="358.0493469238279" width="230" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="498.06459554036411" posy="371.9875793457029" maxwidth="200">
|
||||
<nodename posx="527.7759399414058" posy="377.0493469238279" maxwidth="200">
|
||||
<text data="watch.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="3" posx="930.07356770833326" posy="485.75804646809888" width="235" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="3" posx="959.78491210937489" posy="490.81981404622388" width="235" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="949.07356770833326" posy="504.75804646809888" maxwidth="200">
|
||||
<nodename posx="978.78491210937489" posy="509.81981404622388" maxwidth="200">
|
||||
<text data="search.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="4" posx="270.75532023111936" posy="469.50143432617188" width="213" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="4" posx="300.46666463216098" posy="474.56320190429688" width="213" height="56" side="left" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="289.75532023111936" posy="488.50143432617188" maxwidth="200">
|
||||
<nodename posx="319.46666463216098" posy="493.56320190429688" maxwidth="200">
|
||||
<text data="img.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="5" posx="723.3406372070308" posy="704.73269653320312" width="236" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="5" posx="753.05198160807242" posy="709.79446411132812" width="236" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="742.3406372070308" posy="723.73269653320312" maxwidth="200">
|
||||
<nodename posx="772.05198160807242" posy="728.79446411132812" maxwidth="200">
|
||||
<text data="umami.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
</node>
|
||||
<node id="6" posx="438.2949829101554" posy="704.79434204101562" width="234" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<node id="6" posx="468.00632731119703" posy="709.85610961914062" width="234" height="56" side="right" fold="false" treesize="56" layout="Horizontal" group="false">
|
||||
<style branchmargin="100" branchradius="25" linktype="straight" linkwidth="4" linkarrow="false" linkdash="solid" nodeborder="underlined" nodewidth="200" nodeborderwidth="4" nodefill="false" nodemargin="8" nodepadding="11" nodefont="Sans 11" nodemarkup="true"/>
|
||||
<nodename posx="457.2949829101554" posy="723.79434204101562" maxwidth="200">
|
||||
<nodename posx="487.00632731119703" posy="728.85610961914062" maxwidth="200">
|
||||
<text data="gallery.accords-library.com"/>
|
||||
</nodename>
|
||||
<nodenote></nodenote>
|
||||
|
|
@ -69,57 +69,62 @@
|
|||
</nodes>
|
||||
<groups/>
|
||||
<connections>
|
||||
<connection from_id="3" to_id="1" drag_x="1008.9155680338538" drag_y="291.56668090820301" color="#813d9c">
|
||||
<connection from_id="3" to_id="1" drag_x="1038.6269124348951" drag_y="296.62844848632801" color="#813d9c">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>GraphQL queries</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="1" to_id="3" drag_x="952.30708821614598" drag_y="342.49227905273426">
|
||||
<connection from_id="1" to_id="3" drag_x="982.0184326171875" drag_y="347.55404663085926">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Webhook</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="2" to_id="1" drag_x="610.53983561197947" drag_y="303.31814575195307" color="#813d9c">
|
||||
<connection from_id="2" to_id="1" drag_x="640.25118001302098" drag_y="308.37991333007801" color="#813d9c">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>GraphQL mutations</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="0" to_id="5" drag_x="771.31520589192746" drag_y="639.53558349609443">
|
||||
<connection from_id="0" to_id="5" drag_x="801.02655029296898" drag_y="644.59735107421943">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Sends events</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="4" to_id="0" drag_x="501.63850911458314" drag_y="577.36627197265648">
|
||||
<connection from_id="4" to_id="0" drag_x="531.34985351562477" drag_y="582.42803955078148">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="150"/>
|
||||
<title>Provides the images</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="3" to_id="0" drag_x="887.70037841796875" drag_y="580.34930419921943">
|
||||
<connection from_id="3" to_id="0" drag_x="917.41172281901027" drag_y="585.41107177734443">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="150"/>
|
||||
<title>Provides search results</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="0" to_id="1" drag_x="825.44006347656227" drag_y="376.72006225585938">
|
||||
<connection from_id="0" to_id="1" drag_x="872.998291015625" drag_y="408.14896647135413">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>GraphQL queries</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="0" to_id="6" drag_x="634.52079264322902" drag_y="640.60829671224042">
|
||||
<connection from_id="0" to_id="6" drag_x="664.23213704427053" drag_y="645.67006429036542">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Links to</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="4" to_id="1" drag_x="371.127197265625" drag_y="290.4098002115885" color="#813d9c">
|
||||
<connection from_id="4" to_id="1" drag_x="400.83854166666663" drag_y="295.4715677897135" color="#813d9c">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Python script</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="2" to_id="0" drag_x="616.25642903645803" drag_y="443.84891764322913">
|
||||
<connection from_id="2" to_id="0" drag_x="645.96777343749955" drag_y="448.91068522135413">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="150"/>
|
||||
<title>Provides the videos</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="1" to_id="4" drag_x="411.43526204427064" drag_y="337.32072957356752">
|
||||
<connection from_id="1" to_id="4" drag_x="441.14660644531227" drag_y="342.38249715169252">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Webhook</title>
|
||||
<note></note>
|
||||
</connection>
|
||||
<connection from_id="1" to_id="0" drag_x="790.7373046875" drag_y="369.4803466796875">
|
||||
<style connectiondash="dotted" connectionlwidth="2" connectionarrow="fromto" connectionpadding="3" connectionfont="Sans 9" connectiontwidth="100"/>
|
||||
<title>Webhook</title>
|
||||
<note></note>
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 MiB After Width: | Height: | Size: 2.1 MiB |
|
|
@ -2,6 +2,7 @@ import { OgImage, getImgSizesByQuality, ImageQuality, getAssetURL } from "./img"
|
|||
import { isDefinedAndNotEmpty } from "./asserts";
|
||||
import { getFormat } from "./i18n";
|
||||
import { UploadImageFragment } from "graphql/generated";
|
||||
import { useFormat } from "hooks/useFormat";
|
||||
|
||||
const DEFAULT_OG_THUMBNAIL = {
|
||||
image: `${process.env.NEXT_PUBLIC_URL_SELF}/default_og.jpg`,
|
||||
|
|
@ -20,7 +21,7 @@ export interface OpenGraph {
|
|||
}
|
||||
|
||||
export const getOpenGraph = (
|
||||
format: ReturnType<typeof getFormat>["format"],
|
||||
format: ReturnType<typeof getFormat>["format"] | ReturnType<typeof useFormat>["format"],
|
||||
title?: string | null | undefined,
|
||||
description?: string | null | undefined,
|
||||
thumbnail?: UploadImageFragment | null | undefined
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
import { GetStaticProps } from "next";
|
||||
import { PostPage } from "components/PostPage";
|
||||
import { getPostStaticProps, PostStaticProps } from "graphql/getPostStaticProps";
|
||||
import { PostStaticProps } from "graphql/getPostStaticProps";
|
||||
import { Terminal } from "components/Cli/Terminal";
|
||||
import { atoms } from "contexts/atoms";
|
||||
import { useAtomGetter } from "helpers/atoms";
|
||||
import { TITLE_PREFIX } from "helpers/openGraph";
|
||||
import { getOpenGraph } from "helpers/openGraph";
|
||||
import { useFormat } from "hooks/useFormat";
|
||||
import { getFormat } from "helpers/i18n";
|
||||
import { getReadySdk } from "graphql/sdk";
|
||||
import { PostWithTranslations } from "types/types";
|
||||
|
||||
/*
|
||||
* ╭────────╮
|
||||
|
|
@ -11,6 +16,7 @@ import { TITLE_PREFIX } from "helpers/openGraph";
|
|||
*/
|
||||
|
||||
const Home = (props: PostStaticProps): JSX.Element => {
|
||||
const { format } = useFormat();
|
||||
const isTerminalMode = useAtomGetter(atoms.layout.terminalMode);
|
||||
|
||||
if (isTerminalMode) {
|
||||
|
|
@ -45,7 +51,6 @@ const Home = (props: PostStaticProps): JSX.Element => {
|
|||
</div>
|
||||
}
|
||||
displayTitle={false}
|
||||
openGraph={{ ...props.openGraph, title: TITLE_PREFIX }}
|
||||
displayLanguageSwitcher
|
||||
/>
|
||||
);
|
||||
|
|
@ -58,4 +63,21 @@ export default Home;
|
|||
* ───────────────────────────────────╯ NEXT DATA FETCHING ╰──────────────────────────────────────
|
||||
*/
|
||||
|
||||
export const getStaticProps = getPostStaticProps("home");
|
||||
export const getStaticProps: GetStaticProps = async (context) => {
|
||||
const sdk = getReadySdk();
|
||||
const { format } = getFormat(context.locale);
|
||||
const post = await sdk.getPost({
|
||||
slug: "home",
|
||||
language_code: context.locale ?? "en",
|
||||
});
|
||||
if (post.posts?.data && post.posts.data.length > 0) {
|
||||
const props: PostStaticProps = {
|
||||
post: post.posts.data[0]?.attributes as PostWithTranslations,
|
||||
openGraph: getOpenGraph(format),
|
||||
};
|
||||
return {
|
||||
props: props,
|
||||
};
|
||||
}
|
||||
return { notFound: true };
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue