add heroHTML

grundeinkommensbuero · Jul 10, 2024 · e65a53e · e65a53e
1 parent 8359fd3
commit e65a53e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 16 deletions.
diff --git a/components/Hero/index.tsx b/components/Hero/index.tsx
@@ -6,28 +6,37 @@ 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 (
     <section className={s.heroContainer}>
-      <div className={s.imageContainer}>
-        <Image
-          onLoad={() => {
-            setImageLoaded(true);
-          }}
-          className={cN(s.heroImage, { [s.imageZoom]: imageLoaded })}
-          src={getAssetURL(heroImage)}
-          alt={'Bild der Expedition Grundeinkommen'}
-          layout={'fill'}
-          priority={true}
-        />
-      </div>
+      {heroImage && (
+        <div className={s.imageContainer}>
+          <Image
+            onLoad={() => {
+              setImageLoaded(true);
+            }}
+            className={cN(s.heroImage, { [s.imageZoom]: imageLoaded })}
+            src={getAssetURL(heroImage)}
+            alt={'Bild der Expedition Grundeinkommen'}
+            layout={'fill'}
+            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
@@ -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
@@ -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
@@ -27,11 +27,12 @@ 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}
+          heroImage={page.heroImage ?? ''}
         />
       )}
       <div className="pageWidth">

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