refactor(blog): factorize common data to manage localized content with ease

Signed-off-by: Emilien Escalle <emilien.escalle@escemi.com>

Author: neilime

.github/agents/blog-post.md

@@ -74,23 +74,100 @@ Follow [../AGENTS.md](../AGENTS.md) before working in this repository.
 - Clarify: **Audience** (Platform engineers? SREs? CTOs?) | **Goal** (what action?) | **Angle** (unique perspective?)
 - Research: 3-5 key points, DORA/SPACE data, code examples, Hoverkraft services to link
 
-### 2. Frontmatter
+### 2. Structure & Frontmatter
+
+**Folder Structure**: Each blog post lives in its own folder with separate language files and shared metadata.
+
+```txt
+/application/src/data/post/{translation-key}/
+  fr.mdx        # French content
+  en.mdx        # English content
+  common.yaml   # Shared metadata
+```
+
+**common.yaml** (shared metadata):
 
 ```yaml
----
 publishDate: 2025-01-15T00:00:00Z
-title: "Compelling title <60 chars" # FR: conversational; EN: direct, benefit-focused
-excerpt: "One-sentence summary with value/metric (140-160 chars)"
-image: ~/assets/images/blog/post-slug/preview.png
+translationKey: "translation-key" # Same as folder name - identifier for translation mapping
+image: ~/assets/images/blog/{translation-key}/preview.png
 tags: [platform-engineering, kubernetes, dora] # 3-6 tags, lowercase-hyphenated
 category: "Platform Engineering" # or "DevOps & SRE", "Cloud Native", "Developer Experience", "Open Source"
-author: "Équipe HoverKraft" # or "Hoverkraft Team" for EN
-lang: fr # or "en"
+```
+
+**fr.mdx** frontmatter:
+
+```yaml
+---
+title: "Titre accrocheur <60 caractères"
+excerpt: "Résumé en une phrase avec valeur/métrique (140-160 caractères)"
+author: "Équipe HoverKraft"
+lang: fr
+slug: "titre-francais-du-post"
 ---
 ```
 
+**en.mdx** frontmatter:
+
+```yaml
+---
+title: "Compelling title <60 chars"
+excerpt: "One-sentence summary with value/metric (140-160 chars)"
+author: "Hoverkraft Team"
+lang: en
+slug: "english-post-title"
+---
+```
+
+**Critical Fields**:
+
+- `slug`: **Localized** URL slug in MDX files (different per language)
+- `translationKey`: **Shared** identifier in `common.yaml` (folder name, same across languages) for translation mapping
+- `lang`: Language code in MDX files (`fr` or `en`)
+- All other metadata in `common.yaml` is shared between languages
+
+**fr.mdx** frontmatter:
+
+```yaml
+---
+title: "Titre accrocheur <60 caractères"
+excerpt: "Résumé en une phrase avec valeur/métrique (140-160 caractères)"
+author: "Équipe HoverKraft"
+lang: fr
+slug: "titre-francais-du-post"
+translationKey: "translation-key" # Same as folder name
+---
+```
+
+**en.mdx** frontmatter:
+
+```yaml
+---
+title: "Compelling title <60 chars"
+excerpt: "One-sentence summary with value/metric (140-160 chars)"
+author: "Hoverkraft Team"
+lang: en
+slug: "english-post-title"
+translationKey: "translation-key" # Same as folder name
+---
+```
+
+**Critical Fields**:
+
+- `slug`: **Localized** URL slug (different per language)
+- `translationKey`: **Shared** identifier (folder name, same across languages) for translation mapping
+- `lang`: Language code (`fr` or `en`)
+- All other metadata in `common.yaml` is shared between languages
+
 ### 3. Write Content
 
+**Create Folder & Files**: Start by creating the folder structure:
+
+```bash
+mkdir -p /application/src/data/post/{translation-key}
+touch /application/src/data/post/{translation-key}/{fr.mdx,en.mdx,common.yaml}
+```
+
 **French first** (canonical): Use "nous" (we) for Hoverkraft, "vous" (formal) for readers. Keep technical terms in English when standard (Kubernetes, GitOps).
 
 **Structure**: Opening blockquote → Intro (1-2 short ¶) → Main sections (3-5) → Conclusion (1 ¶) → CTAs (1-2 links)
@@ -196,18 +273,18 @@ Lighting: flat, clean, no noise.
 - ❌ Do not request screenshots or mimic brand logos
 - ❌ Avoid vague adjectives like “nice” or “cool”
 
-**File Org**: Save to `/application/src/assets/images/blog/{post-slug}/`
+**File Org**: Save to `/application/src/assets/images/blog/{translation-key}/`
 
 - `preview.png` (required, ≤2MB)
 - `descriptive-name.webp` (supporting visuals, 15-35KB target)
