From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:21:43 +0100 Subject: [PATCH 01/14] Create node.js.yml --- .github/workflows/node.js.yml | 30 ++++++++++++++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 .github/workflows/node.js.yml diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml new file mode 100644 index 0000000..57e68ee --- /dev/null +++ b/.github/workflows/node.js.yml @@ -0,0 +1,30 @@ +# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node +# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions + +name: Node.js CI + +on: + push: + branches: [ main ] + pull_request: + branches: [ main ] + +jobs: + build: + + runs-on: ubuntu-latest + + strategy: + matrix: + node-version: [12.x, 14.x, 16.x] + # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ + + steps: + - uses: actions/checkout@v2 + - name: Use Node.js ${{ matrix.node-version }} + uses: actions/setup-node@v2 + with: + node-version: ${{ matrix.node-version }} + cache: 'npm' + - run: npm ci + - run: npm run build --if-present -- 2.40.1 From e4def9268a8be59cbc497a395066927b61bf1269 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:37:16 +0100 Subject: [PATCH 02/14] Update node.js.yml --- .github/workflows/node.js.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 57e68ee..40abb72 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -16,7 +16,7 @@ jobs: strategy: matrix: - node-version: [12.x, 14.x, 16.x] + node-version: [16.x] # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ steps: @@ -26,5 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + env: + ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} + NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} + NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} + NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} + URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: npm ci - run: npm run build --if-present -- 2.40.1 From d502655dff2d1af0cee95c33d722df20b8ee24ae Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:01:49 +0100 Subject: [PATCH 03/14] Update node.js.yml --- .github/workflows/node.js.yml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 40abb72..4260864 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,11 +26,19 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' + - name: Create .env.local file env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} + run: | + touch .env.local + echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local + echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local + echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local + echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local + echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - run: npm ci - run: npm run build --if-present -- 2.40.1 From 29faaf8051581b165dd1c85ef20f5dbd031d7cf8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:04:36 +0100 Subject: [PATCH 04/14] Update node.js.yml --- .github/workflows/node.js.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 4260864..cfe1ff6 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -40,5 +40,6 @@ jobs: echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local + cat .env.local - run: npm ci - run: npm run build --if-present -- 2.40.1 From 9ecabfc2f3c93dfbf72e797bb46c04e687d4d6fe Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:08:16 +0100 Subject: [PATCH 05/14] Update node.js.yml --- .github/workflows/node.js.yml | 13 ++----------- 1 file changed, 2 insertions(+), 11 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index cfe1ff6..2e4dbe1 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -26,20 +26,11 @@ jobs: with: node-version: ${{ matrix.node-version }} cache: 'npm' - - name: Create .env.local file + - run: npm ci + - run: npm run build --if-present env: ACCESS_TOKEN: ${{ secrets.ACCESS_TOKEN }} NEXT_PUBLIC_URL_CMS: ${{ secrets.NEXT_PUBLIC_URL_CMS }} NEXT_PUBLIC_URL_IMG: ${{ secrets.NEXT_PUBLIC_URL_IMG }} NEXT_PUBLIC_URL_SELF: ${{ secrets.NEXT_PUBLIC_URL_SELF }} URL_GRAPHQL: ${{ secrets.URL_GRAPHQL }} - run: | - touch .env.local - echo ACCESS_TOKEN=${{ secrets.ACCESS_TOKEN }} >> .env.local - echo NEXT_PUBLIC_URL_CMS=${{ secrets.NEXT_PUBLIC_URL_CMS }} >> .env.local - echo NEXT_PUBLIC_URL_IMG=${{ secrets.NEXT_PUBLIC_URL_IMG }} >> .env.local - echo NEXT_PUBLIC_URL_SELF=${{ secrets.NEXT_PUBLIC_URL_SELF }} >> .env.local - echo URL_GRAPHQL=${{ secrets.URL_GRAPHQL }} >> .env.local - cat .env.local - - run: npm ci - - run: npm run build --if-present -- 2.40.1 From b95278ddbee48197fabf5fde0c85a584b1310646 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 02:23:52 +0100 Subject: [PATCH 06/14] Update README.md --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 6b245ca..c3bec14 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,7 @@ # 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) + ## Technologies #### [Back](https://github.com/Accords-Library/strapi.accords-library.com) -- 2.40.1 From 46dab30ebede78bb105a0506d57202a5cf53d8bd Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 04:49:51 +0100 Subject: [PATCH 07/14] Update node.js.yml --- .github/workflows/node.js.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index 2e4dbe1..a7f6d4e 100644 --- a/.github/workflows/node.js.yml +++ b/.github/workflows/node.js.yml @@ -4,8 +4,8 @@ name: Node.js CI on: - push: - branches: [ main ] +# push: +# branches: [ main ] pull_request: branches: [ main ] -- 2.40.1 From 250adfc746b03f287c8cfca8a414231cba62a895 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 16:50:17 +0100 Subject: [PATCH 08/14] Added setting menu with textsize and font selection --- package-lock.json | 11 +++ package.json | 1 + src/components/AppLayout.tsx | 112 +++++++++++++++++++++++++++- src/components/Panels/MainPanel.tsx | 15 ++-- src/contexts/AppLayoutContext.tsx | 39 +++++++++- src/hooks/useDarkMode.ts | 3 +- src/pages/_app.tsx | 5 +- src/tailwind.css | 3 +- tailwind.config.js | 35 ++++++++- 9 files changed, 205 insertions(+), 19 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5628ae9..11e6734 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", @@ -199,6 +200,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "node_modules/@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "node_modules/@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", @@ -3800,6 +3806,11 @@ "resolved": "https://registry.npmjs.org/@fontsource/material-icons-rounded/-/material-icons-rounded-4.5.2.tgz", "integrity": "sha512-wk/vqodMF+4IBbxhI0cjaPBcouvRrnJdeQCslY0Zae8ojyZCUksJn4JTiQk89fbY9kvT3oG7AZIZ+poKdpS02w==" }, + "@fontsource/opendyslexic": { + "version": "4.5.2", + "resolved": "https://registry.npmjs.org/@fontsource/opendyslexic/-/opendyslexic-4.5.2.tgz", + "integrity": "sha512-vW+A3Bd1ZEG6nAZuix0OhbS0ygMlhvtc3RvLlDXrTAinrAZHQ0bOGUJRN2iaGbQ1kWNP8/7A+AKMFH5FM/pjKA==" + }, "@fontsource/vollkorn": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/@fontsource/vollkorn/-/vollkorn-4.5.4.tgz", diff --git a/package.json b/package.json index 5044c59..ce9877c 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@fontsource/material-icons": "^4.5.2", "@fontsource/material-icons-rounded": "^4.5.2", + "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", "markdown-to-jsx": "^7.1.6", diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index dd36bcf..0167b28 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,6 +13,7 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; +import { useEffect } from "react"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -91,8 +92,22 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { ? props.description : props.langui.default_description; + useEffect(() => { + document.getElementsByTagName("html")[0].style.fontSize = `${ + (appLayout.fontSize || 1) * 100 + }%`; + }); + return ( -
+
+ +

