feat: AcfSocial / parseAcfSocial

wp-content/themes/moonshine/app/components/acf/AcfSocial.fragment.gql

@@ -0,0 +1,5 @@
+fragment AcfSocial on GroupAbstractSocial_Fields {
+  profiles {
+    url
+  }
+}

wp-content/themes/moonshine/app/components/acf/AcfSocial.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+defineProps<{ social?: AcfSocialOutput }>();
+</script>
+
+<template>
+  <div v-if="social?.profiles" class="flex gap-1.5">
+    <a v-for="({ url, icon }, key) in social.profiles" :key="key" :href="url" target="_blank" rel="noopener noreferrer" class="flex">
+      <UIcon :name="icon" />
+    </a>
+  </div>
+</template>

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

@@ -1,13 +1,12 @@
 <script setup lang="ts">
+const { data: siteOptions } = await useSiteOptions();
 </script>
 
 <template>
-  <UFooter id="site-footer">
-    <template #left>
-      <SiteFooterCopyright />
-    </template>
-    <template #right>
-      <SiteFooterCredits />
-    </template>
-  </UFooter>
+  <footer class="bg-accented links:link-prose">
+    <div class="container py-6">
+      <AcfSocialProfiles :social="parseAcfSocial(siteOptions)" />
+    </div>
+    <SiteFooterBottom />
+  </footer>
 </template>

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

@@ -0,0 +1,9 @@
+<template>
+  <div class="bg-inverted text-inverted py-1.5">
+    <div class="container flex flex-col sm:flex-row items-center gap-3">
+      <SiteFooterCopyright class="sm:mr-auto" />
+      <AuthConnexionButton color="neutral" variant="link" />
+      <SiteFooterCredits />
+    </div>
+  </div>
+</template>

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

@@ -1,6 +1,7 @@
 fragment SiteOptions on GroupSiteOptions {
   email
   phoneNumber { ... AcfPhone }
+  ...AcfSocial
   links {
     contact { ... AcfLink}
   }

wp-content/themes/moonshine/app/utils/acf-social.ts

@@ -0,0 +1,32 @@
+import * as z from "zod";
+import type { AcfSocialFragment } from "#graphql/operations";
+
+const socialProfile = z.object({ url: z.url() }).transform(({ url }) => ({ url, icon: getSocialIcon(url) }));
+const acfSocialSchema = z.object({
+  profiles: z.array(socialProfile),
+});
+export type AcfSocialOutput = z.infer<typeof acfSocialSchema>;
+
+export function parseAcfSocial(data?: AcfSocialFragment) {
+  try {
+    return acfSocialSchema.parse(data);
+  }
+  catch {
+    return undefined;
+  }
+}
+
+const socialIconMap = {
+  "facebook.com": "i-cib-facebook-f",
+  "twitter.com": "i-cib-twitter",
+  "x.com": "i-cib-twitter",
+  "instagram.com": "i-cib-instagram",
+  "youtube.com": "i-cib-youtube",
+  "linkedin.com": "i-cib-linkedin",
+  "tiktok.com": "i-cib-tiktok",
+};
+
+function getSocialIcon(url: string): string {
+  const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
+  return socialIconMap[domain as keyof typeof socialIconMap] ?? "i-lucide-globe";
+}

wp-content/themes/moonshine/app/utils/map-social-icon.ts

@@ -1,21 +0,0 @@
-const socialIconMap = {
-  "facebook.com": "i-cib-facebook-f",
-  "twitter.com": "i-cib-twitter",
-  "x.com": "i-cib-twitter",
-  "instagram.com": "i-cib-instagram",
-  "youtube.com": "i-cib-youtube",
-  "linkedin.com": "i-cib-linkedin",
-  "tiktok.com": "i-cib-tiktok",
-};
-
-export function mapSocialIcon(url: string) {
-  try {
-    const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
-    const icon = socialIconMap[domain as keyof typeof socialIconMap];
-    if (!icon) throw new Error(`Média social introuvable ${url}`);
-    return icon;
-  }
-  catch {
-    return "i-lucide-globe";
-  }
-}