feat: refactor blog routing and URL handling; add middleware for subdomain redirects

Utkarsh-Sorathia · Utkarsh-Sorathia · commit 36c94336181e · 2025-12-18T04:26:38.000Z
diff --git a/src/Components/UI/BlogCard.tsx b/src/Components/UI/BlogCard.tsx
@@ -32,21 +32,20 @@ export default function BlogCard({ post }: BlogCardProps) {
       <CardBox classNames="group h-full flex flex-col overflow-hidden hover:bg-zinc-800/10 hover:border-zinc-500 border-zinc-500">
         {/* Image */}
         {post.image?.asset?.url ? (
-          <Link href={`/blogs/${post.slug.current}`} className="block">
+          <Link href={`/${post.slug.current}`} className="block">
             <div className="relative w-full h-48 sm:h-56 overflow-hidden cursor-pointer">
               {/* Loading Shimmer */}
               {imageLoading && !imageError && (
                 <div className="absolute inset-0 image-shimmer bg-gray-700" />
               )}
-              
+
               {/* Image */}
               <Image
                 src={post.image.asset.url}
                 alt={validateAltText(post.image.asset.altText, getBlogAltText(post.title), 'Blog post image')}
                 fill
-                className={`object-cover group-hover:scale-105 transition-transform duration-300 ${
-                  imageLoading ? 'opacity-0' : 'opacity-100'
-                }`}
+                className={`object-cover group-hover:scale-105 transition-transform duration-300 ${imageLoading ? 'opacity-0' : 'opacity-100'
+                  }`}
                 style={{ willChange: imageLoading ? 'opacity' : 'transform' }}
                 quality={85}
                 sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
@@ -56,19 +55,19 @@ export default function BlogCard({ post }: BlogCardProps) {
                   setImageError(true);
                 }}
               />
-              
+
               {/* Error Fallback */}
               {imageError && (
                 <div className="absolute inset-0 bg-gray-800 flex items-center justify-center">
                   <div className="text-gray-400 text-4xl">📝</div>
                 </div>
               )}
-              
+
               <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
             </div>
           </Link>
         ) : (
-          <Link href={`/blogs/${post.slug.current}`} className="block">
+          <Link href={`/${post.slug.current}`} className="block">
             <div className="relative w-full h-48 sm:h-56 overflow-hidden cursor-pointer bg-gray-800 flex items-center justify-center">
               <div className="text-gray-400 text-4xl">📝</div>
               <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
@@ -92,37 +91,37 @@ export default function BlogCard({ post }: BlogCardProps) {
             </Row>
 
             {/* Title */}
-            <Link href={`/blogs/${post.slug.current}`}>
+            <Link href={`/${post.slug.current}`}>
               <h2 className="text-lg sm:text-xl font-semibold text-[var(--textColor)] mb-3 group-hover:text-[var(--primaryColor)] transition-colors line-clamp-2 leading-tight cursor-pointer hover:text-[var(--primaryColor)]">
                 {post.title}
               </h2>
             </Link>
 
             {/* Excerpt */}
-                <p className="text-[var(--textColorLight)] text-sm leading-relaxed mb-4 line-clamp-3">
-                  {(() => {
-                    let excerpt = '';
-                    if (typeof post.body === 'string') {
-                      // Clean markdown: remove headers (#), bold (**), italic (*), code (`), links, etc.
-                      excerpt = post.body
-                        .replace(/^#{1,6}\s+/gm, '') // Remove headers
-                        .replace(/\*\*([^*]+)\*\*/g, '$1') // Remove bold
-                        .replace(/\*([^*]+)\*/g, '$1') // Remove italic
-                        .replace(/`([^`]+)`/g, '$1') // Remove inline code
-                        .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1') // Remove links
-                        .replace(/\[|\]|\(|\)|`|#|\*/g, ''); // Remove any remaining markdown special chars
-                      // Clean up extra spaces
-                      excerpt = excerpt.replace(/\s+/g, ' ').trim();
-                      return excerpt.substring(0, 150) + (excerpt.length > 150 ? '...' : '');
-                    }
-                    return post.body?.[0]?.children?.[0]?.text || 'No excerpt available...';
-                  })()}
-                </p>
+            <p className="text-[var(--textColorLight)] text-sm leading-relaxed mb-4 line-clamp-3">
+              {(() => {
+                let excerpt = '';
+                if (typeof post.body === 'string') {
+                  // Clean markdown: remove headers (#), bold (**), italic (*), code (`), links, etc.
+                  excerpt = post.body
+                    .replace(/^#{1,6}\s+/gm, '') // Remove headers
+                    .replace(/\*\*([^*]+)\*\*/g, '$1') // Remove bold
+                    .replace(/\*([^*]+)\*/g, '$1') // Remove italic
+                    .replace(/`([^`]+)`/g, '$1') // Remove inline code
+                    .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1') // Remove links
+                    .replace(/\[|\]|\(|\)|`|#|\*/g, ''); // Remove any remaining markdown special chars
+                  // Clean up extra spaces
+                  excerpt = excerpt.replace(/\s+/g, ' ').trim();
+                  return excerpt.substring(0, 150) + (excerpt.length > 150 ? '...' : '');
+                }
+                return post.body?.[0]?.children?.[0]?.text || 'No excerpt available...';
+              })()}
+            </p>
           </div>
 
           {/* Read More Link */}
           <Link
-            href={`/blogs/${post.slug.current}`}
+            href={`/${post.slug.current}`}
             className="inline-flex items-center text-[var(--primaryColor)] hover:text-[var(--primaryColor)]/80 font-medium group-hover:translate-x-1 transition-all duration-300 mt-auto text-sm"
           >
             Read More
diff --git a/src/app/blogs/[slug]/page.tsx b/src/app/blogs/[slug]/page.tsx
@@ -10,7 +10,7 @@ import { getTimeSincePublished, getBlogPostBySlug, getAllBlogPostSlugs } from '@
 import { getBlogAltText } from '@/utils/imageValidation';
 import BlogImageWithLoader from '@/Components/UI/BlogImageWithLoader';
 import { getArticleSchema, getBreadcrumbSchema } from '@/utils/structuredData';
-import { baseURL } from '@/utils/api';
+import { getBlogBaseURL, getBlogPath } from '@/utils/url';
 
 export const revalidate = 0;
 
@@ -62,7 +62,7 @@ export async function generateMetadata({ params }: BlogPostPageProps): Promise<M
   } else {
     excerpt = post.body?.[0]?.children?.[0]?.text?.substring(0, 160) || '';
   }
-  
+
   const metaDescription = excerpt || `Read about ${post.title}`;
 
   return {
@@ -96,15 +96,15 @@ export async function generateMetadata({ params }: BlogPostPageProps): Promise<M
     openGraph: {
       title: post.title,
       description: excerpt,
-      url: `${baseURL}/blogs/${post.slug.current}`,
-      images: post.image?.asset?.url 
-        ? [post.image.asset.url] 
+      url: `${getBlogBaseURL()}/${post.slug.current}`,
+      images: post.image?.asset?.url
+        ? [post.image.asset.url]
         : [{
-            url: `${baseURL}/UtkarshSorathia.webp`,
-            alt: post.title,
-            width: 1200,
-            height: 630,
-          }],
+          url: 'https://utkarshsorathia.in/UtkarshSorathia.webp',
+          alt: post.title,
+          width: 1200,
+          height: 630,
+        }],
       type: 'article',
       publishedTime: post.publishedAt,
       modifiedTime: post._updatedAt,
@@ -116,13 +116,13 @@ export async function generateMetadata({ params }: BlogPostPageProps): Promise<M
       card: 'summary_large_image',
       title: post.title,
       description: excerpt,
-      images: post.image?.asset?.url 
-        ? [post.image.asset.url] 
-        : [`${baseURL}/UtkarshSorathia.webp`],
+      images: post.image?.asset?.url
+        ? [post.image.asset.url]
+        : ['https://utkarshsorathia.in/UtkarshSorathia.webp'],
       creator: '@utkarshsor03',
     },
     alternates: {
-      canonical: `${baseURL}/blogs/${post.slug.current}`,
+      canonical: `${getBlogBaseURL()}/${post.slug.current}`,
     },
   };
 }
