From 337bec045ad6ac99685659cdad6a528ba0a65f60 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 28 Nov 2023 16:30:00 +0100 Subject: [PATCH 01/13] footer update --- pwa/src/apiService/apiService.ts | 2 +- pwa/src/hooks/footerContent.ts | 3 ++- .../templateParts/footer/FooterTemplate.tsx | 12 ++++-------- pwa/static/.env.development | 1 + pwa/static/.env.production | 1 + 5 files changed, 9 insertions(+), 10 deletions(-) diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts index a907529..9e30f11 100644 --- a/pwa/src/apiService/apiService.ts +++ b/pwa/src/apiService/apiService.ts @@ -32,7 +32,7 @@ export default class APIService { public get FooterContentClient(): AxiosInstance { return axios.create({ - baseURL: removeFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL), + baseURL: removeFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL), }); } diff --git a/pwa/src/hooks/footerContent.ts b/pwa/src/hooks/footerContent.ts index 78f6f62..fd5afb8 100644 --- a/pwa/src/hooks/footerContent.ts +++ b/pwa/src/hooks/footerContent.ts @@ -8,7 +8,8 @@ import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/Fo export const useFooterContent = () => { const API: APIService | null = React.useContext(APIContext); - const fileName = getFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL); + const fileName = getFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL); + const getContent = () => useQuery(["footer-content", fileName], () => API?.FooterContent.getContent(fileName), { diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index d5f3b30..188e06b 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -66,19 +66,15 @@ export const FooterTemplate: React.FC = () => {
- {footerContent?.map((content, idx) => ( - - ))} + {footerContent?.map((content, idx) => )}
- {window.sessionStorage.getItem("FOOTER_LOGO_URL") !== "false" && ( + {process.env.GATSBY_FOOTER_LOGO_URL !== "false" && ( - window.sessionStorage.getItem("FOOTER_LOGO_HREF") - ? open(window.sessionStorage.getItem("FOOTER_LOGO_HREF") ?? "") - : navigate("/") + process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF ?? "") : navigate("/") } /> )} @@ -95,7 +91,7 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) return (
- + {content.items.map((item, idx) => (
diff --git a/pwa/static/.env.development b/pwa/static/.env.development index eba7470..c3e6600 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -14,6 +14,7 @@ GATSBY_NAVBAR_LOGO_URL=https://conduction.nl/wp-content/uploads/2021/07/cropped- # Footer GATSBY_FOOTER_LOGO_URL=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg== GATSBY_FOOTER_LOGO_HREF=https://conduction.nl +GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json" # Jumbotron GATSBY_JUMBOTRON_TITLE=Common Gateway diff --git a/pwa/static/.env.production b/pwa/static/.env.production index 3595a49..65e3813 100644 --- a/pwa/static/.env.production +++ b/pwa/static/.env.production @@ -14,6 +14,7 @@ GATSBY_NAVBAR_LOGO_URL= # Footer GATSBY_FOOTER_LOGO_URL= GATSBY_FOOTER_LOGO_HREF= +GASTBY_FOOTER_CONTENT= # Jumbotron GATSBY_JUMBOTRON_TITLE= From e3a07d9a472be0065f3052fdfb089097fb01d0e5 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 11:22:52 +0100 Subject: [PATCH 02/13] footer udpate --- pwa/src/templates/templateParts/footer/FooterContent.json | 5 +---- .../templateParts/footer/FooterTemplate.module.css | 8 ++++++++ pwa/src/templates/templateParts/footer/FooterTemplate.tsx | 7 ++++--- 3 files changed, 13 insertions(+), 7 deletions(-) diff --git a/pwa/src/templates/templateParts/footer/FooterContent.json b/pwa/src/templates/templateParts/footer/FooterContent.json index 76d3785..caf699c 100644 --- a/pwa/src/templates/templateParts/footer/FooterContent.json +++ b/pwa/src/templates/templateParts/footer/FooterContent.json @@ -12,10 +12,7 @@ "ariaLabel": "Documentation", "value": "Documentation", "link": "https://commongateway.readthedocs.io/en/latest/", - "customIcon": { - "icon": "", - "placement": "left" - } + "icon": { "prefix": "fab", "icon": "readthedocs", "placement": "left" } }, { "ariaLabel": "Slack", diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css index de6400f..83ad677 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css @@ -118,6 +118,14 @@ color: var(--utrecht-page-footer-icon-color, inherit); } +.customIcon > svg > path { + fill: var(--utrecht-page-footer-icon-color, var(--utrecht-page-footer-color)); +} + +a:hover .customIcon > svg > path { + fill: var(--utrecht-page-footer-link-hover-color, var(--utrecht-page-footer-color)); +} + @media only screen and (max-width: 992px) { /* Tablet */ .contentGrid { diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index 188e06b..ca487f1 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -1,6 +1,7 @@ import * as React from "react"; import * as styles from "./FooterTemplate.module.css"; import parse from "html-react-parser"; +import clsx from "clsx"; import { PageFooter, Link, @@ -187,7 +188,7 @@ const ExternalLink: React.FC = ({ item }) => { aria-label={`${t(item.ariaLabel)}, ${t("Opens a new window")}`} > {item.customIcon && item.customIcon.placement === "left" && ( - {parse(item.customIcon.icon)} + {parse(item.customIcon.icon)} )} {item.icon && item.icon.placement === "left" && ( @@ -261,7 +262,7 @@ const InternalMarkdownLink: React.FC = ({ item }) => { )} {item.customIcon && item.customIcon.placement === "left" && ( - {parse(item.customIcon.icon)} + {parse(item.customIcon.icon)} )} {t(item.value)} @@ -271,7 +272,7 @@ const InternalMarkdownLink: React.FC = ({ item }) => { )} {item.customIcon && item.customIcon.placement === "right" && ( - {parse(item.customIcon.icon)} + {parse(item.customIcon.icon)} )} ); From 4c0c2abffbd8a8e3b10cfd9972c004ab8fa4f355 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:06:04 +0100 Subject: [PATCH 03/13] added api service --- pwa/package.json | 22 +- pwa/src/apiService/apiService.ts | 16 +- pwa/src/apiService/resources/headerContent.ts | 18 + pwa/src/assets/customIcons/fa-readthedocs.tsx | 11 + pwa/src/assets/customIcons/index.tsx | 3 + pwa/src/context/gatsby.ts | 4 + pwa/src/hooks/headerContent.ts | 25 ++ pwa/src/hooks/useHeaderTopNavItems.ts | 111 +++++ pwa/src/layout/Head.tsx | 7 +- pwa/src/layout/Layout.tsx | 46 ++- pwa/src/services/getScreenSize.ts | 7 + .../JumbotronTemplate.module.css | 12 + .../templateParts/header/HeaderContent.json | 382 ++++++++++++++++++ pwa/src/translations/en.ts | 1 + pwa/src/translations/nl.ts | 1 + 15 files changed, 640 insertions(+), 26 deletions(-) create mode 100644 pwa/src/apiService/resources/headerContent.ts create mode 100644 pwa/src/assets/customIcons/fa-readthedocs.tsx create mode 100644 pwa/src/assets/customIcons/index.tsx create mode 100644 pwa/src/hooks/headerContent.ts create mode 100644 pwa/src/hooks/useHeaderTopNavItems.ts create mode 100644 pwa/src/services/getScreenSize.ts create mode 100644 pwa/src/templates/templateParts/header/HeaderContent.json diff --git a/pwa/package.json b/pwa/package.json index ecd9ab8..0938e58 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -22,12 +22,12 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.30", - "@conduction/theme": "1.0.55", - "@fortawesome/fontawesome-svg-core": "^6.4.2", - "@fortawesome/free-solid-svg-icons": "^6.4.2", - "@fortawesome/free-brands-svg-icons": "6.4.2", - "@fortawesome/free-regular-svg-icons": "^6.4.2", + "@conduction/components": "2.2.38", + "@conduction/theme": "1.0.56", + "@fortawesome/fontawesome-svg-core": "^6.5.0", + "@fortawesome/free-solid-svg-icons": "^6.5.0", + "@fortawesome/free-brands-svg-icons": "6.5.0", + "@fortawesome/free-regular-svg-icons": "^6.5.0", "@fortawesome/react-fontawesome": "^0.2.0", "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.128", "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.121", @@ -56,7 +56,7 @@ "@nl-design-system-unstable/zevenaar-design-tokens": "^1.0.0-alpha.121", "@nl-design-system-unstable/zwolle-design-tokens": "^1.0.0-alpha.121", "@tabler/icons-react": "2.42.0", - "@types/react": "^18.2.38", + "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "@utrecht/design-tokens": "^1.0.0-alpha.607", "@utrecht/web-component-library-react": "^1.0.2", @@ -69,7 +69,7 @@ "gatsby-plugin-breadcrumb": "^12.3.2", "gatsby-plugin-layout": "^4.12.0", "html-react-parser": "^5.0.6", - "i18next": "^23.7.6", + "i18next": "^23.7.7", "jwt-decode": "^4.0.0", "lodash": "^4.17.21", "react": "^18.2.0", @@ -89,10 +89,10 @@ "@parcel/watcher": "^2.3.0", "@types/dateformat": "^5.0.2", "@types/dedent": "^0.7.2", - "@types/node": "^20.9.4", + "@types/node": "^20.10.0", "@types/react-helmet": "^6.1.9", - "@typescript-eslint/eslint-plugin": "^6.12.0", - "@typescript-eslint/parser": "^6.12.0", + "@typescript-eslint/eslint-plugin": "^6.13.1", + "@typescript-eslint/parser": "^6.13.1", "eslint": "^8.54.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-react": "^7.33.2", diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts index 9e30f11..d4b23eb 100644 --- a/pwa/src/apiService/apiService.ts +++ b/pwa/src/apiService/apiService.ts @@ -1,11 +1,13 @@ import axios, { AxiosInstance, AxiosResponse } from "axios"; -import toast from "react-hot-toast"; -import { removeFileNameFromUrl } from "../services/FileNameFromUrl"; import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate"; +import { removeFileNameFromUrl } from "../services/FileNameFromUrl"; +import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate"; +import toast from "react-hot-toast"; // Resources import GitHub from "./resources/gitHub"; import FooterContent from "./resources/footerContent"; +import HeaderContent from "./resources/headerContent"; interface PromiseMessage { loading?: string; @@ -36,6 +38,12 @@ export default class APIService { }); } + public get HeaderContentClient(): AxiosInstance { + return axios.create({ + baseURL: removeFileNameFromUrl(process.env.GATSBY_HEADER_CONTENT ?? DEFAULT_HEADER_CONTENT_URL), + }); + } + public get GitHub(): GitHub { return new GitHub(this.gitHubClient, this.Send); } @@ -44,6 +52,10 @@ export default class APIService { return new FooterContent(this.FooterContentClient, this.Send); } + public get HeaderContent(): HeaderContent { + return new HeaderContent(this.HeaderContentClient, this.Send); + } + // Send method public Send: TSendFunction = (instance, method, endpoint, payload, promiseMessage) => { const _payload = JSON.stringify(payload); diff --git a/pwa/src/apiService/resources/headerContent.ts b/pwa/src/apiService/resources/headerContent.ts new file mode 100644 index 0000000..ac5ee8e --- /dev/null +++ b/pwa/src/apiService/resources/headerContent.ts @@ -0,0 +1,18 @@ +import { TSendFunction } from "../apiService"; +import { AxiosInstance } from "axios"; + +export default class HeaderContent { + private _instance: AxiosInstance; + private _send: TSendFunction; + + constructor(_instance: AxiosInstance, send: TSendFunction) { + this._instance = _instance; + this._send = send; + } + + public getContent = async (fileName: string): Promise => { + const { data } = await this._send(this._instance, "GET", fileName); + + return data; + }; +} diff --git a/pwa/src/assets/customIcons/fa-readthedocs.tsx b/pwa/src/assets/customIcons/fa-readthedocs.tsx new file mode 100644 index 0000000..be2dd93 --- /dev/null +++ b/pwa/src/assets/customIcons/fa-readthedocs.tsx @@ -0,0 +1,11 @@ +export const faReadTheDocs = { + prefix: "fab", + iconName: "readthedocs", + icon: [ + 64, + 64, + [], + "e001", + "M28.81,30.85c-.74.08-1.314.678-1.365,1.42s.436,1.413,1.157,1.594c0,0,3.736,1.25,10.097,1.763c5.108.417,10.9-.353,10.9-.353.6.008,1.15-.334,1.407-.876s.175-1.184-.21-1.644-1.004-.652-1.582-.493c0,0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742,0l-.001-.128Zm0-7.6c-.704.113-1.238.696-1.288,1.408s.398,1.364,1.08,1.573c0,0,3.736,1.25,10.097,1.763c5.108.417,10.9-.353,10.9-.353.544-.07,1-.423,1.223-.928s.14-1.086-.193-1.523-.87-.663-1.416-.594c0,0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742,0v-.063Zm0-7.604c-.74.08-1.314.678-1.365,1.42s.436,1.413,1.157,1.594c0,0,3.736,1.218,10.097,1.763c5.108.417,10.9-.353,10.9-.353.544-.07,1-.423,1.223-.928s.14-1.086-.193-1.523-.87-.663-1.416-.594c0,0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742,0v-.096Zm0-7.604c-.74.08-1.314.678-1.365,1.42s.436,1.413,1.157,1.594c0,0,3.736,1.25,10.097,1.763c5.108.417,10.9-.353,10.9-.353.6.008,1.15-.334,1.407-.876s.175-1.184-.21-1.644-1.004-.652-1.582-.493c0,0-5.666.705-10.276.32-6.07-.48-9.385-1.603-9.385-1.603-.244-.06-.5-.06-.742,0l-.001-.128ZM18.16,0.024c-8,0-10.966,2.5-10.966,2.5v59.667c0,0,2.907-2.5,12.265-2.116s11.288,3.664,22.79,3.895c11.5.32,14.392-1.763,14.392-1.763l.167-60.828c0,0-5.178,1.476-15.25,1.541-10.072,0-12.493-2.566-21.738-2.886-.552091-.020487-1.10453-.030155-1.657-.029l-.003.019Zm6.685,3.895c0,0,4.84,1.603,13.784,2.052c7.558.385,15.137-.737,15.137-.737v54.06c0,0-3.836,2.02-13.425,1.314-7.43-.545-15.607-3.344-15.607-3.344l.111-53.345Zm-4.668,1.4c.86,0,1.555.696,1.555,1.555s-.696,1.555-1.555,1.555c0,0-2.504.013-4.033.32-2.567.32-4.31,1.186-4.31,1.186-.49.308-1.113.315-1.61.02s-.788-.847-.75-1.425.394-1.087.926-1.318c0,0,2.273-1.186,5.442-1.507c1.83-.32,4.337-.32,4.337-.32l-.002-.066Zm-1.492,7.623c.497238-.013769.994762-.013769,1.492,0c.8.068,1.413.737,1.413,1.54s-.614,1.47-1.413,1.54c0,0-2.504.013-4.033.32-2.567.32-4.31,1.186-4.31,1.186-.74.322-1.605.02-1.982-.696s-.14-1.6.546-2.03c0,0,2.273-1.218,5.442-1.507.916,0,2,0,2.845-.32v-.033Zm1.492,7.597c.86,0,1.555.696,1.555,1.555s-.696,1.555-1.555,1.555c0,0-2.504-.016-4.033,0-2.567.32-4.31,1.186-4.31,1.186-.74.322-1.605.02-1.982-.696s-.14-1.6.546-2.03c0,0,2.273-1.186,5.442-1.507c1.83-.32,4.337-.32,4.337-.32v.257Z", + ], +}; diff --git a/pwa/src/assets/customIcons/index.tsx b/pwa/src/assets/customIcons/index.tsx new file mode 100644 index 0000000..3831035 --- /dev/null +++ b/pwa/src/assets/customIcons/index.tsx @@ -0,0 +1,3 @@ +import { faReadTheDocs } from "./fa-readthedocs"; + +export { faReadTheDocs }; diff --git a/pwa/src/context/gatsby.ts b/pwa/src/context/gatsby.ts index 6b54b7e..f905d52 100644 --- a/pwa/src/context/gatsby.ts +++ b/pwa/src/context/gatsby.ts @@ -1,14 +1,18 @@ import * as React from "react"; import { GlobalContext } from "./global"; +export type TScreenSize = "mobile" | "tablet" | "desktop"; + export interface IGatsbyContext { pageContext: any; location: any; + screenSize: TScreenSize; } export const defaultGatsbyContext: IGatsbyContext = { pageContext: null, location: null, + screenSize: "desktop", }; export const useGatsbyContext = () => { diff --git a/pwa/src/hooks/headerContent.ts b/pwa/src/hooks/headerContent.ts new file mode 100644 index 0000000..15ee8bc --- /dev/null +++ b/pwa/src/hooks/headerContent.ts @@ -0,0 +1,25 @@ +import * as React from "react"; +import { useQuery } from "react-query"; +import APIService from "../apiService/apiService"; +import APIContext from "../apiService/apiContext"; +import { getFileNameFromUrl } from "../services/FileNameFromUrl"; +import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate"; + +export const useHeaderContent = () => { + const API: APIService | null = React.useContext(APIContext); + + const fileName = getFileNameFromUrl( + process.env.GATSBY_HEADER_CONTENT !== undefined && process.env.GATSBY_HEADER_CONTENT.length !== 0 + ? process.env.GATSBY_HEADER_CONTENT + : DEFAULT_HEADER_CONTENT_URL, + ); + + const getContent = () => + useQuery(["contents", fileName], () => API?.HeaderContent.getContent(fileName), { + onError: (error) => { + console.warn(error.message); + }, + }); + + return { getContent }; +}; diff --git a/pwa/src/hooks/useHeaderTopNavItems.ts b/pwa/src/hooks/useHeaderTopNavItems.ts new file mode 100644 index 0000000..9c33027 --- /dev/null +++ b/pwa/src/hooks/useHeaderTopNavItems.ts @@ -0,0 +1,111 @@ +import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav"; +import { useGatsbyContext } from "../context/gatsby"; +import { navigate } from "gatsby"; +import { useTranslation } from "react-i18next"; + +export type THeaderTopNavItem = { + label: string; + type: "markdown" | "internal" | "external"; + current: { + pathname: string; + filterCondition?: { + filterKey: string; + value: string; + }; + }; + icon?: JSX.Element; + showToolTip?: boolean; + handleClick?: { + link: string; + setFilter?: { + filterKey: string; + value: string; + }; + }; +}; + +export const useHeaderTopNavItems = (data: THeaderTopNavItem[]) => { + const { gatsbyContext } = useGatsbyContext(); + const { t } = useTranslation(); + + const headerTopNavItems: ITopNavItem[] = []; + + data?.map((item: any) => { + const isCurrent = (current: any) => { + const prefixedPathname = + process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true" + ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}` + : current.pathname; + + const isCurrentRoute = (): boolean => { + if (prefixedPathname === gatsbyContext.location.pathname) return true; + + if (current.pathname !== "/") return gatsbyContext.location.pathname.includes(current.pathname); + + return false; + }; + + if (!current.filterCondition) { + return isCurrentRoute(); + } + }; + + const getOnClick = ( + onClick: any, + type: "markdown" | "readme" | "internal" | "external" | "internalMarkdown", + label: string, + ) => { + if (!onClick || !type || !label) return; + + if (onClick.link && !onClick.setFilter) { + if (type === "internal") { + navigate(onClick.link); + } + + if (type === "external") { + open(onClick.link); + } + + if (type === "markdown" || type === "readme") { + navigate(`/github/${label.replaceAll(" ", "_")}/?link=${onClick.link}`); + } + } + + if (!onClick.link && onClick.internalMarkdown) { + if (type === "internalMarkdown") { + navigate(`/pages/${onClick.internalMarkdown.directoryName}/${onClick.internalMarkdown.fileName}`); + } + } + }; + + const setSubItems = (subItems: ITopNavItem[]) => { + if (!subItems) return; + const subItemsArray: ITopNavItem[] = []; + + subItems.map((item: any) => { + subItemsArray.push({ + label: t(item.label), + type: item.type, + showToolTip: item.showToolTip === "true" ? true : false, + current: item.current ? isCurrent(item.current) : false, + handleClick: () => getOnClick(item.handleClick, item.type, item.label), + }); + }); + + const subItemsObject = Object.assign(subItemsArray); + + return subItemsObject; + }; + + headerTopNavItems.push({ + label: t(item.label), + type: item.type, + icon: item.icon, + current: item.current ? isCurrent(item.current) : false, + handleClick: () => getOnClick(item.handleClick, item.type, item.label), + subItems: setSubItems(item.subItems), + }); + }); + + return { headerTopNavItems }; +}; diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx index c537e62..46aa64c 100644 --- a/pwa/src/layout/Head.tsx +++ b/pwa/src/layout/Head.tsx @@ -7,9 +7,14 @@ import { useGatsbyContext } from "../context/gatsby"; export const Head: React.FC = () => { const { gatsbyContext } = useGatsbyContext(); + const theme = process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "conduction-theme"; return ( - + {`${process.env.GATSBY_PAGE_TITLE ? `${process.env.GATSBY_PAGE_TITLE}` : "Product Page"} | ${ getPageTitle(gatsbyContext.pageContext?.breadcrumb.crumbs, gatsbyContext.location) ?? "Error" }`} diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index 78e22dd..a320fd0 100644 --- a/pwa/src/layout/Layout.tsx +++ b/pwa/src/layout/Layout.tsx @@ -7,12 +7,18 @@ import APIService from "../apiService/apiService"; import { defaultGlobalContext, GlobalProvider, IGlobalContext } from "../context/global"; import { Head } from "./Head"; import { Content } from "../Content"; -import { Document } from "@utrecht/component-library-react/dist/css-module"; +import { Document, Surface } from "@utrecht/component-library-react/dist/css-module"; import { Toaster } from "react-hot-toast"; -import { IconPack, library } from "@fortawesome/fontawesome-svg-core"; +import { IconDefinition, IconPack, library, dom } from "@fortawesome/fontawesome-svg-core"; import { fas } from "@fortawesome/free-solid-svg-icons"; import { fab } from "@fortawesome/free-brands-svg-icons"; import { far } from "@fortawesome/free-regular-svg-icons"; +import { TScreenSize } from "../context/gatsby"; +import { getScreenSize } from "../services/getScreenSize"; +import { faReadTheDocs } from "../assets/customIcons"; +import { ToolTip } from "@conduction/components"; + +export const TOOLTIP_ID = "cb8f47c3-7151-4a46-954d-784a531b01e6"; interface LayoutProps { children: React.ReactNode; @@ -23,22 +29,34 @@ interface LayoutProps { const Layout: React.FC = ({ children, pageContext, location }) => { const [API, setAPI] = React.useState(React.useContext(APIContext)); const [globalContext, setGlobalContext] = React.useState(defaultGlobalContext); + const [screenSize, setScreenSize] = React.useState("mobile"); + + library.add(fas, fab as IconPack, far as IconPack, faReadTheDocs as IconDefinition); - library.add(fas, fab as IconPack, far as IconPack); + dom.watch(); React.useEffect(() => { + // initiate API Service setAPI(new APIService()); - }, [pageContext]); + + // initiate screen size watcher + const handleWindowResize = () => { + setScreenSize(getScreenSize(window.innerWidth)); + }; + window.addEventListener("resize", handleWindowResize); + + () => window.removeEventListener("resize", handleWindowResize); + }, []); React.useEffect(() => { setGlobalContext((context) => ({ ...context, initiated: true, gatsby: { - ...{ pageContext, location, previousPath: location.pathname }, + ...{ pageContext, location, previousPath: location.pathname, screenSize: getScreenSize(window.innerWidth) }, }, })); - }, [pageContext, location]); + }, [pageContext, location, screenSize]); if (!globalContext.initiated) return <>; @@ -47,13 +65,17 @@ const Layout: React.FC = ({ children, pageContext, location }) => { - - + + + + + -
- -
- +
+ +
+ + diff --git a/pwa/src/services/getScreenSize.ts b/pwa/src/services/getScreenSize.ts new file mode 100644 index 0000000..b772854 --- /dev/null +++ b/pwa/src/services/getScreenSize.ts @@ -0,0 +1,7 @@ +import { TScreenSize } from "../context/gatsby"; + +export const getScreenSize = (screenSize: number): TScreenSize => { + if (screenSize <= 576) return "mobile"; + if (screenSize <= 992) return "tablet"; + return "desktop"; +}; diff --git a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.module.css b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.module.css index 98c3948..5207eec 100644 --- a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.module.css +++ b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.module.css @@ -32,3 +32,15 @@ width: 50% !important; object-fit: contain; } + +@media only screen and (max-width: 576px) { + /* Mobile */ + .container { + display: block; + } + + .image { + width: 100% !important; + object-fit: contain; + } +} diff --git a/pwa/src/templates/templateParts/header/HeaderContent.json b/pwa/src/templates/templateParts/header/HeaderContent.json new file mode 100644 index 0000000..fc096e8 --- /dev/null +++ b/pwa/src/templates/templateParts/header/HeaderContent.json @@ -0,0 +1,382 @@ +[ + { + "label": "Home", + "type": "internal", + "current": { + "pathname": "/" + }, + "handleClick": { + "link": "/" + } + }, + { + "label": "Features", + "current": { + "pathname": "/Features" + }, + "subItems": [ + { + "label": "API", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/API" + }, + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "API" + } + } + }, + { + "label": "Action Handlers", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Action_handlers" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Action_handlers" + } + } + }, + { + "label": "Architecture", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Architecture" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Architecture" + } + } + }, + { + "label": "Authentication", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Authentication" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Authentication" + } + } + }, + { + "label": "Code Quality", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Code_quality" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Code_quality" + } + } + }, + { + "label": "Commands", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Commands" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Commands" + } + } + }, + { + "label": "Cronjobs", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Cronjobs" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Cronjobs" + } + } + }, + { + "label": "Datalayer", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Datalayer" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Datalayer" + } + } + }, + { + "label": "Design Decisions", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Design_decisions" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Design_decisions" + } + } + }, + { + "label": "Endpoints", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Endpoints" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Endpoints" + } + } + }, + { + "label": "Events", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Events" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Events" + } + } + }, + { + "label": "Features", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Features" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Features" + } + } + }, + { + "label": "Federalization", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Federalization" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Federalization" + } + } + }, + { + "label": "ImportExport", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/ImportExport" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "ImportExport" + } + } + }, + { + "label": "Installation", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Installation" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Installation" + } + } + }, + { + "label": "Logging", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Logging" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Logging" + } + } + }, + { + "label": "Mappings", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Mappings" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Mappings" + } + } + }, + { + "label": "Monitoring", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Monitoring" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Monitoring" + } + } + }, + { + "label": "Notifications", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Notifications" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Notifications" + } + } + }, + { + "label": "Plugins", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Plugins" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Plugins" + } + } + }, + { + "label": "README", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/README" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "README" + } + } + }, + { + "label": "Schemas", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Schemas" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Schemas" + } + } + }, + { + "label": "Security", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Security" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Security" + } + } + }, + { + "label": "Sources", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Sources" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Sources" + } + } + }, + { + "label": "Synchronizations", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Synchronizations" + }, + "showToolTip": "true", + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Synchronizations" + } + } + }, + { + "label": "Twig", + "type": "internalMarkdown", + "current": { + "pathname": "/Features/Twig" + }, + "handleClick": { + "internalMarkdown": { + "directoryName": "Features", + "fileName": "Twig" + } + } + } + ] + } +] diff --git a/pwa/src/translations/en.ts b/pwa/src/translations/en.ts index 0c60b8d..0245fc2 100644 --- a/pwa/src/translations/en.ts +++ b/pwa/src/translations/en.ts @@ -12,4 +12,5 @@ export const en = { Username: "Username", Password: "Password", Send: "Send", + Documentation: "Documentation" }; diff --git a/pwa/src/translations/nl.ts b/pwa/src/translations/nl.ts index 478c34e..ffe3343 100644 --- a/pwa/src/translations/nl.ts +++ b/pwa/src/translations/nl.ts @@ -12,4 +12,5 @@ export const nl = { Username: "Gebruikersnaam", Password: "Wachtwoord", Send: "Verzenden", + Documentation: "Documentatie", }; From 66aacbcd9fda695daf935d555d5f23fdabd412f7 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:23:02 +0100 Subject: [PATCH 04/13] refactor header --- .../header/HeaderTemplate.module.css | 90 +++++++++++++++++- .../templateParts/header/HeaderTemplate.tsx | 93 ++++++++++++++++++- pwa/static/.env.development | 3 + pwa/static/.env.production | 3 + 4 files changed, 182 insertions(+), 7 deletions(-) diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css index e05284a..7adae29 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css @@ -1,7 +1,91 @@ -.container { +.headerMiddleBar { + background-color: var(--conduction-primary-top-nav-background-color, inherit); + box-shadow: 0px 10px 13px -14px #000000; +} + +.primaryNavContainer { + position: fixed; + width: 100%; + background-color: var(--conduction-primary-top-nav-background-color, inherit); + box-shadow: 0px 10px 13px -14px #000000; + z-index: 1; top: 0; - position: sticky; + + display: flex; + justify-content: space-between; + align-items: center; +} + +.logoContainer { + width: fit-content; + height: 44px; + border-radius: 0; + padding: unset; + background-color: unset; + margin-inline-end: 8px; +} + +.logoDesktop { + display: none; +} + +.logoMobile { + padding: 18px; +} + +.logoContainer > * { + height: 100%; +} + +.logoContainer > *:hover { + cursor: pointer; +} + +.logoContainer > *:not(:last-child) { + margin-inline-end: 24px; +} + +.headerContainer { + padding-block-start: unset !important; margin-block-end: unset !important; +} + +@media only screen and (min-width: 992px) { + .logoContainer { + display: flex; + } + + .logoDesktop { + display: block; + } + + .logoMobile { + display: none; + } + + .headerContainer { + padding-inline: 0; + padding-block-start: 0; + } + + .primaryNavContainer { + position: unset; + top: unset; + left: unset; + width: auto; + background-color: unset; + box-shadow: unset; + z-index: unset; + } + + .headerContent { + padding-block-start: 72px; + padding-block-end: 72px; + } +} - background-color: var(--utrecht-page-header-background-color); +@media only screen and (max-width: 576px) { + .headerContainer { + margin-block-end: 48px !important; + } } diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx index 606e115..6992d45 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx @@ -1,17 +1,102 @@ import * as React from "react"; import * as styles from "./HeaderTemplate.module.css"; -import { TopNav } from "../topNav/TopNav"; import clsx from "clsx"; -import { PageHeader } from "@utrecht/component-library-react/dist/css-module"; +import { useTranslation } from "react-i18next"; +import { Container, Logo, PrimaryTopNav } from "@conduction/components"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { IconDefinition } from "@fortawesome/free-solid-svg-icons"; +import { useGatsbyContext } from "../../../context/gatsby"; +import { PageHeader } from "@utrecht/component-library-react"; +import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav"; +import { useHeaderContent } from "../../../hooks/headerContent"; +import { THeaderTopNavItem, useHeaderTopNavItems } from "../../../hooks/useHeaderTopNavItems"; +import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; +import { faReadTheDocs } from "../../../assets/customIcons"; +import { TOOLTIP_ID } from "../../../layout/Layout"; + +export const DEFAULT_HEADER_CONTENT_URL = + "https://raw.githubusercontent.com/ConductionNL/product-website-template/f62359452725aa45c94a348b13d041af63646503/pwa/src/templates/templateParts/header/HeaderContent.json"; interface HeaderTemplateProps { layoutClassName?: string; } export const HeaderTemplate: React.FC = ({ layoutClassName }) => { + const { t } = useTranslation(); + const [topNavItems, setTopNavItems] = React.useState([]); + const { gatsbyContext } = useGatsbyContext(); + + const _useHeaderContent = useHeaderContent(); + const getHeaderContent = _useHeaderContent.getContent(); + + const optionalNavItems: THeaderTopNavItem[] = []; + + process.env.GATSBY_READ_THE_DOCS_URL !== "false" && + optionalNavItems.push({ + label: t("Documentation"), + type: "external", + current: { + pathname: "/documentation", + }, + handleClick: { + link: process.env.GATSBY_READ_THE_DOCS_URL ?? "", + }, + icon: , + }); + + process.env.GATSBY_SLACK_URL !== "false" && + optionalNavItems.push({ + label: t("Slack"), + type: "external", + current: { + pathname: "/slack", + }, + handleClick: { + link: process.env.GATSBY_SLACK_URL ?? "", + }, + icon: , + }); + + process.env.GATSBY_GITHUB_REPOSITORY_URL && + optionalNavItems.push({ + label: t("GitHub"), + type: "external", + current: { + pathname: "/github", + }, + handleClick: { + link: process.env.GATSBY_GITHUB_REPOSITORY_URL ?? "", + }, + icon: , + }); + + const { headerTopNavItems } = useHeaderTopNavItems( + getHeaderContent.isSuccess && getHeaderContent.data.concat(optionalNavItems), + ); + + React.useEffect(() => { + setTopNavItems(headerTopNavItems); + }, [gatsbyContext.location.pathname, gatsbyContext.pageContext?.breadcrumb.crumbs]); + return ( - - + +
+ +
+ +
+ + +
+ } + tooltipId={TOOLTIP_ID} + layoutClassName={styles.test} + items={topNavItems} + /> + +
); }; diff --git a/pwa/static/.env.development b/pwa/static/.env.development index c3e6600..3e76a7f 100644 --- a/pwa/static/.env.development +++ b/pwa/static/.env.development @@ -11,6 +11,9 @@ GATSBY_READ_THE_DOCS_URL="false" # Navbar GATSBY_NAVBAR_LOGO_URL=https://conduction.nl/wp-content/uploads/2021/07/cropped-conductionlogo-1.png +# Header +GATSBY_HEADER_CONTENT="https://raw.githubusercontent.com/ConductionNL/product-website-template/f62359452725aa45c94a348b13d041af63646503/pwa/src/templates/templateParts/header/HeaderContent.json" + # Footer GATSBY_FOOTER_LOGO_URL=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg== GATSBY_FOOTER_LOGO_HREF=https://conduction.nl diff --git a/pwa/static/.env.production b/pwa/static/.env.production index 65e3813..76ae344 100644 --- a/pwa/static/.env.production +++ b/pwa/static/.env.production @@ -11,6 +11,9 @@ GATSBY_READ_THE_DOCS_URL= # Navbar GATSBY_NAVBAR_LOGO_URL= +# Header +GATSBY_HEADER_CONTENT= + # Footer GATSBY_FOOTER_LOGO_URL= GATSBY_FOOTER_LOGO_HREF= From d6216edad8c188ea64701fffd8e1c4227849330b Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:37:35 +0100 Subject: [PATCH 05/13] updated package --- pwa/package-lock.json | 138 +++++++++--------- pwa/package.json | 6 +- .../header/HeaderTemplate.module.css | 13 +- 3 files changed, 84 insertions(+), 73 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 588277b..0a3d284 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,12 +8,12 @@ "name": "product-website-template", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.30", - "@conduction/theme": "1.0.55", - "@fortawesome/fontawesome-svg-core": "^6.4.2", - "@fortawesome/free-brands-svg-icons": "6.4.2", - "@fortawesome/free-regular-svg-icons": "^6.4.2", - "@fortawesome/free-solid-svg-icons": "^6.4.2", + "@conduction/components": "2.2.39", + "@conduction/theme": "1.0.56", + "@fortawesome/fontawesome-svg-core": "^6.5.0", + "@fortawesome/free-brands-svg-icons": "6.5.0", + "@fortawesome/free-regular-svg-icons": "^6.5.0", + "@fortawesome/free-solid-svg-icons": "^6.5.0", "@fortawesome/react-fontawesome": "^0.2.0", "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.128", "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.121", @@ -42,7 +42,7 @@ "@nl-design-system-unstable/zevenaar-design-tokens": "^1.0.0-alpha.121", "@nl-design-system-unstable/zwolle-design-tokens": "^1.0.0-alpha.121", "@tabler/icons-react": "2.42.0", - "@types/react": "^18.2.38", + "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", "@utrecht/component-library-react": "^2.0.0", "@utrecht/design-tokens": "^1.0.0-alpha.607", @@ -55,7 +55,7 @@ "gatsby-plugin-breadcrumb": "^12.3.2", "gatsby-plugin-layout": "^4.12.0", "html-react-parser": "^5.0.6", - "i18next": "^23.7.6", + "i18next": "^23.7.7", "jwt-decode": "^4.0.0", "lodash": "^4.17.21", "react": "^18.2.0", @@ -75,10 +75,10 @@ "@parcel/watcher": "^2.3.0", "@types/dateformat": "^5.0.2", "@types/dedent": "^0.7.2", - "@types/node": "^20.9.4", + "@types/node": "^20.10.0", "@types/react-helmet": "^6.1.9", - "@typescript-eslint/eslint-plugin": "^6.12.0", - "@typescript-eslint/parser": "^6.12.0", + "@typescript-eslint/eslint-plugin": "^6.13.1", + "@typescript-eslint/parser": "^6.13.1", "eslint": "^8.54.0", "eslint-config-prettier": "^9.0.0", "eslint-plugin-react": "^7.33.2", @@ -2053,9 +2053,9 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.30", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.30.tgz", - "integrity": "sha512-Tz6tdTrTg7HL+4Wc7yFZrkMzmCrMRjl3d3vRsQxVGBrEGrQ8qE6BABdDgxizxTDHvTg475lVBGZpdnMXoP5GXg==", + "version": "2.2.39", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.39.tgz", + "integrity": "sha512-EyXotA/XD1dK4yX5Y9r6uWeeAHJETaiBchoP84YGi5IE10aqHpwnJ7kTsChKKch9piwx4kWqzqAIwXWdnv/aqQ==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", @@ -2069,13 +2069,13 @@ "react-paginate": "^8.2.0", "react-select": "5.8.0", "react-tabs": "^6.0.2", - "react-tooltip": "^5.23.0" + "react-tooltip": "^5.24.0" } }, "node_modules/@conduction/theme": { - "version": "1.0.55", - "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.55.tgz", - "integrity": "sha512-GCk9v3HyAy/3exE2G7VpJF8g8m8g5l0do9i0AaWz4u12I5UMoY581tXmX3YUkh1wawS+TCgL7jvB/t2C6tl+1g==", + "version": "1.0.56", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.56.tgz", + "integrity": "sha512-h1nIUMkQdnSeD0zBfepLH4Jb27tI7/lLev07RBpWmVkwei2DGeUwG3bfEJ2HChTPu5EyfItHu/37UnqRE7ADNg==", "dependencies": { "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100" } @@ -2259,7 +2259,7 @@ "license": "MIT" }, "node_modules/@fortawesome/fontawesome-common-types": { - "version": "6.4.2", + "version": "6.5.0", "hasInstallScript": true, "license": "MIT", "engines": { @@ -2267,44 +2267,44 @@ } }, "node_modules/@fortawesome/fontawesome-svg-core": { - "version": "6.4.2", + "version": "6.5.0", "hasInstallScript": true, "license": "MIT", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.4.2" + "@fortawesome/fontawesome-common-types": "6.5.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-brands-svg-icons": { - "version": "6.4.2", + "version": "6.5.0", "hasInstallScript": true, "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.4.2" + "@fortawesome/fontawesome-common-types": "6.5.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-regular-svg-icons": { - "version": "6.4.2", + "version": "6.5.0", "hasInstallScript": true, "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.4.2" + "@fortawesome/fontawesome-common-types": "6.5.0" }, "engines": { "node": ">=6" } }, "node_modules/@fortawesome/free-solid-svg-icons": { - "version": "6.4.2", + "version": "6.5.0", "hasInstallScript": true, "license": "(CC-BY-4.0 AND MIT)", "dependencies": { - "@fortawesome/fontawesome-common-types": "6.4.2" + "@fortawesome/fontawesome-common-types": "6.5.0" }, "engines": { "node": ">=6" @@ -3765,7 +3765,8 @@ }, "node_modules/@popperjs/core": { "version": "2.11.8", - "license": "MIT", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -4029,7 +4030,7 @@ } }, "node_modules/@types/node": { - "version": "20.9.4", + "version": "20.10.0", "license": "MIT", "dependencies": { "undici-types": "~5.26.4" @@ -4059,7 +4060,7 @@ } }, "node_modules/@types/react": { - "version": "18.2.38", + "version": "18.2.39", "license": "MIT", "dependencies": { "@types/prop-types": "*", @@ -4121,15 +4122,15 @@ "license": "MIT" }, "node_modules/@typescript-eslint/eslint-plugin": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/regexpp": "^4.5.1", - "@typescript-eslint/scope-manager": "6.12.0", - "@typescript-eslint/type-utils": "6.12.0", - "@typescript-eslint/utils": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0", + "@typescript-eslint/scope-manager": "6.13.1", + "@typescript-eslint/type-utils": "6.13.1", + "@typescript-eslint/utils": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1", "debug": "^4.3.4", "graphemer": "^1.4.0", "ignore": "^5.2.4", @@ -4155,14 +4156,14 @@ } }, "node_modules/@typescript-eslint/parser": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "BSD-2-Clause", "dependencies": { - "@typescript-eslint/scope-manager": "6.12.0", - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/typescript-estree": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0", + "@typescript-eslint/scope-manager": "6.13.1", + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/typescript-estree": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1", "debug": "^4.3.4" }, "engines": { @@ -4182,12 +4183,12 @@ } }, "node_modules/@typescript-eslint/scope-manager": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0" + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1" }, "engines": { "node": "^16.0.0 || >=18.0.0" @@ -4198,12 +4199,12 @@ } }, "node_modules/@typescript-eslint/type-utils": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/typescript-estree": "6.12.0", - "@typescript-eslint/utils": "6.12.0", + "@typescript-eslint/typescript-estree": "6.13.1", + "@typescript-eslint/utils": "6.13.1", "debug": "^4.3.4", "ts-api-utils": "^1.0.1" }, @@ -4224,7 +4225,7 @@ } }, "node_modules/@typescript-eslint/types": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "engines": { @@ -4236,12 +4237,12 @@ } }, "node_modules/@typescript-eslint/typescript-estree": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "BSD-2-Clause", "dependencies": { - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/visitor-keys": "6.12.0", + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/visitor-keys": "6.13.1", "debug": "^4.3.4", "globby": "^11.1.0", "is-glob": "^4.0.3", @@ -4262,16 +4263,16 @@ } }, "node_modules/@typescript-eslint/utils": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "dependencies": { "@eslint-community/eslint-utils": "^4.4.0", "@types/json-schema": "^7.0.12", "@types/semver": "^7.5.0", - "@typescript-eslint/scope-manager": "6.12.0", - "@typescript-eslint/types": "6.12.0", - "@typescript-eslint/typescript-estree": "6.12.0", + "@typescript-eslint/scope-manager": "6.13.1", + "@typescript-eslint/types": "6.13.1", + "@typescript-eslint/typescript-estree": "6.13.1", "semver": "^7.5.4" }, "engines": { @@ -4286,11 +4287,11 @@ } }, "node_modules/@typescript-eslint/visitor-keys": { - "version": "6.12.0", + "version": "6.13.1", "dev": true, "license": "MIT", "dependencies": { - "@typescript-eslint/types": "6.12.0", + "@typescript-eslint/types": "6.13.1", "eslint-visitor-keys": "^3.4.1" }, "engines": { @@ -5716,7 +5717,8 @@ }, "node_modules/classnames": { "version": "2.3.2", - "license": "MIT" + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" }, "node_modules/cli-boxes": { "version": "2.2.1", @@ -9870,7 +9872,7 @@ } }, "node_modules/i18next": { - "version": "23.7.6", + "version": "23.7.7", "funding": [ { "type": "individual", @@ -13607,8 +13609,9 @@ } }, "node_modules/react-datepicker": { - "version": "4.23.0", - "license": "MIT", + "version": "4.24.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.24.0.tgz", + "integrity": "sha512-2QUC2pP+x4v3Jp06gnFllxKsJR0yoT/K6y86ItxEsveTXUpsx+NBkChWXjU0JsGx/PL8EQnsxN0wHl4zdA1m/g==", "dependencies": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", @@ -13783,7 +13786,8 @@ }, "node_modules/react-onclickoutside": { "version": "6.13.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", + "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", "funding": { "type": "individual", "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" @@ -13805,7 +13809,8 @@ }, "node_modules/react-popper": { "version": "2.3.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" @@ -13905,7 +13910,8 @@ }, "node_modules/react-tabs": { "version": "6.0.2", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", + "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", "dependencies": { "clsx": "^2.0.0", "prop-types": "^15.5.0" @@ -13916,7 +13922,8 @@ }, "node_modules/react-tooltip": { "version": "5.24.0", - "license": "MIT", + "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.24.0.tgz", + "integrity": "sha512-HjstgpOrUwP4eN6mHU4EThpbxVuKO5SvqumRt1aAcPq0ya+pIVVxlwltndtdIIMBJ7w3jnN05vNfcfh2sxE2mQ==", "dependencies": { "@floating-ui/dom": "^1.0.0", "classnames": "^2.3.0" @@ -16062,7 +16069,8 @@ }, "node_modules/warning": { "version": "4.0.3", - "license": "MIT", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", "dependencies": { "loose-envify": "^1.0.0" } diff --git a/pwa/package.json b/pwa/package.json index 0938e58..8a3fd47 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -22,12 +22,12 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.38", + "@conduction/components": "2.2.39", "@conduction/theme": "1.0.56", "@fortawesome/fontawesome-svg-core": "^6.5.0", - "@fortawesome/free-solid-svg-icons": "^6.5.0", "@fortawesome/free-brands-svg-icons": "6.5.0", "@fortawesome/free-regular-svg-icons": "^6.5.0", + "@fortawesome/free-solid-svg-icons": "^6.5.0", "@fortawesome/react-fontawesome": "^0.2.0", "@nl-design-system-unstable/amsterdam-design-tokens": "^1.0.0-alpha.128", "@nl-design-system-unstable/bodegraven-reeuwijk-design-tokens": "^1.0.0-alpha.121", @@ -58,9 +58,9 @@ "@tabler/icons-react": "2.42.0", "@types/react": "^18.2.39", "@types/react-dom": "^18.2.17", + "@utrecht/component-library-react": "^2.0.0", "@utrecht/design-tokens": "^1.0.0-alpha.607", "@utrecht/web-component-library-react": "^1.0.2", - "@utrecht/component-library-react": "^2.0.0", "axios": "^1.6.2", "clsx": "^2.0.0", "dateformat": "^5.0.3", diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css index 7adae29..eb786fc 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css @@ -1,3 +1,11 @@ +.headerContainer { + padding-block-start: unset !important; + margin-block-end: unset !important; + position: sticky; + top: 0; + background-color: var(--utrecht-page-header-background-color); +} + .headerMiddleBar { background-color: var(--conduction-primary-top-nav-background-color, inherit); box-shadow: 0px 10px 13px -14px #000000; @@ -45,11 +53,6 @@ margin-inline-end: 24px; } -.headerContainer { - padding-block-start: unset !important; - margin-block-end: unset !important; -} - @media only screen and (min-width: 992px) { .logoContainer { display: flex; From f52d1df1a95d358d486223aa68e3926ae4addedf Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:39:53 +0100 Subject: [PATCH 06/13] cleanup --- pwa/src/hooks/useHeaderTopNavItems.ts | 4 ---- pwa/src/layout/Layout.tsx | 4 +--- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/pwa/src/hooks/useHeaderTopNavItems.ts b/pwa/src/hooks/useHeaderTopNavItems.ts index 9c33027..6293ed9 100644 --- a/pwa/src/hooks/useHeaderTopNavItems.ts +++ b/pwa/src/hooks/useHeaderTopNavItems.ts @@ -17,10 +17,6 @@ export type THeaderTopNavItem = { showToolTip?: boolean; handleClick?: { link: string; - setFilter?: { - filterKey: string; - value: string; - }; }; }; diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index a320fd0..7b4e421 100644 --- a/pwa/src/layout/Layout.tsx +++ b/pwa/src/layout/Layout.tsx @@ -9,7 +9,7 @@ import { Head } from "./Head"; import { Content } from "../Content"; import { Document, Surface } from "@utrecht/component-library-react/dist/css-module"; import { Toaster } from "react-hot-toast"; -import { IconDefinition, IconPack, library, dom } from "@fortawesome/fontawesome-svg-core"; +import { IconDefinition, IconPack, library } from "@fortawesome/fontawesome-svg-core"; import { fas } from "@fortawesome/free-solid-svg-icons"; import { fab } from "@fortawesome/free-brands-svg-icons"; import { far } from "@fortawesome/free-regular-svg-icons"; @@ -33,8 +33,6 @@ const Layout: React.FC = ({ children, pageContext, location }) => { library.add(fas, fab as IconPack, far as IconPack, faReadTheDocs as IconDefinition); - dom.watch(); - React.useEffect(() => { // initiate API Service setAPI(new APIService()); From 35dc7ddd775089a056312c015103382b911af530 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 15:40:03 +0100 Subject: [PATCH 07/13] cleanup --- pwa/src/layout/Layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index 7b4e421..a9251d3 100644 --- a/pwa/src/layout/Layout.tsx +++ b/pwa/src/layout/Layout.tsx @@ -1,7 +1,6 @@ import * as React from "react"; import * as styles from "./Layout.module.css"; import "../translations/i18n"; -import clsx from "clsx"; import APIContext, { APIProvider } from "../apiService/apiContext"; import APIService from "../apiService/apiService"; import { defaultGlobalContext, GlobalProvider, IGlobalContext } from "../context/global"; From 15415e26c8023ef975603e10dc716078eefb4e27 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 16:36:04 +0100 Subject: [PATCH 08/13] cleanup --- pwa/package-lock.json | 8 ++++---- pwa/package.json | 2 +- pwa/src/styling/index.css | 1 + .../footer/FooterTemplate.module.css | 15 +++++++++++++-- 4 files changed, 19 insertions(+), 7 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 0a3d284..d8f6f69 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -9,7 +9,7 @@ "version": "1.0.0", "dependencies": { "@conduction/components": "2.2.39", - "@conduction/theme": "1.0.56", + "@conduction/theme": "1.0.57", "@fortawesome/fontawesome-svg-core": "^6.5.0", "@fortawesome/free-brands-svg-icons": "6.5.0", "@fortawesome/free-regular-svg-icons": "^6.5.0", @@ -2073,9 +2073,9 @@ } }, "node_modules/@conduction/theme": { - "version": "1.0.56", - "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.56.tgz", - "integrity": "sha512-h1nIUMkQdnSeD0zBfepLH4Jb27tI7/lLev07RBpWmVkwei2DGeUwG3bfEJ2HChTPu5EyfItHu/37UnqRE7ADNg==", + "version": "1.0.57", + "resolved": "https://registry.npmjs.org/@conduction/theme/-/theme-1.0.57.tgz", + "integrity": "sha512-Zt0GgdN0kGlqGv4MMv0CfwjUp0G79IQl/mlQ72Fi19w3loFBCo8awuxY+n3lICXY34cIe5NnhjckKbJpF5olsw==", "dependencies": { "@nl-design-system-unstable/rotterdam-design-tokens": "^1.0.0-alpha.100" } diff --git a/pwa/package.json b/pwa/package.json index 8a3fd47..28d2726 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@conduction/components": "2.2.39", - "@conduction/theme": "1.0.56", + "@conduction/theme": "1.0.57", "@fortawesome/fontawesome-svg-core": "^6.5.0", "@fortawesome/free-brands-svg-icons": "6.5.0", "@fortawesome/free-regular-svg-icons": "^6.5.0", diff --git a/pwa/src/styling/index.css b/pwa/src/styling/index.css index 7ac1d5b..06490b4 100644 --- a/pwa/src/styling/index.css +++ b/pwa/src/styling/index.css @@ -13,6 +13,7 @@ @import "../../node_modules/@conduction/theme/municipalities/rotterdam-design-tokens/dist/index.css"; @import "../../node_modules/@conduction/theme/municipalities/open-webconcept-design-tokens/dist/index.css"; @import "../../node_modules/@conduction/theme/municipalities/dimpact-design-tokens/dist/index.css"; +@import "../../node_modules/@conduction/theme/municipalities/commonground-design-tokens/dist/index.css"; /* Design Tokens maintained by Frameless */ @import "../../node_modules/@utrecht/design-tokens/dist/theme.css"; diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css index 83ad677..51f9d23 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css @@ -111,19 +111,30 @@ .iconLeft { margin-inline-end: var(--utrecht-icon-gap); color: var(--utrecht-page-footer-icon-color, inherit); + fill: var(--utrecht-page-footer-icon-color, var(--utrecht-page-footer-color)); } .iconRight { margin-inline-start: var(--utrecht-icon-gap); color: var(--utrecht-page-footer-icon-color, inherit); + fill: var(--utrecht-page-footer-icon-color, var(--utrecht-page-footer-color)); } .customIcon > svg > path { - fill: var(--utrecht-page-footer-icon-color, var(--utrecht-page-footer-color)); + fill: var( + --utrecht-page-footer-icon-color, + var(--utrecht-page-footer-link-color, var(--utrecht-page-footer-color)) + ); } a:hover .customIcon > svg > path { - fill: var(--utrecht-page-footer-link-hover-color, var(--utrecht-page-footer-color)); + fill: var( + --utrecht-page-footer-icon-hover-color, + var( + --utrecht-page-footer-link-hover-color, + var(--utrecht-page-footer-color) + ) + ); } @media only screen and (max-width: 992px) { From b2cdc0f074ee3373c57330a956efcbd86fc0740c Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 1 Dec 2023 17:13:20 +0100 Subject: [PATCH 09/13] updated lock file --- pwa/package-lock.json | 24 ++++++++---------------- 1 file changed, 8 insertions(+), 16 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index d8f6f69..59b5e20 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -3765,8 +3765,7 @@ }, "node_modules/@popperjs/core": { "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "license": "MIT", "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -5717,8 +5716,7 @@ }, "node_modules/classnames": { "version": "2.3.2", - "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", - "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + "license": "MIT" }, "node_modules/cli-boxes": { "version": "2.2.1", @@ -13610,8 +13608,7 @@ }, "node_modules/react-datepicker": { "version": "4.24.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.24.0.tgz", - "integrity": "sha512-2QUC2pP+x4v3Jp06gnFllxKsJR0yoT/K6y86ItxEsveTXUpsx+NBkChWXjU0JsGx/PL8EQnsxN0wHl4zdA1m/g==", + "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", @@ -13786,8 +13783,7 @@ }, "node_modules/react-onclickoutside": { "version": "6.13.0", - "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", - "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "license": "MIT", "funding": { "type": "individual", "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" @@ -13809,8 +13805,7 @@ }, "node_modules/react-popper": { "version": "2.3.0", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", - "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "license": "MIT", "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" @@ -13910,8 +13905,7 @@ }, "node_modules/react-tabs": { "version": "6.0.2", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.2.tgz", - "integrity": "sha512-aQXTKolnM28k3KguGDBSAbJvcowOQr23A+CUJdzJtOSDOtTwzEaJA+1U4KwhNL9+Obe+jFS7geuvA7ICQPXOnQ==", + "license": "MIT", "dependencies": { "clsx": "^2.0.0", "prop-types": "^15.5.0" @@ -13922,8 +13916,7 @@ }, "node_modules/react-tooltip": { "version": "5.24.0", - "resolved": "https://registry.npmjs.org/react-tooltip/-/react-tooltip-5.24.0.tgz", - "integrity": "sha512-HjstgpOrUwP4eN6mHU4EThpbxVuKO5SvqumRt1aAcPq0ya+pIVVxlwltndtdIIMBJ7w3jnN05vNfcfh2sxE2mQ==", + "license": "MIT", "dependencies": { "@floating-ui/dom": "^1.0.0", "classnames": "^2.3.0" @@ -16069,8 +16062,7 @@ }, "node_modules/warning": { "version": "4.0.3", - "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", - "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "license": "MIT", "dependencies": { "loose-envify": "^1.0.0" } From 5688847d3dbea74ad7389d80b85d54aca4b1ec6a Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 5 Dec 2023 09:57:27 +0100 Subject: [PATCH 10/13] fixed build and updated header --- pwa/src/apiService/apiService.ts | 8 +- pwa/src/hooks/footerContent.ts | 7 +- pwa/src/hooks/headerContent.ts | 6 +- pwa/src/hooks/useHeaderTopNavItems.ts | 140 ++++++++++-------- .../templateParts/footer/Defaults.json | 3 + .../templateParts/footer/FooterTemplate.tsx | 3 - .../templateParts/header/Defaults.json | 3 + .../templateParts/header/HeaderContent.json | 24 --- .../templateParts/header/HeaderTemplate.tsx | 21 +-- pwa/tsconfig.json | 3 +- 10 files changed, 96 insertions(+), 122 deletions(-) create mode 100644 pwa/src/templates/templateParts/footer/Defaults.json create mode 100644 pwa/src/templates/templateParts/header/Defaults.json diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts index d4b23eb..b10f4a5 100644 --- a/pwa/src/apiService/apiService.ts +++ b/pwa/src/apiService/apiService.ts @@ -1,7 +1,7 @@ import axios, { AxiosInstance, AxiosResponse } from "axios"; -import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate"; import { removeFileNameFromUrl } from "../services/FileNameFromUrl"; -import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate"; +import footerDefaults from "../templates/templateParts/footer/Defaults.json" +import headerDefaults from "../templates/templateParts/header/Defaults.json" import toast from "react-hot-toast"; // Resources @@ -34,13 +34,13 @@ export default class APIService { public get FooterContentClient(): AxiosInstance { return axios.create({ - baseURL: removeFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL), + baseURL: removeFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? footerDefaults.FOOTER_CONTENT_URL), }); } public get HeaderContentClient(): AxiosInstance { return axios.create({ - baseURL: removeFileNameFromUrl(process.env.GATSBY_HEADER_CONTENT ?? DEFAULT_HEADER_CONTENT_URL), + baseURL: removeFileNameFromUrl(process.env.GATSBY_HEADER_CONTENT ?? headerDefaults.HEADER_CONTENT_URL), }); } diff --git a/pwa/src/hooks/footerContent.ts b/pwa/src/hooks/footerContent.ts index fd5afb8..691e115 100644 --- a/pwa/src/hooks/footerContent.ts +++ b/pwa/src/hooks/footerContent.ts @@ -1,15 +1,14 @@ import * as React from "react"; -import { useQuery } from "react-query"; import APIService from "../apiService/apiService"; import APIContext from "../apiService/apiContext"; +import footerDefaults from "../templates/templateParts/footer/Defaults.json"; +import { useQuery } from "react-query"; import { getFileNameFromUrl } from "../services/FileNameFromUrl"; -import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/FooterTemplate"; export const useFooterContent = () => { const API: APIService | null = React.useContext(APIContext); - const fileName = getFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? DEFAULT_FOOTER_CONTENT_URL); - + const fileName = getFileNameFromUrl(process.env.GATSBY_FOOTER_CONTENT ?? footerDefaults.FOOTER_CONTENT_URL); const getContent = () => useQuery(["footer-content", fileName], () => API?.FooterContent.getContent(fileName), { diff --git a/pwa/src/hooks/headerContent.ts b/pwa/src/hooks/headerContent.ts index 15ee8bc..1304d46 100644 --- a/pwa/src/hooks/headerContent.ts +++ b/pwa/src/hooks/headerContent.ts @@ -1,9 +1,9 @@ import * as React from "react"; -import { useQuery } from "react-query"; import APIService from "../apiService/apiService"; import APIContext from "../apiService/apiContext"; +import headerDefaults from "../templates/templateParts/header/Defaults.json"; +import { useQuery } from "react-query"; import { getFileNameFromUrl } from "../services/FileNameFromUrl"; -import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/HeaderTemplate"; export const useHeaderContent = () => { const API: APIService | null = React.useContext(APIContext); @@ -11,7 +11,7 @@ export const useHeaderContent = () => { const fileName = getFileNameFromUrl( process.env.GATSBY_HEADER_CONTENT !== undefined && process.env.GATSBY_HEADER_CONTENT.length !== 0 ? process.env.GATSBY_HEADER_CONTENT - : DEFAULT_HEADER_CONTENT_URL, + : headerDefaults.HEADER_CONTENT_URL, ); const getContent = () => diff --git a/pwa/src/hooks/useHeaderTopNavItems.ts b/pwa/src/hooks/useHeaderTopNavItems.ts index 6293ed9..41b08ca 100644 --- a/pwa/src/hooks/useHeaderTopNavItems.ts +++ b/pwa/src/hooks/useHeaderTopNavItems.ts @@ -1,7 +1,9 @@ +import * as React from "react"; import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav"; import { useGatsbyContext } from "../context/gatsby"; import { navigate } from "gatsby"; import { useTranslation } from "react-i18next"; +import { useHeaderContent } from "./headerContent"; export type THeaderTopNavItem = { label: string; @@ -20,88 +22,100 @@ export type THeaderTopNavItem = { }; }; -export const useHeaderTopNavItems = (data: THeaderTopNavItem[]) => { - const { gatsbyContext } = useGatsbyContext(); +export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => { const { t } = useTranslation(); + const { gatsbyContext } = useGatsbyContext(); + const [topNavItems, setTopNavItems] = React.useState([]); - const headerTopNavItems: ITopNavItem[] = []; + // For production + const _useHeaderContent = useHeaderContent(); + const getHeaderContent = _useHeaderContent.getContent(); + getHeaderContent.isSuccess && getHeaderContent.data.concat(optionalData); - data?.map((item: any) => { - const isCurrent = (current: any) => { - const prefixedPathname = - process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true" - ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}` - : current.pathname; + // For development + // const getHeaderContent = {data: require("../templates/templateParts/header/HeaderContent.json")}; - const isCurrentRoute = (): boolean => { - if (prefixedPathname === gatsbyContext.location.pathname) return true; + React.useEffect(() => { + if (!getHeaderContent.data) return; - if (current.pathname !== "/") return gatsbyContext.location.pathname.includes(current.pathname); + const headerTopNavItems = [...getHeaderContent.data, ...(optionalData ?? [])].map((item: any) => { + const isCurrent = (current: any) => { + const prefixedPathname = + process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true" + ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}` + : current.pathname; - return false; - }; + const isCurrentRoute = (): boolean => { + if (prefixedPathname === gatsbyContext.location.pathname) return true; - if (!current.filterCondition) { - return isCurrentRoute(); - } - }; + if (current.pathname !== "/") return gatsbyContext.location.pathname.includes(current.pathname); - const getOnClick = ( - onClick: any, - type: "markdown" | "readme" | "internal" | "external" | "internalMarkdown", - label: string, - ) => { - if (!onClick || !type || !label) return; + return false; + }; - if (onClick.link && !onClick.setFilter) { - if (type === "internal") { - navigate(onClick.link); - } - - if (type === "external") { - open(onClick.link); + if (!current.filterCondition) { + return isCurrentRoute(); } + }; - if (type === "markdown" || type === "readme") { - navigate(`/github/${label.replaceAll(" ", "_")}/?link=${onClick.link}`); + const getOnClick = ( + onClick: any, + type: "markdown" | "readme" | "internal" | "external" | "internalMarkdown", + label: string, + ) => { + if (!onClick || !type || !label) return; + + if (onClick.link && !onClick.setFilter) { + if (type === "internal") { + navigate(onClick.link); + } + + if (type === "external") { + open(onClick.link); + } + + if (type === "markdown" || type === "readme") { + navigate(`/github/${label.replaceAll(" ", "_")}/?link=${onClick.link}`); + } } - } - if (!onClick.link && onClick.internalMarkdown) { - if (type === "internalMarkdown") { - navigate(`/pages/${onClick.internalMarkdown.directoryName}/${onClick.internalMarkdown.fileName}`); + if (!onClick.link && onClick.internalMarkdown) { + if (type === "internalMarkdown") { + navigate(`/pages/${onClick.internalMarkdown.directoryName}/${onClick.internalMarkdown.fileName}`); + } } - } - }; + }; - const setSubItems = (subItems: ITopNavItem[]) => { - if (!subItems) return; - const subItemsArray: ITopNavItem[] = []; - - subItems.map((item: any) => { - subItemsArray.push({ - label: t(item.label), - type: item.type, - showToolTip: item.showToolTip === "true" ? true : false, - current: item.current ? isCurrent(item.current) : false, - handleClick: () => getOnClick(item.handleClick, item.type, item.label), + const setSubItems = (subItems: ITopNavItem[]) => { + if (!subItems) return; + const subItemsArray: ITopNavItem[] = []; + + subItems.map((item: any) => { + subItemsArray.push({ + label: t(item.label), + type: item.type, + current: item.current ? isCurrent(item.current) : false, + handleClick: () => getOnClick(item.handleClick, item.type, item.label), + }); }); - }); - const subItemsObject = Object.assign(subItemsArray); + const subItemsObject = Object.assign(subItemsArray); - return subItemsObject; - }; + return subItemsObject; + }; - headerTopNavItems.push({ - label: t(item.label), - type: item.type, - icon: item.icon, - current: item.current ? isCurrent(item.current) : false, - handleClick: () => getOnClick(item.handleClick, item.type, item.label), - subItems: setSubItems(item.subItems), + return { + label: t(item.label), + type: item.type, + icon: item.icon, + current: item.current ? isCurrent(item.current) : false, + handleClick: () => getOnClick(item.handleClick, item.type, item.label), + subItems: setSubItems(item.subItems), + }; }); - }); - return { headerTopNavItems }; + setTopNavItems(headerTopNavItems); + }, [getHeaderContent.data, gatsbyContext.location.pathname, gatsbyContext.pageContext?.breadcrumb.crumbs]); + + return { topNavItems }; }; diff --git a/pwa/src/templates/templateParts/footer/Defaults.json b/pwa/src/templates/templateParts/footer/Defaults.json new file mode 100644 index 0000000..c3dc7b9 --- /dev/null +++ b/pwa/src/templates/templateParts/footer/Defaults.json @@ -0,0 +1,3 @@ +{ + "FOOTER_CONTENT_URL": "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json" +} diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index ca487f1..18a3e92 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -20,9 +20,6 @@ import { Logo } from "@conduction/components"; import { IconPrefix, IconName } from "@fortawesome/fontawesome-svg-core"; import { useFooterContent } from "../../../hooks/footerContent"; -export const DEFAULT_FOOTER_CONTENT_URL = - "https://raw.githubusercontent.com/ConductionNL/product-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"; - type TDynamicContentItem = { title: string; items: { diff --git a/pwa/src/templates/templateParts/header/Defaults.json b/pwa/src/templates/templateParts/header/Defaults.json new file mode 100644 index 0000000..15fb35c --- /dev/null +++ b/pwa/src/templates/templateParts/header/Defaults.json @@ -0,0 +1,3 @@ +{ + "HEADER_CONTENT_URL": "https://raw.githubusercontent.com/ConductionNL/product-website-template/f62359452725aa45c94a348b13d041af63646503/pwa/src/templates/templateParts/header/HeaderContent.json" +} diff --git a/pwa/src/templates/templateParts/header/HeaderContent.json b/pwa/src/templates/templateParts/header/HeaderContent.json index fc096e8..84c602a 100644 --- a/pwa/src/templates/templateParts/header/HeaderContent.json +++ b/pwa/src/templates/templateParts/header/HeaderContent.json @@ -34,7 +34,6 @@ "current": { "pathname": "/Features/Action_handlers" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -48,7 +47,6 @@ "current": { "pathname": "/Features/Architecture" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -62,7 +60,6 @@ "current": { "pathname": "/Features/Authentication" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -76,7 +73,6 @@ "current": { "pathname": "/Features/Code_quality" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -90,7 +86,6 @@ "current": { "pathname": "/Features/Commands" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -104,7 +99,6 @@ "current": { "pathname": "/Features/Cronjobs" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -118,7 +112,6 @@ "current": { "pathname": "/Features/Datalayer" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -132,7 +125,6 @@ "current": { "pathname": "/Features/Design_decisions" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -146,7 +138,6 @@ "current": { "pathname": "/Features/Endpoints" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -160,7 +151,6 @@ "current": { "pathname": "/Features/Events" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -174,7 +164,6 @@ "current": { "pathname": "/Features/Features" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -188,7 +177,6 @@ "current": { "pathname": "/Features/Federalization" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -202,7 +190,6 @@ "current": { "pathname": "/Features/ImportExport" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -216,7 +203,6 @@ "current": { "pathname": "/Features/Installation" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -230,7 +216,6 @@ "current": { "pathname": "/Features/Logging" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -244,7 +229,6 @@ "current": { "pathname": "/Features/Mappings" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -258,7 +242,6 @@ "current": { "pathname": "/Features/Monitoring" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -272,7 +255,6 @@ "current": { "pathname": "/Features/Notifications" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -286,7 +268,6 @@ "current": { "pathname": "/Features/Plugins" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -300,7 +281,6 @@ "current": { "pathname": "/Features/README" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -314,7 +294,6 @@ "current": { "pathname": "/Features/Schemas" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -328,7 +307,6 @@ "current": { "pathname": "/Features/Security" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -342,7 +320,6 @@ "current": { "pathname": "/Features/Sources" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", @@ -356,7 +333,6 @@ "current": { "pathname": "/Features/Synchronizations" }, - "showToolTip": "true", "handleClick": { "internalMarkdown": { "directoryName": "Features", diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx index 6992d45..08e5132 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx @@ -5,17 +5,10 @@ import { useTranslation } from "react-i18next"; import { Container, Logo, PrimaryTopNav } from "@conduction/components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { IconDefinition } from "@fortawesome/free-solid-svg-icons"; -import { useGatsbyContext } from "../../../context/gatsby"; import { PageHeader } from "@utrecht/component-library-react"; -import { ITopNavItem } from "@conduction/components/lib/components/topNav/primaryTopNav/PrimaryTopNav"; -import { useHeaderContent } from "../../../hooks/headerContent"; import { THeaderTopNavItem, useHeaderTopNavItems } from "../../../hooks/useHeaderTopNavItems"; import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; import { faReadTheDocs } from "../../../assets/customIcons"; -import { TOOLTIP_ID } from "../../../layout/Layout"; - -export const DEFAULT_HEADER_CONTENT_URL = - "https://raw.githubusercontent.com/ConductionNL/product-website-template/f62359452725aa45c94a348b13d041af63646503/pwa/src/templates/templateParts/header/HeaderContent.json"; interface HeaderTemplateProps { layoutClassName?: string; @@ -23,11 +16,6 @@ interface HeaderTemplateProps { export const HeaderTemplate: React.FC = ({ layoutClassName }) => { const { t } = useTranslation(); - const [topNavItems, setTopNavItems] = React.useState([]); - const { gatsbyContext } = useGatsbyContext(); - - const _useHeaderContent = useHeaderContent(); - const getHeaderContent = _useHeaderContent.getContent(); const optionalNavItems: THeaderTopNavItem[] = []; @@ -70,13 +58,7 @@ export const HeaderTemplate: React.FC = ({ layoutClassName icon: , }); - const { headerTopNavItems } = useHeaderTopNavItems( - getHeaderContent.isSuccess && getHeaderContent.data.concat(optionalNavItems), - ); - - React.useEffect(() => { - setTopNavItems(headerTopNavItems); - }, [gatsbyContext.location.pathname, gatsbyContext.pageContext?.breadcrumb.crumbs]); + const { topNavItems } = useHeaderTopNavItems(optionalNavItems); return ( @@ -91,7 +73,6 @@ export const HeaderTemplate: React.FC = ({ layoutClassName
} - tooltipId={TOOLTIP_ID} layoutClassName={styles.test} items={topNavItems} /> diff --git a/pwa/tsconfig.json b/pwa/tsconfig.json index 08214f8..43d4b66 100644 --- a/pwa/tsconfig.json +++ b/pwa/tsconfig.json @@ -9,7 +9,8 @@ "esModuleInterop": true, "forceConsistentCasingInFileNames": true, "strict": true, - "skipLibCheck": true + "skipLibCheck": true, + "resolveJsonModule": true }, "include": ["./src/**/*"] } From 5229c15874371646dde5533d4e41ff663f96aa68 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 5 Dec 2023 15:55:11 +0100 Subject: [PATCH 11/13] updated package --- pwa/package-lock.json | 8 ++++---- pwa/package.json | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/pwa/package-lock.json b/pwa/package-lock.json index 59b5e20..510a4b8 100644 --- a/pwa/package-lock.json +++ b/pwa/package-lock.json @@ -8,7 +8,7 @@ "name": "product-website-template", "version": "1.0.0", "dependencies": { - "@conduction/components": "2.2.39", + "@conduction/components": "2.2.40", "@conduction/theme": "1.0.57", "@fortawesome/fontawesome-svg-core": "^6.5.0", "@fortawesome/free-brands-svg-icons": "6.5.0", @@ -2053,9 +2053,9 @@ } }, "node_modules/@conduction/components": { - "version": "2.2.39", - "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.39.tgz", - "integrity": "sha512-EyXotA/XD1dK4yX5Y9r6uWeeAHJETaiBchoP84YGi5IE10aqHpwnJ7kTsChKKch9piwx4kWqzqAIwXWdnv/aqQ==", + "version": "2.2.40", + "resolved": "https://registry.npmjs.org/@conduction/components/-/components-2.2.40.tgz", + "integrity": "sha512-5NpGGi9K8tNCScVyJK+UJE0dTZSYUWtueqf3OrK1LoPEzkiWoe4RoIKILztBqbHEIEGMyx9+3Hmc8wKtkVXdbg==", "dependencies": { "@fortawesome/fontawesome-svg-core": "^6.4.2", "@fortawesome/free-solid-svg-icons": "^6.4.2", diff --git a/pwa/package.json b/pwa/package.json index 28d2726..b64b641 100644 --- a/pwa/package.json +++ b/pwa/package.json @@ -22,7 +22,7 @@ "prepare": "cd .. && husky install" }, "dependencies": { - "@conduction/components": "2.2.39", + "@conduction/components": "2.2.40", "@conduction/theme": "1.0.57", "@fortawesome/fontawesome-svg-core": "^6.5.0", "@fortawesome/free-brands-svg-icons": "6.5.0", From 9912bf8291000449f083c6b1b818902f828689c5 Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 5 Dec 2023 16:02:49 +0100 Subject: [PATCH 12/13] added requested changes --- pwa/src/context/gatsby.ts | 4 - pwa/src/hooks/useHeaderTopNavItems.ts | 15 ++-- pwa/src/layout/Layout.tsx | 18 +---- pwa/src/services/getScreenSize.ts | 7 -- .../templateParts/header/HeaderTemplate.tsx | 74 ++++++++++--------- 5 files changed, 49 insertions(+), 69 deletions(-) delete mode 100644 pwa/src/services/getScreenSize.ts diff --git a/pwa/src/context/gatsby.ts b/pwa/src/context/gatsby.ts index f905d52..6b54b7e 100644 --- a/pwa/src/context/gatsby.ts +++ b/pwa/src/context/gatsby.ts @@ -1,18 +1,14 @@ import * as React from "react"; import { GlobalContext } from "./global"; -export type TScreenSize = "mobile" | "tablet" | "desktop"; - export interface IGatsbyContext { pageContext: any; location: any; - screenSize: TScreenSize; } export const defaultGatsbyContext: IGatsbyContext = { pageContext: null, location: null, - screenSize: "desktop", }; export const useGatsbyContext = () => { diff --git a/pwa/src/hooks/useHeaderTopNavItems.ts b/pwa/src/hooks/useHeaderTopNavItems.ts index 41b08ca..a9d5825 100644 --- a/pwa/src/hooks/useHeaderTopNavItems.ts +++ b/pwa/src/hooks/useHeaderTopNavItems.ts @@ -16,7 +16,6 @@ export type THeaderTopNavItem = { }; }; icon?: JSX.Element; - showToolTip?: boolean; handleClick?: { link: string; }; @@ -38,8 +37,10 @@ export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => { React.useEffect(() => { if (!getHeaderContent.data) return; - const headerTopNavItems = [...getHeaderContent.data, ...(optionalData ?? [])].map((item: any) => { - const isCurrent = (current: any) => { + const rawHeaderTopNavItems = [...getHeaderContent.data, ...(optionalData ?? [])]; + + const headerTopNavItems = rawHeaderTopNavItems.map((item: any) => { + const getIsCurrent = (current: any) => { const prefixedPathname = process.env.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true" ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}${current.pathname}` @@ -86,7 +87,7 @@ export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => { } }; - const setSubItems = (subItems: ITopNavItem[]) => { + const getSubItems = (subItems: ITopNavItem[]) => { if (!subItems) return; const subItemsArray: ITopNavItem[] = []; @@ -94,7 +95,7 @@ export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => { subItemsArray.push({ label: t(item.label), type: item.type, - current: item.current ? isCurrent(item.current) : false, + current: item.current ? getIsCurrent(item.current) : false, handleClick: () => getOnClick(item.handleClick, item.type, item.label), }); }); @@ -108,9 +109,9 @@ export const useHeaderTopNavItems = (optionalData?: THeaderTopNavItem[]) => { label: t(item.label), type: item.type, icon: item.icon, - current: item.current ? isCurrent(item.current) : false, + current: item.current ? getIsCurrent(item.current) : false, handleClick: () => getOnClick(item.handleClick, item.type, item.label), - subItems: setSubItems(item.subItems), + subItems: getSubItems(item.subItems), }; }); diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index a9251d3..a364d99 100644 --- a/pwa/src/layout/Layout.tsx +++ b/pwa/src/layout/Layout.tsx @@ -12,8 +12,6 @@ import { IconDefinition, IconPack, library } from "@fortawesome/fontawesome-svg- import { fas } from "@fortawesome/free-solid-svg-icons"; import { fab } from "@fortawesome/free-brands-svg-icons"; import { far } from "@fortawesome/free-regular-svg-icons"; -import { TScreenSize } from "../context/gatsby"; -import { getScreenSize } from "../services/getScreenSize"; import { faReadTheDocs } from "../assets/customIcons"; import { ToolTip } from "@conduction/components"; @@ -28,32 +26,22 @@ interface LayoutProps { const Layout: React.FC = ({ children, pageContext, location }) => { const [API, setAPI] = React.useState(React.useContext(APIContext)); const [globalContext, setGlobalContext] = React.useState(defaultGlobalContext); - const [screenSize, setScreenSize] = React.useState("mobile"); library.add(fas, fab as IconPack, far as IconPack, faReadTheDocs as IconDefinition); React.useEffect(() => { - // initiate API Service setAPI(new APIService()); - - // initiate screen size watcher - const handleWindowResize = () => { - setScreenSize(getScreenSize(window.innerWidth)); - }; - window.addEventListener("resize", handleWindowResize); - - () => window.removeEventListener("resize", handleWindowResize); - }, []); + }, [pageContext]); React.useEffect(() => { setGlobalContext((context) => ({ ...context, initiated: true, gatsby: { - ...{ pageContext, location, previousPath: location.pathname, screenSize: getScreenSize(window.innerWidth) }, + ...{ pageContext, location, previousPath: location.pathname }, }, })); - }, [pageContext, location, screenSize]); + }, [pageContext, location]); if (!globalContext.initiated) return <>; diff --git a/pwa/src/services/getScreenSize.ts b/pwa/src/services/getScreenSize.ts deleted file mode 100644 index b772854..0000000 --- a/pwa/src/services/getScreenSize.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { TScreenSize } from "../context/gatsby"; - -export const getScreenSize = (screenSize: number): TScreenSize => { - if (screenSize <= 576) return "mobile"; - if (screenSize <= 992) return "tablet"; - return "desktop"; -}; diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx index 08e5132..91932f4 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx @@ -19,44 +19,46 @@ export const HeaderTemplate: React.FC = ({ layoutClassName const optionalNavItems: THeaderTopNavItem[] = []; - process.env.GATSBY_READ_THE_DOCS_URL !== "false" && - optionalNavItems.push({ - label: t("Documentation"), - type: "external", - current: { - pathname: "/documentation", - }, - handleClick: { - link: process.env.GATSBY_READ_THE_DOCS_URL ?? "", - }, - icon: , - }); + React.useEffect(() => { + process.env.GATSBY_READ_THE_DOCS_URL !== "false" && + optionalNavItems.push({ + label: t("Documentation"), + type: "external", + current: { + pathname: "/documentation", + }, + handleClick: { + link: process.env.GATSBY_READ_THE_DOCS_URL ?? "", + }, + icon: , + }); - process.env.GATSBY_SLACK_URL !== "false" && - optionalNavItems.push({ - label: t("Slack"), - type: "external", - current: { - pathname: "/slack", - }, - handleClick: { - link: process.env.GATSBY_SLACK_URL ?? "", - }, - icon: , - }); + process.env.GATSBY_SLACK_URL !== "false" && + optionalNavItems.push({ + label: t("Slack"), + type: "external", + current: { + pathname: "/slack", + }, + handleClick: { + link: process.env.GATSBY_SLACK_URL ?? "", + }, + icon: , + }); - process.env.GATSBY_GITHUB_REPOSITORY_URL && - optionalNavItems.push({ - label: t("GitHub"), - type: "external", - current: { - pathname: "/github", - }, - handleClick: { - link: process.env.GATSBY_GITHUB_REPOSITORY_URL ?? "", - }, - icon: , - }); + process.env.GATSBY_GITHUB_REPOSITORY_URL && + optionalNavItems.push({ + label: t("GitHub"), + type: "external", + current: { + pathname: "/github", + }, + handleClick: { + link: process.env.GATSBY_GITHUB_REPOSITORY_URL ?? "", + }, + icon: , + }); + }, []); const { topNavItems } = useHeaderTopNavItems(optionalNavItems); From e6da2af75f346f2fa65632b4d98489fe010aefbc Mon Sep 17 00:00:00 2001 From: Remko Date: Tue, 5 Dec 2023 16:08:56 +0100 Subject: [PATCH 13/13] cleanup --- pwa/src/templates/templateParts/header/HeaderTemplate.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx index 91932f4..4d947a5 100644 --- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx +++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx @@ -75,7 +75,6 @@ export const HeaderTemplate: React.FC = ({ layoutClassName
} - layoutClassName={styles.test} items={topNavItems} />