feat: implement blog i18n

Author: LeadcodeDev

apps/blog/astro.config.ts

@@ -10,6 +10,13 @@ import { thumbnailIntegration } from '@explainer/thumbnail/integration'
 
 export default defineConfig({
   site: 'https://blog.example.com',
+  i18n: {
+    locales: ['en', 'fr'],
+    defaultLocale: 'en',
+    routing: {
+      prefixDefaultLocale: true,
+    },
+  },
   integrations: [
     react(),
     mdx({

apps/blog/src/components/HeroSection.astro

@@ -1,12 +1,15 @@
 ---
 import type { Post } from '../lib/posts'
 import { formatDate, getPostSlug, getReadingTime } from '../lib/posts'
+import { useTranslations } from '../i18n/utils'
 
 interface Props {
   posts: Post[]
+  locale?: string
 }
 
-const { posts } = Astro.props
+const { posts, locale = 'en' } = Astro.props
+const t = useTranslations(locale)
 const [first, second, third] = posts
 ---
 
@@ -35,9 +38,9 @@ const [first, second, third] = posts
             <h2 class="text-2xl font-bold group-hover:text-primary transition-colors">{first.data.title}</h2>
             <p class="text-muted-foreground mt-2">{first.data.description}</p>
             <div class="flex items-center gap-1.5 text-xs text-muted-foreground mt-3">
-              <time datetime={first.data.date.toISOString()}>{formatDate(first.data.date)}</time>
+              <time datetime={first.data.date.toISOString()}>{formatDate(first.data.date, locale)}</time>
               <span>·</span>
-              <span>{getReadingTime(first.body ?? '')} min read</span>
+              <span>{getReadingTime(first.body ?? '')} {t('hero.minRead')}</span>
             </div>
           </div>
         </a>
@@ -67,9 +70,9 @@ const [first, second, third] = posts
                 <h2 class="text-2xl font-bold group-hover:text-primary transition-colors">{post.data.title}</h2>
                 <p class="text-muted-foreground mt-2">{post.data.description}</p>
                 <div class="flex items-center gap-1.5 text-xs text-muted-foreground mt-3">
-                  <time datetime={post.data.date.toISOString()}>{formatDate(post.data.date)}</time>
+                  <time datetime={post.data.date.toISOString()}>{formatDate(post.data.date, locale)}</time>
                   <span>·</span>
-                  <span>{getReadingTime(post.body ?? '')} min read</span>
+                  <span>{getReadingTime(post.body ?? '')} {t('hero.minRead')}</span>
                 </div>
               </div>
             </a>
@@ -100,9 +103,9 @@ const [first, second, third] = posts
               <h2 class="text-2xl font-bold group-hover:text-primary transition-colors">{first.data.title}</h2>
               <p class="text-muted-foreground mt-2">{first.data.description}</p>
               <div class="flex items-center gap-1.5 text-xs text-muted-foreground mt-3">
-                <time datetime={first.data.date.toISOString()}>{formatDate(first.data.date)}</time>
+                <time datetime={first.data.date.toISOString()}>{formatDate(first.data.date, locale)}</time>
                 <span>·</span>
-                <span>{getReadingTime(first.body ?? '')} min read</span>
+                <span>{getReadingTime(first.body ?? '')} {t('hero.minRead')}</span>
               </div>
             </div>
           </a>
@@ -120,9 +123,9 @@ const [first, second, third] = posts
               <h2 class="text-xl font-bold group-hover:text-primary transition-colors">{post.data.title}</h2>
               <p class="text-muted-foreground text-sm mt-2">{post.data.description}</p>
               <div class="flex items-center gap-1.5 text-xs text-muted-foreground mt-3">
-                <time datetime={post.data.date.toISOString()}>{formatDate(post.data.date)}</time>
+                <time datetime={post.data.date.toISOString()}>{formatDate(post.data.date, locale)}</time>
                 <span>·</span>
-                <span>{getReadingTime(post.body ?? '')} min read</span>
+                <span>{getReadingTime(post.body ?? '')} {t('hero.minRead')}</span>
               </div>
             </a>
           </article>

apps/blog/src/components/ShareButtons.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react'
 import { cn } from '@explainer/ui'
+import { useTranslations } from '../i18n/utils'
 
 interface ShareButtonsProps {
   url: string
   title: string
   horizontal?: boolean
+  locale?: string
 }
 
 function LinkedInIcon() {
@@ -48,7 +50,8 @@ function CheckIcon() {
   )
 }
 
-export function ShareButtons({ url, title, horizontal }: ShareButtonsProps) {
+export function ShareButtons({ url, title, horizontal, locale = 'en' }: ShareButtonsProps) {
+  const t = useTranslations(locale)
   const [copied, setCopied] = React.useState(false)
 
   const handleCopy = async () => {
@@ -68,16 +71,16 @@ export function ShareButtons({ url, title, horizontal }: ShareButtonsProps) {
 
   const buttons = (
     <>
-      <a href={linkedinUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on LinkedIn">
+      <a href={linkedinUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label={t('share.linkedin')}>
         <LinkedInIcon />
       </a>
-      <a href={twitterUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on Twitter">
+      <a href={twitterUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label={t('share.twitter')}>
         <TwitterIcon />
       </a>
-      <a href={facebookUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label="Share on Facebook">
+      <a href={facebookUrl} target="_blank" rel="noopener noreferrer" className={buttonClass} aria-label={t('share.facebook')}>
         <FacebookIcon />
       </a>
-      <button onClick={handleCopy} className={buttonClass} aria-label="Copy link">
+      <button onClick={handleCopy} className={buttonClass} aria-label={t('share.copyLink')}>
         {copied ? <CheckIcon /> : <LinkIcon />}
       </button>
     </>

apps/blog/src/components/TableOfContents.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import { cn } from '@explainer/ui'
+import { useTranslations } from '../i18n/utils'
 
 export interface TocHeading {
   depth: number
@@ -9,9 +10,11 @@ export interface TocHeading {
 
 interface TableOfContentsProps {
   headings: TocHeading[]
+  locale?: string
 }
 
-export function TableOfContents({ headings }: TableOfContentsProps) {
+export function TableOfContents({ headings, locale = 'en' }: TableOfContentsProps) {
+  const t = useTranslations(locale)
   const filtered = headings.filter((h) => h.depth >= 2 && h.depth <= 3)
   const [activeId, setActiveId] = React.useState<string>('')
 
@@ -42,7 +45,7 @@ export function TableOfContents({ headings }: TableOfContentsProps) {
 
   return (
     <nav className="sticky top-24 h-fit">
-      <p className="text-sm font-medium mb-3">On this page</p>
+      <p className="text-sm font-medium mb-3">{t('toc.title')}</p>
       <ul className="border-l border-border space-y-0.5">
         {filtered.map((heading) => (
           <li key={heading.slug}>

apps/blog/src/components/TagFilter.tsx

@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
+import { useTranslations } from '../i18n/utils';
 
 interface TagFilterProps {
   tags: { name: string; count: number }[]
   initialTags?: string[]
+  locale?: string
 }
 
 function TagIcon({ className }: { className?: string }) {
@@ -39,7 +41,8 @@ function writeURL(selectedTags: string[], query: string) {
   window.history.replaceState(null, '', url)
 }
 
-export function TagFilter({ tags, initialTags = [] }: TagFilterProps) {
+export function TagFilter({ tags, initialTags = [], locale = 'en' }: TagFilterProps) {
+  const t = useTranslations(locale)
   const [selectedTags, setSelectedTags] = useState<string[]>(initialTags)
   const [query, setQuery] = useState<string>('')
 
@@ -84,7 +87,7 @@ export function TagFilter({ tags, initialTags = [] }: TagFilterProps) {
           type="text"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
-          placeholder="Rechercher un article..."
+          placeholder={t('tagFilter.placeholder')}
           className="w-full rounded-md border border-border bg-transparent pl-10 pr-4 py-2 max-w-sm text-sm text-foreground placeholder:text-muted-foreground outline-none transition-colors focus:border-primary/50"
         />
       </div>

apps/blog/src/components/blog-navbar.tsx

@@ -1,5 +1,6 @@
-import { Navbar, MobileMenu, MobileNavLinks, LocaleSwitcher, getAppLinks } from '@explainer/ui'
 import type { NavbarLink } from '@explainer/ui'
+import { LocaleSwitcher, MobileMenu, MobileNavLinks, Navbar, getAppLinks } from '@explainer/ui'
+import { useTranslations } from '../i18n/utils'
 
 interface BlogNavbarProps {
   activePath: string
@@ -11,11 +12,11 @@ interface BlogNavbarProps {
 
 export function BlogNavbar({ activePath, appUrlOverrides, locale, locales, localeSwitchUrls }: BlogNavbarProps) {
   const appLinks = getAppLinks('blog', appUrlOverrides)
+  const t = useTranslations(locale)
 
   const blogLinks: NavbarLink[] = [
-    { label: 'Tous les articles', href: `/${locale}`, icon: 'lucide:newspaper' },
-    { label: 'Catégories', href: '/tags', icon: 'lucide:folder' },
-    { label: 'RSS', href: `/${locale}/rss.xml`, icon: 'lucide:rss' },
+    { label: t('nav.allArticles'), href: `/${locale}`, icon: 'lucide:newspaper' },
+    { label: t('nav.rss'), href: `/${locale}/rss.xml`, icon: 'lucide:rss' },
   ]
 
   return (

apps/blog/src/i18n/ui.ts

@@ -0,0 +1,82 @@
+export const defaultLang = 'en' as const
+
+export const ui = {
+  en: {
+    // Index page
+    'index.title': 'Articles',
+    'index.heading.prefix': 'Latest',
+    'index.heading.highlight': 'articles',
+    'index.empty': 'No articles yet.',
+
+    // RSS
+    'rss.title': 'Explainer Blog',
+    'rss.description': 'Latest articles from the Explainer blog',
+
+    // Footer
+    'footer.text': 'Built with Explainer v2',
+
+    // Post layout
+    'post.back': 'Back to writing',
+    'post.published': 'Published',
+
+    // Hero section
+    'hero.minRead': 'min read',
+
+    // Navbar
+    'nav.allArticles': 'All articles',
+    'nav.categories': 'Categories',
+    'nav.rss': 'RSS',
+
+    // Tag filter
+    'tagFilter.placeholder': 'Search articles...',
+
+    // Table of contents
+    'toc.title': 'On this page',
+
+    // Share buttons
+    'share.linkedin': 'Share on LinkedIn',
+    'share.twitter': 'Share on Twitter',
+    'share.facebook': 'Share on Facebook',
+    'share.copyLink': 'Copy link',
+  },
+  fr: {
+    // Index page
+    'index.title': 'Articles',
+    'index.heading.prefix': 'Derniers',
+    'index.heading.highlight': 'articles',
+    'index.empty': 'Aucun article pour le moment.',
+
+    // RSS
+    'rss.title': 'Blog Explainer',
+    'rss.description': 'Les derniers articles du blog Explainer',
+
+    // Footer
+    'footer.text': 'Construit avec Explainer v2',
+
+    // Post layout
+    'post.back': "Retour aux articles",
+    'post.published': 'Publié le',
+
+    // Hero section
+    'hero.minRead': 'min de lecture',
+
+    // Navbar
+    'nav.allArticles': 'Tous les articles',
+    'nav.categories': 'Catégories',
+    'nav.rss': 'RSS',
+
+    // Tag filter
+    'tagFilter.placeholder': 'Rechercher un article...',
+
+    // Table of contents
+    'toc.title': 'Sur cette page',
+
+    // Share buttons
+    'share.linkedin': 'Partager sur LinkedIn',
+    'share.twitter': 'Partager sur Twitter',
+    'share.facebook': 'Partager sur Facebook',
+    'share.copyLink': 'Copier le lien',
+  },
+} as const
+
+export type UiKey = keyof (typeof ui)['en']

apps/blog/src/i18n/utils.ts

@@ -0,0 +1,7 @@
+import { ui, defaultLang, type UiKey } from './ui'
+
+export function useTranslations(locale: string) {
+  return function t(key: UiKey): string {
+    return ui[locale as keyof typeof ui]?.[key] ?? ui[defaultLang][key]
+  }
+}

apps/blog/src/layouts/base.astro

@@ -2,6 +2,7 @@
 import '../styles/globals.css'
 import { ClientRouter } from 'astro:transitions'
 import { BlogNavbar } from '../components/blog-navbar'
+import { useTranslations } from '../i18n/utils'
 
 interface Props {
   title: string
@@ -13,6 +14,7 @@ interface Props {
 }
 
 const { title, description = 'Explainer Blog', thumbnail, locale = 'en', locales = ['en'], localeSwitchUrls = {} } = Astro.props
+const t = useTranslations(locale)
 const thumbnailUrl = thumbnail ?? `${Astro.url.pathname.replace(/\/$/, '')}/thumbnail.png`
 
 const appUrlOverrides = {
@@ -60,7 +62,7 @@ const appUrlOverrides = {
     </main>
     <footer class="border-t mt-16">
       <div class="mx-auto max-w-6xl px-6 py-8 text-sm text-muted-foreground">
-        Built with Explainer v2
+        {t('footer.text')}
       </div>
     </footer>
   </body>

apps/blog/src/layouts/post.astro

@@ -3,6 +3,7 @@ import Base from './base.astro'
 import { formatDate } from '../lib/posts'
 import { TableOfContents } from '../components/TableOfContents'
 import { ShareButtons } from '../components/ShareButtons'
+import { useTranslations } from '../i18n/utils'
 
 interface Heading {
   depth: number
@@ -26,19 +27,20 @@ interface Props {
 }
 
 const { title, description, date, tags, cover, thumbnail, readingTime, headings, url, locale = 'en', locales, localeSwitchUrls } = Astro.props
+const t = useTranslations(locale)
 ---
 
 <Base title={title} description={description} thumbnail={thumbnail} locale={locale} locales={locales} localeSwitchUrls={localeSwitchUrls}>
   <div class="mb-8">
     <a href={`/${locale}`} class="text-sm font-medium text-primary hover:underline transition-colors">
-      &larr; Back to writing
+      &larr; {t('post.back')}
     </a>
   </div>
 
   <div class="flex gap-8 relative">
     <!-- Left column: Share buttons (sticky) -->
     <aside class="hidden lg:block w-12 shrink-0">
-      <ShareButtons url={url} title={title} client:load />
+      <ShareButtons url={url} title={title} locale={locale} client:load />
     </aside>
 
     <!-- Center column: Article -->
@@ -47,7 +49,7 @@ const { title, description, date, tags, cover, thumbnail, readingTime, headings,
         <h1 class="text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-4">{title}</h1>
         <p class="text-lg text-muted-foreground mb-4">{description}</p>
         <p class="text-sm text-muted-foreground">
-          Published {formatDate(date, locale)}
+          {t('post.published')} {formatDate(date, locale)}
         </p>
       </header>
       {tags.length > 0 && (
@@ -74,13 +76,13 @@ const { title, description, date, tags, cover, thumbnail, readingTime, headings,
       </div>
       <!-- Share buttons mobile (bottom of article) -->
       <div class="lg:hidden mt-10">
-        <ShareButtons url={url} title={title} horizontal client:load />
+        <ShareButtons url={url} title={title} locale={locale} horizontal client:load />
       </div>
     </article>
 
     <!-- Right column: Table of Contents (sticky) -->
     <aside class="hidden xl:block w-56 shrink-0">
-      <TableOfContents headings={headings} client:load />
+      <TableOfContents headings={headings} locale={locale} client:load />
     </aside>
   </div>
 </Base>