@@ -155,13 +155,13 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
       if (block._type === 'block') {
         const style = block.style || 'normal';
         const listItem = block.listItem;
-        
+
         let text = '';
-        
+
         if (block.children && Array.isArray(block.children)) {
           block.children.forEach((child: any) => {
             let childText = String(child?.text || '');
-            
+
             // Apply marks from the child
             if (child?.marks && Array.isArray(child.marks)) {
               // Check for strong
@@ -177,7 +177,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
                 childText = `\`${childText}\``;
               }
             }
-            
+
             text += childText;
           });
         }
@@ -201,23 +201,23 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
   };
 
   // Convert body to markdown string if needed
-  const bodyMarkdown = typeof post.body === 'string' 
-    ? post.body 
+  const bodyMarkdown = typeof post.body === 'string'
+    ? post.body
     : convertPortableTextToMarkdown(post.body);
 
   // Get image URL for structured data
-  const imageUrl = post.image?.asset?.url || `${baseURL}/UtkarshSorathia.webp`;
+  const imageUrl = post.image?.asset?.url || 'https://utkarshsorathia.in/UtkarshSorathia.webp';
   const excerpt = typeof post.body === 'string'
     ? post.body
-        .replace(/^#{1,6}\s+/gm, '')
-        .replace(/\*\*([^*]+)\*\*/g, '$1')
-        .replace(/\*([^*]+)\*/g, '$1')
-        .replace(/`([^`]+)`/g, '$1')
-        .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
-        .replace(/\[|\]|\(|\)|`|#|\*/g, '')
-        .replace(/\s+/g, ' ')
-        .trim()
-        .substring(0, 160)
+      .replace(/^#{1,6}\s+/gm, '')
+      .replace(/\*\*([^*]+)\*\*/g, '$1')
+      .replace(/\*([^*]+)\*/g, '$1')
+      .replace(/`([^`]+)`/g, '$1')
+      .replace(/\[([^\]]+)\]\([^\)]+\)/g, '$1')
+      .replace(/\[|\]|\(|\)|`|#|\*/g, '')
+      .replace(/\s+/g, ' ')
+      .trim()
+      .substring(0, 160)
     : post.body?.[0]?.children?.[0]?.text?.substring(0, 160) || '';
 
   // Generate structured data
