Merge pull request #166 from ConductionNL/feature/XW-106/JSON-config

Feature/xw 106/json config
ConductionNL · Nov 14, 2023 · 0729655 · 0729655
2 parents a78a80d + ea27f49
commit 0729655
Show file tree

Hide file tree

Showing 18 changed files with 108 additions and 34 deletions.
diff --git a/pwa/gatsby-config.js b/pwa/gatsby-config.js
@@ -3,10 +3,14 @@ require("dotenv").config({
 });
 
 module.exports = {
+  /**
+   * We do NOT want to set the pathPrefix when we're using a DNS; it's only needed on gh-pages
+   * We CAN NOT set the pathPrefix when we're using the JSON-config files (due to needing access to window)
+   */
   pathPrefix:
     process.env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true"
       ? `/${process.env.GITHUB_REPOSITORY_NAME}`
-      : "", // we do NOT want to set the prefix if we're using an DNS
+      : "",
   plugins: [
     {
       resolve: `gatsby-plugin-layout`,

diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
@@ -25,7 +25,7 @@ export type TSendFunction = (
 export default class APIService {
   public get BaseClient(): AxiosInstance {
     return axios.create({
-      baseURL: process.env.GATSBY_API_BASE_URL,
+      baseURL: window.sessionStorage.getItem("API_BASE_URL") ?? "",
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -35,7 +35,7 @@ export default class APIService {
 
   public get FilterCountClient(): AxiosInstance {
     return axios.create({
-      baseURL: process.env.GATSBY_API_BASE_URL,
+      baseURL: window.sessionStorage.getItem("API_BASE_URL") ?? "",
       headers: {
         Accept: "application/json+aggregations",
         "Content-Type": "application/json",
@@ -45,17 +45,13 @@ export default class APIService {
 
   public get FooterContentClient(): AxiosInstance {
     return axios.create({
-      baseURL: removeFileNameFromUrl(
-        process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0
-          ? process.env.GATSBY_FOOTER_CONTENT
-          : DEFAULT_FOOTER_CONTENT_URL,
-      ),
+      baseURL: removeFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL),
     });
   }
 
   public get MarkdownClient(): AxiosInstance {
     return axios.create({
-      baseURL: process.env.GATSBY_BASE_URL ?? undefined,
+      baseURL: window.sessionStorage.getItem("BASE_URL") ?? undefined,
       headers: {
         Accept: "application/vnd.github.html",
       },

diff --git a/pwa/src/apiService/resources/filterCount.ts b/pwa/src/apiService/resources/filterCount.ts
@@ -13,8 +13,8 @@ export default class FilterCount {
   public getCategoryCount = async (): Promise<any> => {
     let endpoint = "/openWOO?_queries[]=Categorie";
 
-    if (process.env.GATSBY_OIDN_NUMBER) {
-      endpoint += `&oidn=${process.env.GATSBY_OIDN_NUMBER}`;
+    if (window.sessionStorage.getItem("OIDN_NUMBER")) {
+      endpoint += `&oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
     }
 
     const { data } = await this._send(this._instance, "GET", endpoint);

diff --git a/pwa/src/apiService/resources/openWoo.ts b/pwa/src/apiService/resources/openWoo.ts
@@ -19,8 +19,8 @@ export default class OpenWoo {
       filters,
     )}&_order[Publicatiedatum]=desc&_limit=${limit}&_page=${currentPage}`;
 
-    if (process.env.GATSBY_OIDN_NUMBER) {
-      endpoint += `&oidn=${process.env.GATSBY_OIDN_NUMBER}`;
+    if (window.sessionStorage.getItem("OIDN_NUMBER")) {
+      endpoint += `&oidn=${window.sessionStorage.getItem("OIDN_NUMBER")}`;
     }
 
     const { data } = await this._send(this._instance, "GET", endpoint);

diff --git a/pwa/src/hooks/footerContent.ts b/pwa/src/hooks/footerContent.ts
@@ -8,11 +8,7 @@ import { DEFAULT_FOOTER_CONTENT_URL } from "../templates/templateParts/footer/Fo
 export const useFooterContent = () => {
   const API: APIService | null = React.useContext(APIContext);
 
-  const fileName = getFileNameFromUrl(
-    process.env.GATSBY_FOOTER_CONTENT !== undefined && process.env.GATSBY_FOOTER_CONTENT.length !== 0
-      ? process.env.GATSBY_FOOTER_CONTENT
-      : DEFAULT_FOOTER_CONTENT_URL,
-  );
+  const fileName = getFileNameFromUrl(window.sessionStorage.getItem("FOOTER_CONTENT") ?? DEFAULT_FOOTER_CONTENT_URL);
 
   const getContent = () =>
     useQuery<any, Error>(["contents", fileName], () => API?.FooterContent.getContent(fileName), {

diff --git a/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx b/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx
@@ -89,7 +89,7 @@ const handleInternalLinks = (props: any, targetFile: string, location: string, d
     if (!directoryFound) {
       const hrefWithLeadingSlash = !props.href.startsWith("/") ? `/${props.href}` : props.href;
 
-      open(`${process.env.GATSBY_GITHUB_REPOSITORY_URL}/blob/master${hrefWithLeadingSlash}`);
+      open(`${window.sessionStorage.getItem("GITHUB_REPOSITORY_URL") ?? ""}/blob/master${hrefWithLeadingSlash}`);
     }
 
     return; // ensure no other flow is triggered

diff --git a/pwa/src/hooks/htmlParser/image/getImage.tsx b/pwa/src/hooks/htmlParser/image/getImage.tsx
@@ -4,7 +4,7 @@ export const getImage = (props: any) => {
   let src = props.src;
 
   if (!props.src.includes("https://" || "http://")) {
-    const sessionUrl = process.env.GATSBY_GITHUB_REPOSITORY_URL;
+    const sessionUrl = window.sessionStorage.getItem("GITHUB_REPOSITORY_URL");
     const url = sessionUrl?.replace("https://github.com/", "");
 
     src = `https://raw.githubusercontent.com/${url}/master/docs/features/${props.src}`;

diff --git a/pwa/src/hooks/useMarkdownDirectories.ts b/pwa/src/hooks/useMarkdownDirectories.ts
@@ -9,7 +9,7 @@ export const useMarkdownDirectories = () => {
   const [directories, setDirectories] = React.useState<TMarkdownDirectory[]>([]);
 
   React.useEffect(() => {
-    const markdownDirectoryPathsString: string | undefined = process.env.GATSBY_GITHUB_DOCS_DIRECTORY_PATHS;
+    const markdownDirectoryPathsString: string | null = window.sessionStorage.getItem("GITHUB_DOCS_DIRECTORY_PATHS");
 
     if (!markdownDirectoryPathsString) return;
 

diff --git a/pwa/src/layout/Head.tsx b/pwa/src/layout/Head.tsx
@@ -26,13 +26,13 @@ export const Head: React.FC = () => {
         lang: currentLanguage,
       }}
       bodyAttributes={{
-        class: process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME,
+        class: window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME"),
       }}
     >
-      <title>{`Woo | ${process.env.GATSBY_ORGANISATION_NAME} | ${
+      <title>{`Woo | ${window.sessionStorage.getItem("ORGANISATION_NAME")} | ${
         getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error"
       }`}</title>
-      <link rel="icon" type="svg" href={process.env.GATSBY_FAVICON_URL} />
+      <link rel="icon" type="svg" href={window.sessionStorage.getItem("FAVICON_URL") ?? ""} />
     </Helmet>
   );
 };
diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx
@@ -12,6 +12,7 @@ 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 { IconPack, library } from "@fortawesome/fontawesome-svg-core";
+import { initiateEnvironment } from "../services/initiateEnvironment";
 
 interface LayoutProps {
   children: React.ReactNode;
@@ -25,6 +26,10 @@ const Layout: React.FC<LayoutProps> = ({ children, pageContext, location }) => {
 
   library.add(fas, fab as IconPack, far as IconPack);
 
+  React.useEffect(() => {
+    initiateEnvironment();
+  }, []);
+
   React.useEffect(() => {
     setAPI(new APIService());
   }, [pageContext]);

diff --git a/pwa/src/services/getConfig.ts b/pwa/src/services/getConfig.ts
@@ -0,0 +1,11 @@
+import Conduction from "./../../static/configFiles/conduction.json";
+import Epe from "./../../static/configFiles/epe.json";
+
+export const getConfig = (domain: string): Record<string, any> | undefined => {
+  switch (domain) {
+    case "open.epe.nl":
+      return Epe as Record<string, any>;
+    default:
+      return Conduction as Record<string, any>;
+  }
+};
diff --git a/pwa/src/services/initiateEnvironment.ts b/pwa/src/services/initiateEnvironment.ts
@@ -0,0 +1,33 @@
+import { getConfig } from "./getConfig";
+
+export const initiateEnvironment = () => {
+  const varsAvailable = process.env.GATSBY_ENV_VARS_SET === "true";
+
+  if (varsAvailable) {
+    window.sessionStorage.setItem("API_BASE_URL", process.env.GATSBY_API_BASE_URL ?? "");
+    window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", process.env.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+    window.sessionStorage.setItem("FAVICON_URL", process.env.GATSBY_FAVICON_URL ?? "");
+    window.sessionStorage.setItem("ORGANISATION_NAME", process.env.GATSBY_ORGANISATION_NAME ?? "");
+    window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", process.env.GATSBY_JUMBOTRON_IMAGE_URL ?? "");
+    window.sessionStorage.setItem("FOOTER_LOGO_HREF", process.env.GATSBY_FOOTER_LOGO_HREF ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT", process.env.FOOTER_CONTENT ?? "");
+    window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", process.env.GATSBY_FOOTER_CONTENT_HEADER ?? "");
+    window.sessionStorage.setItem("OIDN_NUMBER", process.env.GATSBY_OIDN_NUMBER ?? "");
+
+    return; // all vars are set in sessionStorage, nothing else to do
+  }
+
+  const config = getConfig(window.location.hostname);
+
+  if (!config) return; // no config found, nothing else to do
+
+  window.sessionStorage.setItem("API_BASE_URL", config.GATSBY_API_BASE_URL ?? "");
+  window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", config.GATSBY_NL_DESIGN_THEME_CLASSNAME ?? "");
+  window.sessionStorage.setItem("FAVICON_URL", config.GATSBY_FAVICON_URL ?? "");
+  window.sessionStorage.setItem("ORGANISATION_NAME", config.GATSBY_ORGANISATION_NAME ?? "");
+  window.sessionStorage.setItem("JUMBOTRON_IMAGE_URL", config.GATSBY_JUMBOTRON_IMAGE_URL ?? "");
+  window.sessionStorage.setItem("FOOTER_LOGO_HREF", config.GATSBY_FOOTER_LOGO_HREF ?? "");
+  window.sessionStorage.setItem("FOOTER_CONTENT", config.GATSBY_FOOTER_CONTENT ?? "");
+  window.sessionStorage.setItem("FOOTER_CONTENT_HEADER", config.GATSBY_FOOTER_CONTENT_HEADER ?? "");
+  window.sessionStorage.setItem("OIDN_NUMBER", config.GATSBY_OIDN_NUMBER ?? "");
+};
diff --git a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx
@@ -11,18 +11,19 @@ export const JumbotronTemplate: React.FC = () => {
     <div
       aria-label={t("Jumbotron")}
       role="contentinfo"
-      style={{ backgroundImage: `url(${process.env.GATSBY_JUMBOTRON_IMAGE_URL})` }}
+      style={{ backgroundImage: `url("${window.sessionStorage.getItem("JUMBOTRON_IMAGE_URL")}")` }}
       className={styles.wrapper}
     >
       <Page>
         <PageContent>
           <CardWrapper aria-label={t("Jumbotron card")} role="contentinfo" className={styles.card}>
             <Heading1 className={styles.title}>
-              {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}
+              {t("Woo-publications of")} {window.sessionStorage.getItem("ORGANISATION_NAME")}
             </Heading1>
 
             <Paragraph className={styles.description}>
-              {t("On this page you will find the Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME}
+              {t("On this page you will find the Woo-publications of")}{" "}
+              {window.sessionStorage.getItem("ORGANISATION_NAME")}
             </Paragraph>
           </CardWrapper>
         </PageContent>

diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx
@@ -60,14 +60,14 @@ export const FooterTemplate: React.FC = () => {
   // }, []);
 
   React.useEffect(() => {
-    if (!process.env.GATSBY_FOOTER_CONTENT) return;
+    if (!window.sessionStorage.getItem("FOOTER_CONTENT")) return;
 
     try {
-      setFooterContent(JSON.parse(process.env.GATSBY_FOOTER_CONTENT));
+      setFooterContent(JSON.parse(window.sessionStorage.getItem("FOOTER_CONTENT") ?? ""));
     } catch {
       console.warn("Could not parse footer content.");
     }
-  }, [process.env.GATSBY_FOOTER_CONTENT]);
+  }, [window.sessionStorage.getItem("FOOTER_CONTENT")]);
 
   return (
     <PageFooter className={styles.footer}>
@@ -79,11 +79,13 @@ export const FooterTemplate: React.FC = () => {
         </div>
 
         <div className={styles.logoAndConduction}>
-          {process.env.GATSBY_FOOTER_LOGO_URL !== "false" && (
+          {window.sessionStorage.getItem("FOOTER_LOGO_URL") !== "false" && (
             <Logo
               variant="footer"
               onClick={() =>
-                process.env.GATSBY_FOOTER_LOGO_HREF ? open(process.env.GATSBY_FOOTER_LOGO_HREF) : navigate("/")
+                window.sessionStorage.getItem("FOOTER_LOGO_HREF")
+                  ? open(window.sessionStorage.getItem("FOOTER_LOGO_HREF") ?? "")
+                  : navigate("/")
               }
             />
           )}
@@ -100,7 +102,7 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content })
 
   return (
     <section>
-      <DynamicSectionHeading heading={process.env.GATSBY_FOOTER_CONTENT_HEADER} {...{ content }} />
+      <DynamicSectionHeading heading={window.sessionStorage.getItem("FOOTER_CONTENT_HEADER") ?? ""} {...{ content }} />
 
       {content.items.map((item, idx) => (
         <div key={idx} className={styles.dynamicSectionContent}>

diff --git a/pwa/static/.env.development b/pwa/static/.env.development
@@ -23,3 +23,6 @@ GATSBY_FOOTER_CONTENT_HEADER=""
 
 #OIDN
 GATSBY_OIDN_NUMBER=""
+
+# Deployment option, if you're using this .env file DO NOT REMOVE OR EDIT THIS
+GATSBY_ENV_VARS_SET="true"
diff --git a/pwa/static/configFiles/conduction.json b/pwa/static/configFiles/conduction.json
@@ -0,0 +1,11 @@
+{
+  "GATSBY_API_BASE_URL": "https://api.gateway.commonground.nu/api",
+  "GATSBY_NL_DESIGN_THEME_CLASSNAME": "conduction-theme",
+  "GATSBY_FAVICON_URL": "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDIwMDEwOTA0Ly9FTiIKICAgICJodHRwOi8vd3d3LnczLm9yZy9UUi8yMDAxL1JFQy1TVkctMjAwMTA5MDQvRFREL3N2ZzEwLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4wIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICAgd2lkdGg9IjcxLjAwMDAwMHB0IiBoZWlnaHQ9IjcwLjAwMDAwMHB0IiB2aWV3Qm94PSIwIDAgNzEuMDAwMDAwIDcwLjAwMDAwMCIKICAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJ4TWlkWU1pZCBtZWV0Ij4KCiAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLjAwMDAwMCw3MC4wMDAwMDApIHNjYWxlKDAuMTAwMDAwLC0wLjEwMDAwMCkiCiAgICAgICBmaWxsPSIjNDM3NkZDIiBzdHJva2U9Im5vbmUiPgogICAgICAgIDxwYXRoIGQ9Ik0yMTggNTkyIGwtMTM3IC03NyAwIC0xNjUgMCAtMTY1IDEzMSAtNzQgYzcyIC00MSAxMzcgLTc0IDE0MyAtNzQgNgowIDcwIDMzIDE0MyA3NCBsMTMxIDc0IDEgMTY1IDAgMTY1IC02OCAzNyBjLTM3IDIxIC05OSA1NiAtMTM3IDc3IGwtNzEgNDAKLTEzNiAtNzd6IG0yOTUgLTg1IGw1NyAtMzIgMCAtMTI1IDAgLTEyNSAtMTA2IC02MCBjLTU4IC0zMyAtMTA4IC02MCAtMTExCi01OSAtMyAwIC01MiAyNyAtMTA5IDYwIGwtMTAzIDU5IDAgMTI1IDAgMTI1IDEwNyA2MSAxMDcgNjIgNTAgLTI5IGMyNyAtMTYKNzYgLTQ0IDEwOCAtNjJ6Ii8+CiAgICAgICAgPHBhdGggZD0iTTI3OCA0NzIgbC02OCAtMzcgMCAtODUgMCAtODUgNzMgLTM5IDczIC0zOSA2MiAzNCBjMzQgMTggNjIgMzcgNjIKNDEgMCA0IC0xNCAxNSAtMzEgMjMgLTI4IDE1IC0zMyAxNSAtNTQgMSAtMzEgLTIwIC00NiAtMjAgLTg0IDIgLTI3IDE1IC0zMQoyMiAtMzEgNjIgMCA0MCA0IDQ3IDMxIDYzIDM4IDIxIDUzIDIxIDg0IDEgMjEgLTE0IDI2IC0xNCA1NCAxIDE3IDggMzEgMTkgMzEKMjMgMCA4IC0xMTMgNzIgLTEyNiA3MiAtNSAwIC0zOSAtMTcgLTc2IC0zOHoiLz4KICAgIDwvZz4KPC9zdmc+Cg==",
+  "GATSBY_ORGANISATION_NAME": "Conduction",
+  "GATSBY_JUMBOTRON_IMAGE_URL": "https://www.conduction.nl/wp-content/uploads/2021/07/cropped-Conduction_HOME_0000_afb1-1.png",
+  "GATSBY_FOOTER_LOGO_HREF": "https://www.conduction.nl/",
+  "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/ConductionNL/woo-website-template/main/pwa/src/templates/templateParts/footer/FooterContent.json",
+  "GATSBY_FOOTER_CONTENT_HEADER": "",
+  "GATSBY_OIDN_NUMBER": ""
+}
diff --git a/pwa/static/configFiles/epe.json b/pwa/static/configFiles/epe.json
@@ -0,0 +1,11 @@
+{
+  "GATSBY_API_BASE_URL": "https://api.gateway.commonground.nu/api",
+  "GATSBY_NL_DESIGN_THEME_CLASSNAME": "epe-theme",
+  "GATSBY_FAVICON_URL": "https://www.epe.nl/sites/default/themes/custom/toptasks_sub_theme/favicon/favicon-32x32.png",
+  "GATSBY_ORGANISATION_NAME": "Gemeente Epe",
+  "GATSBY_JUMBOTRON_IMAGE_URL": "https://www.epe.nl/sites/default/files/styles/hero_medium/public/2023-09/Koeien.jpg?h=18223889&itok=BSberuIC",
+  "GATSBY_FOOTER_LOGO_HREF": "https://www.epe.nl/",
+  "GATSBY_FOOTER_CONTENT": "https://raw.githubusercontent.com/ConductionNL/woo-website-epe/main/FooterContent.json",
+  "GATSBY_FOOTER_CONTENT_HEADER": "heading-3",
+  "GATSBY_OIDN_NUMBER": "00000001001104524000"
+}
diff --git 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/**/*"]
 }