Refactor(useRoadizHeadSocials): use map and add order property (#606)

* refactor: streamline getSocialLinks function and improve key normalization

* chore: run lint

* refactor: update social links handling and improve storybook examples

* chore: run lint fix

---------

Co-authored-by: Timothe Joubert <timothejoubert26@gmail.com>

Author: timothejoubert

app/composables/use-roadiz-head-socials.ts

@@ -5,56 +5,56 @@ export interface SocialLink {
     icon?: string
 }
 
-export function getSocialLinks({ key, url }: { key: string, url: string }) {
-    // Remove trailing "url" and convert to lowercase for better matching
-    // For example, "twitterUrl" becomes "twitter", "linkedin_url" becomes "linkedin"
-    const formattedKey = key.toLowerCase().replace(/_?url$/, '')
+// useRoadizHeadSocialLinks will sort the social links based on the order defined in SOCIAL_NETWORKS
+// and will use a default icon for unknown networks
+const SOCIAL_NETWORKS = [
+    { prefixes: ['instagram'], name: 'Instagram', icon: 'social-instagram' },
+    { prefixes: ['facebook'], name: 'Facebook', icon: 'social-facebook' },
+    { prefixes: ['tiktok'], name: 'Tiktok', icon: 'social-tiktok' },
+    { prefixes: ['linkedin'], name: 'LinkedIn', icon: 'social-linkedin' },
+    { prefixes: ['mastodon'], name: 'Mastodon', icon: 'social-mastodon' },
+    { prefixes: ['pinterest'], name: 'Pinterest', icon: 'social-pinterest' },
+    { prefixes: ['snapchat'], name: 'Snapchat', icon: 'social-snapchat' },
+    { prefixes: ['youtube'], name: 'Youtube', icon: 'social-youtube' },
+    { prefixes: ['spotify'], name: 'Spotify', icon: 'social-spotify' },
+    { prefixes: ['twitter', 'x'], name: 'X', icon: 'social-x' },
+] as const
 
-    if (formattedKey.startsWith('mastodon')) {
-        return { url: url, name: 'Mastodon', icon: 'social-mastodon' }
-    }
-    if (formattedKey.startsWith('pinterest')) {
-        return { url: url, name: 'Pinterest', icon: 'social-pinterest' }
-    }
-    if (formattedKey.startsWith('snapchat')) {
-        return { url: url, name: 'Snapchat', icon: 'social-snapchat' }
-    }
-    if (formattedKey.startsWith('instagram')) {
-        return { url: url, name: 'Instagram', icon: 'social-instagram' }
-    }
-    if (formattedKey.startsWith('youtube')) {
-        return { url: url, name: 'Youtube', icon: 'social-youtube' }
-    }
-    if (formattedKey.startsWith('linkedin')) {
-        return { url: url, name: 'LinkedIn', icon: 'social-linkedin' }
-    }
-    if (formattedKey.startsWith('facebook')) {
-        return { url: url, name: 'Facebook', icon: 'social-facebook' }
-    }
-    if (formattedKey.startsWith('tiktok')) {
-        return { url: url, name: 'Tiktok', icon: 'social-tiktok' }
-    }
-    if (formattedKey.startsWith('spotify')) {
-        return { url: url, name: 'Spotify', icon: 'social-spotify' }
-    }
-    if (formattedKey.startsWith('twitter') || formattedKey === 'x') {
-        return { url: url, name: 'X', icon: 'social-x' }
+// Api keys in commonContent.urls can be in snake_case or camelCase,
+// so we need to normalize them to match the prefixes in SOCIAL_NETWORKS
+function normalizeKey(key: string): string {
+    return key.replace(/_url$/i, '').replace(/Url$/, '').toLowerCase()
+}
+
+export function getSocialLinks(key: string, url: string): SocialLink {
+    const normalized = normalizeKey(key)
+    const network = SOCIAL_NETWORKS.find(({ prefixes }) => prefixes.some(p => normalized === p))
+
+    if (network) {
+        return {
+            url,
+            name: network.name,
+            icon: network.icon,
+        }
     }
 
     return {
-        url: url,
-        name: key,
+        url,
+        name: normalized,
         icon: 'link',
     }
 }
 
 export function useRoadizHeadSocialLinks() {
     const { data } = useCommonContent()
 
-    return computed(() => {
-        const urlEntriesList = Object.entries(data.value?.urls || {})
-            .filter(([_key, value]) => typeof value === 'string') as [string, string][]
-
-        return urlEntriesList.map(([key, url]) => getSocialLinks({ key, url }))
-    })
+    return computed(() =>
+        Object.entries(data.value?.urls || {})
+            .filter(([, value]) => typeof value === 'string')
+            .map(([key, url]) => getSocialLinks(key, url as string))
+            .sort((a, b) => {
+                const ai = SOCIAL_NETWORKS.findIndex(({ name }) => name === a.name)
+                const bi = SOCIAL_NETWORKS.findIndex(({ name }) => name === b.name)
+                return (ai === -1 ? SOCIAL_NETWORKS.length : ai) - (bi === -1 ? SOCIAL_NETWORKS.length : bi)
+            }))
 }

stories/app/components/VSocialLinks/Default.stories.vue

@@ -1,30 +1,33 @@
 <script setup lang="ts">
-const list = [
-    {
-        name: 'Twitter',
-        url: 'https://twitter.com/roadiz_io',
-    },
-    {
-        name: 'Facebook',
-        url: 'https://www.facebook.com/roadiz.io/',
-    },
-    {
-        name: 'LinkedIn',
-        url: 'https://www.linkedin.com/company/roadiz/',
-    },
+// Keys as they come from the API — snake_case or camelCase are both supported
+const known = [
+    getSocialLinks('instagram_url', 'https://instagram.com/roadiz'),
+    getSocialLinks('facebookUrl', 'https://facebook.com/roadiz'),
+    getSocialLinks('linkedin_url', 'https://linkedin.com/company/roadiz'),
+    getSocialLinks('youtubeUrl', 'https://youtube.com/@roadiz'),
+    getSocialLinks('twitter_url', 'https://twitter.com/roadiz_io'),
 ]
 
-const socials = list.map(social => getSocialLinks(social.name, social.url))
+// An unrecognized key falls back to a generic 'link' icon
+const withUnknown = [
+    getSocialLinks('instagram_url', 'https://instagram.com/roadiz'),
+    getSocialLinks('discord_url', 'https://discord.gg/roadiz'),
+    getSocialLinks('linkedin_url', 'https://linkedin.com/company/roadiz'),
+]
 </script>
 
 <template>
     <NuxtStory>
         <NuxtStoryVariant title="Default">
-            <VSocialLinks :socials="socials" />
+            <VSocialLinks :socials="known" />
+        </NuxtStoryVariant>
+
+        <NuxtStoryVariant title="With unknown network">
+            <VSocialLinks :socials="withUnknown" />
         </NuxtStoryVariant>
 
-        <NuxtStoryVariant title="Slot">
-            <VSocialLinks :socials="socials">
+        <NuxtStoryVariant title="Custom slot">
+            <VSocialLinks :socials="known">
                 <template #default="{ social }">
                     <NuxtLink
                         :to="social.url"