@@ -231,9 +231,9 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
   );
 
   const breadcrumbSchema = getBreadcrumbSchema([
-    { name: 'Home', url: baseURL },
-    { name: 'Blog', url: `${baseURL}/blogs` },
-    { name: post.title, url: `${baseURL}/blogs/${post.slug.current}` },
+    { name: 'Home', url: 'https://utkarshsorathia.in' },
+    { name: 'Blog', url: getBlogBaseURL() },
+    { name: post.title, url: `${getBlogBaseURL()}/${post.slug.current}` },
   ]);
 
   return (
@@ -250,15 +250,15 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
           __html: JSON.stringify(breadcrumbSchema),
         }}
       />
-        <ResponsiveBox
+      <ResponsiveBox
         classNames="min-h-screen dark:bg-[var(--bgColor)] bg-[var(--bgColor)] dark:bg-grid-white/[0.1] bg-grid-white/[0.1] items-center justify-center lg:px-40"
         id="blog-post"
       >
         <ConstrainedBox classNames="px-4 py-16">
           {/* Back Button */}
           <div className="mb-6 sm:mb-8">
             <Link
-              href="/blogs"
+              href="/"
               className="inline-flex items-center text-[var(--primaryColor)] hover:text-[var(--primaryColor)]/80 transition-colors text-sm sm:text-base"
             >
               <ArrowLeft className="w-4 h-4 mr-2" />
