diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml deleted file mode 100644 index 2e4dbe1..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/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index bf6c1ed..dd36bcf 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; @@ -124,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 */}
@@ -218,38 +198,55 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
- {/* Language selection background */} -
{ - appLayout.setLanguagePanelOpen(false); - }} - > -
+ { + appLayout.setMainPanelOpen(!appLayout.mainPanelOpen); + appLayout.setSubPanelOpen(false); + }} > -

{props.langui.select_language}

-
- {router.locales?.sort().map((locale) => ( - - ))} -
-
+ {appLayout.mainPanelOpen ? "close" : "menu"} + +

{props.navTitle}

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

{props.langui.select_language}

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

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/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/components/Popup.tsx b/src/components/Popup.tsx new file mode 100644 index 0000000..808c101 --- /dev/null +++ b/src/components/Popup.tsx @@ -0,0 +1,33 @@ +import { Dispatch, SetStateAction } from "react"; + +export type PopupProps = { + setState: Dispatch>; + state?: boolean; + children: React.ReactNode; +}; + +export default function Popup(props: PopupProps): JSX.Element { + return ( +
+
{ + props.setState(false); + }} + /> +
+ {props.children} +
+
+ ); +} 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 8261f4d..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"; @@ -37,6 +39,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; @@ -58,8 +61,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element { const subPanel = ( - - +
+
-
+
{item.thumbnail.data ? ( {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" - : ""} -
-
+ /> ))}
diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index e78981a..a02d3ef 100644 --- a/src/pages/wiki/chronology.tsx +++ b/src/pages/wiki/chronology.tsx @@ -13,7 +13,9 @@ import { getWebsiteInterface, } from "graphql/operations"; import NavOption from "components/PanelComponents/NavOption"; -import ReturnButton from "components/PanelComponents/ReturnButton"; +import ReturnButton, { + ReturnButtonType, +} from "components/PanelComponents/ReturnButton"; import HorizontalLine from "components/HorizontalLine"; import AppLayout from "components/AppLayout"; import { @@ -72,9 +74,6 @@ export default function DataChronology( const subPanel = ( - - - {props.chronologyEras.chronologyEras.data.map((era) => (