Added page deploy workflow

ConductionNL · Feb 28, 2024 · 536d609 · 536d609
1 parent efcfc41
commit 536d609
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 67 deletions.
diff --git a/.env b/.env
@@ -9,3 +9,6 @@ VERSION=
 NEXT_PUBLIC_API_URL=https://api.huwelijksplanner.online/api
 NEXT_PUBLIC_MATOMO_URL=https://stats.utrecht.nl/analytics/
 NEXT_PUBLIC_MATOMO_SITE_ID=5
+NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME=utrecht-theme
+NEXT_PUBLIC_ORGANISATION_NAME=Gemeente Utrecht
+NEXT_PUBLIC_FAV_ICON=https://www.utrecht.nl/favicon.ico
diff --git a/.env.development b/.env.development
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME=leiden-theme
+NEXT_PUBLIC_ORGANISATION_NAME=Gemeente Leiden
+NEXT_PUBLIC_FAV_ICON=https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/favicon/favicon-96x96.png
diff --git a/.env.production b/.env.production
@@ -0,0 +1,3 @@
+NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME=
+NEXT_PUBLIC_ORGANISATION_NAME=
+NEXT_PUBLIC_FAV_ICON=
diff --git a/.github/workflows/huwelijksplanner-page-deploy.yml b/.github/workflows/huwelijksplanner-page-deploy.yml
@@ -0,0 +1,52 @@
+name: Deploy the Huwelijksplanner Page to GitHub Pages
+
+env: # Change these to your preferences any image url can also be a base encoded image
+  GITHUB_PAGES_BRANCH: gh-pages
+
+  NL_DESIGN_THEME_CLASSNAME: leiden-theme
+  ORGANISATION_NAME: Gemeente Leiden
+  FAV_ICON: https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/favicon/favicon-96x96.png
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Get the Huwelijksplanner Code
+        uses: actions/checkout@v2
+        with:
+          repository: ConductionNL/utrecht-huwelijksplanner
+          ref: main
+
+      # With special thanxs to https://github.com/SpicyPizza/create-envfile
+      - name: Make envfile
+        uses: SpicyPizza/[email protected]
+        with:
+          envkey_NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME: ${{ env.NL_DESIGN_THEME_CLASSNAME }}
+          envkey_NEXT_PUBLIC_ORGANISATION_NAME: ${{ env.ORGANISATION_NAME }}
+          envkey_NEXT_PUBLIC_FAV_ICON: ${{ env.FAV_ICON }}
+          file_name: .env.production
+          fail_on_empty: true
+          sort_keys: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 18
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Build application
+        run: npm run build
+
+      - name: Deploy to GitHub Pages
+        uses: JamesIves/[email protected]
+        with:
+          branch: ${{ env.GITHUB_PAGES_BRANCH }}
+          folder: .next
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -11,22 +11,17 @@ import { MarriageOptionsProvider } from "../src/context/MarriageOptionsContext";
 import { matomo } from "../src/matomo";
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
-  const ClassName = "leiden-theme";
-  const OrganisationName = ClassName === "leiden-theme" ? "Gemeente Leiden" : "Gemeente Utrecht";
-
   useEffect(() => {
     if (process.env.NEXT_PUBLIC_MATOMO_URL) {
       matomo({
         url: process.env.NEXT_PUBLIC_MATOMO_URL,
         siteId: process.env.NEXT_PUBLIC_MATOMO_SITE_ID,
       });
     }
-    window.sessionStorage.setItem("NL_DESIGN_THEME_CLASSNAME", ClassName);
-    window.sessionStorage.setItem("ORGANISATION_NAME", OrganisationName);
   }, []);
 
   return (
-    <div className={clsx("example-debugging-disabled", ClassName)}>
+    <div className={clsx("example-debugging-disabled", process.env.NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME)}>
       <MarriageOptionsProvider>
         <Component {...pageProps} />
       </MarriageOptionsProvider>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -8,7 +8,7 @@ export default function Document() {
         <link
           rel="icon"
           type="svg"
-          href="https://gemeente.leiden.nl/typo3conf/ext/leiden_template/Resources/Public/Images/favicon/favicon-96x96.png"
+          href={process.env.NEXT_PUBLIC_FAV_ICON}
         />
       </Head>
       <body>

diff --git a/pages/email-reservation-success.tsx b/pages/email-reservation-success.tsx
@@ -13,7 +13,6 @@ import {
   PageContentMain,
   Paragraph,
   URLValue,
-  UtrechtLogo,
   Logo,
 } from "../src/components";
 
@@ -70,23 +69,18 @@ export default function HuwelijksplannerStep0() {
               </Paragraph>
               <Paragraph>Met vriendelijke groet,</Paragraph>
               <Address translate="no">
-                {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}
+                {process.env.NEXT_PUBLIC_ORGANISATION_NAME}
                 <br />
                 Publiekszaken
                 <br />
                 Burgerzaken
                 <br />
                 Stadsplateau 1, 3521 AZ Utrecht
               </Address>
-              {window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") === "utrecht-theme" ? (
-                <Paragraph>
-                  <UtrechtLogo />
-                </Paragraph>
-              ) : (
-                <Paragraph>
-                  <Logo />
-                </Paragraph>
-              )}
+
+              <Paragraph>
+                <Logo />
+              </Paragraph>
             </PageContentMain>
           </PageContent>
         </Page>

diff --git a/pages/huwelijksplanner-cancel.tsx b/pages/huwelijksplanner-cancel.tsx
@@ -32,8 +32,7 @@ export default function MultistepForm1() {
   if (!data.cancelable) {
     return (
       <Paragraph>
-        Huwelijk kan niet on-line geannuleerd worden. Neem contact op met{" "}
-        {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}.
+        Huwelijk kan niet on-line geannuleerd worden. Neem contact op met {process.env.NEXT_PUBLIC_ORGANISATION_NAME}.
       </Paragraph>
     );
   }
@@ -52,8 +51,8 @@ export default function MultistepForm1() {
               <form method="POST" action="/api/huwelijksplanner-cancel">
                 <Heading1>{t("huwelijksplanner-cancel:heading-1")}</Heading1>
                 <Paragraph>
-                  De {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")} brengt geen
-                  kosten in rekening: je krijgt het volledige bedrag voor de reservering teruggestort op je rekening.
+                  De {process.env.NEXT_PUBLIC_ORGANISATION_NAME} brengt geen kosten in rekening: je krijgt het volledige
+                  bedrag voor de reservering teruggestort op je rekening.
                 </Paragraph>
                 <Paragraph id="cancel-warning">Weet je zeker dat je het voorgenomen huwelijk wil annuleren?</Paragraph>
                 <ButtonGroup>

diff --git a/pages/persoonsgegevens/[person].tsx b/pages/persoonsgegevens/[person].tsx
@@ -261,8 +261,11 @@ export default function MultistepForm1() {
                       {...register("email", { required: true })}
                     />
                   </FormField>
-                  <DeclarationCheckboxGroup                     onChange={onDeclarationCheckboxChange}
- register={register} checkboxData={checkboxData} />
+                  <DeclarationCheckboxGroup
+                    onChange={onDeclarationCheckboxChange}
+                    register={register}
+                    checkboxData={checkboxData}
+                  />
                   <Button
                     type="submit"
                     disabled={loading || !declarationCheckboxChecked}
@@ -357,7 +360,7 @@ export const DeclarationCheckboxGroup = ({ checkboxData, register, onChange }: D
         checkboxData.length > 0 &&
         checkboxData.map(({ id, label, value }, index) => (
           <FormField key={index} type="checkbox">
-            <Checkbox2 novalidate id={id}   {...register(value, { onChange: onChange, required: true })} />
+            <Checkbox2 novalidate id={id} {...register(value, { onChange: onChange, required: true })} />
             <FormLabel htmlFor={id} type="checkbox">
               {label}
             </FormLabel>

diff --git a/pages/sitemap.tsx b/pages/sitemap.tsx
@@ -339,8 +339,7 @@ export default function HuwelijksplannerStep0() {
                     marker: "6",
                     title: (
                       <Link href="/voorgenomen-huwelijk/checken">
-                        Stap 6: {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}{" "}
-                        controleert
+                        Stap 6: {process.env.NEXT_PUBLIC_ORGANISATION_NAME} controleert
                       </Link>
                     ) as any,
                     meta: (

diff --git a/pages/voorgenomen-huwelijk/getuigen/succes.tsx b/pages/voorgenomen-huwelijk/getuigen/succes.tsx
@@ -73,8 +73,7 @@ export default function MultistepForm1() {
                 </Paragraph>
                 <OrderedList>
                   <OrderedListItem>
-                    De {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")} checkt een
-                    aantal dingen, bijvoorbeeld of{" "}
+                    De {process.env.NEXT_PUBLIC_ORGANISATION_NAME} checkt een aantal dingen, bijvoorbeeld of{" "}
                     {voornaam ? <DataNoTranslate>{voornaam}</DataNoTranslate> : <>je partner</>} geen broer of zus van
                     je is
                   </OrderedListItem>

diff --git a/pages/voorgenomen-huwelijk/partner/aanvrager-email.tsx b/pages/voorgenomen-huwelijk/partner/aanvrager-email.tsx
@@ -14,7 +14,6 @@ import {
   PageContentMain,
   Paragraph,
   URLValue,
-  UtrechtLogo,
   Logo,
 } from "../../../src/components";
 import { exampleState } from "../../../src/data/huwelijksplanner-state";
@@ -59,23 +58,18 @@ export default function ApplicantEmail() {
               </Paragraph>
               <Paragraph>Met vriendelijke groet,</Paragraph>
               <Address translate="no">
-                {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}
+                {process.env.NEXT_PUBLIC_ORGANISATION_NAME}
                 <br />
                 Publiekszaken
                 <br />
                 Burgerzaken
                 <br />
                 Stadsplateau 1, 3521 AZ Utrecht
               </Address>
-              {window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") === "utrecht-theme" ? (
-                <Paragraph>
-                  <UtrechtLogo />
-                </Paragraph>
-              ) : (
-                <Paragraph>
-                  <Logo />
-                </Paragraph>
-              )}
+
+              <Paragraph>
+                <Logo />
+              </Paragraph>
             </PageContentMain>
           </PageContent>
         </Page>

diff --git a/pages/voorgenomen-huwelijk/partner/invitation-email-partner.tsx b/pages/voorgenomen-huwelijk/partner/invitation-email-partner.tsx
@@ -38,7 +38,6 @@ import {
   PageContentMain,
   Paragraph,
   URLValue,
-  UtrechtLogo,
   Logo,
 } from "../../../src/components";
 import { exampleState } from "../../../src/data/huwelijksplanner-state";
@@ -82,23 +81,18 @@ export default function ApplicantEmail() {
               </Paragraph>
               <Paragraph>Met vriendelijke groet,</Paragraph>
               <Address translate="no">
-                {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}
+                {process.env.NEXT_PUBLIC_ORGANISATION_NAME}
                 <br />
                 Publiekszaken
                 <br />
                 Burgerzaken
                 <br />
                 Stadsplateau 1, 3521 AZ Utrecht
               </Address>
-              {window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") === "utrecht-theme" ? (
-                <Paragraph>
-                  <UtrechtLogo />
-                </Paragraph>
-              ) : (
-                <Paragraph>
-                  <Logo />
-                </Paragraph>
-              )}
+
+              <Paragraph>
+                <Logo />
+              </Paragraph>
             </PageContentMain>
           </PageContent>
         </Page>

diff --git a/src/components/huwelijksplanner/PageFooterTemplate.tsx b/src/components/huwelijksplanner/PageFooterTemplate.tsx
@@ -8,16 +8,12 @@ import { footerData } from "../../data/footer-data";
 export const PageFooterTemplate = () => {
   const data =
     typeof window !== "undefined" &&
-    footerData.find(
-      (data: any) => data.theme === window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") ?? "utrecht-theme"
-    );
+    footerData.find((data: any) => data.theme === process.env.NEXT_PUBLIC_NL_DESIGN_THEME_CLASSNAME ?? "utrecht-theme");
 
   return (
     <>
       <address className="utrecht-page-footer__address utrecht-page-footer__address--reset-address">
-        <h2 className="utrecht-heading-2 utrecht-heading-2--reset-h2">
-          {typeof window !== "undefined" && window.sessionStorage.getItem("ORGANISATION_NAME")}
-        </h2>
+        <h2 className="utrecht-heading-2 utrecht-heading-2--reset-h2">{process.env.NEXT_PUBLIC_ORGANISATION_NAME}</h2>
 
         {data &&
           data?.content.map((item: any, idx: number) => (

diff --git a/src/components/huwelijksplanner/PageHeaderTemplate.tsx b/src/components/huwelijksplanner/PageHeaderTemplate.tsx
@@ -3,19 +3,11 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { HeaderDivider, LanguageToggleButtons, Link, Logo, Paragraph, UtrechtLogo } from "../index";
+import { HeaderDivider, LanguageToggleButtons, Logo } from "../index";
 
 export const PageHeaderTemplate = () => (
   <>
-    {typeof window !== "undefined" && window.sessionStorage.getItem("NL_DESIGN_THEME_CLASSNAME") === "utrecht-theme" ? (
-      <Paragraph className="utrecht-page-header__logo">
-        <Link href="/" sameURL="no-link" boxContent>
-          <UtrechtLogo />
-        </Link>
-      </Paragraph>
-    ) : (
-      <Logo layoutClassName="utrecht-page-header__logo" variant="header" />
-    )}
+    <Logo layoutClassName="utrecht-page-header__logo" variant="header" />
 
     <LanguageToggleButtons headingLevel={2} className="utrecht-page-header__alternate-lang-nav" />
     <HeaderDivider />

diff --git a/styles/utrecht-theme.css b/styles/utrecht-theme.css
@@ -40,4 +40,7 @@
   --utrecht-spotlight-section-margin-block-start: var(--utrecht-space-block-md);
   --utrecht-typography-sans-serif-font-family: "Lucida Grande", "Arial", sans-serif;
   --utrecht-unordered-list-margin-block-start: var(--utrecht-space-block-md);
+  --conduction-logo-header-background-image: url("https://www.utrecht.nl/typo3conf/ext/alternet_sitepackage/Resources/Public/Images/svg/wapen-utrecht-rood.svg");
+  --conduction-logo-header-block-size: 108px;
+  --conduction-logo-header-inline-size: 188px;
 }