feat: AcfBuilder / SectionProse

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
+    }
+  }
+}

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>

wp-content/themes/headless/app/components/nodes/NodePage.gql

@@ -1,3 +1,8 @@
 fragment NodePage on Page {
   title @nonNull
+  groupPostPage @nonNull {
+    builder @nonNull {
+      ...AcfBuilder
+    }
+  }
 }

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>

wp-content/themes/headless/app/components/sections/SectionProse.gql

@@ -0,0 +1,3 @@
+fragment SectionProse on GroupAbstractBuilderSectionsProseLayout {
+  content
+}

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>

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"],
     },
   },
 });