updated footer

ConductionNL · Nov 1, 2023 · 7796835 · 7796835
1 parent 7bc0043
commit 7796835
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 20 deletions.
diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/package.json b/pwa/package.json
@@ -4,7 +4,9 @@
   "private": true,
   "description": "Product Website Template",
   "author": "Conduction",
-  "keywords": ["gatsby"],
+  "keywords": [
+    "gatsby"
+  ],
   "scripts": {
     "develop": "gatsby develop",
     "start": "gatsby develop",
@@ -23,7 +25,7 @@
   },
   "dependencies": {
     "@conduction/components": "2.2.18",
-    "@conduction/theme": "1.0.51",
+    "@conduction/theme": "1.0.52",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-brands-svg-icons": "6.4.2",
     "@fortawesome/free-regular-svg-icons": "6.4.2",

diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx
@@ -29,7 +29,9 @@ export const Head: React.FC = () => {
         class: process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME,
       }}
     >
-      <title>{`Woo | ${getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error"}`}</title>
+      <title>{`Woo | ${process.env.GATSBY_ORGANISATION_NAME} | ${
+        getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error"
+      }`}</title>
       <link rel="icon" type="svg" href={process.env.GATSBY_FAVICON_URL} />
     </Helmet>
   );

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.module.css b/pwa/src/templates/templateParts/footer/FooterTemplate.module.css
@@ -35,18 +35,49 @@
 
 .link:hover {
   cursor: pointer;
+  color: var(--utrecht-page-footer-link-hover-color, inherit) !important;
+  text-decoration-line: var(
+    --utrecht-page-footer-link-hover-text-decoration,
+    inherit
+  ) !important;
+  text-decoration-thickness: var(
+    --utrecht-page-footer-link-hover-text-decoration-thickness,
+    inherit
+  ) !important;
+}
+
+.link {
+  color: var(--utrecht-page-footer-link-color, inherit) !important;
+  text-decoration-line: var(
+    --utrecht-page-footer-link-text-decoration,
+    inherit
+  ) !important;
+  text-decoration-color: var(
+    --utrecht-page-footer-link-text-decoration-color,
+    inherit
+  ) !important;
+  text-decoration-thickness: var(
+    --utrecht-page-footer-link-text-decoration-thickness,
+    inherit
+  ) !important;
+  text-underline-offset: var(
+    --utrecht-page-footer-link-text-underline-offset,
+    inherit
+  ) !important;
 }
 
 .withLoveConductionLink {
   display: inline-block;
 }
+
 .withLoveConductionLink:hover {
   margin-inline-start: 10px;
 }
 
 .withLoveLink:hover > :first-child {
   transform: scale(1.2);
 }
+
 .withLoveLink > :first-child {
   transition: all 1s;
   transform-origin: 50% 50%;
@@ -60,8 +91,8 @@
 }
 
 .dynamicSectionTitle {
-  margin-block-end: 18px;
-  color: inherit !important;
+  margin-block-end: 18px !important;
+  color: var(--utrecht-page-footer-heading-color, inherit) !important;
 }
 
 .dynamicSectionContent {
@@ -79,9 +110,12 @@
 
 .iconLeft {
   margin-inline-end: var(--utrecht-icon-gap);
+  color: var(--utrecht-page-footer-icon-color, inherit);
 }
+
 .iconRight {
   margin-inline-start: var(--utrecht-icon-gap);
+  color: var(--utrecht-page-footer-icon-color, inherit);
 }
 
 @media only screen and (max-width: 992px) {
@@ -99,6 +133,7 @@
       var(--utrecht-page-footer-background-position)
     );
   }
+
   .contentGrid {
     grid-template-columns: repeat(1, minmax(0, 1fr));
   }

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -1,7 +1,16 @@
 import * as React from "react";
 import * as styles from "./FooterTemplate.module.css";
 import parse from "html-react-parser";
-import { PageFooter, Link, Heading3, Icon } from "@utrecht/component-library-react/dist/css-module";
+import {
+  PageFooter,
+  Link,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  Heading5,
+  Icon,
+} from "@utrecht/component-library-react/dist/css-module";
 import { navigate } from "gatsby-link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCode, faHeart } from "@fortawesome/free-solid-svg-icons";
