fix: GraphQL breadcrumbs and address

wp-content/themes/ccat/app/composables/useNodeByUri.gql

@@ -2,6 +2,10 @@ query nodeByUri($uri: String!) {
   nodeByUri(uri: $uri) {
     __typename
     id
+    breadcrumbs {
+      label
+      uri
+    }
     ... on Page {
       ...ThePage
     }

wp-content/themes/ccat/app/composables/useNodeByUri.ts

@@ -17,6 +17,11 @@ import {
   TheResource,
 } from "#components";
 
+interface BreadcrumbItem {
+  label: string;
+  to?: string;
+}
+
 export async function useNodeByUri() {
   const route = useRoute();
   const uri = computed(() => route.path);
@@ -25,21 +30,34 @@ export async function useNodeByUri() {
     throw createError({ statusCode: 500, message: "Erreur lors de la récupération du contenu", fatal: true });
   }
   const node = data.value?.data.nodeByUri;
+
+  const breadcrumbs: BreadcrumbItem[] = [];
+  if (node?.breadcrumbs) {
+    breadcrumbs.push(
+      ...node.breadcrumbs
+        .filter((item: any) => item.label)
+        .map((item: any) => ({
+          label: item.label,
+          to: item.uri || undefined,
+        })),
+    );
+  }
+
   switch (node?.__typename) {
     case "Page":
-      return { component: ThePage, node: node as ThePageFragment };
+      return { component: ThePage, node: node as ThePageFragment, breadcrumbs };
     case "Post":
-      return { component: TheArticle, node: node as TheArticleFragment };
+      return { component: TheArticle, node: node as TheArticleFragment, breadcrumbs };
     case "Event":
-      return { component: TheEvent, node: node as TheEventFragment };
+      return { component: TheEvent, node: node as TheEventFragment, breadcrumbs };
     case "Location":
-      return { component: TheLocation, node: node as TheLocationFragment };
+      return { component: TheLocation, node: node as TheLocationFragment, breadcrumbs };
     case "Membership":
-      return { component: TheMembership, node: node as TheMembershipFragment };
+      return { component: TheMembership, node: node as TheMembershipFragment, breadcrumbs };
     case "Project":
-      return { component: TheProject, node: node as TheProjectFragment };
+      return { component: TheProject, node: node as TheProjectFragment, breadcrumbs };
     case "Resource":
-      return { component: TheResource, node: node as TheResourceFragment };
+      return { component: TheResource, node: node as TheResourceFragment, breadcrumbs };
     default:
       throw createError({ statusCode: 404, message: "Page non trouvée", fatal: true });
   }

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

@@ -1,8 +1,14 @@
 <script setup lang="ts">
-const { node, component } = await useNodeByUri();
+const { node, component, breadcrumbs } = await useNodeByUri();
 useSeoMeta({ title: node?.title });
 </script>
 
 <template>
-  <component :is="component" :node="node" />
+  <div>
+    <div class="">
+      <pre>{{ breadcrumbs }}</pre>
+      <UBreadcrumb :items="breadcrumbs" />
+    </div>
+    <component :is="component" :node="node" />
+  </div>
 </template>