From 5c733ac1781c5edfbcf83eb7a30deaf10c089221 Mon Sep 17 00:00:00 2001
From: Remko <remkohuisman@hotmail.nl>
Date: Wed, 25 Oct 2023 14:35:03 +0200
Subject: [PATCH] added optional mardkdown landing page

---
 pwa/src/pages/index.tsx                       |   5 +-
 pwa/src/templates/landing/LandingTemplate.tsx | 138 ++++++++++--------
 .../markdown/MarkdownContentTemplate.tsx      |   9 +-
 .../header/HeaderTemplate.module.css          |   2 +
 .../templateParts/header/HeaderTemplate.tsx   |   2 +-
 pwa/static/.env.development                   |   3 +
 6 files changed, 88 insertions(+), 71 deletions(-)

diff --git a/pwa/src/pages/index.tsx b/pwa/src/pages/index.tsx
index 02e36fcc8..96191d3b2 100644
--- a/pwa/src/pages/index.tsx
+++ b/pwa/src/pages/index.tsx
@@ -1,6 +1,9 @@
 import * as React from "react";
 import { LandingTemplate } from "../templates/landing/LandingTemplate";
+import { PageProps } from "gatsby";
 
-const IndexPage: React.FC = () => <LandingTemplate />;
+const IndexPage: React.FC<PageProps> = (props: PageProps) => {
+  return <LandingTemplate params={props.params} />;
+};
 
 export default IndexPage;
diff --git a/pwa/src/templates/landing/LandingTemplate.tsx b/pwa/src/templates/landing/LandingTemplate.tsx
index 95d67cd7d..4b1ca39fa 100644
--- a/pwa/src/templates/landing/LandingTemplate.tsx
+++ b/pwa/src/templates/landing/LandingTemplate.tsx
@@ -9,79 +9,95 @@ import { LandingDisplayTemplate } from "../templateParts/landingDisplayTemplates
 import { GatsbyContext } from "../../context/gatsby";
 import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch";
 import { Heading, Separator } from "@utrecht/component-library-react/dist/css-module";
+import { MarkdownContentTemplate } from "../markdown/MarkdownContentTemplate";
 
