[Aksel.nav.no] Grid-layouts and Porting of more components (#3683)

* ✨ Setup new layout grid

* ♻️ PortableText config setup

* ✨ Migrated over Blocks support to appdir

* 🚚 Moved typo components to appdir

* ✨ Add Komponent spesific modules to page template

* ✨ Added thumbnail (hardcoded)

* ✨ Introduced DesignsystemetKomponentIntro and DesignsystemetThumbnail components for enhanced component documentation

* 🐛 TOC is now sticky

* ✨ Added marks-support (#3684)

Author: KenAJoh

aksel.nav.no/website/app/_sanity/queries.ts

@@ -59,9 +59,14 @@ const TOC_BY_SLUG_QUERY =
   "title": pt::text(@)
 }`);
 
+const SLUG_BY_TYPE_QUERY = defineQuery(`
+  *[_type == $type && defined(slug.current)].slug.current
+`);
+
 export {
   DESIGNSYSTEM_SIDEBAR_QUERY,
   GLOBAL_SEARCH_QUERY_ALL,
   KOMPONENT_BY_SLUG_QUERY,
   TOC_BY_SLUG_QUERY,
+  SLUG_BY_TYPE_QUERY,
 };

aksel.nav.no/website/app/_sanity/query-types.ts

@@ -4508,6 +4508,9 @@ export type TOC_BY_SLUG_QUERYResult = Array<{
   id: string;
   title: string;
 }> | null;
+// Variable: SLUG_BY_TYPE_QUERY
+// Query: *[_type == $type && defined(slug.current)].slug.current
+export type SLUG_BY_TYPE_QUERYResult = Array<string | null>;
 
 declare module "@sanity/client" {
   interface SanityQueries {
@@ -4516,5 +4519,6 @@ declare module "@sanity/client" {
     '*[_type in ["komponent_artikkel",\n  "ds_artikkel",\n  "aksel_artikkel",\n  "aksel_blogg",\n  "aksel_prinsipp",\n  "aksel_standalone",\n  "templates_artikkel"]]{\n  heading,\n  "slug": slug.current,\n  "tema": undertema[]->tema->title,\n  ingress,\n  status,\n  _type,\n  "intro": pt::text(intro.body),\n  content,\n  publishedAt,\n  seo\n}': GLOBAL_SEARCH_QUERY_ALLResult;
     '*[_type == "komponent_artikkel" && slug.current == $slug][0]\n  {\n    ...,\n    intro{\n      ...,\n      body[]{\n        ...,\n      \n_type == "language" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "alert" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "attachment" =>{\n  ...,\n  "downloadLink": asset->url,\n  "size": asset->size,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "token_ref"=>@->,\n\nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n_type == "intro_komponent" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n},\n_type == "innholdskort" =>{\n  ...,\n  "lenke": lenke->slug.current,\n},\n_type == "live_demo" =>{\n  ...,\n  "sandbox_ref": sandbox_ref->{...},\n},\n_type == "props_seksjon" =>{\n  ...,\n  komponenter[]{\n    ...,\n    "propref": propref->{...}\n  },\n},\n_type == "installasjon_seksjon" =>{\n  ...,\n  "code_ref": code_ref->{...},\n},\n_type == "spesial_seksjon" =>{\n  ...,\n  modul == "komponentoversikt" =>{\n    "komponenter": *[_type == \'komponent_artikkel\' && !(_id in path("drafts.**"))]{\n      _id,\n      heading,\n      "ingress": intro.body,\n      status,\n      slug,\n    }\n  },\n  modul == "token_kategori" =>{\n    "token": token_ref->{...}\n}\n},\n_type == "accordion"=>{\n  ...,\n  list[]{\n    ...,\n    content[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n      \n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n\n    }\n  }\n}\n,\n_type == "expansioncard"=>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n    \n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n\n  }\n},\n\n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n,\n\n      }\n    },\n    content[]{\n      ...,\n      \n_type == "language" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "alert" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "attachment" =>{\n  ...,\n  "downloadLink": asset->url,\n  "size": asset->size,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "token_ref"=>@->,\n\nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n_type == "intro_komponent" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n_type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n},\n_type == "innholdskort" =>{\n  ...,\n  "lenke": lenke->slug.current,\n},\n_type == "live_demo" =>{\n  ...,\n  "sandbox_ref": sandbox_ref->{...},\n},\n_type == "props_seksjon" =>{\n  ...,\n  komponenter[]{\n    ...,\n    "propref": propref->{...}\n  },\n},\n_type == "installasjon_seksjon" =>{\n  ...,\n  "code_ref": code_ref->{...},\n},\n_type == "spesial_seksjon" =>{\n  ...,\n  modul == "komponentoversikt" =>{\n    "komponenter": *[_type == \'komponent_artikkel\' && !(_id in path("drafts.**"))]{\n      _id,\n      heading,\n      "ingress": intro.body,\n      status,\n      slug,\n    }\n  },\n  modul == "token_kategori" =>{\n    "token": token_ref->{...}\n}\n},\n_type == "accordion"=>{\n  ...,\n  list[]{\n    ...,\n    content[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n      \n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n\n    }\n  }\n}\n,\n_type == "expansioncard"=>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n},\n    \n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n\n  }\n},\n\n _type == "riktekst_blokk" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "bilde" =>{\n    ...,\n    floating_text[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "video" =>{\n    ...,\n    "webm": {\n      "url": webm.asset->url,\n      "extension": webm.asset->extension\n    },\n    "fallback": {\n      "url": fallback.asset->url,\n      "extension": fallback.asset->extension\n    },\n    "track": track.asset->url\n },\n _type == "alert" =>{\n    ...,\n    body[]{\n      ...,\n      \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n    }\n },\n _type == "kode" =>{\n    ...,\n    "ref": ref->{...},\n },\n _type == "kode_eksempler" =>{\n    ...,\n    dir->,\n },\n _type == "kode_ref" => @->,\n _type == "tips" =>{\n  ...,\n  body[]{\n    ...,\n    \nmarkDefs[]{\n  ...,\n  _type == \'internalLink\' => {\n      "slug": @.reference->slug,\n  },\n}\n  }\n},\n _type == "relatert_innhold" =>{\n  title,\n  lenker[]{\n    ...,\n    "intern_lenke": intern_lenke->slug.current,\n  }\n}\n,\n\n    },\n}': KOMPONENT_BY_SLUG_QUERYResult;
     '*[slug.current == $slug][0].content[style match \'h2\'][]{\n  "id": _key,\n  "title": pt::text(@)\n}': TOC_BY_SLUG_QUERYResult;
+    "\n  *[_type == $type && defined(slug.current)].slug.current\n": SLUG_BY_TYPE_QUERYResult;
   }
 }

aksel.nav.no/website/app/_sanity/utils.ts

@@ -0,0 +1,23 @@
+import createImageUrlBuilder from "@sanity/image-url";
+import type { Image } from "sanity";
+import { SANITY_DATASET, SANITY_PROJECT_ID } from "@/sanity/config";
+
+const imageBuilder = createImageUrlBuilder({
+  projectId: SANITY_PROJECT_ID || "",
+  dataset: SANITY_DATASET || "",
+});
+
+const urlForImage = (source: Image | null | undefined) => {
+  // Ensure that source image contains a valid reference
+  if (!source?.asset?._ref) {
+    return undefined;
+  }
+
+  return imageBuilder?.image(source).auto("format").fit("max");
+};
+
+function urlForOpenGraphImage(image: Image | null | undefined) {
+  return urlForImage(image)?.width(1200).height(627).fit("crop").url();
+}
+
+export { urlForImage, urlForOpenGraphImage };

aksel.nav.no/website/app/_ui/global-search/GlobalSearch.hit.tsx

@@ -6,20 +6,10 @@ import React from "react";
 import { Heading } from "@navikt/ds-react";
 import { urlFor } from "@/sanity/interface";
 import { StatusTag } from "@/web/StatusTag";
+import { doctypeToColorRole } from "../theme-config";
 import { SearchHitT, SearchResultPageTypesT } from "./GlobalSearch.config";
 import styles from "./GlobalSearch.module.css";
 
-/* TODO: Move this to global Aksel-config */
-const doctypeToRole: Record<SearchResultPageTypesT, string> = {
-  ds_artikkel: "brand-blue",
-  komponent_artikkel: "brand-blue",
-  templates_artikkel: "brand-blue",
-  aksel_artikkel: "aksel-brand-teal",
-  aksel_blogg: "aksel-brand-pink",
-  aksel_prinsipp: "neutral",
-  aksel_standalone: "neutral",
-};
-
 function GlobalSearchHitCollection({
   heading,
   searchHits,
@@ -39,7 +29,7 @@ function GlobalSearchHitCollection({
         className={styles.searchSectionHeading}
         size="small"
         level="2"
-        data-color-role={doctypeToRole[tag ?? ""] ?? "neutral"}
+        data-color-role={doctypeToColorRole[tag ?? ""] ?? "neutral"}
       >
         {heading}
       </Heading>

aksel.nav.no/website/app/_ui/portable-text/CustomPortableText.components.tsx

@@ -0,0 +1,159 @@
+import {
+  PortableTextBlockComponent,
+  type PortableTextComponents,
+  PortableTextMarkComponent,
+} from "next-sanity";
+import { Children } from "react";
+import { BodyLong, BodyShort, Detail, Heading } from "@navikt/ds-react";
+import { Kbd } from "../kbd/Kbd";
+import { Code } from "../typography/Code";
+import { List, ListItem } from "../typography/List";
+import { WebsiteLink } from "../typography/WebsiteLink";
+import styles from "./CustomPortableText.module.css";
+
+type CustomPortableTextComponentsProps = {
+  typoConfig?: {
+    size?: "small" | "medium" | "large";
+    type: "short" | "long";
+  };
+};
+
+function customPortableTextComponents({
+  typoConfig,
+}: CustomPortableTextComponentsProps): PortableTextComponents {
+  const block = blockComponents({ typoConfig });
+  const marks = marksComponents();
+
+  return {
+    block,
+    list: {
+      bullet: ({ children }) => <List as="ul">{children}</List>,
+      number: ({ children }) => <List as="ol">{children}</List>,
+    },
+    listItem: {
+      bullet: ({ children }) => <ListItem icon>{children}</ListItem>,
+      number: ({ children }) => <ListItem>{children}</ListItem>,
+    },
+    marks,
+    unknownBlockStyle: ({ children }) =>
+      withSanitizedBlock(<BodyShort spacing>{children}</BodyShort>),
+    unknownType: () => null,
+    unknownMark: () => null,
+  };
+}
+
+function marksComponents() {
+  return {
+    kbd: ({ text }) => <Kbd>{text}</Kbd>,
+    quote: ({ text }) => <q>{text}</q>,
+    code: ({ text }) => <Code>{text}</Code>,
+
+    link: ({ text, value: { href } }) => {
+      if (!href) {
+        return <span>{text}</span>;
+      }
+      return <WebsiteLink href={href}>{text}</WebsiteLink>;
+    },
+    internalLink: ({ text, value: { slug } }) => {
+      if (!slug || !slug.current) {
+        return <span>{text}</span>;
+      }
+      return <WebsiteLink href={`/${slug.current}`}>{text}</WebsiteLink>;
+    },
+  } satisfies Record<string, PortableTextMarkComponent>;
+}
+
+function blockComponents({
+  typoConfig = { type: "long", size: "medium" },
+}: CustomPortableTextComponentsProps) {
+  const BodyComponent = typoConfig.type === "short" ? BodyLong : BodyShort;
+
+  return {
+    normal: ({ children }) =>
+      withSanitizedBlock(
+        <BodyComponent
+          spacing
+          className={styles.removeSpacingForLast}
+          size={typoConfig.size}
+        >
+          {children}
+        </BodyComponent>,
+      ),
+
+    detail: ({ children }) =>
+      withSanitizedBlock(<Detail spacing>{children}</Detail>),
+    ingress: ({ children }) =>
+      withSanitizedBlock(
+        <BodyLong size="large" spacing>
+          {children}
+        </BodyLong>,
+      ),
+    h2: ({ children, value }) =>
+      withSanitizedBlock(
+        <Heading
+          className={styles.headingElement}
+          tabIndex={-1}
+          id={value?._key}
+          level="2"
+          size="large"
+          data-level="2"
+        >
+          {children}
+        </Heading>,
+      ),
+    h3: ({ children, value }) =>
+      withSanitizedBlock(
+        <Heading
+          className={styles.headingElement}
+          spacing
+          level="3"
+          size="medium"
+          tabIndex={-1}
+          id={value?._key}
+          data-level="3"
+        >
+          {children}
+        </Heading>,
+      ),
+    h4: ({ children, value }) =>
+      withSanitizedBlock(
+        <Heading
+          className={styles.headingElement}
+          spacing
+          level="4"
+          size="small"
+          id={value?._key}
+          data-level="4"
+        >
+          {children}
+        </Heading>,
+      ),
+    heading4: ({ children, value }) =>
+      withSanitizedBlock(
+        <Heading
+          className={styles.headingElement}
+          spacing
+          level="4"
+          size="small"
+          id={value?._key}
+          data-level="4"
+        >
+          {children}
+        </Heading>,
+      ),
+  } satisfies Record<string, PortableTextBlockComponent>;
+}
+
+function withSanitizedBlock(node: React.ReactElement) {
+  const { children } = node.props;
+  const validChildren = Children.toArray(children).filter(Boolean);
+
+  if (validChildren.length === 0) {
+    return null;
+  }
+
+  return node;
+}
+
+export { customPortableTextComponents };
+export type { CustomPortableTextComponentsProps };

aksel.nav.no/website/app/_ui/portable-text/CustomPortableText.module.css

@@ -0,0 +1,28 @@
+.removeSpacingForLast:last-child {
+  margin-bottom: 0;
+}
+
+.headingElement {
+  color: var(--ax-text-brand-blue);
+  scroll-margin-block: var(--ax-space-80);
+
+  &[data-level="2"] {
+    margin-block: var(--ax-space-48) var(--ax-space-16);
+
+    &:first-of-type {
+      margin-top: 0;
+    }
+  }
+
+  &[data-level="3"] {
+    margin-block-start: var(--ax-space-32);
+  }
+
+  &[data-level="4"] {
+    margin-block-start: var(--ax-space-24);
+  }
+
+  &:focus {
+    outline: none;
+  }
+}