feature: Details Block

src/blocks/Blocks.astro

@@ -1,5 +1,6 @@
 ---
 import type { AnyBlock } from './Blocks';
+import DetailsBlock from './DetailsBlock/DetailsBlock.astro';
 import EmbedBlock from './EmbedBlock/EmbedBlock.astro';
 import ImageBlock from './ImageBlock/ImageBlock.astro';
 import PagePartialBlock from './PagePartialBlock/PagePartialBlock.astro';
@@ -10,6 +11,7 @@ import VideoBlock from './VideoBlock/VideoBlock.astro';
 import VideoEmbedBlock from './VideoEmbedBlock/VideoEmbedBlock.astro';
 
 const blocksByTypename = {
+  DetailsBlockRecord: DetailsBlock,
   EmbedBlockRecord: EmbedBlock,
   ImageBlockRecord: ImageBlock,
   PagePartialBlockRecord: PagePartialBlock,

src/blocks/Blocks.d.ts

@@ -1,4 +1,5 @@
-import { 
+import {
+  DetailsBlockFragment,
   EmbedBlockFragment,
   ImageBlockFragment,
   PagePartialBlockFragment,
@@ -10,6 +11,7 @@ import {
 } from '@lib/types/datocms';
 
 export type AnyBlock =
+  | DetailsBlockFragment
   | EmbedBlockFragment
   | ImageBlockFragment
   | PagePartialBlockFragment

src/blocks/DetailsBlock/DetailsBlock.astro

@@ -0,0 +1,34 @@
+---
+import type { DetailsBlockFragment } from '@lib/types/datocms';
+
+interface Props {
+    block: DetailsBlockFragment;
+}
+
+const { block } = Astro.props;
+const splitCharacter = '|';
+---
+
+<dl data-layout={block.layout}>
+  {
+    Object.entries(block.details).map(([key, value]) => (
+      <>
+        <dt>{key}</dt>
+        {(value as string).split(splitCharacter).map((splitValue) => (
+          <dd>{splitValue}</dd>
+        ))}
+      </>
+    ))
+  }
+</dl>
+
+<style>
+    dl[data-layout="horizontal"] {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+    }
+
+    dl[data-layout="horizontal"] dd {
+        grid-column: 2;
+    }
+</style>

src/blocks/DetailsBlock/DetailsBlock.fragment.graphql

@@ -0,0 +1,4 @@
+fragment DetailsBlock on DetailsBlockRecord {
+  details
+  layout
+}

src/blocks/DetailsBlock/index.ts

@@ -0,0 +1 @@
+export { default as DetailsBlock } from './DetailsBlock.astro';

src/pages/[locale]/[...path]/_index.query.graphql

@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/InternalLink/ParentPage.fragment.graphql'
@@ -24,6 +25,9 @@ query Page($locale: SiteLocale!, $slug: String!) {
     ...ParentPage
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }

src/pages/[locale]/_404.query.graphql

@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -12,6 +13,9 @@ query NotFoundPage($locale: SiteLocale!) {
     title
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }

src/pages/[locale]/_index.query.graphql

@@ -1,3 +1,4 @@
+#import '@blocks/DetailsBlock/DetailsBlock.fragment.graphql'
 #import '@blocks/EmbedBlock/EmbedBlock.fragment.graphql'
 #import '@blocks/ImageBlock/ImageBlock.fragment.graphql'
 #import '@blocks/PagePartialBlock/PagePartialBlock.fragment.graphql'
@@ -17,6 +18,9 @@ query HomePage($locale: SiteLocale!) {
     }
     bodyBlocks {
       __typename
+      ... on DetailsBlockRecord {
+        ...DetailsBlock
+      }
       ... on EmbedBlockRecord {
         ...EmbedBlock
       }