-export const LandingTemplate: React.FC = () => {
+interface LandingTemplateProps {
+  params: any;
+}
+
+export const LandingTemplate: React.FC<LandingTemplateProps> = ({ params }) => {
   const [filters] = React.useContext(FiltersContext);
   const { screenSize } = React.useContext(GatsbyContext);
 
+  const detailPageSlug = params.detailPageSlug;
+  const pageSlug = params.pageSlug;
+
   return (
     <Container layoutClassName={styles.container}>
-      <section className={styles.section}>
-        <ResultsDisplaySwitch
-          resultsDisplayType="landingDisplayLayout"
-          layoutClassName={styles.landingDisplaySwitchButtons}
-        />
-
-        <LandingDisplayTemplate type={filters.landingDisplayLayout} />
-      </section>
+      {process.env.GATSBY_OPTIONAL_START_PAGE !== "false" && process.env.GATSBY_OPTIONAL_START_PAGE !== undefined && (
+        <MarkdownContentTemplate link={process.env.GATSBY_OPTIONAL_START_PAGE} {...{ pageSlug, detailPageSlug }} />
+      )}
 
-      <section className={styles.section}>
-        <Heading level={3} className={styles.textColor}>
-          Veelbezochte pagina's
-        </Heading>
-        {screenSize === "desktop" && (
-          <div className={styles.cards}>
-            <ImageAndDetailsCard
-              layoutClassName={styles.textColor}
-              title="Over OpenCatalogi"
-              image={<img src={overOpenCatalogiImage} />}
-              introduction="OpenCatalogi is een weergave van Componenten verdeeld over de 5 lagen zoals gedefinieerd door VNG in het Gegevenslandschap."
-              link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
+      {process.env.GATSBY_OPTIONAL_START_PAGE === "false" && (
+        <>
+          <section className={styles.section}>
+            <ResultsDisplaySwitch
+              resultsDisplayType="landingDisplayLayout"
+              layoutClassName={styles.landingDisplaySwitchButtons}
             />
 
-            <ImageAndDetailsCard
-              layoutClassName={styles.textColor}
-              title="Aan de slag met OpenCatalogi"
-              image={<img src={aanDeSlagMetOpenCatalogiImage} />}
-              introduction="Wilt u uw component op OpenCatalogi aanbieden zodat andere uw component kunnen (her)gebruiken of bij dragen aan de doorontwikkeling van uw component?"
-              link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
-            />
-          </div>
-        )}
-        {screenSize === "tablet" && (
-          <div className={styles.cards}>
-            <DetailsCard
-              layoutClassName={styles.textColor}
-              title="Over OpenCatalogi"
-              link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
-            />
-            <DetailsCard
-              layoutClassName={styles.textColor}
-              title="Aan de slag met OpenCatalogi"
-              link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
-            />
-          </div>
-        )}
+            <LandingDisplayTemplate type={filters.landingDisplayLayout} />
+          </section>
 
-        {screenSize === "mobile" && (
-          <div className={styles.cards}>
-            <DetailsCard
-              layoutClassName={styles.textColor}
-              title="Over OpenCatalogi"
-              link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
-            />
-            <DetailsCard
-              layoutClassName={styles.textColor}
-              title="Aan de slag met OpenCatalogi"
-              link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
-            />
-          </div>
-        )}
-      </section>
+          <section className={styles.section}>
+            <Heading level={3} className={styles.textColor}>
+              Veelbezochte pagina's
+            </Heading>
+            {screenSize === "desktop" && (
+              <div className={styles.cards}>
+                <ImageAndDetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Over OpenCatalogi"
+                  image={<img src={overOpenCatalogiImage} />}
+                  introduction="OpenCatalogi is een weergave van Componenten verdeeld over de 5 lagen zoals gedefinieerd door VNG in het Gegevenslandschap."
+                  link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
+                />
+
+                <ImageAndDetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Aan de slag met OpenCatalogi"
+                  image={<img src={aanDeSlagMetOpenCatalogiImage} />}
+                  introduction="Wilt u uw component op OpenCatalogi aanbieden zodat andere uw component kunnen (her)gebruiken of bij dragen aan de doorontwikkeling van uw component?"
+                  link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
+                />
+              </div>
+            )}
+            {screenSize === "tablet" && (
+              <div className={styles.cards}>
+                <DetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Over OpenCatalogi"
+                  link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
+                />
+                <DetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Aan de slag met OpenCatalogi"
+                  link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
+                />
+              </div>
+            )}
+
+            {screenSize === "mobile" && (
+              <div className={styles.cards}>
+                <DetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Over OpenCatalogi"
+                  link={{ label: "Ga naar Over OpenCatalogi", href: "/documentation/about" }}
+                />
+                <DetailsCard
+                  layoutClassName={styles.textColor}
+                  title="Aan de slag met OpenCatalogi"
+                  link={{ label: "Aan de slag met OpenCatalogi", href: "documentation/usage" }}
+                />
+              </div>
+            )}
+          </section>
 
-      <Separator />
+          <Separator />
 
-      <FeedbackTemplate layoutClassName={styles.feedback} />
+          <FeedbackTemplate layoutClassName={styles.feedback} />
+        </>
+      )}
     </Container>
   );
 };
diff --git a/pwa/src/templates/markdown/MarkdownContentTemplate.tsx b/pwa/src/templates/markdown/MarkdownContentTemplate.tsx
index 5a4582539..e72536a73 100644
--- a/pwa/src/templates/markdown/MarkdownContentTemplate.tsx
+++ b/pwa/src/templates/markdown/MarkdownContentTemplate.tsx
@@ -2,7 +2,6 @@ import * as React from "react";
 import { useMarkdown } from "../../hooks/markdown";
 import { ParsedHTML } from "../../components/ParsedHTML/ParsedHTML";
 import { useMarkdownDirectories } from "../../hooks/useMarkdownDirectories";
-import { Page, PageContent } from "@utrecht/component-library-react/dist/css-module";
 
 interface MarkdownContentTemplateProps {
   pageSlug: string;
@@ -26,11 +25,5 @@ export const MarkdownContentTemplate: React.FC<MarkdownContentTemplateProps> = (
     content = useMarkdown().getContent(link.includes("https://api.github.com/repos/") ? link : link);
   }
 
-  return (
-    <Page>
-      <PageContent>
-        <ParsedHTML contentQuery={content} {...{ location }} />
-      </PageContent>
-    </Page>
-  );
+  return <ParsedHTML contentQuery={content} {...{ location }} />;
 };
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
index 15781ae65..2e66a9c83 100644
--- a/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
+++ b/pwa/src/templates/templateParts/header/HeaderTemplate.module.css
@@ -74,6 +74,8 @@
 .headerSearchForm {
   display: flex;
   flex-direction: column;
+  padding-inline-start: var(--web-app-size-sm);
+  padding-inline-end: var(--web-app-size-md);
 }
 
 .section > *:not(:last-child) {
diff --git a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
index 7a12909bf..3974f3e01 100644
--- a/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
+++ b/pwa/src/templates/templateParts/header/HeaderTemplate.tsx
@@ -171,7 +171,7 @@ export const HeaderTemplate: React.FC<HeaderTemplateProps> = ({ layoutClassName
     process.env.GATSBY_HEADER_SHOW_LOGIN === "true"
       ? setTopNavItems([...itemsArray, ...secondaryTopNavItemsMobile])
       : setTopNavItems(itemsArray);
-  }, [screenSize, pathname, crumbs, filters]);
+  }, [screenSize, pathname, crumbs, filters, getHeaderContent.isSuccess]);
 
   return (
     <PageHeader
diff --git a/pwa/static/.env.development b/pwa/static/.env.development
index 22c928b72..00650f27f 100644
--- a/pwa/static/.env.development
+++ b/pwa/static/.env.development
@@ -24,3 +24,6 @@ GATSBY_HEADER_CONTENT=https://raw.githubusercontent.com/OpenCatalogi/web-app/348
 GATSBY_FOOTER_SHOW_CREATOR="false"
 GATSBY_FOOTER_LOGO_URL="false"
 GATSBY_FOOTER_CONTENT="https://raw.githubusercontent.com/OpenCatalogi/web-app/25995205e1dbb043822d1c58c5c23f8e6f77ff7e/pwa/src/templates/templateParts/footer/FooterContent.json"
+
+# Home
+GATSBY_OPTIONAL_START_PAGE="false"