@@ -320,7 +320,7 @@ export default async function BlogPostPage({ params }: BlogPostPageProps) {
                   </p>
                 </div>
                 <Link
-                  href="/blogs"
+                  href="/"
                   className="inline-flex items-center px-4 sm:px-6 py-2 sm:py-3 bg-gradient-to-r from-[var(--primaryColor)] to-indigo-600 hover:from-indigo-600 hover:to-[var(--primaryColor)] text-white rounded-[var(--borderRadius)] transition-all duration-300 text-sm sm:text-base whitespace-nowrap"
                 >
                   Read More Blogs
diff --git a/src/app/blogs/page.tsx b/src/app/blogs/page.tsx
@@ -7,26 +7,32 @@ import ConstrainedBox from "@/Components/core/constrained-box";
 import SectionTitle from "@/Components/common/SectionTitle";
 
 import { getBlogListingSchema, getBreadcrumbSchema } from "@/utils/structuredData";
-import { baseURL } from "@/utils/api";
+import { getBaseURL, getBlogBaseURL } from "@/utils/url";
 import BlogsPageClient from "@/app/blogs/BlogsPageClient";
 
 export const revalidate = 0;
 
-export const metadata: Metadata = {
-  title: "Blog | Utkarsh Sorathia - Full Stack Developer",
-  description:
-    "Read my latest thoughts on web development, technology, and programming.",
-  alternates: { canonical: `${baseURL}/blogs` },
-};
+export async function generateMetadata(): Promise<Metadata> {
+  const baseURL = await getBaseURL();
+  const blogBaseURL = getBlogBaseURL();
 
+  return {
+    title: "Blog | Utkarsh Sorathia - Full Stack Developer",
+    description:
+      "Read my latest thoughts on web development, technology, and programming.",
+    alternates: { canonical: blogBaseURL },
+  };
+}
 
 export default async function BlogsPage() {
   const posts = await getAllBlogPosts();
+  const baseURL = await getBaseURL();
+  const blogBaseURL = getBlogBaseURL();
 
   const blogListingSchema = getBlogListingSchema();
   const breadcrumbSchema = getBreadcrumbSchema([
-    { name: "Home", url: baseURL },
-    { name: "Blog", url: `${baseURL}/blogs` },
+    { name: "Home", url: "https://utkarshsorathia.in" },
+    { name: "Blog", url: blogBaseURL },
   ]);
 
   return (
diff --git a/src/middleware.ts b/src/middleware.ts
@@ -0,0 +1,46 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+
+export function middleware(req: NextRequest) {
+  const host = req.headers.get("host") || "";
+  const pathname = req.nextUrl.pathname;
+
+  const isBlogsSubdomain = host === "blogs.utkarshsorathia.in";
+  const isMainDomain =
+    host === "utkarshsorathia.in" || host === "www.utkarshsorathia.in";
+
+  /**
+   * 1️⃣ MAIN DOMAIN
+   * Redirect /blogs → blogs subdomain
+   */
+  if (isMainDomain && pathname.startsWith("/blogs")) {
+    const slug = pathname.replace("/blogs", "");
+    return NextResponse.redirect(
+      new URL(`https://blogs.utkarshsorathia.in${slug}`, req.url),
+      301
+    );
+  }
+
+  /**
+   * 2️⃣ BLOGS SUBDOMAIN
+   * Rewrite / → /blogs
+   * Rewrite /slug → /blogs/slug
+   */
+  if (isBlogsSubdomain) {
+    if (pathname === "/") {
+      return NextResponse.rewrite(new URL("/blogs", req.url));
+    }
+
+    if (!pathname.startsWith("/blogs")) {
+      return NextResponse.rewrite(
+        new URL(`/blogs${pathname}`, req.url)
+      );
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ["/:path*"],
+};
diff --git a/src/utils/url.ts b/src/utils/url.ts
