diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..a680367 --- /dev/null +++ b/.prettierignore @@ -0,0 +1 @@ +.next diff --git a/README.md b/README.md index ab29d20..0f72637 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ - Markdown format for the rich text fields #### [Image Processor](https://github.com/Accords-Library/img.accords-library.com) + - Convert the images from the CMS to 4 formats - Small: 512x512, quality 60, .webp - Medium: 1024x1024, quality 75, .webp diff --git a/next-env.d.ts b/next-env.d.ts index 4f11a03..62b8a52 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -1,5 +1,5 @@ -/// -/// - -// NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/package-lock.json b/package-lock.json index 3c95d9e..e9fc868 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,12 +11,12 @@ "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", + "@tippyjs/react": "^4.2.6", "markdown-to-jsx": "^7.1.7", "next": "^12.1.0", "react": "17.0.2", "react-dom": "17.0.2", "react-swipeable": "^6.2.0", - "react-tooltip": "^4.2.21", "turndown": "^7.1.1" }, "devDependencies": { @@ -448,12 +448,34 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.3.tgz", + "integrity": "sha512-8U7hIl7+30XbIrJ0deQMXpXESM1L4yrt6BHok5hzcR0LivivuNkk+tHU1iRVScOwCmQcrOr6kvtIr29MNbQHqQ==", + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz", "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==", "dev": true }, + "node_modules/@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "dependencies": { + "tippy.js": "^6.3.1" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -2960,6 +2982,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3035,7 +3058,8 @@ "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "node_modules/react-swipeable": { "version": "6.2.0", @@ -3045,22 +3069,6 @@ "react": "^16.8.3 || ^17" } }, - "node_modules/react-tooltip": { - "version": "4.2.21", - "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", - "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==", - "dependencies": { - "prop-types": "^15.7.2", - "uuid": "^7.0.3" - }, - "engines": { - "npm": ">=6.13" - }, - "peerDependencies": { - "react": ">=16.0.0", - "react-dom": ">=16.0.0" - } - }, "node_modules/readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -3424,6 +3432,14 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -3555,14 +3571,6 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, - "node_modules/uuid": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", - "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==", - "bin": { - "uuid": "dist/bin/uuid" - } - }, "node_modules/v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", @@ -3917,12 +3925,25 @@ "fastq": "^1.6.0" } }, + "@popperjs/core": { + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.3.tgz", + "integrity": "sha512-8U7hIl7+30XbIrJ0deQMXpXESM1L4yrt6BHok5hzcR0LivivuNkk+tHU1iRVScOwCmQcrOr6kvtIr29MNbQHqQ==" + }, "@rushstack/eslint-patch": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz", "integrity": "sha512-JLo+Y592QzIE+q7Dl2pMUtt4q8SKYI5jDrZxrozEQxnGVOyYE+GWK9eLkwTaeN9DDctlaRAQ3TBmzZ1qdLE30A==", "dev": true }, + "@tippyjs/react": { + "version": "4.2.6", + "resolved": "https://registry.npmjs.org/@tippyjs/react/-/react-4.2.6.tgz", + "integrity": "sha512-91RicDR+H7oDSyPycI13q3b7o4O60wa2oRbjlz2fyRLmHImc4vyDwuUP8NtZaN0VARJY5hybvDYrFzhY9+Lbyw==", + "requires": { + "tippy.js": "^6.3.1" + } + }, "@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -5740,6 +5761,7 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dev": true, "requires": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -5786,7 +5808,8 @@ "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", + "dev": true }, "react-swipeable": { "version": "6.2.0", @@ -5794,15 +5817,6 @@ "integrity": "sha512-nWQ8dEM8e/uswZLSIkXUsAnQmnX4MTcryOHBQIQYRMJFDpgDBSiVbKsz/BZVCIScF4NtJh16oyxwaNOepR6xSw==", "requires": {} }, - "react-tooltip": { - "version": "4.2.21", - "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-4.2.21.tgz", - "integrity": "sha512-zSLprMymBDowknr0KVDiJ05IjZn9mQhhg4PRsqln0OZtURAJ1snt1xi5daZfagsh6vfsziZrc9pErPTDY1ACig==", - "requires": { - "prop-types": "^15.7.2", - "uuid": "^7.0.3" - } - }, "readdirp": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", @@ -6043,6 +6057,14 @@ "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=", "dev": true }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "to-regex-range": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", @@ -6143,11 +6165,6 @@ "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=", "dev": true }, - "uuid": { - "version": "7.0.3", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-7.0.3.tgz", - "integrity": "sha512-DPSke0pXhTZgoF/d+WSt2QaKMCFSfx7QegxEWT+JOuHF5aWrKEn0G+ztjuJg/gG8/ItK+rbPCD/yNv8yyih6Cg==" - }, "v8-compile-cache": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz", diff --git a/package.json b/package.json index 661ba85..07b9196 100644 --- a/package.json +++ b/package.json @@ -13,12 +13,12 @@ "@fontsource/opendyslexic": "^4.5.2", "@fontsource/vollkorn": "^4.5.4", "@fontsource/zen-maru-gothic": "^4.5.5", + "@tippyjs/react": "^4.2.6", "markdown-to-jsx": "^7.1.7", "next": "^12.1.0", "react": "17.0.2", "react-dom": "17.0.2", "react-swipeable": "^6.2.0", - "react-tooltip": "^4.2.21", "turndown": "^7.1.1" }, "devDependencies": { diff --git a/postcss.config.js b/postcss.config.js index c8965cb..a1b36d2 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -2,5 +2,5 @@ module.exports = { plugins: { tailwindcss: {}, autoprefixer: {}, - } -} \ No newline at end of file + }, +}; diff --git a/public/README.md b/public/README.md index f42f4a5..4995470 100644 --- a/public/README.md +++ b/public/README.md @@ -21,4 +21,4 @@ Insert the following code in the `head` section of your pages: -*Optional* - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker) \ No newline at end of file +_Optional_ - Check your favicon with the [favicon checker](https://realfavicongenerator.net/favicon_checker) diff --git a/public/html_code.html b/public/html_code.html index a2b5866..cfcf03b 100644 --- a/public/html_code.html +++ b/public/html_code.html @@ -1,10 +1,10 @@ - - - - - - - - - - \ No newline at end of file + + + + + + + + + + diff --git a/run_accords_prettier.sh b/run_accords_prettier.sh new file mode 100755 index 0000000..b19f459 --- /dev/null +++ b/run_accords_prettier.sh @@ -0,0 +1 @@ +npx prettier --end-of-line auto --write . diff --git a/src/components/AppLayout.tsx b/src/components/AppLayout.tsx index 51eab74..4d43c9d 100644 --- a/src/components/AppLayout.tsx +++ b/src/components/AppLayout.tsx @@ -7,9 +7,8 @@ import Head from "next/head"; import { useSwipeable } from "react-swipeable"; import { useRouter } from "next/router"; import Button from "components/Button"; -import { getOgImage, OgImage, prettyLanguage } from "queries/helpers"; +import { getOgImage, OgImage } from "queries/helpers"; import { useMediaCoarse, useMediaMobile } from "hooks/useMediaQuery"; -import ReactTooltip from "react-tooltip"; import { useAppLayout } from "contexts/AppLayoutContext"; import { ImageQuality } from "./Img"; import Popup from "./Popup"; @@ -25,7 +24,6 @@ interface AppLayoutProps extends AppStaticProps { navTitle: string; thumbnail?: StrapiImage; description?: string; - extra?: React.ReactNode; } export default function AppLayout(props: AppLayoutProps): JSX.Element { @@ -56,27 +54,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { }, }); - const mainPanelClass = `fixed desktop:left-0 desktop:top-0 desktop:bottom-0 ${ - appLayout.mainPanelReduced ? "desktop:w-[6rem]" : "desktop:w-[20rem]" - }`; - const subPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:w-[20rem] ${ - appLayout.mainPanelReduced ? " desktop:left-[6rem]" : "desktop:left-[20rem]" - }`; - let contentPanelClass = ""; - if (subPanel) { - contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - appLayout.mainPanelReduced - ? "desktop:left-[26rem]" - : "desktop:left-[40rem]" - }`; - } else if (contentPanel) { - contentPanelClass = `fixed desktop:top-0 desktop:bottom-0 desktop:right-0 ${ - appLayout.mainPanelReduced - ? "desktop:left-[6rem]" - : "desktop:left-[20rem]" - }`; - } - const turnSubIntoContent = subPanel && !contentPanel; const titlePrefix = "Accord’s Library"; @@ -117,6 +94,21 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { // eslint-disable-next-line react-hooks/exhaustive-deps }, [currencySelect]); + let gridCol = ""; + if (props.subPanel) { + if (appLayout.mainPanelReduced) { + gridCol = "grid-cols-[6rem_20rem_1fr]"; + } else { + gridCol = "grid-cols-[20rem_20rem_1fr]"; + } + } else { + if (appLayout.mainPanelReduced) { + gridCol = "grid-cols-[6rem_0px_1fr]"; + } else { + gridCol = "grid-cols-[20rem_0px_1fr]"; + } + } + return (
{`${titlePrefix} - ${ogTitle}`} @@ -159,9 +151,32 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { + {/* Background when navbar is opened */} +
+
{ + appLayout.setMainPanelOpen(false); + appLayout.setSubPanelOpen(false); + }} + >
+
+ {/* Content panel */}
{contentPanel ? ( contentPanel @@ -175,38 +190,15 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { )}
- {/* Background when navbar is opened */} -
-
{ - appLayout.setMainPanelOpen(false); - appLayout.setSubPanelOpen(false); - }} - >
-
- {/* Sub panel */} {subPanel && (
@@ -216,28 +208,14 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element { {/* Main panel */}
- {/* Main panel minimize button*/} -
- appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) - } - > - -
- {/* Navbar */} -
+
{ @@ -413,20 +391,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
- -
- - {props.extra}
); } diff --git a/src/components/Chip.tsx b/src/components/Chip.tsx index f0d117f..e3719a1 100644 --- a/src/components/Chip.tsx +++ b/src/components/Chip.tsx @@ -1,25 +1,14 @@ +import { MouseEventHandler } from "react"; + type ChipProps = { className?: string; children: React.ReactNode; - "data-tip"?: string; - "data-for"?: string; - "data-html"?: boolean; - "data-multiline"?: boolean; }; export default function Chip(props: ChipProps): JSX.Element { return (
{props.children}
diff --git a/src/components/Chronology/ChronologyItemComponent.tsx b/src/components/Chronology/ChronologyItemComponent.tsx index 3864c27..81f1504 100644 --- a/src/components/Chronology/ChronologyItemComponent.tsx +++ b/src/components/Chronology/ChronologyItemComponent.tsx @@ -1,17 +1,23 @@ import Chip from "components/Chip"; +import ToolTip from "components/ToolTip"; import { Enum_Componenttranslationschronologyitem_Status, GetChronologyItemsQuery, + GetWebsiteInterfaceQuery, } from "graphql/operations-types"; +import { getStatusDescription } from "queries/helpers"; export type ChronologyItemComponentProps = { item: GetChronologyItemsQuery["chronologyItems"]["data"][number]; displayYear: boolean; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ChronologyItemComponent( props: ChronologyItemComponentProps ): JSX.Element { + const { langui } = props; + function generateAnchor(year: number, month: number, day: number): string { let result: string = ""; result += year; @@ -85,23 +91,12 @@ export default function ChronologyItemComponent(
{translation.status !== Enum_Componenttranslationschronologyitem_Status.Done && ( - - {translation.status} - + {translation.status} + )} {translation.title ?

{translation.title}

: ""}
diff --git a/src/components/Chronology/ChronologyYearComponent.tsx b/src/components/Chronology/ChronologyYearComponent.tsx index 8136ac0..d4cfbd0 100644 --- a/src/components/Chronology/ChronologyYearComponent.tsx +++ b/src/components/Chronology/ChronologyYearComponent.tsx @@ -1,14 +1,20 @@ import ChronologyItemComponent from "components/Chronology/ChronologyItemComponent"; -import { GetChronologyItemsQuery } from "graphql/operations-types"; +import { + GetChronologyItemsQuery, + GetWebsiteInterfaceQuery, +} from "graphql/operations-types"; type ChronologyYearComponentProps = { year: number; items: GetChronologyItemsQuery["chronologyItems"]["data"][number][]; + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; }; export default function ChronologyYearComponent( props: ChronologyYearComponentProps ): JSX.Element { + const { langui } = props; + return (
))}
diff --git a/src/components/Library/LibraryItemsPreview.tsx b/src/components/Library/LibraryItemsPreview.tsx index 85afd83..ed21e81 100644 --- a/src/components/Library/LibraryItemsPreview.tsx +++ b/src/components/Library/LibraryItemsPreview.tsx @@ -55,7 +55,7 @@ export default function LibraryItemsPreview(

{item.subtitle}

-
+
{item.categories.data.map((category) => ( {category.attributes.short} diff --git a/src/components/Markdown/Markdawn.tsx b/src/components/Markdown/Markdawn.tsx index 6414a1e..cd75fdf 100644 --- a/src/components/Markdown/Markdawn.tsx +++ b/src/components/Markdown/Markdawn.tsx @@ -21,6 +21,38 @@ export default function Markdawn(props: ScenBreakProps): JSX.Element { options={{ slugify: slugify, overrides: { + h2: { + component: (props: { + id: string; + style: React.CSSProperties; + children: React.ReactNode; + }) => { + return ( +

+ {props.children} + + { + navigator.clipboard.writeText( + process.env.NEXT_PUBLIC_URL_SELF + + window.location.pathname + + "#" + + props.id + ); + }} + > + link + + +

+ ); + }, + }, Sep: { component: () => { return
; diff --git a/src/components/Markdown/TOC.tsx b/src/components/Markdown/TOC.tsx index ff0c15f..b963ee1 100644 --- a/src/components/Markdown/TOC.tsx +++ b/src/components/Markdown/TOC.tsx @@ -1,20 +1,23 @@ +import { NextRouter } from "next/router"; import { slugify } from "queries/helpers"; import { preprocessMarkDawn } from "./Markdawn"; type TOCProps = { text: string; title?: string; + router: NextRouter; }; export default function TOC(props: TOCProps): JSX.Element { - const toc = getTocFromMarkdawn(preprocessMarkDawn(props.text), props.title); + const { router, text, title } = props; + const toc = getTocFromMarkdawn(preprocessMarkDawn(text), title); return (

Table of content

  1. - + router.replace(`#${toc.slug}`)}> {{toc.title}}
    2. @@ -25,7 +28,7 @@ export default function TOC(props: TOCProps): JSX.Element { className="my-2 overflow-x-hidden w-full text-ellipsis whitespace-nowrap" > {`${h2Index + 1}. `} - + router.replace(`#${h2.slug}`)}> {{h2.title}} @@ -38,7 +41,7 @@ export default function TOC(props: TOCProps): JSX.Element { {`${h2Index + 1}.${ h3Index + 1 }. `} - + router.replace(`#${h3.slug}`)}> {{h3.title}} diff --git a/src/components/PanelComponents/NavOption.tsx b/src/components/PanelComponents/NavOption.tsx index be793d4..457e0dc 100644 --- a/src/components/PanelComponents/NavOption.tsx +++ b/src/components/PanelComponents/NavOption.tsx @@ -1,14 +1,13 @@ import { useRouter } from "next/router"; import Link from "next/link"; import { MouseEventHandler } from "react"; -import ReactDOMServer from "react-dom/server"; +import ToolTip from "components/ToolTip"; type NavOptionProps = { url: string; icon?: string; title: string; subtitle?: string; - tooltipId?: string; border?: boolean; reduced?: boolean; onClick?: MouseEventHandler; @@ -25,35 +24,38 @@ export default function NavOption(props: NavOptionProps): JSX.Element { } ${isActive ? divActive : ""}`; return ( - -
    -

    {props.title}

    - {props.subtitle && ( -

    {props.subtitle}

    - )} -
    - )} - data-for={props.tooltipId} - className={`grid grid-flow-col grid-cols-[auto] auto-cols-fr justify-center ${ - props.icon ? "text-left" : "text-center" - } ${divCommon}`} - > - {props.icon && ( - {props.icon} - )} + +

    {props.title}

    + {props.subtitle &&

    {props.subtitle}

    } +
+ } + placement="right" + className="text-left" + disabled={!props.reduced} + > + +
+ {props.icon && ( + {props.icon} + )} - {!props.reduced && ( -
-

{props.title}

- {props.subtitle &&

{props.subtitle}

} -
- )} -
- + {!props.reduced && ( +
+

{props.title}

+ {props.subtitle && ( +

{props.subtitle}

+ )} +
+ )} +
+ + ); } diff --git a/src/components/Panels/MainPanel.tsx b/src/components/Panels/MainPanel.tsx index 5ea88c6..a705e48 100644 --- a/src/components/Panels/MainPanel.tsx +++ b/src/components/Panels/MainPanel.tsx @@ -7,6 +7,7 @@ import { GetWebsiteInterfaceQuery } from "graphql/operations-types"; import Markdown from "markdown-to-jsx"; import { useMediaDesktop } from "hooks/useMediaQuery"; import { useAppLayout } from "contexts/AppLayoutContext"; +import ToolTip from "components/ToolTip"; type MainPanelProps = { langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"]; @@ -24,6 +25,20 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { appLayout.mainPanelReduced && isDesktop && "px-4" }`} > + {/* Reduce/expand main menu */} +
+ appLayout.setMainPanelReduced(!appLayout.mainPanelReduced) + } + > + +
+
@@ -48,49 +63,74 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { : "flex-row" } flex-wrap gap-2`} > - - - {router.locale && ( + + + {router.locale && ( + {"Change language"}} + placement="right" + className="text-left" + disabled={!appLayout.mainPanelReduced} + > + + )} - + + search + + +
@@ -102,7 +142,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { icon="library_books" title={langui.library} subtitle={langui.library_short_description} - tooltipId="MainPanelTooltip" reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -112,7 +151,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { icon="workspaces" title={langui.contents} subtitle={langui.contents_short_description} - tooltipId="MainPanelTooltip" reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -124,7 +162,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { icon="travel_explore" title={langui.wiki} subtitle={langui.wiki_short_description} - tooltipId="MainPanelTooltip" + reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -134,7 +172,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { icon="watch_later" title={langui.chronicles} subtitle={langui.chronicles_short_description} - tooltipId="MainPanelTooltip" + reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -147,7 +185,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { url="/news" icon="feed" title={langui.news} - tooltipId="MainPanelTooltip" reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -156,7 +193,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { url="/merch" icon="store" title={langui.merch} - tooltipId="MainPanelTooltip" + reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -167,7 +204,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { url="/gallery" icon="collections" title={langui.gallery} - tooltipId="MainPanelTooltip" reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -178,7 +214,7 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { url="/archives" icon="inventory" title={langui.archives} - tooltipId="MainPanelTooltip" + reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> @@ -190,7 +226,6 @@ export default function MainPanel(props: MainPanelProps): JSX.Element { url="/about-us" icon="info" title={langui.about_us} - tooltipId="MainPanelTooltip" reduced={appLayout.mainPanelReduced && isDesktop} onClick={() => appLayout.setMainPanelOpen(false)} /> diff --git a/src/components/Panels/SubPanel.tsx b/src/components/Panels/SubPanel.tsx index 89f2584..be36a28 100644 --- a/src/components/Panels/SubPanel.tsx +++ b/src/components/Panels/SubPanel.tsx @@ -4,7 +4,7 @@ type SubPanelProps = { export default function SubPanel(props: SubPanelProps): JSX.Element { return ( -
+
{props.children}
); diff --git a/src/components/Popup.tsx b/src/components/Popup.tsx index c0fc59a..c9a30e1 100644 --- a/src/components/Popup.tsx +++ b/src/components/Popup.tsx @@ -11,7 +11,9 @@ export default function Popup(props: PopupProps): JSX.Element { return (
{recorder.attributes.avatar.data && ( @@ -52,14 +52,14 @@ export default function RecorderChip(props: RecorderChipProps): JSX.Element { recorder.attributes.bio[0].bio}

- )} - data-for={"RecordersTooltip"} - data-multiline - data-html + } + placement="top" > - {recorder.attributes.anonymize - ? `Recorder#${recorder.attributes.anonymous_code}` - : recorder.attributes.username} - + + {recorder.attributes.anonymize + ? `Recorder#${recorder.attributes.anonymous_code}` + : recorder.attributes.username} + + ); } diff --git a/src/components/ToolTip.tsx b/src/components/ToolTip.tsx new file mode 100644 index 0000000..aafea75 --- /dev/null +++ b/src/components/ToolTip.tsx @@ -0,0 +1,19 @@ +import Tippy, { TippyProps } from "@tippyjs/react"; +import "tippy.js/animations/scale-subtle.css"; + +interface ToolTipProps extends TippyProps {} + +export default function ToolTip(props: ToolTipProps): JSX.Element { + let newProps = { ...props }; + + // Set defaults + if (newProps.delay === undefined) newProps.delay = [150, 0]; + if (newProps.interactive === undefined) newProps.interactive = true; + if (newProps.animation === undefined) newProps.animation = "scale-subtle"; + + return ( + +
{props.children}
+ + ); +} diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 1d10540..b073451 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -2,7 +2,7 @@ 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/opendyslexic/400.css"; import "@fontsource/material-icons"; import { AppContextProvider } from "contexts/AppLayoutContext"; diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index a8304bc..506d91b 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -16,7 +16,6 @@ class MyDocument extends Document { return ( - {prettyLanguage( - content.text_set[0].source_language.data.attributes.code + content.text_set[0].source_language.data.attributes.code, + languages )}
@@ -77,23 +79,12 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {

{langui.status}:

- - {content.text_set[0].status} - + {content.text_set[0].status} +
{content.text_set[0].transcribers.data.length > 0 && ( @@ -148,6 +139,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { 0 ? prettyinlineTitle( @@ -183,32 +175,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element { ); - const extra = ( - <> - - - - - ); - return ( 0 ? content.type.data.attributes.titles[0].title diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 5bdd564..d65e0d6 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,6 +15,13 @@ export default function Home(props: HomeProps): JSX.Element { const { post } = props; const contentPanel = ( +
+
+

Accord’s Library

+

+ Discover • Analyse • Translate • Archive +

+
{post.translations.length > 0 && ( )} diff --git a/src/pages/wiki/chronology.tsx b/src/pages/wiki/chronology.tsx index b006c03..f31f9e4 100644 --- a/src/pages/wiki/chronology.tsx +++ b/src/pages/wiki/chronology.tsx @@ -16,7 +16,6 @@ import { } from "queries/helpers"; import InsetBox from "components/InsetBox"; import { useRouter } from "next/router"; -import ReactTooltip from "react-tooltip"; import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps"; interface ChronologyProps extends AppStaticProps { @@ -26,7 +25,7 @@ interface ChronologyProps extends AppStaticProps { export default function Chronology(props: ChronologyProps): JSX.Element { useTesting(props); - const { chronologyItems, chronologyEras } = props; + const { chronologyItems, chronologyEras, langui } = props; // Group by year the Chronology items let chronologyItemYearGroups: GetChronologyItemsQuery["chronologyItems"]["data"][number][][][] = @@ -103,20 +102,11 @@ export default function Chronology(props: ChronologyProps): JSX.Element { key={`${eraIndex}-${index}`} year={items[0].attributes.year} items={items} + langui={langui} /> ))} ))} - - ); diff --git a/src/queries/helpers.ts b/src/queries/helpers.ts index bbf5786..9e7200c 100644 --- a/src/queries/helpers.ts +++ b/src/queries/helpers.ts @@ -4,7 +4,9 @@ import { ImageQuality, } from "components/Img"; import { + Enum_Componentsetstextset_Status, GetCurrenciesQuery, + GetLanguagesQuery, GetLibraryItemQuery, GetLibraryItemsPreviewQuery, GetWebsiteInterfaceQuery, @@ -138,23 +140,16 @@ export function prettyItemSubType(metadata: { } } -export function prettyLanguage(code: string): string { - switch (code) { - case "en": - return "English"; - case "es": - return "Español"; - case "fr": - return "Français"; - case "ja": - return "日本語"; - case "en": - return "English"; - case "xx": - return "██"; - default: - return code; - } +export function prettyLanguage( + code: string, + languages: GetLanguagesQuery["languages"]["data"] +): string { + let result = code; + languages.forEach((language) => { + if (language.attributes.code === code) + result = language.attributes.localized_name; + }); + return result; } export function prettyTestWarning( @@ -257,6 +252,28 @@ export function sortContent( }); } +export function getStatusDescription( + status: string, + langui: GetWebsiteInterfaceQuery["websiteInterfaces"]["data"][number]["attributes"] +): string { + switch (status) { + case Enum_Componentsetstextset_Status.Incomplete: + return langui.status_incomplete; + + case Enum_Componentsetstextset_Status.Draft: + return langui.status_draft; + + case Enum_Componentsetstextset_Status.Review: + return langui.status_review; + + case Enum_Componentsetstextset_Status.Done: + return langui.status_done; + + default: + return ""; + } +} + export function slugify(str: string): string { return str .replace(/[ÀÁÂÃÄÅàáâãäåæÆ]/g, "a") diff --git a/src/tailwind.css b/src/tailwind.css index a17a243..e4a8203 100644 --- a/src/tailwind.css +++ b/src/tailwind.css @@ -17,7 +17,7 @@ } a { - @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark; + @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark hover:text-dark cursor-pointer; } *::selection { @@ -25,7 +25,7 @@ } mark { - @apply bg-mid px-2 + @apply bg-mid px-2; } /* SCROLLBARS STYLING */ @@ -142,3 +142,66 @@ @apply [background-image:var(--theme-texture-dots)] [background-blend-mode:var(--theme-texture-dots-blend)] bg-local bg-[length:10cm]; } } + +.tippy-box[data-animation="fade"][data-state="hidden"] { + @apply opacity-0; +} +[data-tippy-root] { + max-width: calc(100vw - 10px); +} +.tippy-box { + @apply relative bg-light drop-shadow-shade-xl rounded-lg transition-[transform,_visibility,_opacity]; +} +.tippy-box[data-placement^="top"] > .tippy-arrow { + @apply bottom-0; +} +.tippy-box[data-placement^="top"] > .tippy-arrow:before { + bottom: -7px; + left: 0; + border-width: 8px 8px 0; + border-top-color: initial; + transform-origin: center top; +} +.tippy-box[data-placement^="bottom"] > .tippy-arrow { + top: 0; +} +.tippy-box[data-placement^="bottom"] > .tippy-arrow:before { + top: -7px; + left: 0; + border-width: 0 8px 8px; + border-bottom-color: initial; + transform-origin: center bottom; +} +.tippy-box[data-placement^="left"] > .tippy-arrow { + right: 0; +} +.tippy-box[data-placement^="left"] > .tippy-arrow:before { + border-width: 8px 0 8px 8px; + border-left-color: initial; + right: -7px; + transform-origin: center left; +} +.tippy-box[data-placement^="right"] > .tippy-arrow { + left: 0; +} +.tippy-box[data-placement^="right"] > .tippy-arrow:before { + left: -7px; + border-width: 8px 8px 8px 0; + border-right-color: initial; + transform-origin: center right; +} +.tippy-box[data-inertia][data-state="visible"] { + transition-timing-function: cubic-bezier(0.54, 1.5, 0.38, 1.11); +} +.tippy-arrow { + @apply h-4 w-4 text-light; +} +.tippy-arrow:before { + content: ""; + position: absolute; + border-color: transparent; + border-style: solid; +} +.tippy-content { + @apply relative px-6 py-4 z-10; +} diff --git a/tailwind.config.js b/tailwind.config.js index 0f9f6b4..5beab85 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -72,7 +72,6 @@ module.exports = { }, }, plugins: [ - plugin(function ({ addUtilities }) { addUtilities({ ".set-theme-light": {