From 446c29ff97eead97949a41b7c007bb72b7ec6002 Mon Sep 17 00:00:00 2001
From: Titus <titus@mailbox.org>
Date: Wed, 10 Jul 2024 15:50:32 +0200
Subject: [PATCH] add heroHTML

---
 components/Hero/index.tsx             | 11 +++++++++--
 components/Section/SectionWrapper.tsx |  2 ++
 components/Section/index.tsx          |  2 ++
 pages/[id].tsx                        |  3 ++-
 pages/index.tsx                       |  1 +
 utils/getPageProps.ts                 |  6 ++++++
 6 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
index 0035aa9e..f54bd64b 100644
--- a/components/Hero/index.tsx
+++ b/components/Hero/index.tsx
@@ -6,12 +6,18 @@ import Image from 'next/image';
 import { getAssetURL } from '../Util/getAssetURL';
 
 type HeroProps = {
+  heroHTML: string | null;
   heroTitle: string | null;
   heroSubTitle: string | null;
-  heroImage: string;
+  heroImage: string | null;
 };
 
-export const Hero = ({ heroTitle, heroSubTitle, heroImage }: HeroProps) => {
+export const Hero = ({
+  heroHTML,
+  heroTitle,
+  heroSubTitle,
+  heroImage,
+}: HeroProps) => {
   const [imageLoaded, setImageLoaded] = useState(false);
 
   return (
@@ -28,6 +34,7 @@ export const Hero = ({ heroTitle, heroSubTitle, heroImage }: HeroProps) => {
           priority={true}
         />
       </div>
+      {heroHTML && <div className={s.heroHTMLContainer}>{heroHTML}</div>}
       {heroTitle && <h1 className={cN(s.title, s.titles)}>{heroTitle}</h1>}
       {heroSubTitle && (
         <h3 className={cN(s.subTitle, s.titles)}>{heroSubTitle}</h3>
diff --git a/components/Section/SectionWrapper.tsx b/components/Section/SectionWrapper.tsx
index bb58ce7e..de71addc 100644
--- a/components/Section/SectionWrapper.tsx
+++ b/components/Section/SectionWrapper.tsx
@@ -14,6 +14,7 @@ type SectionWrapperProps = {
   title?: string;
   status?: Status;
   hasHero?: boolean;
+  heroHTML?: string;
   heroTitle?: string;
   heroImage?: string;
   anchor?: string;
@@ -26,6 +27,7 @@ export const SectionWrapper = ({
   title,
   status,
   hasHero,
+  heroHTML,
   heroTitle,
   heroImage,
   anchor,
diff --git a/components/Section/index.tsx b/components/Section/index.tsx
index dfbfb1d3..59cf7c76 100644
--- a/components/Section/index.tsx
+++ b/components/Section/index.tsx
@@ -36,6 +36,7 @@ export type Section = {
   includeAgs: string[];
   excludeAgs: string[];
   hasHero: boolean;
+  heroHTML?: string;
   heroTitle?: string;
   heroImage?: string;
   render: SectionElement[];
@@ -184,6 +185,7 @@ export const Section = ({
         status={modifiedSection.status}
         hasHero={modifiedSection.hasHero}
         heroImage={modifiedSection.heroImage}
+        heroHTML={modifiedSection.heroHTML}
         heroTitle={modifiedSection.heroTitle}
         anchor={modifiedSection.anchor}
         isFirstSection={isFirstSection}
diff --git a/pages/[id].tsx b/pages/[id].tsx
index bac42d09..ee152cba 100644
--- a/pages/[id].tsx
+++ b/pages/[id].tsx
@@ -27,8 +27,9 @@ const PageWithSections = ({ page }: PageProps): ReactElement => {
   }
   return (
     <section>
-      {page.hasHero && page.heroImage && (
+      {page.hasHero && (page.heroImage || page.heroHTML) && (
         <Hero
+          heroHTML={page.heroHTML}
           heroTitle={page.heroTitle}
           heroSubTitle={page.heroSubTitle}
           heroImage={page.heroImage}
diff --git a/pages/index.tsx b/pages/index.tsx
index bde56457..f5fc4f8b 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -13,6 +13,7 @@ const Start = ({ page }: PageProps): ReactElement => {
         <>
           {page.hasHero && page.heroImage && (
             <Hero
+              heroHTML={page.heroHTML}
               heroTitle={page.heroTitle}
               heroSubTitle={page.heroSubTitle}
               heroImage={page.heroImage}
diff --git a/utils/getPageProps.ts b/utils/getPageProps.ts
index 5a9cb06d..4fe71587 100644
--- a/utils/getPageProps.ts
+++ b/utils/getPageProps.ts
@@ -20,6 +20,7 @@ export type Page = {
   title: string;
   status: Status;
   hasHero: boolean;
+  heroHTML: string | null;
   heroTitle: string | null;
   heroSubTitle: string | null;
   heroImage: string | null;
@@ -34,6 +35,7 @@ type FetchedPage = {
   title: string;
   status: Status;
   hasHero: boolean;
+  heroHTML: string | null;
   heroTitle: string | null;
   heroSubTitle: string | null;
   heroImage: string | null;
@@ -48,6 +50,7 @@ const pageFields = [
   'title',
   'status',
   'hasHero',
+  'heroHTML',
   'heroTitle',
   'heroSubTitle',
   'heroImage',
@@ -69,6 +72,7 @@ type FetchedSectionData = {
     includeAgs?: string[];
     excludeAgs?: string[];
     hasHero: boolean;
+    heroHTML?: string;
     heroTitle?: string;
     heroImage?: string;
     elements: FetchedElement[];
@@ -232,6 +236,7 @@ const updatePageStructure = (
     title: fetchedPage.title,
     status: fetchedPage.status,
     hasHero: fetchedPage.hasHero,
+    heroHTML: fetchedPage.heroHTML,
     heroTitle: fetchedPage.heroTitle,
     heroSubTitle: fetchedPage.heroSubTitle,
     heroImage: fetchedPage.heroImage,
@@ -257,6 +262,7 @@ const updatePageStructure = (
           includeAgs: section.item.includeAgs || [],
           excludeAgs: section.item.excludeAgs || [],
           hasHero: section.item.hasHero,
+          heroHTML: section.item.heroHTML,
           heroTitle: section.item.heroTitle,
           heroImage: section.item.heroImage,
           render: section.item.elements