diff --git a/pwa/gatsby-config.js b/pwa/gatsby-config.js index 80e8e9da..e2400e18 100644 --- 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 index a2fe7637..7f929140 100644 --- 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 AvailableFiltersClient(): 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/availableFilters.ts b/pwa/src/apiService/resources/availableFilters.ts index 261369eb..05b33510 100644 --- a/pwa/src/apiService/resources/availableFilters.ts +++ b/pwa/src/apiService/resources/availableFilters.ts @@ -13,8 +13,8 @@ export default class AvailableFilters { public getCategories = async (): Promise => { 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 index 4a2f178f..277bc315 100644 --- 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 index 71a92ef0..e395c4a9 100644 --- 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(["contents", fileName], () => API?.FooterContent.getContent(fileName), { diff --git a/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx b/pwa/src/hooks/htmlParser/anchor/getAnchor.tsx index 86de8fc5..8c72c060 100644 --- 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 index 979ac26f..f3c0ba31 100644 --- 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 index 107afcf6..d70a44f5 100644 --- a/pwa/src/hooks/useMarkdownDirectories.ts +++ b/pwa/src/hooks/useMarkdownDirectories.ts @@ -9,7 +9,7 @@ export const useMarkdownDirectories = () => { const [directories, setDirectories] = React.useState([]); 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 index 1495f44d..5ab8c01a 100644 --- 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"), }} > - {`Woo | ${process.env.GATSBY_ORGANISATION_NAME} | ${ + <title>{`Woo | ${window.sessionStorage.getItem("ORGANISATION_NAME")} | ${ getPageTitle(translatedCrumbs, gatsbyContext.location) ?? "Error" }`} - + ); }; diff --git a/pwa/src/layout/Layout.tsx b/pwa/src/layout/Layout.tsx index 33bd2ae7..8508c091 100644 --- 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 = ({ 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 new file mode 100644 index 00000000..8c31a7ab --- /dev/null +++ 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 | undefined => { + switch (domain) { + case "open.epe.nl": + return Epe as Record; + default: + return Conduction as Record; + } +}; diff --git a/pwa/src/services/initiateEnvironment.ts b/pwa/src/services/initiateEnvironment.ts new file mode 100644 index 00000000..6ffa76dc --- /dev/null +++ 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 index a265b6ba..a5096d67 100644 --- a/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx +++ b/pwa/src/templates/jumbotronTemplate/JumbotronTemplate.tsx @@ -11,18 +11,19 @@ export const JumbotronTemplate: React.FC = () => {
- {t("Woo-publications of")} {process.env.GATSBY_ORGANISATION_NAME} + {t("Woo-publications of")} {window.sessionStorage.getItem("ORGANISATION_NAME")} - {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")} diff --git a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx index 92c3b5c0..bf17e007 100644 --- a/pwa/src/templates/templateParts/footer/FooterTemplate.tsx +++ b/pwa/src/templates/templateParts/footer/FooterTemplate.tsx @@ -69,11 +69,13 @@ export const FooterTemplate: React.FC = () => {
- {process.env.GATSBY_FOOTER_LOGO_URL !== "false" && ( + {window.sessionStorage.getItem("FOOTER_LOGO_URL") !== "false" && ( - 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("/") } /> )} @@ -90,7 +92,7 @@ const DynamicSection: React.FC<{ content: TDynamicContentItem }> = ({ content }) return (
- + {content.items.map((item, idx) => (
diff --git a/pwa/static/.env.development b/pwa/static/.env.development index e2d36e44..0796d9df 100644 --- 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 new file mode 100644 index 00000000..d0940ff4 --- /dev/null +++ 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 new file mode 100644 index 00000000..4bb0e6d1 --- /dev/null +++ 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 index 08214f8e..43d4b660 100644 --- 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/**/*"] }