Fix privacy policy links to use correct locale-aware URLs

Co-authored-by: neilime <314088+neilime@users.noreply.github.com>
Signed-off-by: Emilien Escalle <emilien.escalle@escemi.com>

Author: Copilot

application/src/components/common/LanguageSwitcher.astro

@@ -1,37 +1,29 @@
 ---
 import { languages } from '~/i18n/ui';
 import { getLangFromUrl } from '~/i18n/utils';
+import { translatePathToLang } from '~/i18n/routes';
 
 const lang = getLangFromUrl(Astro.url);
 const currentPath = Astro.url.pathname;
-
-// Get the path without the language prefix
-function getPathWithoutLang(path: string): string {
-  const parts = path.split('/').filter(Boolean);
-  if (parts.length > 0 && parts[0] in languages) {
-    return '/' + parts.slice(1).join('/');
-  }
-  return path;
-}
-
-const pathWithoutLang = getPathWithoutLang(currentPath);
 ---
 
 <div class="relative inline-block text-left">
   <div class="flex items-center space-x-2">
-    {Object.entries(languages).map(([langCode]) => (
-      <a
-        href={`/${langCode}${pathWithoutLang}`}
-        class:list={[
-          'px-3 py-2 text-sm font-medium rounded-md transition-colors',
-          lang === langCode
-            ? 'bg-primary text-white'
-            : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
-        ]}
-        aria-current={lang === langCode ? 'page' : undefined}
-      >
-        {langCode.toUpperCase()}
-      </a>
-    ))}
+    {
+      Object.entries(languages).map(([langCode]) => (
+        <a
+          href={translatePathToLang(currentPath, langCode as keyof typeof languages)}
+          class:list={[
+            'px-3 py-2 text-sm font-medium rounded-md transition-colors',
+            lang === langCode
+              ? 'bg-primary text-white'
+              : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800',
+          ]}
+          aria-current={lang === langCode ? 'page' : undefined}
+        >
+          {langCode.toUpperCase()}
+        </a>
+      ))
+    }
   </div>
 </div>

application/src/i18n/routes.ts

@@ -0,0 +1,48 @@
+import { languages } from './ui';
+
+export type AppLang = keyof typeof languages;
+
+export const routeSlugs = {
+    about: { en: 'about', fr: 'a-propos' },
+    contact: { en: 'contact', fr: 'contact' },
+    sponsoring: { en: 'sponsoring', fr: 'sponsoring' },
+    'brand-guidelines': { en: 'brand-guidelines', fr: 'charte-graphique' },
+    terms: { en: 'terms-of-service', fr: 'conditions-generales-utilisation' },
+    privacy: { en: 'privacy-policy', fr: 'politique-de-confidentialite' },
+} as const;
+
+export type RouteKey = keyof typeof routeSlugs;
+
+export const getLocalizedPagePath = (lang: AppLang, routeKey: RouteKey): string => {
+    return `/${lang}/${routeSlugs[routeKey][lang]}`;
+};
+
+export const getRouteKeyFromSlug = (lang: AppLang, slug: string): RouteKey | undefined => {
+    const normalizedSlug = slug.replace(/^\/+|\/+$/g, '');
+    const entries = Object.entries(routeSlugs) as [RouteKey, (typeof routeSlugs)[RouteKey]][];
+    const found = entries.find(([, localizedSlugs]) => localizedSlugs[lang] === normalizedSlug);
+    return found?.[0];
+};
+
+export const translatePathToLang = (path: string, targetLang: AppLang): string => {
+    const parts = path.split('/').filter(Boolean);
+
+    if (parts.length === 0) return `/${targetLang}`;
+
+    const sourceLang = parts[0] as AppLang;
+    if (!(sourceLang in languages)) {
+        return `/${targetLang}`;
+    }
+
+    if (parts.length === 1) return `/${targetLang}`;
+
+    const sourceSlug = parts[1];
+    const routeKey = getRouteKeyFromSlug(sourceLang, sourceSlug);
+    if (!routeKey) {
+        return `/${targetLang}/${parts.slice(1).join('/')}`;
+    }
+
+    const translatedSlug = routeSlugs[routeKey][targetLang];
+    const rest = parts.slice(2);
+    return `/${targetLang}/${[translatedSlug, ...rest].join('/')}`;
+};