-- Use kebab-case, descriptive names
+- Use kebab-case, descriptive names (match `translationKey`, not localized slug)
 
 ### 5. Import Images
 
 ```typescript
 import Image from "~/components/common/Image.astro";
-import preview from "~/assets/images/blog/post-slug/preview.png";
-import diagram from "~/assets/images/blog/post-slug/architecture.webp";
+import preview from "~/assets/images/blog/{translation-key}/preview.png";
+import diagram from "~/assets/images/blog/{translation-key}/architecture.webp";
 ```
 
 Reference:
@@ -226,10 +303,14 @@ Reference:
 
 ### 7. Review Checklist
 
-- [ ] French and English complete and semantically equivalent
-- [ ] Frontmatter valid with all fields (publishDate, title, excerpt, image, tags, category, author, lang)
+- [ ] Folder created with correct `translationKey` as name
+- [ ] `common.yaml` created with shared metadata (publishDate, translationKey, image, tags, category)
+- [ ] `translationKey` in `common.yaml` matches folder name
+- [ ] French (`fr.mdx`) and English (`en.mdx`) files complete and semantically equivalent
+- [ ] Each MDX has all required frontmatter fields (title, excerpt, author, lang, slug)
+- [ ] `slug` is **localized** (different per language) and descriptive
 - [ ] Opening blockquote compelling (<100 chars)
-- [ ] All images generated and saved correctly
+- [ ] All images generated and saved correctly in `/application/src/assets/images/blog/{translationKey}/`
 - [ ] Images imported with descriptive `alt` text
 - [ ] Image prompts produce clean, geometric visuals with Hoverkraft palette (≤3 colors)
 - [ ] Code blocks have language specified
@@ -277,12 +358,27 @@ make lint-fix
 
 ```txt
 /application/src/data/post/
-  {post-slug-fr}.mdx       # French
-  {post-slug-en}.mdx       # English
+  {translation-key}/          # Folder named after shared translation key
+    fr.mdx                    # French content with localized frontmatter
+    en.mdx                    # English content with localized frontmatter
+    common.yaml               # Shared metadata (publishDate, image, tags, category)
+
+/application/src/assets/images/blog/{translation-key}/
+  preview.png                 # 1536×1024 social preview (required)
+  *.webp                      # Diagrams, charts (~15-35KB each)
+```
 
-/application/src/assets/images/blog/{post-slug}/
-  preview.png              # 1536×1024 social preview (required)
-  *.webp                   # Diagrams, charts (~15-35KB each)
+**Example**:
+
+```txt
+/application/src/data/post/modern-platform-characteristics/
+  fr.mdx         # slug: "caracteristiques-plateforme-moderne"
+  en.mdx         # slug: "platform-engineering-modern-characteristics"
+  common.yaml    # publishDate, image, tags, category
+
+/application/src/assets/images/blog/modern-platform-characteristics/
+  preview.png
+  architecture.webp
 ```
 
 ## Resources

.github/dependabot.yml

@@ -3,7 +3,9 @@ version: 2
 updates:
   - package-ecosystem: "npm"
     open-pull-requests-limit: 20
-    directory: "application/"
+    directories:
+      - "application/"
+      - ".github/actions/**/*"
     versioning-strategy: increase
     schedule:
       interval: "weekly"

application/astro.config.ts

@@ -14,6 +14,7 @@ import type { AstroIntegration } from 'astro';
 import astrowind from './vendor/integration';
 
 import { readingTimeRemarkPlugin, responsiveTablesRehypePlugin, lazyImagesRehypePlugin } from './src/utils/frontmatter';
+import { injectCommonData } from './src/loaders/inject-common-data';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -75,7 +76,7 @@ export default defineConfig({
   },
 
   markdown: {
-    remarkPlugins: [readingTimeRemarkPlugin],
+    remarkPlugins: [injectCommonData, readingTimeRemarkPlugin],
     rehypePlugins: [responsiveTablesRehypePlugin, lazyImagesRehypePlugin],
   },
 

application/src/components/blog/RelatedPosts.astro

@@ -5,12 +5,15 @@ import { getRelatedPosts } from '~/utils/blog';
 import BlogHighlightedPosts from '../widgets/BlogHighlightedPosts.astro';
 import type { Post } from '~/types';
 import { getBlogPermalink } from '~/utils/permalinks';
+import { getLangFromUrl, useTranslations } from '~/i18n/utils';
 
 export interface Props {
   post: Post;
 }
 
 const { post } = Astro.props;
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 
 const relatedPosts = post.tags ? await getRelatedPosts(post, 4) : [];
 ---
@@ -22,8 +25,8 @@ const relatedPosts = post.tags ? await getRelatedPosts(post, 4) : [];
         container:
           'pt-0 lg:pt-0 md:pt-0 intersect-once intersect-quarter motion-safe:md:opacity-0 motion-safe:md:intersect:animate-fade',
       }}
-      title="Related Posts"
-      linkText="View All Posts"
+      title={t('blog.related-posts')}
+      linkText={t('blog.view-all')}
       linkUrl={getBlogPermalink()}
       postIds={relatedPosts.map((post) => post.id)}
     />

application/src/components/common/LanguageSelector.astro