Settings

+ +

Theme

+
+ + + +
+ +

Font size

+
+ + + +
+ +

Font

+ + + + diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index eac6321..00cf882 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -5,13 +5,18 @@ import React, { ReactNode, useContext } from "react"; export interface AppLayoutState { subPanelOpen: boolean | undefined; languagePanelOpen: boolean | undefined; + configPanelOpen: boolean | undefined; mainPanelReduced: boolean | undefined; mainPanelOpen: boolean | undefined; darkMode: boolean | undefined; + selectedThemeMode: boolean | undefined; + fontSize: number | undefined; + dyslexic: boolean | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction >; + setConfigPanelOpen: React.Dispatch>; setMainPanelReduced: React.Dispatch< React.SetStateAction >; @@ -20,20 +25,29 @@ export interface AppLayoutState { setSelectedThemeMode: React.Dispatch< React.SetStateAction >; + setFontSize: React.Dispatch>; + setDyslexic: React.Dispatch>; } const initialState: AppLayoutState = { subPanelOpen: false, languagePanelOpen: false, + configPanelOpen: false, mainPanelReduced: false, mainPanelOpen: false, darkMode: false, + selectedThemeMode: false, + fontSize: 1, + dyslexic: false, setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, setMainPanelOpen: () => {}, setDarkMode: () => {}, setSelectedThemeMode: () => {}, + setConfigPanelOpen: () => {}, + setFontSize: () => {}, + setDyslexic: () => {}, }; const AppContext = React.createContext(initialState); @@ -57,6 +71,10 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("languagePanelOpen", initialState.languagePanelOpen); + const [configPanelOpen, setConfigPanelOpen] = useStateWithLocalStorage< + boolean | undefined + >("configPanelOpen", initialState.configPanelOpen); + const [mainPanelReduced, setMainPanelReduced] = useStateWithLocalStorage< boolean | undefined >("mainPanelReduced", initialState.mainPanelReduced); @@ -65,9 +83,17 @@ export const AppContextProvider = (props: Props) => { boolean | undefined >("mainPanelOpen", initialState.mainPanelOpen); - const [darkMode, setDarkMode, setSelectedThemeMode] = useDarkMode( - "darkMode", - initialState.darkMode + const [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode] = + useDarkMode("darkMode", initialState.darkMode); + + const [fontSize, setFontSize] = useStateWithLocalStorage( + "fontSize", + initialState.fontSize + ); + + const [dyslexic, setDyslexic] = useStateWithLocalStorage( + "dyslexic", + initialState.dyslexic ); return ( @@ -75,15 +101,22 @@ export const AppContextProvider = (props: Props) => { value={{ subPanelOpen, languagePanelOpen, + configPanelOpen, mainPanelReduced, mainPanelOpen, darkMode, + selectedThemeMode, + fontSize, + dyslexic, setSubPanelOpen, setLanguagePanelOpen, + setConfigPanelOpen, setMainPanelReduced, setMainPanelOpen, setDarkMode, setSelectedThemeMode, + setFontSize, + setDyslexic, }} > {props.children} diff --git a/src/hooks/useDarkMode.ts b/src/hooks/useDarkMode.ts index 94a7c19..4705942 100644 --- a/src/hooks/useDarkMode.ts +++ b/src/hooks/useDarkMode.ts @@ -6,6 +6,7 @@ export default function useDarkMode( key: string, initialValue: boolean | undefined ): [ + boolean | undefined, boolean | undefined, React.Dispatch>, React.Dispatch> @@ -23,5 +24,5 @@ export default function useDarkMode( if (selectedThemeMode === false) setDarkMode(prefersDarkMode); }, [selectedThemeMode, prefersDarkMode, setDarkMode]); - return [darkMode, setDarkMode, setSelectedThemeMode]; + return [darkMode, selectedThemeMode, setDarkMode, setSelectedThemeMode]; } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index ac12d3d..1d10540 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,14 +2,15 @@ import type { AppProps } from "next/app"; import "tailwind.css"; import "@fontsource/zen-maru-gothic/500.css"; import "@fontsource/vollkorn/700.css"; +import "@fontsource/opendyslexic/400.css" import "@fontsource/material-icons"; import { AppContextProvider } from "contexts/AppLayoutContext"; -export default function AccordsLibraryApp(appProps: AppProps) { +export default function AccordsLibraryApp(props: AppProps) { return ( - + ); } diff --git a/src/tailwind.css b/src/tailwind.css index 6eea261..477fdd7 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -78,9 +78,8 @@ } .prose blockquote { - @apply border-l-dark + @apply border-l-dark; } - } @layer components { diff --git a/tailwind.config.js b/tailwind.config.js index f099e48..4a84db7 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -18,6 +18,17 @@ const breakDektop = { min: "60rem" }; const breakMobile = { max: "60rem" }; const breakThin = { max: "25rem" }; +const fontStandard = { + body: "Zen Maru Gothic", + headers: "Vollkorn", + monospace: "monospace", +}; +const fontDyslexic = { + body: "OpenDyslexic", + headers: "OpenDyslexic", + monospace: "monospace", +}; + /* END CONFIG */ function withOpacity(variableName) { @@ -41,9 +52,11 @@ module.exports = { black: withOpacity("--theme-color-black"), }, fontFamily: { - body: ["Zen Maru Gothic"], - headers: ["Vollkorn"], - monospace: ["monospace"], + body: ["var(--theme-font-body)"], + headers: ["var(--theme-font-headers)"], + monospace: ["var(--theme-font-monospace)"], + openDyslexic: ["OpenDyslexic"], + zenMaruGothic: ["Zen Maru Gothic"], }, screens: { desktop: breakDektop, @@ -61,7 +74,6 @@ module.exports = { plugins: [ require("@tailwindcss/typography"), - // Colored Dropshadow plugin(function ({ addUtilities }) { addUtilities({ ".set-theme-light": { @@ -85,6 +97,21 @@ module.exports = { }); }), + plugin(function ({ addUtilities }) { + addUtilities({ + ".set-theme-font-standard": { + "--theme-font-body": fontStandard.body, + "--theme-font-headers": fontStandard.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + ".set-theme-font-dyslexic": { + "--theme-font-body": fontDyslexic.body, + "--theme-font-headers": fontDyslexic.headers, + "--theme-font-monospace": fontStandard.monospace, + }, + }); + }), + plugin(function ({ addVariant, e }) { addVariant("webkit-scrollbar", ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { -- 2.40.1 From f5c661c6237fa5975b91820c29281862580bd225 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 18:23:10 +0100 Subject: [PATCH 09/14] Added currency selection and auto-convertion --- src/components/AppLayout.tsx | 210 ++++++++++-------- .../Library/LibraryItemsPreview.tsx | 16 +- src/components/Select.tsx | 2 +- src/contexts/AppLayoutContext.tsx | 11 + src/graphql/operation.graphql | 17 ++ src/graphql/operations-types.ts | 23 ++ src/graphql/operations.ts | 9 + src/graphql/schema.graphql | 59 +---- src/pages/library/[slug].tsx | 11 +- src/pages/library/index.tsx | 10 +- src/queries/helpers.ts | 26 ++- 11 files changed, 241 insertions(+), 153 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 0167b28..fd5e979 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,7 +13,8 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; -import { useEffect } from "react"; +import { useEffect, useState } from "react"; +import Select from "./Select"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -96,7 +97,20 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { document.getElementsByTagName("html")[0].style.fontSize = `${ (appLayout.fontSize || 1) * 100 }%`; - }); + }, [appLayout.fontSize]); + + const currencyOptions = ["EUR", "USD", "CAD", "JPY"]; + const [currencySelect, setCurrencySelect] = useState(-1); + + useEffect(() => { + appLayout.currency && + setCurrencySelect(currencyOptions.indexOf(appLayout.currency)); + }, [appLayout.currency]); + + useEffect(() => { + currencySelect >= 0 && + appLayout.setCurrency(currencyOptions[currencySelect]); + }, [currencySelect]); return (

Settings

-

Theme

-
- - - -
+
+
+

Theme

+
+ + + +
+
-

Font size

-
- - - -
+
+

Currency

+
+ appLayout.setPlayerName(e.target.value)} + /> +
diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 8212ad4..38bf661 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -1,3 +1,4 @@ +import { useAppLayout } from "contexts/AppLayoutContext"; import Markdown from "markdown-to-jsx"; import SceneBreak from "./SceneBreak"; @@ -7,6 +8,8 @@ type ScenBreakProps = { }; export default function Markdawn(props: ScenBreakProps): JSX.Element { + const appLayout = useAppLayout(); + if (props.text) { return ( {return {""}} + component: () => { + return ( + + {appLayout.playerName ? appLayout.playerName : ""} + + ); + }, }, }, }} @@ -27,4 +36,4 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { ); } return <>; -} \ No newline at end of file +} diff --git a/src/components/Select.tsx b/src/components/Select.tsx index c11ca95..3b2546d 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -49,7 +49,7 @@ export default function Select(props: SelectProps): JSX.Element { {index !== props.state && (
{ setOpened(false); diff --git a/src/contexts/AppLayoutContext.tsx b/src/contexts/AppLayoutContext.tsx index fd7bc74..c5f82b3 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -13,6 +13,7 @@ export interface AppLayoutState { fontSize: number | undefined; dyslexic: boolean | undefined; currency: string | undefined; + playerName: string | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction @@ -29,6 +30,7 @@ export interface AppLayoutState { setFontSize: React.Dispatch>; setDyslexic: React.Dispatch>; setCurrency: React.Dispatch>; + setPlayerName: React.Dispatch>; } const initialState: AppLayoutState = { @@ -42,6 +44,7 @@ const initialState: AppLayoutState = { fontSize: 1, dyslexic: false, currency: "USD", + playerName: "", setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, @@ -52,6 +55,7 @@ const initialState: AppLayoutState = { setFontSize: () => {}, setDyslexic: () => {}, setCurrency: () => {}, + setPlayerName: () => {}, }; const AppContext = React.createContext(initialState); @@ -105,6 +109,10 @@ export const AppContextProvider = (props: Props) => { initialState.currency ); + const [playerName, setPlayerName] = useStateWithLocalStorage< + string | undefined + >("playerName", initialState.playerName); + return ( { fontSize, dyslexic, currency, + playerName, setSubPanelOpen, setLanguagePanelOpen, setConfigPanelOpen, @@ -128,6 +137,7 @@ export const AppContextProvider = (props: Props) => { setFontSize, setDyslexic, setCurrency, + setPlayerName, }} > {props.children} diff --git a/src/tailwind.css b/src/tailwind.css index 477fdd7..e1aa100 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -80,6 +80,20 @@ .prose blockquote { @apply border-l-dark; } + + /* INPUT */ + + input { + @apply rounded-full p-2 text-center bg-light outline outline-mid outline-2 outline-offset-[-2px] hover:outline-[transparent] text-dark hover:bg-mid transition-all; + } + + input::placeholder { + @apply text-dark opacity-60; + } + + input:focus-visible { + @apply outline-none bg-mid shadow-inner-sm; + } } @layer components { -- 2.40.1 From a04e25a1ad79d6eea5a038d6a47ca5ad48d3465e Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 13:29:39 +0100 Subject: [PATCH 12/14] Added more localized texts --- src/components/AppLayout.tsx | 33 ++++++++--------- src/components/RecorderChip.tsx | 11 ++++-- src/graphql/operation.graphql | 26 ++++++++++++++ src/graphql/operations-types.ts | 26 ++++++++++++++ src/pages/contents/[slug]/index.tsx | 18 ++++++++-- src/pages/contents/[slug]/read.tsx | 56 +++++++++++++++++++++-------- src/pages/library/[slug].tsx | 10 +++--- 7 files changed, 138 insertions(+), 42 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 7fc8e42..2b2b97e 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -29,6 +29,7 @@ type AppLayoutProps = { }; export default function AppLayout(props: AppLayoutProps): JSX.Element { + const langui = props.langui; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -91,7 +92,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { const metaDescription = props.description ? props.description - : props.langui.default_description; + : langui.default_description; useEffect(() => { document.getElementsByTagName("html")[0].style.fontSize = `${ @@ -166,9 +167,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {

âť®

-

- {props.langui.select_option_sidebar} -

+

{langui.select_option_sidebar}

)} @@ -220,7 +219,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { className={`${mainPanelClass} border-r-[1px] mobile:bottom-20 border-black border-dotted top-0 bottom-0 left-0 right-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 z-20 bg-light texture-paper-dots ${appLayout.mainPanelOpen ? "" : "mobile:-translate-x-full"}`} > - +
{/* Main panel minimize button*/} @@ -270,7 +269,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { state={appLayout.languagePanelOpen} setState={appLayout.setLanguagePanelOpen} > -

{props.langui.select_language}

+

{langui.select_language}

{router.locales?.sort().map((locale) => (
-

Currency

+

{langui.currency}

appLayout.setPlayerName(e.target.value)} + onInput={(e) => + appLayout.setPlayerName((e.target as HTMLInputElement).value) + } />
diff --git a/src/components/RecorderChip.tsx b/src/components/RecorderChip.tsx index af0c644..404ca8e 100644 --- a/src/components/RecorderChip.tsx +++ b/src/components/RecorderChip.tsx @@ -1,15 +1,20 @@ import Chip from "components/Chip"; -import { GetContentTextQuery } from "graphql/operations-types"; +import { + GetContentTextQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; import Img, { ImageQuality } from "./Img"; import ReactDOMServer from "react-dom/server"; type RecorderChipProps = { className?: string; recorder: GetContentTextQuery["contents"]["data"][number]["attributes"]["text_set"][number]["transcribers"]["data"][number]; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function RecorderChip(props: RecorderChipProps): JSX.Element { const recorder = props.recorder; + const langui = props.langui; return ( {recorder.attributes.languages.data.length > 0 && (
-

Languages:

+

{langui.languages}:

{recorder.attributes.languages.data.map((language) => ( {language.attributes.code.toUpperCase()} @@ -38,7 +43,7 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element { )} {recorder.attributes.pronouns && (
-

Pronouns:

+

{langui.pronouns}:

{recorder.attributes.pronouns}
)} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 42162e5..07d03cc 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -83,6 +83,32 @@ query getWebsiteInterface($language_code: String) { group_by select_option_sidebar group + settings + theme + light + auto + dark + font_size + player_name + currency + font + calculated + status_incomplete + status_draft + status_review + status_done + incomplete + draft + review + done + status + transcribers + translators + proofreaders + transcript_notice + translation_notice + source_language + pronouns } } } diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index f355568..65d7804 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -165,6 +165,32 @@ export type GetWebsiteInterfaceQuery = { group_by: string; select_option_sidebar: string; group: string; + settings: string; + theme: string; + light: string; + auto: string; + dark: string; + font_size: string; + player_name: string; + currency: string; + font: string; + calculated: string; + status_incomplete: string; + status_draft: string; + status_review: string; + status_done: string; + incomplete: string; + draft: string; + review: string; + done: string; + status: string; + transcribers: string; + translators: string; + proofreaders: string; + transcript_notice: string; + translation_notice: string; + source_language: string; + pronouns: string; }; }>; }; diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index f8b78cd..fcf141d 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -36,7 +36,6 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { displayOn={ReturnButtonType.Desktop} horizontalLine /> - ); const contentPanel = ( @@ -96,9 +95,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { langui={langui} contentPanel={contentPanel} subPanel={subPanel} - description={ - content.titles.length > 0 ? content.titles[0].description : undefined + description={`${langui.type}: ${ + content.type.data.attributes.titles.length > 0 + ? content.type.data.attributes.titles[0].title + : prettySlug(content.type.data.attributes.slug) } + ${langui.categories}: ${ + content.categories.data.length > 0 && + content.categories.data + .map((category) => { + return category.attributes.short; + }) + .join(" | ") + } + + ${content.titles.length > 0 ? content.titles[0].description : undefined} + `} /> ); } diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 7f27b8f..6b30fc0 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -57,14 +57,14 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

{content.text_set[0].source_language.data.attributes.code === router.locale - ? "This content is a transcript" - : "This content is a fan-translation"} + ? langui.transcript_notice + : langui.translation_notice}

{content.text_set[0].source_language.data.attributes.code !== router.locale && (
-

Source language:

+

{langui.source_language}:

@@ -283,7 +282,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { "" )} - {item.metadata.length > 0 ? ( + {item.metadata.length > 0 && + item.metadata[0].__typename !== "ComponentMetadataGroup" && + item.metadata[0].__typename !== "ComponentMetadataOther" ? ( <>

{langui.type_information}

@@ -338,9 +339,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { ) : item.metadata[0].__typename === "ComponentMetadataGame" ? ( <> - ) : item.metadata[0].__typename === - "ComponentMetadataGroup" ? ( - <> ) : ( "" )} -- 2.40.1 From 36803b4b1ffa623610126b31eb9851d335d44ab8 Mon Sep 17 00:00:00 2001 From: DrMint Date: Mon, 7 Mar 2022 15:50:00 +0100 Subject: [PATCH 13/14] Use getAppStaticProps to globally define props for all pages --- src/components/AppLayout.tsx | 40 ++++---- src/graphql/operation.graphql | 13 +++ src/graphql/operations-types.ts | 19 ++++ src/graphql/operations.ts | 9 ++ src/pages/404.tsx | 31 ++----- src/pages/_document.tsx | 1 + src/pages/about-us/index.tsx | 32 ++----- src/pages/archives/index.tsx | 32 ++----- src/pages/chronicles/index.tsx | 32 ++----- src/pages/contents/[slug]/index.tsx | 63 +++++-------- src/pages/contents/[slug]/read.tsx | 58 +++++------- src/pages/contents/index.tsx | 104 ++++++++++----------- src/pages/editor.tsx | 30 +++--- src/pages/gallery/index.tsx | 28 ++---- src/pages/index.tsx | 37 ++------ src/pages/library/[slug].tsx | 138 ++++++++++++---------------- src/pages/library/index.tsx | 90 +++++++----------- src/pages/merch/index.tsx | 35 ++----- src/pages/news/index.tsx | 34 ++----- src/pages/wiki/chronology.tsx | 84 ++++++++--------- src/pages/wiki/index.tsx | 37 ++------ src/queries/getAppStaticProps.ts | 44 +++++++++ 22 files changed, 429 insertions(+), 562 deletions(-) create mode 100644 src/queries/getAppStaticProps.ts diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 2b2b97e..a295b3f 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -15,21 +15,21 @@ import { ImageQuality } from "./Img"; import Popup from "./Popup"; import { useEffect, useState } from "react"; import Select from "./Select"; +import { AppStaticProps } from "queries/getAppStaticProps"; -type AppLayoutProps = { +interface AppLayoutProps extends AppStaticProps { subPanel?: React.ReactNode; subPanelIcon?: string; contentPanel?: React.ReactNode; - langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; title?: string; navTitle: string; thumbnail?: StrapiImage; description?: string; extra?: React.ReactNode; -}; +} export default function AppLayout(props: AppLayoutProps): JSX.Element { - const langui = props.langui; + const { langui, currencies, languages, subPanel, contentPanel } = props; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -42,7 +42,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { if (SwipeEventData.velocity < sensibilitySwipe) return; if (appLayout.mainPanelOpen) { appLayout.setMainPanelOpen(false); - } else if (props.subPanel && props.contentPanel) { + } else if (subPanel && contentPanel) { appLayout.setSubPanelOpen(true); } }, @@ -63,13 +63,13 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" }`; let contentPanelClass = ""; - if (props.subPanel) { + if (subPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[26rem]" : "desktop:left-[40rem]" }`; - } else if (props.contentPanel) { + } else if (contentPanel) { contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ appLayout.mainPanelReduced ? "desktop:left-[6rem]" @@ -77,7 +77,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }`; } - const turnSubIntoContent = props.subPanel && !props.contentPanel; + const turnSubIntoContent = subPanel && !contentPanel; const titlePrefix = "Accord’s Library"; const metaImage: OgImage = props.thumbnail @@ -100,7 +100,9 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }%`; }, [appLayout.fontSize]); - const currencyOptions = ["EUR", "USD", "CAD", "JPY"]; + const currencyOptions = currencies.map((currency) => { + return currency.attributes.code; + }); const [currencySelect, setCurrencySelect] = useState(-1); useEffect(() => { @@ -161,8 +163,8 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
- {props.contentPanel ? ( - props.contentPanel + {contentPanel ? ( + contentPanel ) : (
@@ -197,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
{/* Sub panel */} - {props.subPanel ? ( + {subPanel ? (
- {props.subPanel} + {subPanel}
) : ( "" @@ -255,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.setMainPanelOpen(false); }} > - {props.subPanel && !turnSubIntoContent + {subPanel && !turnSubIntoContent ? appLayout.subPanelOpen ? "close" : props.subPanelIcon @@ -271,15 +273,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { >

{langui.select_language}

- {router.locales?.sort().map((locale) => ( + {languages.map((language) => ( ))}
diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 07d03cc..a671a29 100644 --- a/src/graphql/operation.graphql +++ b/src/graphql/operation.graphql @@ -1100,3 +1100,16 @@ query getCurrencies { } } } + +query getLanguages { + languages { + data { + id + attributes { + name + code + localized_name + } + } + } +} diff --git a/src/graphql/operations-types.ts b/src/graphql/operations-types.ts index 65d7804..ea1f9ae 100644 --- a/src/graphql/operations-types.ts +++ b/src/graphql/operations-types.ts @@ -1465,3 +1465,22 @@ export type GetCurrenciesQuery = { }>; }; }; + +export type GetLanguagesQueryVariables = Exact<{ [key: string]: never }>; + +export type GetLanguagesQuery = { + __typename: "Query"; + languages: { + __typename: "LanguageEntityResponseCollection"; + data: Array<{ + __typename: "LanguageEntity"; + id: string; + attributes: { + __typename: "Language"; + name: string; + code: string; + localized_name: string; + }; + }>; + }; +}; diff --git a/src/graphql/operations.ts b/src/graphql/operations.ts index e8a78f3..28541db 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -15,6 +15,8 @@ import { GetCurrenciesQueryVariables, GetErasQuery, GetErasQueryVariables, + GetLanguagesQuery, + GetLanguagesQueryVariables, GetLibraryItemQuery, GetLibraryItemQueryVariables, GetLibraryItemsPreviewQuery, @@ -132,3 +134,10 @@ export async function getCurrencies( const query = getQueryFromOperations("getCurrencies"); return await graphQL(query, JSON.stringify(variables)); } + +export async function getLanguages( + variables: GetLanguagesQueryVariables +): Promise { + const query = getQueryFromOperations("getLanguages"); + return await graphQL(query, JSON.stringify(variables)); +} diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 5e312fd..8357e42 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -1,19 +1,15 @@ -import Link from "next/link"; import ContentPanel from "components/Panels/ContentPanel"; -import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type FourOhFourProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface FourOhFourProps extends AppStaticProps {} export default function FourOhFour(props: FourOhFourProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const contentPanel = (

404 - {langui.page_not_found}

@@ -25,21 +21,14 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { /> ); - return ( - - ); + return ; } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: FourOhFourProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: FourOhFourProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 506d91b..a8304bc 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -16,6 +16,7 @@ class MyDocument extends Document { return ( + ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: AboutUsProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: AboutUsProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/archives/index.tsx b/src/pages/archives/index.tsx index 88fc0a2..3b3a262 100644 --- a/src/pages/archives/index.tsx +++ b/src/pages/archives/index.tsx @@ -1,16 +1,13 @@ import SubPanel from "components/Panels/SubPanel"; import PanelHeader from "components/PanelComponents/PanelHeader"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; -import { getWebsiteInterface } from "graphql/operations"; import AppLayout from "components/AppLayout"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ArchivesProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface ArchivesProps extends AppStaticProps {} export default function Archives(props: ArchivesProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const subPanel = ( ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: ArchivesProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: ArchivesProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/chronicles/index.tsx b/src/pages/chronicles/index.tsx index 2ef7522..53eaa78 100644 --- a/src/pages/chronicles/index.tsx +++ b/src/pages/chronicles/index.tsx @@ -1,16 +1,13 @@ import SubPanel from "components/Panels/SubPanel"; import PanelHeader from "components/PanelComponents/PanelHeader"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import { GetStaticProps } from "next"; -import { getWebsiteInterface } from "graphql/operations"; import AppLayout from "components/AppLayout"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ChroniclesProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface ChroniclesProps extends AppStaticProps {} export default function Chronicles(props: ChroniclesProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const subPanel = ( ); return ( - + ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: ChroniclesProps = { - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - return { props: {} }; + const props: ChroniclesProps = { + ...(await getAppStaticProps(context)), + }; + return { + props: props, + }; }; diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index fcf141d..1c9726d 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -1,13 +1,6 @@ import { GetStaticPaths, GetStaticProps } from "next"; -import { - getContent, - getContentsSlugs, - getWebsiteInterface, -} from "graphql/operations"; -import { - GetContentQuery, - GetWebsiteInterfaceQuery, -} from "graphql/operations-types"; +import { getContent, getContentsSlugs } from "graphql/operations"; +import { GetContentQuery } from "graphql/operations-types"; import ContentPanel from "components/Panels/ContentPanel"; import Button from "components/Button"; import HorizontalLine from "components/HorizontalLine"; @@ -18,15 +11,14 @@ import ReturnButton, { ReturnButtonType, } from "components/PanelComponents/ReturnButton"; import { prettyinlineTitle, prettySlug } from "queries/helpers"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type ContentIndexProps = { - content: GetContentQuery; - langui: GetWebsiteInterfaceQuery; -}; +interface ContentIndexProps extends AppStaticProps { + content: GetContentQuery["contents"]["data"][number]["attributes"]; +} export default function ContentIndex(props: ContentIndexProps): JSX.Element { - const content = props.content.contents.data[0].attributes; - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { content, langui } = props; const subPanel = ( 0 ? content.titles[0].description : undefined} `} + {...props} /> ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.params) { - if (context.params.slug && context.locale) { - if (context.params.slug instanceof Array) - context.params.slug = context.params.slug.join(""); - - const props: ContentIndexProps = { - content: await getContent({ - slug: context.params.slug, - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - } - return { props: {} }; + const props: ContentIndexProps = { + ...(await getAppStaticProps(context)), + content: ( + await getContent({ + slug: context.params?.slug?.toString() || "", + language_code: context.locale || "en", + }) + ).contents.data[0].attributes, + }; + return { + props: props, + }; }; export const getStaticPaths: GetStaticPaths = async (context) => { - type Path = { - params: { - slug: string; - }; - locale: string; - }; + type Path = { params: { slug: string }; locale: string }; const data = await getContentsSlugs({}); const paths: Path[] = []; diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index 6b30fc0..8dc58cb 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -1,13 +1,8 @@ import { GetStaticPaths, GetStaticProps } from "next"; -import { - getContentsSlugs, - getContentText, - getWebsiteInterface, -} from "graphql/operations"; +import { getContentsSlugs, getContentText } from "graphql/operations"; import { Enum_Componentsetstextset_Status, GetContentTextQuery, - GetWebsiteInterfaceQuery, } from "graphql/operations-types"; import ContentPanel from "components/Panels/ContentPanel"; import HorizontalLine from "components/HorizontalLine"; @@ -30,16 +25,16 @@ import { useRouter } from "next/router"; import Chip from "components/Chip"; import ReactTooltip from "react-tooltip"; import RecorderChip from "components/RecorderChip"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -interface ContentReadProps { - content: GetContentTextQuery; - langui: GetWebsiteInterfaceQuery; +interface ContentReadProps extends AppStaticProps { + content: GetContentTextQuery["contents"]["data"][number]["attributes"]; + contentId: GetContentTextQuery["contents"]["data"][number]["id"]; } export default function ContentRead(props: ContentReadProps): JSX.Element { useTesting(props); - const content = props.content.contents.data[0].attributes; - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui, content } = props; const router = useRouter(); const subPanel = ( @@ -212,7 +207,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { : prettySlug(content.slug) } thumbnail={content.thumbnail.data?.attributes} - langui={langui} contentPanel={contentPanel} subPanel={subPanel} extra={extra} @@ -232,31 +226,26 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ${content.titles.length > 0 ? content.titles[0].description : undefined} `} + {...props} /> ); } export const getStaticProps: GetStaticProps = async (context) => { - if (context.params) { - if (context.params.slug && context.locale) { - if (context.params.slug instanceof Array) - context.params.slug = context.params.slug.join(""); - - const props: ContentReadProps = { - content: await getContentText({ - slug: context.params.slug, - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } - } - return { props: {} }; + const content = ( + await getContentText({ + slug: context.params?.slug?.toString() || "", + language_code: context.locale || "en", + }) + ).contents.data[0]; + const props: ContentReadProps = { + ...(await getAppStaticProps(context)), + content: content.attributes, + contentId: content.id, + }; + return { + props: props, + }; }; export const getStaticPaths: GetStaticPaths = async (context) => { @@ -282,11 +271,10 @@ export const getStaticPaths: GetStaticPaths = async (context) => { export function useTesting(props: ContentReadProps) { const router = useRouter(); - const content = props.content.contents.data[0].attributes; + const { content, contentId } = props; const contentURL = - "/admin/content-manager/collectionType/api::content.content/" + - props.content.contents.data[0].id; + "/admin/content-manager/collectionType/api::content.content/" + contentId; if (router.locale === "en") { if (content.categories.data.length === 0) { diff --git a/src/pages/contents/index.tsx b/src/pages/contents/index.tsx index 0c9eed5..d899665 100644 --- a/src/pages/contents/index.tsx +++ b/src/pages/contents/index.tsx @@ -3,25 +3,56 @@ import SubPanel from "components/Panels/SubPanel"; import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; -import { - GetContentsQuery, - GetWebsiteInterfaceQuery, -} from "graphql/operations-types"; -import { getContents, getWebsiteInterface } from "graphql/operations"; +import { GetContentsQuery } from "graphql/operations-types"; +import { getContents } from "graphql/operations"; import PanelHeader from "components/PanelComponents/PanelHeader"; import AppLayout from "components/AppLayout"; import LibraryContentPreview from "components/Library/LibraryContentPreview"; import { prettyinlineTitle } from "queries/helpers"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type LibraryProps = { - contents: GetContentsQuery; - langui: GetWebsiteInterfaceQuery; -}; +interface LibraryProps extends AppStaticProps { + contents: GetContentsQuery["contents"]["data"]; +} export default function Library(props: LibraryProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; + const subPanel = ( + + + + ); + const contentPanel = ( + +
+ {props.contents.map((item) => ( + + ))} +
+ + ); + return ( + + ); +} - props.contents.contents.data.sort((a, b) => { +export const getStaticProps: GetStaticProps = async (context) => { + const contents = ( + await getContents({ + language_code: context.locale || "en", + }) + ).contents.data; + + contents.sort((a, b) => { const titleA = a.attributes.titles.length > 0 ? prettyinlineTitle( @@ -41,48 +72,11 @@ export default function Library(props: LibraryProps): JSX.Element { return titleA.localeCompare(titleB); }); - const subPanel = ( - - - - ); - const contentPanel = ( - -
- {props.contents.contents.data.map((item) => ( - - ))} -
- - ); - return ( - - ); -} - -export const getStaticProps: GetStaticProps = async (context) => { - if (context.locale) { - const props: LibraryProps = { - contents: await getContents({ - language_code: context.locale, - }), - langui: await getWebsiteInterface({ - language_code: context.locale, - }), - }; - return { - props: props, - }; - } else { - return { props: {} }; - } + const props: LibraryProps = { + ...(await getAppStaticProps(context)), + contents: contents, + }; + return { + props: props, + }; }; diff --git a/src/pages/editor.tsx b/src/pages/editor.tsx index a7f5444..825ed90 100644 --- a/src/pages/editor.tsx +++ b/src/pages/editor.tsx @@ -1,20 +1,17 @@ import ContentPanel, { ContentPanelWidthSizes, } from "components/Panels/ContentPanel"; -import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; -import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; import { useCallback, useState } from "react"; import Markdawn from "components/Markdown/Markdawn"; import Script from "next/script"; +import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; -type EditorProps = { - langui: GetWebsiteInterfaceQuery; -}; +interface EditorProps extends AppStaticProps {} export default function Editor(props: EditorProps): JSX.Element { - const langui = props.langui.websiteInterfaces.data[0].attributes; + const { langui } = props; const handleInput = useCallback((e) => { setMarkdown(e.target.value); @@ -45,12 +42,14 @@ export default function Editor(props: EditorProps): JSX.Element { onInput={handleInput} className="bg-mid rounded-xl p-8 w-full font-monospace" value={markdown} + title="Input textarea" />

Convert text to markdown