Merge pull request #363 from OpenCatalogi/feature/OP-95/optional-star…

…ting-page feature/OP-95/optional-starting-page
OpenCatalogi · Oct 25, 2023 · c4800be · c4800be
2 parents 673837e + c831215
commit c4800be
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 72 deletions.
diff --git a/pwa/src/hooks/markdown.ts b/pwa/src/hooks/markdown.ts
@@ -7,10 +7,18 @@ export const useMarkdown = () => {
   const API: APIService | null = React.useContext(APIContext);
 
   const getContent = (filePath: string) =>
-    useQuery<any, Error>(["contents", filePath], () => API?.Markdown.getContent(filePath), {
+    useQuery<any, Error>({
+      queryKey: ["contents", filePath],
+      queryFn: () => API?.Markdown.getContent(filePath),
       onError: (error) => {
         console.warn(error.message);
       },
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+      refetchOnReconnect: false,
+      retry: 1,
+      retryDelay: 2000,
+      staleTime: 1000 * 60 * 60, // one hour
     });
 
   return { getContent };

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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"