diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml deleted file mode 100644 index a7f6d4e..0000000 --- a/.github/workflows/node.js.yml +++ /dev/null @@ -1,36 +0,0 @@ -# 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: [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 - 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 }} diff --git a/README.md b/README.md index c3bec14..6b245ca 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,5 @@ # 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) 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..a295b3f 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -13,20 +13,23 @@ import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; 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, currencies, languages, subPanel, contentPanel } = props; const router = useRouter(); const isMobile = useMediaMobile(); const isCoarse = useMediaCoarse(); @@ -39,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); } }, @@ -60,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]" @@ -74,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 @@ -89,10 +92,41 @@ 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 = `${ + (appLayout.fontSize || 1) * 100 + }%`; + }, [appLayout.fontSize]); + + const currencyOptions = currencies.map((currency) => { + return currency.attributes.code; + }); + const [currencySelect, setCurrencySelect] = useState(-1); + + useEffect(() => { + appLayout.currency && + setCurrencySelect(currencyOptions.indexOf(appLayout.currency)); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [appLayout.currency]); + + useEffect(() => { + currencySelect >= 0 && + appLayout.setCurrency(currencyOptions[currencySelect]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [currencySelect]); return ( -
+
- {props.contentPanel ? ( - props.contentPanel + {contentPanel ? ( + contentPanel ) : (

❮

-

- {props.langui.select_option_sidebar} -

+

{langui.select_option_sidebar}

)} @@ -145,21 +177,29 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { {/* Background when navbar is opened */}
+
{ - appLayout.setMainPanelOpen(false); - appLayout.setSubPanelOpen(false); - }} - >
+ onClick={() => { + appLayout.setMainPanelOpen(false); + appLayout.setSubPanelOpen(false); + }} + >
+
{/* Sub panel */} - {props.subPanel ? ( + {subPanel ? (
- {props.subPanel} + {subPanel}
) : ( "" @@ -181,7 +221,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*/} @@ -217,7 +257,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { appLayout.setMainPanelOpen(false); }} > - {props.subPanel && !turnSubIntoContent + {subPanel && !turnSubIntoContent ? appLayout.subPanelOpen ? "close" : props.subPanelIcon @@ -231,22 +271,151 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { state={appLayout.languagePanelOpen} setState={appLayout.setLanguagePanelOpen} > -

{props.langui.select_language}

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

{langui.select_language}

+
+ {languages.map((language) => ( ))}
+ +

{langui.settings}

+ +
+
+

{langui.theme}

+
+ + + +
+
+ +
+

{langui.currency}

+
+ + appLayout.setPlayerName((e.target as HTMLInputElement).value) + } + /> +
+
+ + @@ -61,12 +67,16 @@ export default function LibraryItemsPreview( ) : ( "" )} - {item.price ? ( + {item.price && props.currencies ? (

shopping_cart - {prettyPrice(item.price)} + {prettyPrice( + item.price, + props.currencies, + appLayout.currency + )}

) : ( "" 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/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index cc819aa..0390ccf 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -49,16 +49,19 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { } flex-wrap gap-2`} > @@ -74,6 +77,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { {router.locale.toUpperCase()} )} + +
diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index 808c101..c0fc59a 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -1,4 +1,5 @@ import { Dispatch, SetStateAction } from "react"; +import Button from "./Button"; export type PopupProps = { setState: Dispatch>; @@ -9,23 +10,29 @@ export type PopupProps = { export default function Popup(props: PopupProps): JSX.Element { return (
{ props.setState(false); }} />
+ {props.children}
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/components/Select.tsx b/src/components/Select.tsx index 06c6e2a..3b2546d 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -15,7 +15,7 @@ export default function Select(props: SelectProps): JSX.Element { return (
@@ -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 eac6321..c5f82b3 100644 --- a/src/contexts/AppLayoutContext.tsx +++ b/src/contexts/AppLayoutContext.tsx @@ -5,13 +5,20 @@ 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; + currency: string | undefined; + playerName: string | undefined; setSubPanelOpen: React.Dispatch>; setLanguagePanelOpen: React.Dispatch< React.SetStateAction >; + setConfigPanelOpen: React.Dispatch>; setMainPanelReduced: React.Dispatch< React.SetStateAction >; @@ -20,20 +27,35 @@ export interface AppLayoutState { setSelectedThemeMode: React.Dispatch< React.SetStateAction >; + setFontSize: React.Dispatch>; + setDyslexic: React.Dispatch>; + setCurrency: React.Dispatch>; + setPlayerName: React.Dispatch>; } const initialState: AppLayoutState = { subPanelOpen: false, languagePanelOpen: false, + configPanelOpen: false, mainPanelReduced: false, mainPanelOpen: false, darkMode: false, + selectedThemeMode: false, + fontSize: 1, + dyslexic: false, + currency: "USD", + playerName: "", setSubPanelOpen: () => {}, setLanguagePanelOpen: () => {}, setMainPanelReduced: () => {}, setMainPanelOpen: () => {}, setDarkMode: () => {}, setSelectedThemeMode: () => {}, + setConfigPanelOpen: () => {}, + setFontSize: () => {}, + setDyslexic: () => {}, + setCurrency: () => {}, + setPlayerName: () => {}, }; const AppContext = React.createContext(initialState); @@ -57,6 +79,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,25 +91,53 @@ 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 + ); + + const [currency, setCurrency] = useStateWithLocalStorage( + "currency", + initialState.currency + ); + + const [playerName, setPlayerName] = useStateWithLocalStorage< + string | undefined + >("playerName", initialState.playerName); + return ( {props.children} diff --git a/src/graphql/operation.graphql b/src/graphql/operation.graphql index 77fb0a9..a671a29 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 } } } @@ -174,6 +200,7 @@ query getLibraryItemsPreview($language_code: String) { attributes { symbol code + rate_to_usd } } } @@ -322,6 +349,7 @@ query getLibraryItem($slug: String, $language_code: String) { attributes { symbol code + rate_to_usd } } } @@ -490,6 +518,7 @@ query getLibraryItem($slug: String, $language_code: String) { attributes { symbol code + rate_to_usd } } } @@ -1057,3 +1086,30 @@ query getContentText($slug: String, $language_code: String) { } } } + +query getCurrencies { + currencies { + data { + id + attributes { + code + symbol + rate_to_usd + display_decimals + } + } + } +} + +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 87dd152..ea1f9ae 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; }; }>; }; @@ -286,6 +312,7 @@ export type GetLibraryItemsPreviewQuery = { __typename: "Currency"; symbol: string; code: string; + rate_to_usd: number; }; }; }; @@ -478,6 +505,7 @@ export type GetLibraryItemQuery = { __typename: "Currency"; symbol: string; code: string; + rate_to_usd: number; }; }; }; @@ -693,6 +721,7 @@ export type GetLibraryItemQuery = { __typename: "Currency"; symbol: string; code: string; + rate_to_usd: number; }; }; }; @@ -1416,3 +1445,42 @@ export type GetContentTextQuery = { }>; }; }; + +export type GetCurrenciesQueryVariables = Exact<{ [key: string]: never }>; + +export type GetCurrenciesQuery = { + __typename: "Query"; + currencies: { + __typename: "CurrencyEntityResponseCollection"; + data: Array<{ + __typename: "CurrencyEntity"; + id: string; + attributes: { + __typename: "Currency"; + code: string; + symbol: string; + rate_to_usd: number; + display_decimals: boolean; + }; + }>; + }; +}; + +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 8d52f9a..28541db 100644 --- a/src/graphql/operations.ts +++ b/src/graphql/operations.ts @@ -11,8 +11,12 @@ import { GetContentsSlugsQueryVariables, GetContentTextQuery, GetContentTextQueryVariables, + GetCurrenciesQuery, + GetCurrenciesQueryVariables, GetErasQuery, GetErasQueryVariables, + GetLanguagesQuery, + GetLanguagesQueryVariables, GetLibraryItemQuery, GetLibraryItemQueryVariables, GetLibraryItemsPreviewQuery, @@ -123,3 +127,17 @@ export async function getContentText( const query = getQueryFromOperations("getContentText"); return await graphQL(query, JSON.stringify(variables)); } + +export async function getCurrencies( + variables: GetCurrenciesQueryVariables +): Promise { + 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/graphql/schema.graphql b/src/graphql/schema.graphql index 526c5af..69d7f5f 100644 --- a/src/graphql/schema.graphql +++ b/src/graphql/schema.graphql @@ -1647,6 +1647,7 @@ input CurrencyFiltersInput { id: IDFilterInput symbol: StringFilterInput code: StringFilterInput + rate_to_usd: FloatFilterInput createdAt: DateTimeFilterInput updatedAt: DateTimeFilterInput and: [CurrencyFiltersInput] @@ -1657,11 +1658,13 @@ input CurrencyFiltersInput { input CurrencyInput { symbol: String code: String + rate_to_usd: Float } type Currency { symbol: String! code: String! + rate_to_usd: Float createdAt: DateTime updatedAt: DateTime } @@ -2099,46 +2102,6 @@ type MetadataTypeEntityResponseCollection { meta: ResponseCollectionMeta! } -input OtherSubtypeFiltersInput { - id: IDFilterInput - slug: StringFilterInput - createdAt: DateTimeFilterInput - updatedAt: DateTimeFilterInput - and: [OtherSubtypeFiltersInput] - or: [OtherSubtypeFiltersInput] - not: OtherSubtypeFiltersInput -} - -input OtherSubtypeInput { - slug: String - titles: [ComponentTranslationsSimpleTitleInput] -} - -type OtherSubtype { - slug: String! - titles( - filters: ComponentTranslationsSimpleTitleFiltersInput - pagination: PaginationArg = {} - sort: [String] = [] - ): [ComponentTranslationsSimpleTitle] - createdAt: DateTime - updatedAt: DateTime -} - -type OtherSubtypeEntity { - id: ID - attributes: OtherSubtype -} - -type OtherSubtypeEntityResponse { - data: OtherSubtypeEntity -} - -type OtherSubtypeEntityResponseCollection { - data: [OtherSubtypeEntity!]! - meta: ResponseCollectionMeta! -} - input PostFiltersInput { id: IDFilterInput authors: RecorderFiltersInput @@ -2655,6 +2618,7 @@ input WebsiteInterfaceFiltersInput { order_by: StringFilterInput group_by: StringFilterInput select_option_sidebar: StringFilterInput + group: StringFilterInput createdAt: DateTimeFilterInput updatedAt: DateTimeFilterInput and: [WebsiteInterfaceFiltersInput] @@ -2742,6 +2706,7 @@ input WebsiteInterfaceInput { order_by: String group_by: String select_option_sidebar: String + group: String } type WebsiteInterface { @@ -2824,6 +2789,7 @@ type WebsiteInterface { order_by: String group_by: String select_option_sidebar: String + group: String createdAt: DateTime updatedAt: DateTime } @@ -2997,7 +2963,6 @@ union GenericMorph = | LibraryItem | MerchItem | MetadataType - | OtherSubtype | Post | RangedContent | Recorder @@ -3121,12 +3086,6 @@ type Query { pagination: PaginationArg = {} sort: [String] = [] ): MetadataTypeEntityResponseCollection - otherSubtype(id: ID): OtherSubtypeEntityResponse - otherSubtypes( - filters: OtherSubtypeFiltersInput - pagination: PaginationArg = {} - sort: [String] = [] - ): OtherSubtypeEntityResponseCollection post(id: ID): PostEntityResponse posts( filters: PostFiltersInput @@ -3277,12 +3236,6 @@ type Mutation { data: MetadataTypeInput! ): MetadataTypeEntityResponse deleteMetadataType(id: ID!): MetadataTypeEntityResponse - createOtherSubtype(data: OtherSubtypeInput!): OtherSubtypeEntityResponse - updateOtherSubtype( - id: ID! - data: OtherSubtypeInput! - ): OtherSubtypeEntityResponse - deleteOtherSubtype(id: ID!): OtherSubtypeEntityResponse createPost(data: PostInput!): PostEntityResponse updatePost(id: ID!, data: PostInput!): PostEntityResponse deletePost(id: ID!): PostEntityResponse 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/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/_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/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 f8b78cd..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 = ( - ); const contentPanel = ( @@ -93,46 +84,46 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { : prettySlug(content.slug) } thumbnail={content.thumbnail.data?.attributes} - 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} + `} + {...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 7f27b8f..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 = ( @@ -57,14 +52,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}: