Merge pull request #408 from OpenCatalogi/feature/OP-145/json-config

feature/OP-145/json-config
OpenCatalogi · Dec 8, 2023 · d17ff6e · d17ff6e
2 parents f8e670c + 74925ac
commit d17ff6e
Show file tree

Hide file tree

Showing 38 changed files with 728 additions and 212 deletions.
diff --git a/.github/workflows/opencatalogi-page-deploy.yml b/.github/workflows/opencatalogi-page-deploy.yml
@@ -7,6 +7,8 @@ env: # Change these to your preferences any image url can also be a base encoded
   # options: "true" | "false"
   USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX: "false"
 
+  SHOW_THEME_SWITCHER: "false"
+
   ME_URL: "https://api.opencatalogi.nl/api/users/me"
   API_URL: "https://api.opencatalogi.nl/api"
   ADMIN_URL: "https://api.opencatalogi.nl/admin"
@@ -68,6 +70,7 @@ jobs:
         with:
           envkey_GATSBY_GITHUB_REPOSITORY_NAME: ${{ env.GITHUB_REPOSITORY_NAME }}
           envkey_GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX: ${{ env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX }}
+          envkey_GATSBY_SHOW_THEME_SWITCHER: ${{ env.SHOW_THEME_SWITCHER }}
           envkey_GATSBY_ME_URL: ${{ env.ME_URL }}
           envkey_GATSBY_API_URL: ${{ env.API_URL }}
           envkey_GATSBY_ADMIN_URL: ${{ env.ADMIN_URL }}

diff --git a/pwa/gatsby-config.js b/pwa/gatsby-config.js
@@ -5,10 +5,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.GATSBY_USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true"
-      ? `/${process.env.GATSBY_GITHUB_REPOSITORY_NAME}`
-      : "", // we do NOT want to set the prefix if we're using an DNS
+    process.env.USE_GITHUB_REPOSITORY_NAME_AS_PATH_PREFIX === "true"
+      ? `/${process.env.GITHUB_REPOSITORY_NAME}`
+      : "",
   plugins: [
     {
       resolve: `gatsby-plugin-layout`,

diff --git a/pwa/package-lock.json b/pwa/package-lock.json
diff --git a/pwa/src/apiService/apiService.ts b/pwa/src/apiService/apiService.ts
@@ -38,7 +38,7 @@ export default class APIService {
     const authorization = this.JWT ? { Authorization: "Bearer " + this.JWT } : {};
 
     return axios.create({
-      baseURL: process.env.GATSBY_API_URL ?? undefined,
+      baseURL: window.sessionStorage.getItem("API_URL") ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -49,7 +49,7 @@ export default class APIService {
 
   public get LoginClient(): AxiosInstance {
     return axios.create({
-      baseURL: process.env.GATSBY_API_URL ?? undefined,
+      baseURL: window.sessionStorage.getItem("API_URL") ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -59,7 +59,7 @@ export default class APIService {
 
   public get BaseClient(): AxiosInstance {
     return axios.create({
-      baseURL: process.env.GATSBY_BASE_URL ?? undefined,
+      baseURL: window.sessionStorage.getItem("BASE_URL") ?? undefined,
       headers: {
         Accept: "application/json",
         "Content-Type": "application/json",
@@ -70,7 +70,7 @@ export default class APIService {
 
   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",
       },
@@ -79,21 +79,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 HeaderContentClient(): AxiosInstance {
     return axios.create({
-      baseURL: removeFileNameFromUrl(
-        process.env.GATSBY_HEADER_CONTENT !== undefined && process.env.GATSBY_HEADER_CONTENT.length !== 0
-          ? process.env.GATSBY_HEADER_CONTENT
-          : DEFAULT_HEADER_CONTENT_URL,
-      ),
+      baseURL: removeFileNameFromUrl(window.sessionStorage.getItem("HEADER_CONTENT") ?? DEFAULT_HEADER_CONTENT_URL),
     });
   }
 

diff --git a/pwa/src/apiService/resources/search.ts b/pwa/src/apiService/resources/search.ts
@@ -15,8 +15,10 @@ export default class Search {
       filters,
     )}`;
 
-    if (process.env.GATSBY_GITHUB_ORGANIZATION_URL) {
-      endpoint += `&embedded.url.embedded.organisation.github=${process.env.GATSBY_GITHUB_ORGANIZATION_URL}`;
+    if (window.sessionStorage.getItem("GITHUB_ORGANIZATION_URL") !== "") {
+      endpoint += `&embedded.url.embedded.organisation.github=${window.sessionStorage.getItem(
+        "GITHUB_ORGANIZATION_URL",
+      )}`;
     }
 
     const { data } = await Send(this._instance, "GET", endpoint);

diff --git a/pwa/src/components/componentCard/ComponentCard.module.css b/pwa/src/components/componentCard/ComponentCard.module.css
@@ -42,48 +42,60 @@
 .interactionLayer,
 .interfaceLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-interaction);
+  --utrecht-badge-color: #ffffff;
 }
 .interactionCategory,
 .interfaceCategory {
   --utrecht-badge-background-color: var(--web-app-layer-category-color-interaction);
+  --utrecht-badge-color: #000000;
 }
 
 .processLayer,
 .processsLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-process);
+  --utrecht-badge-color: #ffffff;
 }
 .procesCategory,
 .processCategory {
   --utrecht-badge-background-color: var(--web-app-layer-category-color-process);
+  --utrecht-badge-color: #000000;
 }
 
 .integrationLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-integration);
+  --utrecht-badge-color: #ffffff;
 }
 .integrationCategory {
   --utrecht-badge-background-color: var(--web-app-layer-category-color-integration);
+  --utrecht-badge-color: #000000;
 }
 
 .servicesLayer,
 .serviceLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-services);
+  --utrecht-badge-color: #ffffff;
 }
 
 .servicesCategory,
 .serviceCategory {
   --utrecht-badge-background-color: var(--web-app-layer-category-color-services);
+  --utrecht-badge-color: #000000;
 }
 
 .dataLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-data);
+  --utrecht-badge-color: #ffffff;
 }
 .dataCategory {
   --utrecht-badge-background-color: var(--web-app-layer-category-color-data);
+  --utrecht-badge-color: #000000;
 }
 
 .unknownLayer {
   --utrecht-badge-background-color: var(--web-app-layer-color-unknown);
+  --utrecht-badge-color: #ffffff;
 }
 .unknownCategory {
   --utrecht-badge-background-color: var(--web-app-layer-color-unknown);
+  --utrecht-badge-color: #000000;
 }
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/headerContent.ts b/pwa/src/hooks/headerContent.ts
@@ -8,11 +8,7 @@ import { DEFAULT_HEADER_CONTENT_URL } from "../templates/templateParts/header/He
 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 fileName = getFileNameFromUrl(window.sessionStorage.getItem("HEADER_CONTENT") ?? DEFAULT_HEADER_CONTENT_URL);
 
   const getContent = () =>
     useQuery<any, Error>(["contents", fileName], () => API?.HeaderContent.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
@@ -1,10 +1,11 @@
+import * as React from "react";
 import { Image } from "@utrecht/component-library-react/dist/css-module";
 
 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/useDigiD.ts b/pwa/src/hooks/useDigiD.ts