Merge branch 'main' into feature/v-download

Author: Timothe Joubert

.env.sample

@@ -32,4 +32,4 @@ XILOFONE_OUTPUT=i18n/locales/
 # NUXT_PUBLIC_SENTRY_DSN=
 
 ## ---- Dev
-NUXT_DEVTOOLS=true
+NUXT_DEVTOOLS=true

CLAUDE.md

@@ -0,0 +1,13 @@
+# CLAUDE.md
+
+## Translations (i18n)
+
+Translation keys are managed via **Xilofone**, an external translation management service.
+
+The `i18n/locales/nuxt.*.json` files are automatically generated by the following command:
+
+```bash
+pnpm xilo
+```
+
+If a translation key needs to be added or updated, make the change directly in the `nuxt.*.json` file **and explicitly instruct the developer to report the same change in the Xilofone interface**, otherwise it will be overwritten the next time they run `pnpm xilo`.

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)
+            }))
 }

i18n/locales/nuxt.en.json

@@ -32,7 +32,12 @@
     "form.error": "An error occurred",
     "form.error_too_many_requests": "Too many requests, please try again later",
     "form.gdpr": "By submitting this form, you agree to our privacy policy.",
+    "form.newsletter_description": "Subscribe to our newsletter to receive our latest news.",
+    "form.newsletter_gdpr": "By subscribing, you agree to receive our communications and our privacy policy.",
+    "form.newsletter_submit": "Subscribe",
+    "form.newsletter_success": "Thank you, your subscription has been confirmed.",
     "form.pending": "Sending",
+    "form.required_fields_notice": "Fields marked with an asterisk (*) are required",
     "form.submit": "Submit",
     "form.success": "Thanks, your message has been sent",
     "form.user_cookie_consent.button_label": "Allow",

i18n/locales/nuxt.fr.json

@@ -32,7 +32,12 @@
 	"form.error": "Une erreur est survenue",
 	"form.error_too_many_requests": "Trop de requêtes, veuillez réessayer plus tard",
 	"form.gdpr": "En soumettant ce formulaire, vous acceptez notre politique de confidentialité.",
+	"form.newsletter_description": "Inscrivez-vous à notre newsletter pour recevoir nos dernières actualités.",
+	"form.newsletter_gdpr": "En vous inscrivant, vous acceptez de recevoir nos communications et notre politique de confidentialité.",
+	"form.newsletter_submit": "S'inscrire",
+	"form.newsletter_success": "Merci, votre inscription a bien été prise en compte.",
 	"form.pending": "Envoi en cours",
+	"form.required_fields_notice": "Les champs marqués d'un astérisque (*) sont obligatoires",
 	"form.submit": "Envoyer",
 	"form.success": "Merci, votre message a bien été envoyé",
 	"form.user_cookie_consent.button_label": "Autoriser",

package.json

