From 7558da689de33694498a59d1c5c647a67ce3fcfe Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Wed, 3 Sep 2025 14:45:31 -0400
Subject: [PATCH] feat: Initial useNodeByUri

---
 .../app/components/nodes/ThePage.fragment.gql  |  3 +++
 .../ccat/app/components/nodes/ThePage.vue      | 11 +++++++++++
 .../ccat/app/composables/useNodeByUri.gql      |  9 +++++++++
 .../ccat/app/composables/useNodeByUri.ts       | 18 ++++++++++++++++++
 wp-content/themes/ccat/app/pages/[...uri].vue  |  8 ++++++++
 wp-content/themes/ccat/app/pages/index.vue     |  9 ---------
 6 files changed, 49 insertions(+), 9 deletions(-)
 create mode 100644 wp-content/themes/ccat/app/components/nodes/ThePage.fragment.gql
 create mode 100644 wp-content/themes/ccat/app/components/nodes/ThePage.vue
 create mode 100644 wp-content/themes/ccat/app/composables/useNodeByUri.gql
 create mode 100644 wp-content/themes/ccat/app/composables/useNodeByUri.ts
 create mode 100644 wp-content/themes/ccat/app/pages/[...uri].vue
 delete mode 100644 wp-content/themes/ccat/app/pages/index.vue

diff --git a/wp-content/themes/ccat/app/components/nodes/ThePage.fragment.gql b/wp-content/themes/ccat/app/components/nodes/ThePage.fragment.gql
new file mode 100644
index 0000000..fd7e061
--- /dev/null
+++ b/wp-content/themes/ccat/app/components/nodes/ThePage.fragment.gql
@@ -0,0 +1,3 @@
+fragment ThePage on Page {
+  title
+}
diff --git a/wp-content/themes/ccat/app/components/nodes/ThePage.vue b/wp-content/themes/ccat/app/components/nodes/ThePage.vue
new file mode 100644
index 0000000..bd3164b
--- /dev/null
+++ b/wp-content/themes/ccat/app/components/nodes/ThePage.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import type { ThePageFragment } from "#graphql-operations";
+
+defineProps<{ node: ThePageFragment }>();
+</script>
+
+<template>
+  <UPage>
+    <UPageSection v-if="node.title" :title="node.title" />
+  </UPage>
+</template>
diff --git a/wp-content/themes/ccat/app/composables/useNodeByUri.gql b/wp-content/themes/ccat/app/composables/useNodeByUri.gql
new file mode 100644
index 0000000..04fc213
--- /dev/null
+++ b/wp-content/themes/ccat/app/composables/useNodeByUri.gql
@@ -0,0 +1,9 @@
+query nodeByUri($uri: String!) {
+  nodeByUri(uri: $uri) {
+    __typename
+    id
+    ... on Page {
+      ...ThePage
+    }
+  }
+}
\ No newline at end of file
diff --git a/wp-content/themes/ccat/app/composables/useNodeByUri.ts b/wp-content/themes/ccat/app/composables/useNodeByUri.ts
new file mode 100644
index 0000000..6f9af14
--- /dev/null
+++ b/wp-content/themes/ccat/app/composables/useNodeByUri.ts
@@ -0,0 +1,18 @@
+import type { ThePageFragment } from "#graphql-operations";
+import { ThePage } from "#components";
+
+export async function useNodeByUri() {
+  const route = useRoute();
+  const uri = computed(() => route.path);
+  const { data } = await useAsyncGraphqlQuery("nodeByUri", { uri: uri.value }, { graphqlCaching: { client: true } });
+  if (data.value?.errors?.length) {
+    throw createError({ statusCode: 500, message: "Erreur lors de la récupération du contenu", fatal: true });
+  }
+  const node = data.value?.data.nodeByUri;
+  switch (node?.__typename) {
+    case "Page":
+      return { component: ThePage, node: node as ThePageFragment };
+    default:
+      throw createError({ statusCode: 404, message: "Page non trouvée", fatal: true });
+  }
+}
diff --git a/wp-content/themes/ccat/app/pages/[...uri].vue b/wp-content/themes/ccat/app/pages/[...uri].vue
new file mode 100644
index 0000000..a76d817
--- /dev/null
+++ b/wp-content/themes/ccat/app/pages/[...uri].vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+const { node, component } = await useNodeByUri();
+useSeoMeta({ title: node?.title });
+</script>
+
+<template>
+  <component :is="component" :node="node" />
+</template>
diff --git a/wp-content/themes/ccat/app/pages/index.vue b/wp-content/themes/ccat/app/pages/index.vue
deleted file mode 100644
index a72b124..0000000
--- a/wp-content/themes/ccat/app/pages/index.vue
+++ /dev/null
@@ -1,9 +0,0 @@
-<script setup lang="ts">
-useSeoMeta({ title: "Accueil" });
-</script>
-
-<template>
-  <UPage>
-    <UPageHero title="Nuxt UI rocks" />
-  </UPage>
-</template>