INIT

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",
       },

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);

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);

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), {

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

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}`;

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;
 

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>
   );
 };

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]);

pwa/src/services/getConfig.ts

@@ -0,0 +1,8 @@
+import Rotterdam from "./../../static/configFiles/rotterdam.json";
+
+export const getConfig = (domain: string): Record<string, any> | undefined => {
+  switch (domain) {
+    case "localhost":
+      return Rotterdam as Record<string, any>;
+  }
+};

pwa/src/services/initiateEnvironment.ts

@@ -0,0 +1,48 @@
+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 ?? "");
+};
+
+export const getPathPrefix = (): string => {
+  const varsAvailable = process.env.GATSBY_ENV_VARS_SET === "true";
+  const config = getConfig(window.location.hostname);
+
+  if (varsAvailable && process.env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true") {
+    return `/${process.env.GITHUB_REPOSITORY_NAME}`;
+  }
+
+  if (config && config.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX) {
+    return `/${config.GITHUB_REPOSITORY_NAME}`;
+  }
+
+  return "";
+};

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>

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}>

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"

pwa/static/configFiles/rotterdam.json

@@ -0,0 +1,13 @@
+{
+  "GITHUB_REPOSITORY_NAME": "woo-website-template",
+  "USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX": "true",
+  "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,PD94bW... (truncated for brevity)",
+  "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://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": ""
+}

pwa/tsconfig.json

@@ -9,7 +9,8 @@
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "strict": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "resolveJsonModule": true
   },
   "include": ["./src/**/*"]
 }