From ae5e37c002793446d41d536820128a0d08b81854 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 01:21:43 +0100 Subject: [PATCH 01/11] 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/11] 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/11] 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/11] 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/11] 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/11] 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 c1f78fc04dcf33e3327f236a60fccd96022d5d82 Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:44:09 +0100 Subject: [PATCH 07/11] Created a component for popup windows --- src/components/AppLayout.tsx | 47 ++++++++++++++---------------------- src/components/Popup.tsx | 33 +++++++++++++++++++++++++ 2 files changed, 51 insertions(+), 29 deletions(-) create mode 100644 src/components/Popup.tsx diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index bf6c1ed..d1751be 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -12,6 +12,7 @@ import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; +import Popup from "./Popup"; type AppLayoutProps = { subPanel?: React.ReactNode; @@ -218,37 +219,25 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { - {/* Language selection background */} -
{ - appLayout.setLanguagePanelOpen(false); - }} + -
-

{props.langui.select_language}

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

{props.langui.select_language}

+
+ {router.locales?.sort().map((locale) => ( + + ))}
-
+ >; + state?: boolean; + children: React.ReactNode; +}; + +export default function Popup(props: PopupProps): JSX.Element { + return ( +
+
{ + props.setState(false); + }} + /> +
+ {props.children} +
+
+ ); +} -- 2.40.1 From 0467813c2c14b0e57eef4e9a489872d2f9c3de7e Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:44:53 +0100 Subject: [PATCH 08/11] Use state instead of anchors for Content TOC in Library Item --- src/components/Library/ContentTOCLine.tsx | 108 ++++++++++++++++++++++ src/pages/library/[slug].tsx | 89 ++---------------- 2 files changed, 114 insertions(+), 83 deletions(-) create mode 100644 src/components/Library/ContentTOCLine.tsx diff --git a/src/components/Library/ContentTOCLine.tsx b/src/components/Library/ContentTOCLine.tsx new file mode 100644 index 0000000..9001184 --- /dev/null +++ b/src/components/Library/ContentTOCLine.tsx @@ -0,0 +1,108 @@ +import Button from "components/Button"; +import Chip from "components/Chip"; +import { + GetLibraryItemQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; +import { prettyinlineTitle, prettySlug } from "queries/helpers"; +import { useState } from "react"; + +type ContentTOCLineProps = { + content: GetLibraryItemQuery["libraryItems"]["data"][number]["attributes"]["contents"]["data"][number]; + parentSlug: string; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; +}; + +export default function ContentTOCLine( + props: ContentTOCLineProps +): JSX.Element { + const content = props.content; + const langui = props.langui; + + const [opened, setOpened] = useState(false); + + return ( +
+
+ +

setOpened(!opened)}> + {content.attributes.content.data && + content.attributes.content.data.attributes.titles.length > 0 + ? prettyinlineTitle( + content.attributes.content.data.attributes.titles[0] + .pre_title, + content.attributes.content.data.attributes.titles[0].title, + content.attributes.content.data.attributes.titles[0].subtitle + ) + : prettySlug(content.attributes.slug, props.parentSlug)} +

+ +
+ {content.attributes.content.data?.attributes.categories.data.map( + (category) => ( + {category.attributes.short} + ) + )} +
+

+

+ {content.attributes.range[0].__typename === "ComponentRangePageRange" + ? content.attributes.range[0].starting_page + : ""} +

+ {content.attributes.content.data ? ( + + {content.attributes.content.data.attributes.type.data.attributes + .titles.length > 0 + ? content.attributes.content.data.attributes.type.data.attributes + .titles[0].title + : prettySlug( + content.attributes.content.data.attributes.type.data + .attributes.slug + )} + + ) : ( + "" + )} +
+
+ + subdirectory_arrow_right + + + {content.attributes.scan_set.length > 0 ? ( + + ) : ( + "" + )} + + {content.attributes.content.data ? ( + + ) : ( + "" + )} + + {content.attributes.scan_set.length === 0 && + !content.attributes.content.data + ? "The content is not available" + : ""} +
+
+ ); +} diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 8261f4d..01f1c0c 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -37,6 +37,7 @@ import InsetBox from "components/InsetBox"; import Img, { ImageQuality } from "components/Img"; import { useAppLayout } from "contexts/AppLayoutContext"; import { useRouter } from "next/router"; +import ContentTOCLine from "components/Library/ContentTOCLine"; interface LibrarySlugProps { libraryItem: GetLibraryItemQuery; @@ -347,90 +348,12 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {

{langui.contents}

{item.contents.data.map((content) => ( -
-
- -

- {content.attributes.content.data && - content.attributes.content.data.attributes.titles - .length > 0 - ? prettyinlineTitle( - content.attributes.content.data.attributes - .titles[0].pre_title, - content.attributes.content.data.attributes - .titles[0].title, - content.attributes.content.data.attributes - .titles[0].subtitle - ) - : prettySlug(content.attributes.slug, item.slug)} -

- -
- {content.attributes.content.data?.attributes.categories.data.map( - (category) => ( - - {category.attributes.short} - - ) - )} -
-

-

- {content.attributes.range[0].__typename === - "ComponentRangePageRange" - ? content.attributes.range[0].starting_page - : ""} -

- {content.attributes.content.data ? ( - - {content.attributes.content.data.attributes.type.data - .attributes.titles.length > 0 - ? content.attributes.content.data.attributes.type.data - .attributes.titles[0].title - : prettySlug( - content.attributes.content.data.attributes.type - .data.attributes.slug - )} - - ) : ( - "" - )} -
-
- - subdirectory_arrow_right - - - {content.attributes.scan_set.length > 0 ? ( - - ) : ( - "" - )} - - {content.attributes.content.data ? ( - - ) : ( - "" - )} - - {content.attributes.scan_set.length === 0 && - !content.attributes.content.data - ? "The content is not available" - : ""} -
-
+ /> ))}
-- 2.40.1 From 3ab84b35da894f4323ffe576044b2b9aa93f5aef Mon Sep 17 00:00:00 2001 From: DrMint Date: Sun, 6 Mar 2022 03:48:24 +0100 Subject: [PATCH 09/11] Fixed problem where the Library item thumbnail is too big on mobile --- src/pages/library/[slug].tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 01f1c0c..89ed785 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -111,7 +111,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const contentPanel = (
-
+
{item.thumbnail.data ? ( Date: Sun, 6 Mar 2022 04:13:18 +0100 Subject: [PATCH 10/11] ReturnButton are now displayed on mobile and desktop are different places --- .../PanelComponents/ReturnButton.tsx | 30 +++++++++++++++++-- src/pages/404.tsx | 11 +++++-- src/pages/contents/[slug]/index.tsx | 21 +++++++++++-- src/pages/contents/[slug]/read.tsx | 15 ++++++++-- src/pages/library/[slug].tsx | 22 +++++++++++--- src/pages/wiki/chronology.tsx | 7 ++--- 6 files changed, 87 insertions(+), 19 deletions(-) diff --git a/src/components/PanelComponents/ReturnButton.tsx b/src/components/PanelComponents/ReturnButton.tsx index c208c2b..35cbc26 100644 --- a/src/components/PanelComponents/ReturnButton.tsx +++ b/src/components/PanelComponents/ReturnButton.tsx @@ -1,4 +1,5 @@ import Button from "components/Button"; +import HorizontalLine from "components/HorizontalLine"; import { useAppLayout } from "contexts/AppLayoutContext"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; @@ -6,14 +7,37 @@ type ReturnButtonProps = { href: string; title: string; langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; + displayOn: ReturnButtonType; + horizontalLine?: boolean; + className?: string; }; +export enum ReturnButtonType { + Mobile, + Desktop, + Both, +} + export default function ReturnButton(props: ReturnButtonProps): JSX.Element { const appLayout = useAppLayout(); return ( - +
+ + {props.horizontalLine && } +
); } diff --git a/src/pages/404.tsx b/src/pages/404.tsx index c54d2b5..5e312fd 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -4,7 +4,9 @@ import { getWebsiteInterface } from "graphql/operations"; import { GetStaticProps } from "next"; import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import AppLayout from "components/AppLayout"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; type FourOhFourProps = { langui: GetWebsiteInterfaceQuery; @@ -15,7 +17,12 @@ export default function FourOhFour(props: FourOhFourProps): JSX.Element { const contentPanel = (

404 - {langui.page_not_found}

- + ); return ( diff --git a/src/pages/contents/[slug]/index.tsx b/src/pages/contents/[slug]/index.tsx index 144ecda..f8b78cd 100644 --- a/src/pages/contents/[slug]/index.tsx +++ b/src/pages/contents/[slug]/index.tsx @@ -14,7 +14,9 @@ import HorizontalLine from "components/HorizontalLine"; import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import { prettyinlineTitle, prettySlug } from "queries/helpers"; type ContentIndexProps = { @@ -27,12 +29,25 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element { const langui = props.langui.websiteInterfaces.data[0].attributes; const subPanel = ( - - + + ); const contentPanel = ( +
diff --git a/src/pages/contents/[slug]/read.tsx b/src/pages/contents/[slug]/read.tsx index f6dd015..7f27b8f 100644 --- a/src/pages/contents/[slug]/read.tsx +++ b/src/pages/contents/[slug]/read.tsx @@ -12,7 +12,9 @@ import { import ContentPanel from "components/Panels/ContentPanel"; import HorizontalLine from "components/HorizontalLine"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import ThumbnailHeader from "components/Content/ThumbnailHeader"; import AppLayout from "components/AppLayout"; import Markdawn from "components/Markdown/Markdawn"; @@ -46,10 +48,10 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { href={`/contents/${content.slug}`} title={"Content"} langui={langui} + displayOn={ReturnButtonType.Desktop} + horizontalLine /> - - {content.text_set.length > 0 ? (

@@ -138,6 +140,13 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ); const contentPanel = ( +
diff --git a/src/pages/library/[slug].tsx b/src/pages/library/[slug].tsx index 89ed785..6b7da04 100644 --- a/src/pages/library/[slug].tsx +++ b/src/pages/library/[slug].tsx @@ -26,7 +26,9 @@ import { sortContent, } from "queries/helpers"; import SubPanel from "components/Panels/SubPanel"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import NavOption from "components/PanelComponents/NavOption"; import Chip from "components/Chip"; import Button from "components/Button"; @@ -59,8 +61,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const subPanel = ( - - +
+
-
+
{item.thumbnail.data ? ( - - - {props.chronologyEras.chronologyEras.data.map((era) => ( Date: Sun, 6 Mar 2022 04:36:26 +0100 Subject: [PATCH 11/11] Menus on mobile can now be closed using a button --- src/components/AppLayout.tsx | 56 ++++++++++++++++++++---------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index d1751be..dd36bcf 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -125,27 +125,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { - {/* Navbar */} -
- appLayout.setMainPanelOpen(true)} - > - menu - -

{props.navTitle}

- appLayout.setSubPanelOpen(true)} - > - {props.subPanel && !turnSubIntoContent - ? props.subPanelIcon - ? props.subPanelIcon - : "tune" - : ""} - -
- {/* Content panel */}
@@ -219,6 +198,35 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
+ {/* Navbar */} +
+ { + appLayout.setMainPanelOpen(!appLayout.mainPanelOpen); + appLayout.setSubPanelOpen(false); + }} + > + {appLayout.mainPanelOpen ? "close" : "menu"} + +

{props.navTitle}

+ { + appLayout.setSubPanelOpen(!appLayout.subPanelOpen); + appLayout.setMainPanelOpen(false); + }} + > + {props.subPanel && !turnSubIntoContent + ? appLayout.subPanelOpen + ? "close" + : props.subPanelIcon + ? props.subPanelIcon + : "tune" + : ""} + +
+