studio-variable/world-game
3
0
Fork 0
Code Issues 9 Pull requests Projects Releases Packages Wiki Activity Actions

Feat: intégration multilingue FR/EN (i18n)
All checks were successful
Deploy / Deploy to Production (push) Successful in 18s
Details

Browse source 
- Ajout de src/i18n/index.js : dictionnaire centralisé + fonction t(key, vars)
- Ajout de LanguageSwitcher.svelte : toggle FR/EN avec persistance localStorage
- Router : normalizePath strip /en/, apiPrefix() pour les fetches, détection langue (URL > localStorage > navigator)
- Tous les composants (Header, Menu, Footer, Article, Blog, Play) migrent vers t() depuis @i18n
- Blog : navigation interne (fetch, history, getSlugFromUrl) locale-aware

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-03-12 11:57:59 +01:00
parent 3bd410cc02
commit 517143fe60
11 changed files with 162 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/views/Article.svelte
View file

@ -4,6 +4,7 @@
* Reçoit les données article via props, pas via le slide system.
*/
import Footer from '@components/layout/Footer.svelte'
import { t } from '@i18n'
let { data, onBack } = $props()
@ -25,27 +26,27 @@
<!-- Date + share buttons -->
<div class="article-topbar">
<time class="article-date">Publié le {data.published}</time>
<time class="article-date">{t('published_on')} {data.published}</time>
<div class="article-share">
{#if copySuccess}
<span class="copy-toast">Lien copié !</span>
<span class="copy-toast">{t('link_copied')}</span>
{/if}
<div class="share-buttons">
<!-- svelte-ignore a11y_invalid_attribute -->
<a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
<a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
</a>
<a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
<img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
</a>
<a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
<img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
<img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
<img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
</a>
</div>
</div>
@ -74,23 +75,23 @@
<!-- Share section (bas d'article) -->
<div class="article-share-section">
<hr class="share-divider" />
<p class="share-label">Partager cet article</p>
<p class="share-label">{t('share_article')}</p>
<div class="share-buttons">
<!-- svelte-ignore a11y_invalid_attribute -->
<a href="#" class="share-button" title="Copier le lien" onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt="Copier le lien" width="20" height="20" />
<a href="#" class="share-button" title={t('copy_link')} onclick={(e) => { e.preventDefault(); copyLink() }}>
<img src="/assets/icons/link-icon.svg" alt={t('copy_link')} width="20" height="20" />
</a>
<a href="https://api.whatsapp.com/send?text={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/whatsapp-icon.svg" alt="Partager sur WhatsApp" width="20" height="20" />
<img src="/assets/icons/whatsapp-icon.svg" alt={t('share_whatsapp')} width="20" height="20" />
</a>
<a href="https://twitter.com/intent/tweet?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/twitter-icon.svg" alt="Partager sur X" width="20" height="20" />
<img src="/assets/icons/twitter-icon.svg" alt={t('share_x')} width="20" height="20" />
</a>
<a href="https://www.facebook.com/sharer/sharer.php?u={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/facebook-icon.svg" alt="Partager sur Facebook" width="20" height="20" />
<img src="/assets/icons/facebook-icon.svg" alt={t('share_facebook')} width="20" height="20" />
</a>
<a href="https://www.linkedin.com/sharing/share-offsite/?url={shareUrl}" target="_blank" rel="noopener noreferrer" class="share-button">
<img src="/assets/icons/linkedin-icon.svg" alt="Partager sur LinkedIn" width="20" height="20" />
<img src="/assets/icons/linkedin-icon.svg" alt={t('share_linkedin')} width="20" height="20" />
</a>
</div>
</div>
@ -98,7 +99,7 @@
<!-- Articles recommandés -->
{#if data.related?.length}
<section class="article-related">
<h2>Nos recommandations</h2>
<h2>{t('related')}</h2>
<div class="article-related-grid">
{#each data.related as rec}
<a href="/blog/{rec.slug}" class="article-related-card">

23
src/views/Blog.svelte
View file

@ -1,8 +1,10 @@
<script>
import { onMount } from 'svelte'
import { slides } from '@state/slides.svelte'
import { locale } from '@state/locale.svelte'
import Footer from '@components/layout/Footer.svelte'
import Article from '@views/Article.svelte'
import { t } from '@i18n'
let { data } = $props()
@ -15,9 +17,9 @@
let articleLoading = $state(false)
let sectionEl = $state(null)
// Extract slug from current URL (for direct navigation to /blog/slug)
// Extract slug from current URL (for direct navigation to /blog/slug or /en/blog/slug)
function getSlugFromUrl() {
const parts = window.location.pathname.split('/').filter(Boolean)
const parts = window.location.pathname.replace(/^\/en/, '').split('/').filter(Boolean)
// parts = ['blog', 'slug'] → slug = 'slug'
return parts.length >= 2 && parts[0] === 'blog' ? parts[1] : null
}
@ -25,7 +27,8 @@
async function openArticle(slug) {
articleLoading = true
try {
const res = await fetch(`/blog/${slug}.json`)
const prefix = locale.current === 'en' ? '/en' : ''
const res = await fetch(`${prefix}/blog/${slug}.json`)
if (!res.ok) throw new Error(`HTTP ${res.status}`)
articleData = await res.json()
scrollToTop()
@ -39,7 +42,8 @@
function backToList() {
articleData = null
history.pushState({}, '', '/blog')
const prefix = locale.current === 'en' ? '/en' : ''
history.pushState({}, '', `${prefix}/blog`)
document.title = `${data?.title ?? 'Blog'} — World Game`
scrollToTop()
}
@ -56,12 +60,13 @@
const url = new URL(link.href, window.location.origin)
if (url.origin !== window.location.origin) return
const match = url.pathname.match(/^\/blog\/([^/]+)$/)
const match = url.pathname.match(/^(?:\/en)?\/blog\/([^/]+)$/)
if (match) {
e.preventDefault()
e.stopPropagation()
const slug = match[1]
history.pushState({}, '', `/blog/${slug}`)
const prefix = locale.current === 'en' ? '/en' : ''
history.pushState({}, '', `${prefix}/blog/${slug}`)
openArticle(slug)
}
}
@ -129,7 +134,7 @@
<p class="blog-card-description">{featured.intro}</p>
{/if}
<a href="/blog/{featured.slug}" class="blog-card-readmore">
Lire l'article <span class="arrow">→</span>
{t('read_article')} <span class="arrow">→</span>
</a>
</div>
{#if featured.cover}
@ -151,7 +156,7 @@
<a href="/blog/{article.slug}">{article.title}</a>
</h2>
<a href="/blog/{article.slug}" class="blog-card-readmore">
Lire l'article <span class="arrow">→</span>
{t('read_article')} <span class="arrow">→</span>
</a>
</div>
{#if article.cover}
@ -168,7 +173,7 @@
{/each}
{#if articleLoading}
<p class="blog-loading">Chargement…</p>
<p class="blog-loading">{t('loading')}</p>
{/if}
</div>

7
src/views/Play.svelte
View file

@ -2,6 +2,7 @@
import { onMount } from 'svelte'
import { slides } from '@state/slides.svelte'
import ResponsivePicture from '@components/ui/ResponsivePicture.svelte'
import { t } from '@i18n'
let { data } = $props()
@ -113,7 +114,7 @@
<section
class="play golden-grid"
aria-label="Jouer"
aria-label={t('play')}
style={displayedGame?.backgroundColor ? `--background-color: ${displayedGame.backgroundColor}` : ''}
>
@ -217,9 +218,9 @@
target="_blank"
rel="noopener noreferrer"
class="button play-icon"
>Jouer</a>
>{t('play')}</a>
{:else}
<button class="button" disabled>Coming soon</button>
<button class="button" disabled>{t('coming_soon')}</button>
{/if}
</div>
{/if}