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
-
-
+ router.replace(`#${toc.slug}`)}>
{{toc.title}}
@@ -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": {