feat: Initial NodeByUri logic and frontend

wp-content/themes/moonshine/app/components/builder/BuilderSections.fragment.gql

@@ -0,0 +1,8 @@
+fragment BuilderSections on GroupAbstractBuilder_Fields {
+  sections {
+    __typename
+    ... on GroupAbstractBuilderSectionsTextBlockLayout {
+      ... SectionTextBlock
+    }
+  }
+}

wp-content/themes/moonshine/app/components/builder/BuilderSections.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { BuilderSectionsFragment } from "#graphql/typed-documents";
+
+defineProps<BuilderSectionsFragment>();
+</script>
+
+<template>
+  <pre>{{ sections }}</pre>
+</template>

wp-content/themes/moonshine/app/components/nodes/NodePage.fragment.gql

@@ -0,0 +1,6 @@
+fragment NodePage on Page {
+  title
+  groupPostPage {
+    ... BuilderSections
+  }
+}

wp-content/themes/moonshine/app/components/nodes/NodePage.global.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { NodePageFragment } from "#graphql/typed-documents";
+
+defineProps<NodePageFragment>();
+</script>
+
+<template>
+  <div id="node-page">
+    <h1 class="font-bold text-4xl">
+      {{ title }}
+    </h1>
+    <BuilderSections v-bind="groupPostPage" />
+  </div>
+</template>

wp-content/themes/moonshine/app/components/sections/SectionTextBlock.fragment.gql

@@ -0,0 +1,3 @@
+fragment SectionTextBlock on GroupAbstractBuilderSectionsTextBlockLayout {
+  content
+}

wp-content/themes/moonshine/app/components/sections/SectionTextBlock.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import type { SectionTextBlockFragment } from "#graphql/typed-documents";
+
+defineProps<SectionTextBlockFragment>();
+</script>
+
+<template>
+  <div v-html="content" />
+</template>

wp-content/themes/moonshine/app/graphql/NodebyUri.query.gql

@@ -0,0 +1,8 @@
+query NodeByUri($uri: String!) {
+  nodeByUri(uri: $uri) {
+    __typename
+    ... on Page {
+      ... NodePage
+    }
+  }
+}

wp-content/themes/moonshine/app/pages/[...uri].vue

@@ -1,6 +1,19 @@
 <script setup lang="ts">
+const { path: uri } = useRoute();
+const { data } = await useGraphQLQuery("NodeByUri", { uri });
+
+// Resolve and validate Node component
+if (!data.value.nodeByUri) {
+  throw createError({ statusCode: 404, message: `La page demandée est introuvable: ${uri}` });
+}
+const componentName = `Node${data.value.nodeByUri.__typename}`;
+if (!useNuxtApp().vueApp.component(componentName)) {
+  throw createError({ statusCode: 404, message: `La page demandée ne peut pas être affichée correctement: ${componentName}` });
+}
 </script>
 
 <template>
-  <div id="page-node-from-uri" />
+  <div v-if="data.nodeByUri" id="page-node-from-uri">
+    <Component :is="componentName" v-bind="data.nodeByUri" />
+  </div>
 </template>