feature: add OutdatedBanner component for outdated articles

src/components/outdated-banner.astro

@@ -0,0 +1,16 @@
+---
+import { getTranslationUtilities } from '@/lib/site/get-translation-utilities';
+
+const { t } = getTranslationUtilities(Astro.currentLocale);
+---
+
+<div
+  class="mb-8 rounded-md border-l-4 border-yellow-400 bg-yellow-50 px-6 py-4 text-yellow-800"
+>
+  <p class="text-base font-semibold">
+    {t('blog.article.outdated.title')}
+  </p>
+  <p class="mt-1 text-sm">
+    {t('blog.article.outdated.description')}
+  </p>
+</div>

src/content/posts/start-ui/en.md

@@ -15,6 +15,7 @@ heroImage: 'images/visuel-article-start-ui-tinified.png'
 metaDescription: 'Start UI [web] is a UI starter with React, Chakra UI, React Query and Formiz — By the BearStudio team'
 authors:
   - yoann-fleury
+outdated: false
 ---
 
 When using User Interface (UI) starters in the past, we found ourselves faced with deciding which technology would be best for us to use. From UI framework, HTTP Client, Routing Library, Style Library, Form Library, to downloading all the configurations and dependencies needed can be very time consuming. To put everything in one place and streamline how we choose these options, we decided to dive into creating our own User Interface Starter called **_Start UI_**_._

src/content/posts/start-ui/fr.md

@@ -14,6 +14,7 @@ heroImage: 'images/visuel-article-start-ui-tinified.png'
 metaDescription: "Start UI [web] est un starter UI avec React, Chakra UI, React Query et Formiz — Par l'équipe BearStudio"
 authors:
   - yoann-fleury
+outdated: false
 ---
 
 Par le passé, lorsque nous utilisions des starters d'Interface Utilisateur (UI), nous nous retrouvions face au choix de la technologie la plus adaptée à nos besoins. Entre le framework UI, le client HTTP, la bibliothèque de routage, la bibliothèque de styles, la bibliothèque de formulaires, et le téléchargement de toutes les configurations et dépendances nécessaires, cela pouvait s'avérer très chronophage. Pour tout centraliser et simplifier nos choix, nous avons décidé de créer notre propre starter d'Interface Utilisateur appelé **_Start UI_**_._

src/i18n/en/blog.json

@@ -29,6 +29,10 @@
   "article": {
     "on": "",
     "by": "by",
-    "published": "Published on"
+    "published": "Published on",
+    "outdated": {
+      "title": "This article is outdated",
+      "description": "The information presented here may no longer be valid."
+    }
   }
 }

src/i18n/fr/blog.json

@@ -29,6 +29,10 @@
   "article": {
     "on": "Le",
     "by": "par",
-    "published": "Publié le"
+    "published": "Publié le",
+    "outdated": {
+      "title": "Cet article est peut-être dépassé",
+      "description": "Les informations présentées ici ne sont plus forcément valables."
+    }
   }
 }

src/pages/fr/blog/articles/[id]/index.astro

@@ -15,6 +15,7 @@ import { breadcrumbEntries } from '@/components/breadcrumb/utils';
 import Container from '@/components/container.astro';
 import HeroContent from '@/components/hero/hero-content.astro';
 import Hero from '@/components/hero/hero.astro';
+import OutdatedBanner from '@/components/outdated-banner.astro';
 import PhotoSwipeImages from '@/components/photo-swipe-images.astro';
 import Prose from '@/components/prose.astro';
 import SEO from '@/components/seo/index.astro';
@@ -175,6 +176,7 @@ const [slugFr, slugEn] = await Promise.all([
   </Hero>
   <Container>
     <PhotoSwipeImages>
+      {post.data.outdated && <OutdatedBanner />}
       <Prose>
         <Content />
       </Prose>

src/schemas/posts.ts

@@ -16,4 +16,5 @@ export const zPost = ({ image }: SchemaContext) =>
     date: z.date(),
     tags: z.array(z.string()).optional(),
     categories: z.array(z.string()).optional(),
+    outdated: z.boolean().optional(),
   });