feat: enhance thumbnail description

Author: LeadcodeDev

apps/blog/src/content.config.ts

@@ -6,6 +6,7 @@ const posts = defineCollection({
   schema: z.object({
     title: z.string(),
     description: z.string(),
+    short_description: z.string().optional(),
     date: z.coerce.date(),
     tags: z.array(z.string()).default([]),
     cover: z.string().optional(),

apps/blog/src/content/posts/en/introducing-explainer-v2.mdx

@@ -1,6 +1,7 @@
 ---
 title: Introducing Explainer v2
-description: Explainer v2 is a monorepo documentation boilerplate built with Astro, React, and Tailwind CSS 4 — giving you docs, blog, and website apps ready to go with multi-project support, versioning, i18n, and more.
+description: Explainer v2 is a monorepo documentation boilerplate built with Astro, React, and Tailwind — giving you docs, blog, and website apps ready to go with multi-project support, versioning, i18n, and more.
+short_description: "A monorepo documentation boilerplate with Astro, React, and Tailwind."
 date: 2026-03-10
 tags: [announcement, release, documentation, open-source]
 status: published

apps/blog/src/content/posts/fr/introducing-explainer-v2.mdx

@@ -1,6 +1,7 @@
 ---
 title: Présentation d'Explainer v2
-description: Explainer v2 est un boilerplate de documentation monorepo construit avec Astro, React et Tailwind CSS 4 — offrant des apps docs, blog et site web prêtes à l'emploi avec support multi-projet, versioning, i18n, et plus encore.
+description: Explainer v2 est un boilerplate de documentation monorepo construit avec Astro, React et Tailwind — offrant des apps docs, blog et site web prêtes à l'emploi avec support multi-projet, versioning, i18n, et plus encore.
+short_description: "Explainer v2 est un boilerplate de documentation monorepo construit avec Astro, React et Tailwind."
 date: 2026-03-10
 tags: [announcement, release, documentation, open-source]
 status: published

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

@@ -45,7 +45,7 @@ const t = useTranslations(locale)
         <div data-tags={JSON.stringify(post.data.tags)} data-title={post.data.title} data-description={post.data.description ?? ''}>
           <PostCard
             title={post.data.title}
-            description={post.data.description}
+            description={post.data.short_description ?? post.data.description}
             date={post.data.date}
             tags={post.data.tags}
             cover={post.data.cover ?? `${getPostHref(post)}/thumbnail.png`}

apps/docs/src/components/header.tsx

@@ -1,4 +1,4 @@
-import { Navbar, LocaleSwitcher, getAppLinks, cn } from '@explainer/ui'
+import { LocaleSwitcher, Navbar, getAppLinks } from '@explainer/ui'
 import type { NavItem, ProjectInfo } from '../lib/docs'
 import { MobileMenu } from './mobile-menu'
 import { ProjectTabs } from './project-tabs'
@@ -39,7 +39,7 @@ export function Header({
   const appLinks = getAppLinks('docs', appUrlOverrides)
 
   return (
-    <div className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+    <div className="sticky top-0 z-50 w-full bg-background/95 backdrop-blur `supports-backdrop-filter:bg-background/60">
       <Navbar
         brand={title}
         brandHref="/"

packages/thumbnail/src/integration.ts

@@ -20,6 +20,7 @@ interface ContentEntry {
   filePath: string
   title: string
   description?: string
+  shortDescription?: string
   /** URL pathname this entry maps to (without leading slash) */
   urlPath: string
 }
@@ -52,6 +53,7 @@ async function buildContentIndex(
         filePath,
         title: data.title ?? urlPath.split('/').pop() ?? '',
         description: data.description,
+        shortDescription: data.short_description,
         urlPath,
       }
 
@@ -238,7 +240,7 @@ function resolveFromIndex(
     return {
       headline: appName,
       title: direct.title,
-      description: direct.description,
+      description: direct.shortDescription ?? direct.description,
     }
   }
 
@@ -260,7 +262,7 @@ function resolveFromIndex(
         return {
           headline: appName,
           title: entry.title,
-          description: entry.description,
+          description: entry.shortDescription ?? entry.description,
         }
       }
     }
@@ -274,7 +276,7 @@ function resolveFromIndex(
       return {
         headline: appName,
         title: entry.title,
-        description: entry.description,
+        description: entry.shortDescription ?? entry.description,
       }
     }
   }