feat: AcfSocial

wp-content/themes/headless/app/components/acf/AcfSocial.gql

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

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>

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",

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