From 12774b2df1a53da102726d093c65db6df767f379 Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Fri, 27 Mar 2026 09:27:15 -0400
Subject: [PATCH] feat: AcfBuilder / SectionProse

---
 .../app/components/acf/AcfBuilder.gql         |  8 ++++++++
 .../app/components/acf/AcfBuilder.vue         | 20 +++++++++++++++++++
 .../app/components/nodes/NodePage.gql         |  5 +++++
 .../app/components/nodes/NodePage.vue         |  4 +++-
 .../app/components/sections/SectionProse.gql  |  3 +++
 .../app/components/sections/SectionProse.vue  |  9 +++++++++
 wp-content/themes/headless/nuxt.config.ts     |  3 ++-
 7 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfBuilder.gql
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfBuilder.vue
 create mode 100644 wp-content/themes/headless/app/components/sections/SectionProse.gql
 create mode 100644 wp-content/themes/headless/app/components/sections/SectionProse.vue

diff --git a/wp-content/themes/headless/app/components/acf/AcfBuilder.gql b/wp-content/themes/headless/app/components/acf/AcfBuilder.gql
new file mode 100644
index 0000000..6feeb5d
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfBuilder.gql
@@ -0,0 +1,8 @@
+fragment AcfBuilder on GroupAbstractBuilder_Fields {
+  sections @nullToEmpty @filterNullItems {
+    __typename
+    ... on GroupAbstractBuilderSectionsProseLayout {
+      ...SectionProse
+    }
+  }
+}
diff --git a/wp-content/themes/headless/app/components/acf/AcfBuilder.vue b/wp-content/themes/headless/app/components/acf/AcfBuilder.vue
new file mode 100644
index 0000000..9594d8d
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfBuilder.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { AcfBuilderFragment } from "#graphql/types";
+
+const props = defineProps<{ builder: AcfBuilderFragment }>();
+const sections = computed(() =>
+  props.builder.sections.map(({ __typename, ...section }) => ({
+    component: __typename.replace(/^GroupAbstractBuilderSections(.+?)Layout$/, "Section$1"),
+    section,
+  })),
+);
+</script>
+
+<template>
+  <Component
+    v-for="({ component, section }, key) in sections"
+    :key="key"
+    :is="component"
+    :section="section"
+  />
+</template>
diff --git a/wp-content/themes/headless/app/components/nodes/NodePage.gql b/wp-content/themes/headless/app/components/nodes/NodePage.gql
index 153155f..adfd87b 100644
--- a/wp-content/themes/headless/app/components/nodes/NodePage.gql
+++ b/wp-content/themes/headless/app/components/nodes/NodePage.gql
@@ -1,3 +1,8 @@
 fragment NodePage on Page {
   title @nonNull
+  groupPostPage @nonNull {
+    builder @nonNull {
+      ...AcfBuilder
+    }
+  }
 }
diff --git a/wp-content/themes/headless/app/components/nodes/NodePage.vue b/wp-content/themes/headless/app/components/nodes/NodePage.vue
index 054be6b..41c0e0b 100644
--- a/wp-content/themes/headless/app/components/nodes/NodePage.vue
+++ b/wp-content/themes/headless/app/components/nodes/NodePage.vue
@@ -5,5 +5,7 @@ defineProps<{ node: NodePageFragment }>();
 </script>
 
 <template>
-  <div id="node-page">{{ node.title }}</div>
+  <div id="node-page">
+    <AcfBuilder :builder="node.groupPostPage.builder" />
+  </div>
 </template>
diff --git a/wp-content/themes/headless/app/components/sections/SectionProse.gql b/wp-content/themes/headless/app/components/sections/SectionProse.gql
new file mode 100644
index 0000000..2a56d4a
--- /dev/null
+++ b/wp-content/themes/headless/app/components/sections/SectionProse.gql
@@ -0,0 +1,3 @@
+fragment SectionProse on GroupAbstractBuilderSectionsProseLayout {
+  content
+}
diff --git a/wp-content/themes/headless/app/components/sections/SectionProse.vue b/wp-content/themes/headless/app/components/sections/SectionProse.vue
new file mode 100644
index 0000000..c8b1224
--- /dev/null
+++ b/wp-content/themes/headless/app/components/sections/SectionProse.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { SectionProseFragment } from "#graphql/types";
+
+defineProps<{ section: SectionProseFragment }>();
+</script>
+
+<template>
+  <div class="prose" v-html="section.content"></div>
+</template>
diff --git a/wp-content/themes/headless/nuxt.config.ts b/wp-content/themes/headless/nuxt.config.ts
index d57adad..dabd9f1 100644
--- a/wp-content/themes/headless/nuxt.config.ts
+++ b/wp-content/themes/headless/nuxt.config.ts
@@ -11,6 +11,7 @@ export default defineNuxtConfig({
   components: {
     dirs: [
       { path: "~/components/nodes", global: true },
+      { path: "~/components/sections", global: true },
       { path: "~/components", pathPrefix: false },
     ],
   },
@@ -54,7 +55,7 @@ export default defineNuxtConfig({
 
   vite: {
     optimizeDeps: {
-      include: ["@vue/devtools-core", "@vue/devtools-kit", "es-toolkit/promise", "zod"],
+      include: ["@vue/devtools-core", "@vue/devtools-kit", "es-toolkit", "zod"],
     },
   },
 });