@@ -1,77 +1,76 @@
 {
-  "name": "@rezozero/nuxt-starter",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "dev": "nuxi dev",
-    "stories": "nuxi dev stories",
-    "build": "nuxi build",
-    "generate": "nuxi generate",
-    "preview": "nuxi preview",
-    "prepare": "nuxi prepare",
-    "postinstall": "nuxi prepare && husky install",
-    "generate:maintenance": "nuxt generate --maintenance",
-    "lint": "pnpm lint:js && pnpm lint:css",
-    "lint-fix": "pnpm lint:js --fix && pnpm lint:css --fix",
-    "lint:js": "eslint .",
-    "lint:css": "stylelint \"**/*.{vue,css,scss}\"",
-    "xilo": "node ./node_modules/@rezo-zero/xilofone-fetch/dist/index.js"
-  },
-  "devDependencies": {
-    "@nuxt/devtools": "latest",
-    "@nuxt/eslint": "^1.16.0",
-    "@nuxt/icon": "^2.2.3",
-    "@nuxt/image": "^2.0.0",
-    "@nuxtjs/i18n": "^10.4.0",
-    "@nuxtjs/robots": "^6.0.9",
-    "@nuxtjs/sitemap": "^8.1.0",
-    "@rezo-zero/intervention-request-provider": "^2.0.0",
-    "@rezo-zero/nuxt-cache-control": "^0.1.7",
-    "@rezo-zero/xilofone-fetch": "^1.0.0",
-    "@roadiz/types": "^0.5.0",
-    "@stylistic/eslint-plugin": "^5.10.0",
-    "@types/body-scroll-lock": "^3.1.2",
-    "@types/json-schema": "^7.0.15",
-    "@types/lodash": "^4.17.24",
-    "@types/node": "^24.13.2",
-    "@vueuse/nuxt": "^14.3.0",
-    "eslint": "^10.4.1",
-    "husky": "^9.1.7",
-    "include-media": "^2.0.0",
-    "nuxt": "^4.4.8",
-    "postcss-html": "^1.8.1",
-    "postcss-pxtorem": "^6.1.0",
-    "sass": "^1.100.0",
-    "stylelint": "^17.13.0",
-    "stylelint-config-css-modules": "^4.6.0",
-    "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-standard-scss": "^17.0.0",
-    "stylelint-config-standard-vue": "^1.0.0",
-    "typescript": "~6.0.3",
-    "vite-svg-loader": "^5.1.1"
-  },
-  "dependencies": {
-    "@floating-ui/vue": "^2.0.0",
-    "@gtm-support/vue-gtm": "^3.2.0",
-    "@popperjs/core": "^2.11.8",
-    "@sentry/nuxt": "^10.57.0",
-    "@vue-a11y/skip-to": "^3.0.3",
-    "@vueuse/core": "^14.3.0",
-    "body-scroll-lock": "^3.1.5",
-    "floating-vue": "^5.2.2",
-    "lodash": "^4.18.1",
-    "marked": "^18.0.5",
-    "nuxt-schema-org": "^6.2.0",
-    "ohash": "^2.0.11",
-    "plyr": "^3.8.4",
-    "swiper": "^12.2.0",
-    "tiny-emitter": "^2.1.0",
-    "ufo": "^1.6.4",
-    "v-calendar": "^3.1.2",
-    "vue-multiselect": "^3.5.0"
-  },
-  "engines": {
-    "node": "24.14.1"
-  },
-  "packageManager": "pnpm@11.5.1"
+    "name": "@rezozero/nuxt-starter",
+    "version": "0.1.0",
+    "private": true,
+    "scripts": {
+        "dev": "nuxi dev",
+        "stories": "nuxi dev stories",
+        "build": "nuxi build",
+        "generate": "nuxi generate",
+        "preview": "nuxi preview",
+        "prepare": "nuxi prepare",
+        "postinstall": "nuxi prepare && husky",
+        "generate:maintenance": "nuxt generate --maintenance",
+        "lint": "pnpm lint:js && pnpm lint:css",
+        "lint-fix": "pnpm lint:js --fix && pnpm lint:css --fix",
+        "lint:js": "eslint .",
+        "lint:css": "stylelint \"**/*.{vue,css,scss}\"",
+        "xilo": "node ./node_modules/@rezo-zero/xilofone-fetch/dist/index.js"
+    },
+    "devDependencies": {
+        "@nuxt/eslint": "^1.16.0",
+        "@nuxt/icon": "^2.2.3",
+        "@nuxt/image": "^2.0.0",
+        "@nuxtjs/i18n": "10.2.4",
+        "@nuxtjs/robots": "^6.1.1",
+        "@nuxtjs/sitemap": "^8.2.1",
+        "@rezo-zero/intervention-request-provider": "^2.0.0",
+        "@rezo-zero/nuxt-cache-control": "^0.1.11",
+        "@rezo-zero/xilofone-fetch": "^1.0.0",
+        "@roadiz/types": "^0.5.0",
+        "@stylistic/eslint-plugin": "^5.10.0",
+        "@types/body-scroll-lock": "^3.1.2",
+        "@types/json-schema": "^7.0.15",
+        "@types/lodash": "^4.17.24",
+        "@types/node": "^24.13.2",
+        "eslint": "^10.5.0",
+        "husky": "^9.1.7",
+        "include-media": "^2.0.0",
+        "nuxt": "^4.4.8",
+        "postcss-html": "^1.8.1",
+        "postcss-pxtorem": "^6.1.0",
+        "sass": "^1.101.0",
+        "stylelint": "^17.13.0",
+        "stylelint-config-css-modules": "^4.6.0",
+        "stylelint-config-idiomatic-order": "^10.0.0",
+        "stylelint-config-standard-scss": "^17.0.0",
+        "stylelint-config-standard-vue": "^1.0.0",
+        "typescript": "~6.0.3",
+        "vite-svg-loader": "^5.1.1"
+    },
+    "dependencies": {
+        "@floating-ui/vue": "^2.0.0",
+        "@gtm-support/vue-gtm": "^3.2.0",
+        "@popperjs/core": "^2.11.8",
+        "@sentry/nuxt": "^10.58.0",
+        "@vue-a11y/skip-to": "^3.0.3",
+        "@vueuse/core": "^14.3.0",
+        "@vueuse/nuxt": "^14.3.0",
+        "body-scroll-lock": "^3.1.5",
+        "floating-vue": "^5.2.2",
+        "lodash": "^4.18.1",
+        "marked": "^18.0.5",
+        "nuxt-schema-org": "^6.2.1",
+        "ohash": "^2.0.11",
+        "plyr": "^3.8.4",
+        "swiper": "^12.2.0",
+        "tiny-emitter": "^2.1.0",
+        "ufo": "^1.6.4",
+        "v-calendar": "^3.1.2",
+        "vue-multiselect": "^3.5.0"
+    },
+    "engines": {
+        "node": "24.14.1"
+    },
+    "packageManager": "pnpm@11.5.1"
 }