Skip to content

Commit

Permalink
REFACTOR Footer to allow dynamic content
Browse files Browse the repository at this point in the history
  • Loading branch information
lencodes committed Oct 9, 2023
1 parent b6d9222 commit 58a08b2
Show file tree
Hide file tree
Showing 3 changed files with 134 additions and 49 deletions.
32 changes: 24 additions & 8 deletions pwa/src/templates/templateParts/footer/FooterTemplate.module.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,13 @@
.container {
display: flex;
justify-content: space-between;
width: 100%;
margin: auto;
box-sizing: border-box;
max-inline-size: var(--utrecht-page-max-inline-size);
padding-inline-start: var(--utrecht-page-margin-inline-start);
padding-inline-end: var(--utrecht-page-margin-inline-end);
width: 100%;
align-items: center;
}

.footer {
--utrecht-unordered-list-item-padding-inline-start: 0;
--utrecht-unordered-list-padding-inline-start: 0;
--utrecht-unordered-list-item-margin-block-end: 0;
--utrecht-unordered-list-item-margin-block-start: 0;
display: flex;
align-items: center;
background-repeat: no-repeat;
Expand Down Expand Up @@ -43,3 +36,26 @@
.link:hover {
color: black !important;
}

.contentGrid {
gap: 28px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}

.dynamicSectionTitle {
margin-block-end: 18px;
}

.dynamicSectionContent {
display: flex;
flex-direction: column;
margin-block-end: 8px;
}

.logoAndConduction {
margin-top: 38px;
display: flex;
justify-content: space-between;
align-items: flex-end;
}
146 changes: 106 additions & 40 deletions pwa/src/templates/templateParts/footer/FooterTemplate.tsx
Original file line number Diff line number Diff line change
@@ -1,58 +1,124 @@
import * as React from "react";
import * as styles from "./FooterTemplate.module.css";
import { PageFooter, Link } from "@utrecht/component-library-react/dist/css-module";
import { PageFooter, Link, Heading3 } from "@utrecht/component-library-react/dist/css-module";
import { navigate } from "gatsby-link";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCode } from "@fortawesome/free-solid-svg-icons";
import { useTranslation } from "react-i18next";

type TDynamicContentItem = {
title: string;
items: { label: string; value: string; link?: string }[];
};

export const FooterTemplate: React.FC = () => {
const { t } = useTranslation();
const [footerContent, setFooterContent] = React.useState<TDynamicContentItem[]>([]);

React.useEffect(() => {
if (!process.env.GATSBY_FOOTER_CONTENT) return;

try {
setFooterContent(JSON.parse(process.env.GATSBY_FOOTER_CONTENT));
} catch {
console.warn("Could not parse footer content.");
}
}, [process.env.GATSBY_FOOTER_CONTENT]);

return (
<PageFooter className={styles.footer}>
<div className={styles.container}>
<div className={styles.imageContainer}>
{process.env.GATSBY_FOOTER_LOGO_URL !== "false" && (
<img
className={styles.image}
onClick={() =>
process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
}
src={process.env.GATSBY_FOOTER_LOGO_URL}
alt={"Footer-logo"}
/>
)}
<div className={styles.contentGrid}>
{footerContent?.map((content, idx) => (
<DynamicSection key={idx} {...{ content }} />
))}
</div>
<div>
<Link
className={styles.link}
href="https://github.com/ConductionNL/woo-website-template"
target="_blank"
description={t("Link to github repository")}
>
<FontAwesomeIcon icon={faCode} />
</Link>{" "}
with{" "}
<Link
className={styles.link}
href="https://github.com/ConductionNL/woo-website-template/graphs/contributors"
target="_blank"
name={t("Link to github contributors page")}
>
❤️
</Link>{" "}
by{" "}
<Link
className={styles.link}
href="https://conduction.nl"
target="_blank"
description={t("Link to conduction website")}
>
Conduction.
</Link>

<div className={styles.logoAndConduction}>
<Logo />
<WithLoveByConduction />
</div>
</div>
</PageFooter>
);
};

const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) => {
return (
<section>
<Heading3 className={styles.dynamicSectionTitle}>{content.title}</Heading3>

{content.items.map((item, idx) => (
<div key={idx} className={styles.dynamicSectionContent}>
<strong>{item.label}</strong>

{/* External Link */}
{item.link && item.link.includes("http") && (
<a href={item.link} target="_blank">
{item.value}
</a>
)}

{/* Internal Link */}
{item.link && !item.link.includes("http") && (
<Link onClick={() => navigate(item.link ?? "")}>{item.value}</Link>
)}

{/* No Link */}
{!item.link && <span>{item.value}</span>}
</div>
))}
</section>
);
};

const Logo: React.FC = () => {
if (process.env.GATSBY_FOOTER_LOGO_URL === "false") return <></>;

return (
<div className={styles.imageContainer}>
<img
className={styles.image}
onClick={() =>
process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
}
src={process.env.GATSBY_FOOTER_LOGO_URL}
alt={"Footer-logo"}
/>
</div>
);
};

const WithLoveByConduction: React.FC = () => {
const { t } = useTranslation();

return (
<div>
<Link
className={styles.link}
href="https://github.com/ConductionNL/woo-website-template"
target="_blank"
description={t("Link to github repository")}
>
<FontAwesomeIcon icon={faCode} />
</Link>{" "}
with{" "}
<Link
className={styles.link}
href="https://github.com/ConductionNL/woo-website-template/graphs/contributors"
target="_blank"
name={t("Link to github contributors page")}
>
❤️
</Link>{" "}
by{" "}
<Link
className={styles.link}
href="https://conduction.nl"
target="_blank"
description={t("Link to conduction website")}
>
Conduction.
</Link>
</div>
);
};
5 changes: 4 additions & 1 deletion pwa/static/.env.development
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,11 @@ GATSBY_ORGANISATION_NAME=Conduction
GATSBY_JUMBOTRON_IMAGE_URL=https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png

# Footer
GATSBY_FOOTER_LOGO_URL="false"
GATSBY_FOOTER_LOGO_URL="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg=="
GATSBY_FOOTER_LOGO_HREF=https://conduction.nl/
GATSBY_FOOTER_CONTENT=



#OIDN
GATSBY_OIDN_NUMBER=""

0 comments on commit 58a08b2

Please sign in to comment.