application/src/navigation.ts

@@ -1,55 +1,56 @@
 import { getPermalink } from './utils/permalinks';
 import { useTranslations } from './i18n/utils';
+import { getLocalizedPagePath } from './i18n/routes';
 import type { ui } from './i18n/ui';
 import favIcon from '~/assets/favicons/favicon.svg';
 
 // Function to get locale-aware navigation
 export const getHeaderData = (locale: keyof typeof ui) => {
   const t = useTranslations(locale);
-  
+
   return {
     links: [
       {
         text: t('nav.sponsoring'),
-        href: getPermalink(`/${locale}/sponsoring`),
+        href: getPermalink(getLocalizedPagePath(locale, 'sponsoring')),
       },
       {
         text: t('nav.about'),
-        href: getPermalink(`/${locale}/about`),
+        href: getPermalink(getLocalizedPagePath(locale, 'about')),
       },
       {
         text: t('nav.contact'),
-        href: getPermalink(`/${locale}/contact`),
+        href: getPermalink(getLocalizedPagePath(locale, 'contact')),
       },
     ],
   };
 };
 
 export const getFooterData = (locale: keyof typeof ui) => {
   const t = useTranslations(locale);
-  
+
   return {
     links: [
       {
         title: t('footer.event'),
         links: [
-          { text: t('footer.sponsoring'), href: getPermalink(`/${locale}/sponsoring`) },
+          { text: t('footer.sponsoring'), href: getPermalink(getLocalizedPagePath(locale, 'sponsoring')) },
           { text: t('footer.program'), href: '#' },
           { text: t('footer.practicalInfo'), href: '#' },
         ],
       },
       {
         title: t('footer.organization'),
         links: [
-          { text: t('footer.about'), href: getPermalink(`/${locale}/about`) },
-          { text: t('footer.brandGuidelines'), href: getPermalink(`/${locale}/brand-guidelines`) },
-          { text: t('footer.contact'), href: getPermalink(`/${locale}/contact`) },
+          { text: t('footer.about'), href: getPermalink(getLocalizedPagePath(locale, 'about')) },
+          { text: t('footer.brandGuidelines'), href: getPermalink(getLocalizedPagePath(locale, 'brand-guidelines')) },
+          { text: t('footer.contact'), href: getPermalink(getLocalizedPagePath(locale, 'contact')) },
         ],
       },
     ],
     secondaryLinks: [
-      { text: t('footer.terms'), href: getPermalink(`/${locale}/terms`) },
-      { text: t('footer.privacy'), href: getPermalink(`/${locale}/privacy`) },
+      { text: t('footer.terms'), href: getPermalink(getLocalizedPagePath(locale, 'terms')) },
+      { text: t('footer.privacy'), href: getPermalink(getLocalizedPagePath(locale, 'privacy')) },
     ],
     socialLinks: [],
     footNote: `

application/src/pages/[lang]/[page].astro

@@ -0,0 +1,140 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+import { languages } from '~/i18n/ui';
+import { getRouteKeyFromSlug, routeSlugs, type AppLang, type RouteKey } from '~/i18n/routes';
+
+import aboutEn from '~/pages/about/en';
+import aboutFr from '~/pages/about/fr';
+import AboutContent from '~/pages/about/_content.astro';
+
+import contactEn from '~/pages/contact/en';
+import contactFr from '~/pages/contact/fr';
+import ContactContent from '~/pages/contact/_content.astro';
+
+import sponsoringEn from '~/pages/sponsoring/en';
+import sponsoringFr from '~/pages/sponsoring/fr';
+import SponsoringContent from '~/pages/sponsoring/_content.astro';
+
+import { enContent as brandEnContent } from '~/pages/brand-guidelines/en';
+import { frContent as brandFrContent } from '~/pages/brand-guidelines/fr';
+import BrandGuidelinesContent from '~/pages/brand-guidelines/_content.astro';
+
+import termsEn from '~/pages/terms/en';
+import termsFr from '~/pages/terms/fr';
+import TermsContent from '~/pages/terms/_content.astro';
+
+import privacyEn from '~/pages/privacy/en';
+import privacyFr from '~/pages/privacy/fr';
+import PrivacyContent from '~/pages/privacy/_content.astro';
+
+export function getStaticPaths() {
+  const langs = Object.keys(languages) as AppLang[];
+  const routeKeys = Object.keys(routeSlugs) as RouteKey[];
+
+  return langs.flatMap((lang) =>
+    routeKeys.map((routeKey) => ({
+      params: { lang, page: routeSlugs[routeKey][lang] },
+    }))
+  );
+}
+
+const lang = Astro.params.lang as AppLang;
+const page = Astro.params.page ?? '';
+
+const routeKey = getRouteKeyFromSlug(lang, page);
+
+if (!routeKey) {
+  throw new Error(`Unknown localized route: /${lang}/${page}`);
+}
+
+const aboutData = lang === 'en' ? aboutEn : aboutFr;
+const contactData = lang === 'en' ? contactEn : contactFr;
+const sponsoringData = lang === 'en' ? sponsoringEn : sponsoringFr;
+const brandData = lang === 'en' ? brandEnContent : brandFrContent;
+const termsData = lang === 'en' ? termsEn : termsFr;
+const privacyData = lang === 'en' ? privacyEn : privacyFr;
+---
+
+{
+  routeKey === 'about' && (
+    <Layout metadata={aboutData.metadata}>
+      <AboutContent
+        hero={aboutData.hero}
+        team={aboutData.team}
+        objectives={aboutData.objectives}
+        values={aboutData.values}
+        location={aboutData.location}
+        contact={aboutData.contact}
+      />
+    </Layout>
+  )
+}
+
+{
+  routeKey === 'contact' && (
+    <Layout metadata={contactData.metadata}>
+      <ContactContent
+        tagline={contactData.tagline}
+        title={contactData.title}
+        featuresTitle={contactData.featuresTitle}
+        items={contactData.items}
+      />
+    </Layout>
+  )
+}
+
+{
+  routeKey === 'sponsoring' && (
+    <Layout metadata={sponsoringData.metadata}>
+      <SponsoringContent
+        hero={sponsoringData.hero}
+        pricing={sponsoringData.pricing}
+        features={sponsoringData.features}
+        faqs={sponsoringData.faqs}
+        materials={sponsoringData.materials}
+        contact={sponsoringData.contact}
+        callToAction={sponsoringData.callToAction}
+      />
+    </Layout>
+  )
+}
+
+{
+  routeKey === 'brand-guidelines' && (
+    <BrandGuidelinesContent
+      metadata={brandData.metadata}
+      hero={brandData.hero}
+      colorPalette={brandData.colorPalette}
+      typography={brandData.typography}
+      logoDownloads={brandData.logoDownloads}
+      usageGuidelines={brandData.usageGuidelines}
+      note={brandData.note}
+    />
+  )
+}
+
+{
+  routeKey === 'terms' && (
+    <Layout metadata={termsData.metadata}>
+      <TermsContent
+        lastUpdatedLabel={termsData.lastUpdatedLabel}
+        lastUpdated={termsData.lastUpdated}
+        intro={termsData.intro}
+        sections={termsData.sections}
+      />
+    </Layout>
+  )
+}
+
+{
+  routeKey === 'privacy' && (
+    <Layout metadata={privacyData.metadata}>
+      <PrivacyContent
+        lastUpdatedLabel={privacyData.lastUpdatedLabel}
+        lastUpdated={privacyData.lastUpdated}
+        intro={privacyData.intro}
+        sections={privacyData.sections}
+      />
+    </Layout>
+  )
+}

application/src/pages/[lang]/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from '~/layouts/PageLayout.astro';
+import { languages } from '~/i18n/ui';
+import type { AppLang } from '~/i18n/routes';
+import homeEn from '~/pages/home/en';
+import homeFr from '~/pages/home/fr';
+import Content from '~/pages/home/_content.astro';
+
+export function getStaticPaths() {
+  return (Object.keys(languages) as AppLang[]).map((lang) => ({
+    params: { lang },
+  }));
+}
+
+const lang = Astro.params.lang as AppLang;
+const t = lang === 'en' ? homeEn : homeFr;
+---
+
+<Layout metadata={t.metadata}>
+  <Content
+    hero={t.hero}
+    note={t.note}
+    features={t.features}
+    contentSection={t.content}
+    steps={t.steps}
+    stats={t.stats}
+    callToAction={t.callToAction}
+  />
+</Layout>