@@ -15,7 +15,8 @@ const translatePath = useTranslatedPath(currentLang);
 
 // Get current path without language prefix
 const pathname = Astro.url.pathname;
-const pathWithoutLang = pathname.replace(/^\/(en|fr)(\/|$)/, '/');
+// Remove language prefix if present (e.g., /en/blog/... or /fr/blog/...)
+const pathWithoutLang = pathname.replace(/^\/(en|fr)(?:\/|$)/, '');
 const normalizedPath = pathWithoutLang === '' ? '/' : pathWithoutLang;
 
 // Function to get the equivalent path in the target language

application/src/content/config.ts

@@ -1,5 +1,5 @@
 import { z, defineCollection } from 'astro:content';
-import { glob } from 'astro/loaders';
+import { blogPostLoader } from '~/loaders/blog-post-loader';
 
 const metadataDefinition = () =>
   z
@@ -47,7 +47,7 @@ const metadataDefinition = () =>
     .optional();
 
 const postCollection = defineCollection({
-  loader: glob({ pattern: ['**/*.md', '**/*.mdx'], base: 'src/data/post' }),
+  loader: blogPostLoader(),
   schema: z.object({
     publishDate: z.date().optional(),
     updateDate: z.date().optional(),
@@ -60,6 +60,7 @@ const postCollection = defineCollection({
     category: z.string().optional(),
     tags: z.array(z.string()).optional(),
     author: z.string().optional(),
+    slug: z.string().optional(),
     lang: z.enum(['fr', 'en']).optional().default('fr'), // Default language is French
     translationKey: z.string().optional(),
 

application/src/data/post/bitnami-broadcom-images/common.yaml

@@ -0,0 +1,10 @@
+publishDate: 2025-08-25T00:00:00Z
+image: ~/assets/images/blog/images-bitnami-broadcom/preview.png
+tags:
+  - kubernetes
+  - sre
+  - bitnami
+  - broadcom
+  - docker
+category: Platform Engineering
+translationKey: bitnami-broadcom-images

…rc/data/post/broadcom-bitnami-images.mdx …data/post/bitnami-broadcom-images/en.mdxapplication/src/data/post/broadcom-bitnami-images.mdx renamed to application/src/data/post/bitnami-broadcom-images/en.mdx application/src/data/post/broadcom-bitnami-images.mdx renamed to application/src/data/post/bitnami-broadcom-images/en.mdx

@@ -1,18 +1,9 @@
 ---
-publishDate: 2025-08-25T00:00:00Z
 title: 'Broadcom pulls public Bitnami images: how Hoverkraft keeps your clusters safe'
 excerpt: 'Broadcom removed anonymous access to Bitnami Docker images. Here is how we mitigate the impact for Kubernetes teams and buy time for a clean migration.'
-image: ~/assets/images/blog/images-bitnami-broadcom/preview.png
-tags:
-  - kubernetes
-  - sre
-  - bitnami
-  - broadcom
-  - docker
-category: 'Platform Engineering'
+slug: broadcom-bitnami-images
 author: 'Hoverkraft Team'
 lang: en
-translationKey: bitnami-broadcom-images
 ---
 
 > ⚠️ Coming back from holiday to discover your registries are empty is not fun. That is exactly what the Bitnami announcement created.

…rc/data/post/images-bitnami-broadcom.mdx …data/post/bitnami-broadcom-images/fr.mdxapplication/src/data/post/images-bitnami-broadcom.mdx renamed to application/src/data/post/bitnami-broadcom-images/fr.mdx application/src/data/post/images-bitnami-broadcom.mdx renamed to application/src/data/post/bitnami-broadcom-images/fr.mdx

@@ -1,16 +1,8 @@
 ---
-publishDate: 2025-08-25T00:00:00Z
-title: "Broadcom coupe l'accès aux images Bitnami : comment nous sécurisons vos clusters"
+title: "Broadcom coupe l'accès aux images Bitnami : comment nous sécurisons vos clusters"
 excerpt: 'Broadcom met fin à la diffusion publique des images Docker Bitnami. Voici comment hoverkraft protège les équipes Kubernetes et gagne du temps de migration.'
-image: ~/assets/images/blog/images-bitnami-broadcom/preview.png
-tags:
-  - kubernetes
-  - sre
-  - bitnami
-  - broadcom
-  - docker
+slug: images-bitnami-broadcom
 lang: fr
-translationKey: bitnami-broadcom-images
 ---
 
 > ⚠️ Retour de vacances mouvementé pour les équipes plateformes : Broadcom retire les images Docker Bitnami de l'accès public.

application/src/data/post/ci-dokumentor/common.yaml

@@ -0,0 +1,10 @@
+publishDate: 2025-01-31T00:00:00Z
+image: ~/assets/images/blog/ci-dokumentor/preview.png
+tags:
+  - ci-cd
+  - documentation
+  - automation
+  - devex
+  - open-source
+category: Developer Experience
+translationKey: ci-dokumentor