add support for page sections on generic pages

web/src/components/blocks/Blocks.tsx

@@ -3,9 +3,15 @@ import { ImageWithTextBlock } from "./ImageWithTextBlock";
 import { ImageSliderBlock } from "./ImageSliderBlock";
 import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
 import { FeaturedBlock } from "./FeaturedBlock";
+import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
 
 export const Blocks = ({ blocks }: any) => {
+  const sections = blocks.filter(
+    (block: any) => block.__typename === "PageSectionBlock"
+  );
+
   return blocks.map((block: any) => {
+    console.log("block aaa", block);
     switch (block.blockType) {
       case "RichTextBlock":
         return <RichTextBlock block={block} />;
@@ -22,9 +28,15 @@ export const Blocks = ({ blocks }: any) => {
       case "FeaturedBlock":
         return <FeaturedBlock block={block} />;
         break;
+      case "PageSectionBlock":
+        return <PageSectionBlock block={block} />;
+        break;
+      case "PageSectionNavigationBlock":
+        return <PageSectionNavigationBlock sections={sections} />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);
     }
   });
-};
+};

web/src/components/blocks/PageSection.tsx

@@ -1,14 +1,55 @@
+import { PageSectionBlock as PageSectionBlockType } from "@/gql/graphql";
 import styles from "./pageSection.module.scss";
+import { Blocks } from "./Blocks";
+import slugify from "@sindresorhus/slugify";
+
+export const PageSectionBlock = ({
+  block,
+}: {
+  block: PageSectionBlockType;
+}) => {
+  // TODO: add icon selection to model
+  // TODO: there's a block.backgroundColor
+
+  const anchor = slugify(block.title);
 
-export const PageSection = ({ heading }: any) => {
   return (
-    <section className={styles.pageSection}>
+    <section className={styles.pageSection} id={anchor}>
       <div className={styles.sectionHeader}>
         <div className={styles.icon}>
           <img src="/assets/icons/neufneuf.svg" />
         </div>
-        <h1>{heading}</h1>
+        <h1>{block.title}</h1>
       </div>
+      <Blocks blocks={block.body} />
     </section>
   );
 };
+
+export const PageSectionNavigationBlock = ({
+  sections,
+}: {
+  sections: PageSectionBlockType[];
+}) => {
+  if (!sections.length) {
+    return <></>;
+  }
+  return (
+    <div className="anchorLinks">
+      <span className="suphead">Hopp til</span>
+      <ul>
+        {sections.map((section) => {
+          const anchor = slugify(section.title);
+
+          return (
+            <li key={anchor}>
+              <a href={`#${anchor}`} className="button">
+                {section.title}
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

web/src/components/general/PageHeader.tsx

@@ -10,7 +10,9 @@ export const PageHeader = ({
   return (
     <div className={styles.pageHeader}>
       <h1 className={styles.title}>{heading}</h1>
-      {lead && <p className="lead">{lead}</p>}
+      {lead && (
+        <p className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
+      )}
     </div>
   );
 };