From b5aa40768b2efeb53339a7d40ab0e83593a65a7a Mon Sep 17 00:00:00 2001
From: Pascal Martineau <pascal@lewebsimple.ca>
Date: Thu, 26 Mar 2026 11:06:23 -0400
Subject: [PATCH] feat: AcfSocial

---
 .../headless/app/components/acf/AcfSocial.gql |  5 +++
 .../headless/app/components/acf/AcfSocial.vue | 34 +++++++++++++++++++
 wp-content/themes/headless/package.json       |  1 +
 wp-content/themes/headless/pnpm-lock.yaml     | 20 ++++++++---
 4 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfSocial.gql
 create mode 100644 wp-content/themes/headless/app/components/acf/AcfSocial.vue

diff --git a/wp-content/themes/headless/app/components/acf/AcfSocial.gql b/wp-content/themes/headless/app/components/acf/AcfSocial.gql
new file mode 100644
index 0000000..8fbb0aa
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfSocial.gql
@@ -0,0 +1,5 @@
+fragment AcfSocial on GroupAbstractSocial_Fields {
+  profiles @filterNullItems @nullToEmpty {
+    url
+  }
+}
diff --git a/wp-content/themes/headless/app/components/acf/AcfSocial.vue b/wp-content/themes/headless/app/components/acf/AcfSocial.vue
new file mode 100644
index 0000000..157c4d2
--- /dev/null
+++ b/wp-content/themes/headless/app/components/acf/AcfSocial.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { AcfSocialFragment } from "#graphql/types";
+
+defineProps<{ social?: AcfSocialFragment }>();
+
+const socialIconNames = {
+  "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 {
+  try {
+    const domain = new URL(url).hostname.toLowerCase().replace(/^www\./, "");
+    return socialIconNames[domain as keyof typeof socialIconNames] ?? "i-lucide-globe";
+  } catch (error) {
+    return "i-lucide-globe";
+  }
+}
+</script>
+
+<template>
+  <ul v-if="social?.profiles.length">
+    <li v-for="({ url }, key) in social.profiles" :key="key">
+      <a :href="url" target="_blank" rel="noopener noreferrer">
+        <UIcon :name="getSocialIcon(url)" />
+      </a>
+    </li>
+  </ul>
+</template>
diff --git a/wp-content/themes/headless/package.json b/wp-content/themes/headless/package.json
index 6664490..8776fdd 100644
--- a/wp-content/themes/headless/package.json
+++ b/wp-content/themes/headless/package.json
@@ -16,6 +16,7 @@
     "release": "oxlint . && oxfmt --check . && nuxt typecheck && changelogen --noAuthors --release --push"
   },
   "dependencies": {
+    "@iconify-json/cib": "^1.2.3",
     "@iconify-json/lucide": "^1.2.99",
     "@lewebsimple/nuxt-graphql": "^0.7.5",
     "@nuxt/ui": "^4.6.0",
diff --git a/wp-content/themes/headless/pnpm-lock.yaml b/wp-content/themes/headless/pnpm-lock.yaml
index 50bd7d8..2331012 100644
--- a/wp-content/themes/headless/pnpm-lock.yaml
+++ b/wp-content/themes/headless/pnpm-lock.yaml
@@ -12,6 +12,9 @@ importers:
 
   .:
     dependencies:
+      '@iconify-json/cib':
+        specifier: ^1.2.3
+        version: 1.2.3
       '@iconify-json/lucide':
         specifier: ^1.2.99
         version: 1.2.99
@@ -609,6 +612,9 @@ packages:
     resolution: {integrity: sha512-ZpJxMqB+Qfe3rp6uszCQoag4nSw42icURnBRfFYSOmTgEeOe4rD0vYlbA8spvCu2TlCesNTlEN9BLWtQqLxabA==}
     engines: {node: '>=18.0.0'}
 
+  '@iconify-json/cib@1.2.3':
+    resolution: {integrity: sha512-MMvRXVTHt82z3bYN19JDAjv/X8OBNC/1B3I334SV/1nyhdPeeyvJZVoI1cGuNqYznBjMnWxKPtIhhiVgGQ1CzQ==}
+
   '@iconify-json/lucide@1.2.99':
     resolution: {integrity: sha512-XE2Pg8uax2uN3ZbvvnO0C5ADgZOyUgEPiwnhD/xrJwz/bfpWwL3mbDwxntEWB2G1mwo2OqKMF50/jp6ia2QzKw==}
 
@@ -1800,8 +1806,8 @@ packages:
   '@standard-schema/spec@1.1.0':
     resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
 
-  '@swc/helpers@0.5.19':
-    resolution: {integrity: sha512-QamiFeIK3txNjgUTNppE6MiG3p7TdninpZu0E0PbqVh1a9FNLT2FRhisaa4NcaX52XVhA5l7Pk58Ft7Sqi/2sA==}
+  '@swc/helpers@0.5.20':
+    resolution: {integrity: sha512-2egEBHUMasdypIzrprsu8g+OEVd7Vp2MM3a2eVlM/cyFYto0nGz5BX5BTgh/ShZZI9ed+ozEq+Ngt+rgmUs8tw==}
 
   '@tailwindcss/node@4.2.2':
     resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
@@ -5643,6 +5649,10 @@ snapshots:
       '@repeaterjs/repeater': 3.0.6
       tslib: 2.8.1
 
+  '@iconify-json/cib@1.2.3':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/lucide@1.2.99':
     dependencies:
       '@iconify/types': 2.0.0
@@ -5666,11 +5676,11 @@ snapshots:
 
   '@internationalized/date@3.12.0':
     dependencies:
-      '@swc/helpers': 0.5.19
+      '@swc/helpers': 0.5.20
 
   '@internationalized/number@3.6.5':
     dependencies:
-      '@swc/helpers': 0.5.19
+      '@swc/helpers': 0.5.20
 
   '@ioredis/commands@1.5.1': {}
 
@@ -6811,7 +6821,7 @@ snapshots:
 
   '@standard-schema/spec@1.1.0': {}
 
-  '@swc/helpers@0.5.19':
+  '@swc/helpers@0.5.20':
     dependencies:
       tslib: 2.8.1