feat: render thumbnails based current language

Author: LeadcodeDev

apps/blog/src/components/HeroSection.astro

@@ -1,6 +1,6 @@
 ---
 import type { Post } from '../lib/posts'
-import { formatDate, getPostSlug, getReadingTime } from '../lib/posts'
+import { formatDate, getPostHref, getReadingTime } from '../lib/posts'
 import { useTranslations } from '../i18n/utils'
 
 interface Props {
@@ -17,7 +17,7 @@ const [first, second, third] = posts
   <section class="mb-12">
     {posts.length === 1 ? (
       <article class="group rounded-xl border bg-card overflow-hidden">
-        <a href={`/${getPostSlug(first)}`} class="block">
+        <a href={{getPostHref(first)}} class="block">
           {first.data.cover && (
             <div class="overflow-hidden">
               <img
@@ -49,7 +49,7 @@ const [first, second, third] = posts
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         {[first, second].map((post) => (
           <article class="group rounded-xl border bg-card overflow-hidden">
-            <a href={`/${getPostSlug(post)}`} class="block">
+            <a href={{getPostHref(post)}} class="block">
               {post.data.cover && (
                 <div class="overflow-hidden">
                   <img
@@ -82,7 +82,7 @@ const [first, second, third] = posts
     ) : (
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
         <article class="group rounded-xl border bg-card overflow-hidden lg:row-span-2">
-          <a href={`/${getPostSlug(first)}`} class="block h-full">
+          <a href={{getPostHref(first)}} class="block h-full">
             {first.data.cover && (
               <div class="overflow-hidden">
                 <img
@@ -112,7 +112,7 @@ const [first, second, third] = posts
         </article>
         {[second, third].filter(Boolean).map((post) => (
           <article class="group rounded-xl border bg-card overflow-hidden">
-            <a href={`/${getPostSlug(post)}`} class="block p-6">
+            <a href={{getPostHref(post)}} class="block p-6">
               {post.data.tags.length > 0 && (
                 <div class="flex flex-wrap gap-2 mb-3">
                   {post.data.tags.map((tag) => (

apps/blog/src/pages/[locale]/[slug].astro

@@ -32,7 +32,7 @@ const localeSwitchUrls = buildLocaleSwitchUrls(allPosts, post, locales)
   date={post.data.date}
   tags={post.data.tags}
   cover={post.data.cover}
-  thumbnail={`/${getPostSlug(post)}/thumbnail.png`}
+  thumbnail={`${getPostHref(post)}/thumbnail.png`}
   readingTime={readingTime}
   headings={headings}
   url={articleUrl}

apps/blog/src/pages/[locale]/index.astro

@@ -48,7 +48,7 @@ const t = useTranslations(locale)
             description={post.data.description}
             date={post.data.date}
             tags={post.data.tags}
-            cover={post.data.cover ?? `/${getPostSlug(post)}/thumbnail.png`}
+            cover={post.data.cover ?? `${getPostHref(post)}/thumbnail.png`}
             href={getPostHref(post)}
             locale={locale}
             readingTime={getReadingTime(post.body ?? '')}

apps/website/astro.config.ts

@@ -16,6 +16,11 @@ export default defineConfig({
             title: 'Explainer v2',
             description: 'Documentation boilerplate for developers.',
           },
+          {
+            path: '/thumbnails/fr',
+            title: 'Explainer v2',
+            description: 'Boilerplate de documentation pour les développeurs.',
+          },
         ],
       },
     }),

apps/website/src/pages/index.astro

@@ -14,6 +14,7 @@ const appUrlOverrides = {
 }
 
 const translations = ui.fr
+const thumbnails = { en: '/thumbnail.png', fr: '/thumbnails/fr/thumbnail.png' }
 ---
 
 <Base title="Explainer" description="Documentation boilerplate for developers." thumbnail="/thumbnail.png">
@@ -32,30 +33,38 @@ const translations = ui.fr
   </footer>
 </Base>
 
-<script is:inline define:vars={{ translations }}>
+<script is:inline define:vars={{ translations, thumbnails }}>
   function detectLocale() {
-    var match = document.cookie.match(/(?:^|; )locale=([^;]*)/)
-    var cookie = match ? match[1] : null
+    const match = document.cookie.match(/(?:^|; )locale=([^;]*)/)
+    const cookie = match ? match[1] : null
     if (cookie === 'en' || cookie === 'fr') return cookie
-    var browser = (navigator.language || '').split('-')[0]
+
+    const browser = (navigator.language || '').split('-')[0]
     if (browser === 'en' || browser === 'fr') return browser
     return 'en'
   }
 
   function applyTranslations() {
-    var locale = detectLocale()
+    const locale = detectLocale()
     document.documentElement.lang = locale
+
     if (locale === 'en') {
       document.querySelectorAll('[data-t]').forEach(function (el) {
         if (el.dataset.tDefault) el.textContent = el.dataset.tDefault
       })
       return
     }
+
     document.querySelectorAll('[data-t]').forEach(function (el) {
-      var key = el.getAttribute('data-t')
+      const key = el.getAttribute('data-t')
       if (!el.dataset.tDefault) el.dataset.tDefault = el.textContent
       if (translations[key]) el.textContent = translations[key]
     })
+
+    const thumb = thumbnails[locale] || thumbnails['en']
+    document.querySelectorAll('meta[property="og:image"], meta[name="twitter:image"]').forEach(function (el) {
+      el.setAttribute('content', thumb)
+    })
   }
 
   applyTranslations()