feat: Initial SiteFooter

wp-content/themes/headless/app/assets/css/_main.css

@@ -2,5 +2,6 @@
 @import "@nuxt/ui";
 
 @import "./containers.css";
+@import "./links.css";
 @import "./theme.css";
 @import "./typography.css";

wp-content/themes/headless/app/assets/css/links.css

@@ -0,0 +1,13 @@
+/* Variant to target all children links without specific link or button classes */
+@custom-variant links (& a:not([class*='link-']):not([class*='button-']));
+
+/* Link styles */
+@utility link-base {
+  @apply cursor-pointer transition;
+}
+@utility link-underline {
+  @apply link-base underline hover:decoration-primary;
+}
+@utility link-opacity {
+  @apply link-base hover:opacity-80;
+}

wp-content/themes/headless/app/components/site/SiteFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const { data: siteOptions } = await useSiteOptions();
+</script>
+
+<template>
+  <footer class="links:link-prose bg-muted">
+    <div class="container py-3">
+      <AcfSocial
+        :social="siteOptions?.social"
+        class="flex items-center gap-1.5 links:link-opacity"
+      ></AcfSocial>
+    </div>
+    <SiteFooterBottom />
+  </footer>
+</template>

wp-content/themes/headless/app/components/site/SiteFooterBottom.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="bg-inverted py-1.5 text-inverted">
+    <div class="container flex flex-col items-center gap-3 sm:flex-row">
+      <SiteFooterCopyright class="sm:mr-auto" />
+      <SiteFooterCredits />
+    </div>
+  </div>
+</template>

wp-content/themes/headless/app/components/site/SiteFooterCopyright.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+const { data: generalSettings } = await useGeneralSettings();
+</script>
+
+<template>
+  <div class="">
+    © {{ new Date().getFullYear() }}
+    <span v-if="generalSettings?.title">{{ generalSettings.title }}</span>
+  </div>
+</template>

wp-content/themes/headless/app/components/site/SiteFooterCredits.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="flex items-center gap-1">
+    Fait avec <UIcon name="i-lucide-heart" /> par
+    <ULink
+      href="https://websimple.com"
+      target="_blank"
+      external
+      title="Site web développé par Websimple"
+      >Websimple</ULink
+    >
+  </div>
+</template>

wp-content/themes/headless/app/layouts/default.vue

@@ -1,6 +1,9 @@
 <template>
   <div id="layout-default">
     <SiteHeader />
-    <slot />
+    <UMain>
+      <slot />
+    </UMain>
+    <SiteFooter />
   </div>
 </template>

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

@@ -9,7 +9,6 @@ const { data: node, error } = await useAsyncGraphQLQuery(
   },
 );
 
-
 // Handle errors and missing nodes
 if (!node.value) {
   console.error("NodeByUri query error:", error.value);
@@ -20,7 +19,6 @@ if (!node.value) {
   });
 }
 
-
 // Dynamically resolve component based on node type
 const componentName = `Node${node.value.__typename}`;
 if (!useNuxtApp().vueApp.component(componentName)) {