From 6e7b86eb6ad20c2573428747c306d1183014a0de Mon Sep 17 00:00:00 2001
From: Aryan-Techie <76107940+Aryan-Techie@users.noreply.github.com>
Date: Fri, 19 Sep 2025 16:02:04 +0530
Subject: [PATCH] feat: add blog subtitle support

- Add optional subtitle field to blog post metadata
- Display subtitle with italic styling below post title
- Update quick-start.mdx with example subtitle
- Maintain backward compatibility for posts without subtitles
---
 src/app/blog/[slug]/page.tsx       | 10 ++++++++++
 src/app/blog/posts/quick-start.mdx |  1 +
 src/utils/utils.ts                 |  2 ++
 3 files changed, 13 insertions(+)

diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
index f94af8ce0..cb87bc2f6 100644
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -101,6 +101,16 @@ export default async function Blog({ params }: { params: Promise<{ slug: string
               {post.metadata.publishedAt && formatDate(post.metadata.publishedAt)}
             </Text>
             <Heading variant="display-strong-m">{post.metadata.title}</Heading>
+            {post.metadata.subtitle && (
+              <Text 
+                variant="body-default-l" 
+                onBackground="neutral-weak" 
+                align="center"
+                style={{ fontStyle: 'italic' }}
+              >
+                {post.metadata.subtitle}
+              </Text>
+            )}
           </Column>
           <Row marginBottom="32" horizontal="center">
             <Row gap="16" vertical="center">
diff --git a/src/app/blog/posts/quick-start.mdx b/src/app/blog/posts/quick-start.mdx
index b4c457135..e90f16fe0 100644
--- a/src/app/blog/posts/quick-start.mdx
+++ b/src/app/blog/posts/quick-start.mdx
@@ -1,5 +1,6 @@
 ---
 title: "Quick start with Magic Portfolio"
+subtitle: "A comprehensive guide to setting up your professional portfolio in minutes"
 summary: "Magic Portfolio is a comprehensive, MDX-based, SEO-friendly, responsive portfolio template built with Once UI and Next.js."
 image: "/images/gallery/horizontal-1.jpg"
 publishedAt: "2025-04-23"
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index bf1f7498f..5c4dacebf 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -11,6 +11,7 @@ type Team = {
 
 type Metadata = {
   title: string;
+  subtitle?: string;
   publishedAt: string;
   summary: string;
   image?: string;
@@ -40,6 +41,7 @@ function readMDXFile(filePath: string) {
 
   const metadata: Metadata = {
     title: data.title || "",
+    subtitle: data.subtitle || "",
     publishedAt: data.publishedAt,
     summary: data.summary || "",
     image: data.image || "",