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,45 @@
+---
+import type { DetailsBlockFragment } from '@lib/types/datocms';
+
+interface Props {
+  block: DetailsBlockFragment
+}
+
+const { block } = Astro.props;
+const splitChar = '|';
+const hasMultipleValues = (value: string) => value.includes(splitChar);
+const splitValues = (value: string) => value.split(splitChar);
+---
+
+<dl class:list={['details-block', `details-block--${block.display}`]}>
+  {
+    Object.keys(block.details).map((key) => (
+      <>
+        <dt>{key}</dt>
+        {hasMultipleValues(block.details[key]) ? (
+          <div>
+            {splitValues(block.details[key]).map((value) => (
+              <dd>{value}</dd>
+            ))}
+          </div>
+        ) : (
+          <dd>{block.details[key]}</dd>
+        )}
+      </>
+    ))
+  }
+</dl>
+
+<style>
+    .details-block {
+        display: grid;
+    }
+
+    .details-block--vertical {
+        grid-template-columns: 1fr;
+    }
+
+    .details-block--horizontal {
+        grid-template-columns: max-content 1fr;
+    }
+</style>

src/blocks/DetailsBlock/DetailsBlock.fragment.graphql

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

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
       }