@@ -46,7 +55,7 @@ export const FooterTemplate: React.FC = () => {
   // For development
   // React.useEffect(() => {
   //   const data = require("./FooterContent.json");
-  //   setFooterContent1(data);
+  //   setFooterContent(data);
   // }, []);
 
   React.useEffect(() => {
@@ -82,7 +91,7 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content })
 
   return (
     <section>
-      <Heading3 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading3>
+      <DynamicSectionHeading heading={process.env.GATSBY_FOOTER_CONTENT_HEADER} {...{ content }} />
 
       {content.items.map((item, idx) => (
         <div key={idx} className={styles.dynamicSectionContent}>
@@ -104,6 +113,25 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content })
   );
 };
 
+const DynamicSectionHeading: React.FC<{ content: TDynamicContentItem; heading?: string }> = ({ content, heading }) => {
+  const { t } = useTranslation();
+
+  switch (heading) {
+    case "heading-1":
+      return <Heading1 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading1>;
+    case "heading-2":
+      return <Heading2 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading2>;
+    case "heading-3":
+      return <Heading3 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading3>;
+    case "heading-4":
+      return <Heading4 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading4>;
+    case "heading-5":
+      return <Heading5 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading5>;
+    default:
+      return <Heading3 className={styles.dynamicSectionTitle}>{t(content.title)}</Heading3>;
+  }
+};
+
 const Logo: React.FC = () => {
   if (process.env.GATSBY_FOOTER_LOGO_URL === "false") return <></>;
   const { t } = useTranslation();
@@ -135,7 +163,9 @@ const WithLoveByConduction: React.FC = () => {
         target="_blank"
         aria-label={`${t("Link to github repository")}, ${t("Opens a new window")}`}
       >
-        <FontAwesomeIcon icon={faCode} />
+        <Icon>
+          <FontAwesomeIcon icon={faCode} />
+        </Icon>
       </Link>{" "}
       with{" "}
       <Link
@@ -144,7 +174,9 @@ const WithLoveByConduction: React.FC = () => {
         target="_blank"
         aria-label={`${t("Link to github contributors page")}, ${t("Opens a new window")}`}
       >
-        <FontAwesomeIcon icon={faHeart} />
+        <Icon>
+          <FontAwesomeIcon icon={faHeart} />
+        </Icon>
       </Link>{" "}
       by{" "}
       <Link
@@ -201,10 +233,13 @@ const InternalLink: React.FC<LinkComponentProps> = ({ item }) => {
   return (
     <Link
       className={styles.link}
-      onClick={() => navigate(item.link ?? "")}
+      onClick={(e: any) => {
+        e.preventDefault(), navigate(item.link ?? "");
+      }}
       tabIndex={0}
       aria-label={`${t(item.ariaLabel)}, ${t(item.value)}`}
       role="button"
+      href={item.link}
     >
       {item.icon && item.icon.placement === "left" && (
         <FontAwesomeIcon className={styles.iconLeft} icon={[item.icon.prefix, item.icon.icon]} />
@@ -233,10 +268,13 @@ const MarkdownLink: React.FC<LinkComponentProps> = ({ item }) => {
   return (
     <Link
       className={styles.link}
-      onClick={() => navigate(`/github/${item.value.replaceAll(" ", "_")}/?link=${item.markdownLink}`)}
+      onClick={(e: any) => {
+        e.preventDefault(), navigate(`/${item.value.replaceAll(" ", "_")}/?link=${item.markdownLink}`);
+      }}
       tabIndex={0}
       aria-label={`${t(item.ariaLabel)}, ${t(item.markdownLink)}`}
       role="button"
+      href={item.link}
     >
       {item.icon && item.icon.placement === "left" && (
         <FontAwesomeIcon className={styles.iconLeft} icon={[item.icon.prefix, item.icon.icon]} />

diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
@@ -38,7 +38,14 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
     <Page>
       <PageContent className={styles.container}>
         <div>
-          <Link className={styles.backLink} onClick={() => navigate("/")} tabIndex={0}>
+          <Link
+            className={styles.backLink}
+            href="/"
+            onClick={(e: any) => {
+              e.preventDefault(), navigate("/");
+            }}
+            tabIndex={0}
+          >
             <FontAwesomeIcon icon={faArrowLeft} /> <span>{t("Back to homepage")}</span>
           </Link>
         </div>

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -20,5 +20,8 @@ GATSBY_FOOTER_LOGO_URL="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdG
 GATSBY_FOOTER_LOGO_HREF=https://conduction.nl/
 GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/ConductionNL/woo-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json"
 
+# options: "heading-1" | "heading-2" | "heading-3" | "heading-4" | "heading-5"
+GATSBY_FOOTER_CONTENT_HEADER=""
+
 #OIDN
 GATSBY_OIDN_NUMBER=""