Fix homepage font color and add blog section with in-depth analytical articles using fumadocs

apps/docs/app/[lang]/blog/[[...slug]]/page.tsx

@@ -0,0 +1,200 @@
+import { notFound } from 'next/navigation';
+import { blog } from '@/app/source';
+import defaultMdxComponents from 'fumadocs-ui/mdx';
+import { HomeLayout } from 'fumadocs-ui/layouts/home';
+import { baseOptions } from '@/app/layout.config';
+import Link from 'next/link';
+import { ArrowLeft } from 'lucide-react';
+
+// Extended type for blog post data
+interface BlogPostData {
+  title: string;
+  description?: string;
+  author?: string;
+  date?: string;
+  tags?: string[];
+  body: React.ComponentType;
+}
+
+export default async function BlogPage({
+  params,
+}: {
+  params: Promise<{ lang: string; slug?: string[] }>;
+}) {
+  const { slug } = await params;
+
+  // If no slug, show blog index
+  if (!slug || slug.length === 0) {
+    const posts = blog.getPages();
+
+    return (
+      <HomeLayout {...baseOptions}>
+        <main className="container max-w-5xl mx-auto px-4 py-16">
+          <div className="mb-12">
+            <h1 className="text-4xl font-bold mb-4">Blog</h1>
+            <p className="text-lg text-fd-foreground/80">
+              Insights, updates, and best practices from the ObjectStack team.
+            </p>
+          </div>
+
+          <div className="grid gap-8 md:grid-cols-2">
+            {posts.map((post) => {
+              const postData = post.data as unknown as BlogPostData;
+              return (
+                <Link
+                  key={post.url}
+                  href={post.url}
+                  className="group block rounded-lg border border-fd-border bg-fd-card p-6 transition-all hover:border-fd-primary/30 hover:shadow-md"
+                >
+                  <div className="mb-3">
+                    <h2 className="text-2xl font-semibold mb-2 group-hover:text-fd-primary transition-colors">
+                      {postData.title}
+                    </h2>
+                    {postData.description && (
+                      <p className="text-fd-foreground/70">
+                        {postData.description}
+                      </p>
+                    )}
+                  </div>
+
+                  <div className="flex items-center gap-4 text-sm text-fd-foreground/70">
+                    {postData.date && (
+                      <time dateTime={postData.date}>
+                        {new Date(postData.date).toLocaleDateString('en-US', {
+                          year: 'numeric',
+                          month: 'long',
+                          day: 'numeric',
+                        })}
+                      </time>
+                    )}
+                    {postData.author && (
+                      <span>By {postData.author}</span>
+                    )}
+                  </div>
+
+                  {postData.tags && postData.tags.length > 0 && (
+                    <div className="mt-4 flex flex-wrap gap-2">
+                      {postData.tags.map((tag: string) => (
+                        <span
+                          key={tag}
+                          className="inline-flex items-center rounded-full bg-fd-primary/10 px-2.5 py-0.5 text-xs font-medium text-fd-primary"
+                        >
+                          {tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                </Link>
+              );
+            })}
+          </div>
+
+          {posts.length === 0 && (
+            <div className="text-center py-12">
+              <p className="text-fd-foreground/70">No blog posts yet. Check back soon!</p>
+            </div>
+          )}
+        </main>
+      </HomeLayout>
+    );
+  }
+
+  // Show individual blog post
+  const page = blog.getPage(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  const pageData = page.data as unknown as BlogPostData;
+  const MDX = page.data.body;
+
+  return (
+    <HomeLayout {...baseOptions}>
+      <main className="container max-w-4xl mx-auto px-4 py-16">
+        <Link 
+          href="/blog"
+          className="inline-flex items-center gap-2 text-sm text-fd-foreground/70 hover:text-fd-foreground mb-8 transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4" />
+          Back to Blog
+        </Link>
+
+        <article className="prose prose-neutral dark:prose-invert max-w-none">
+          <header className="mb-8 pb-8 border-b border-fd-border">
+            <h1 className="text-4xl font-bold mb-4">{pageData.title}</h1>
+
+            {pageData.description && (
+              <p className="text-xl text-fd-foreground/80 mb-6">
+                {pageData.description}
+              </p>
+            )}
+
+            <div className="flex items-center gap-4 text-sm text-fd-foreground/70">
+              {pageData.date && (
+                <time dateTime={pageData.date}>
+                  {new Date(pageData.date).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </time>
+              )}
+              {pageData.author && (
+                <span>By {pageData.author}</span>
+              )}
+            </div>
+
+            {pageData.tags && pageData.tags.length > 0 && (
+              <div className="mt-4 flex flex-wrap gap-2">
+                {pageData.tags.map((tag: string) => (
+                  <span
+                    key={tag}
+                    className="inline-flex items-center rounded-full bg-fd-primary/10 px-3 py-1 text-sm font-medium text-fd-primary"
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            )}
+          </header>
+
+          <MDX components={defaultMdxComponents} />
+        </article>
+      </main>
+    </HomeLayout>
+  );
+}
+
+export async function generateStaticParams() {
+  return blog.getPages().map((page) => ({
+    slug: page.slugs,
+  }));
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const { slug } = await params;
+
+  // If no slug, return default metadata for blog index
+  if (!slug || slug.length === 0) {
+    return {
+      title: 'Blog',
+      description: 'Insights, updates, and best practices from the ObjectStack team.',
+    };
+  }
+
+  const page = blog.getPage(slug);
+
+  if (!page) {
+    notFound();
+  }
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

apps/docs/app/[lang]/page.tsx

@@ -27,10 +27,10 @@ export default async function HomePage({
             {t.hero.title.line1} <br/> {t.hero.title.line2}
           </h1>
 
-          <p className="mx-auto max-w-2xl text-lg text-fd-muted-foreground sm:text-xl leading-relaxed">
+          <p className="mx-auto max-w-2xl text-lg text-fd-foreground/80 sm:text-xl leading-relaxed">
             {t.hero.subtitle.line1}
             <br className="hidden sm:inline" />
-            <span className="text-fd-foreground font-medium">{t.hero.subtitle.line2}</span>
+            <span className="text-fd-foreground font-semibold">{t.hero.subtitle.line2}</span>
           </p>
 
           <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-4">
@@ -124,7 +124,7 @@ export default async function HomePage({
 
         {/* Personas Section */}
         <div className="mt-32 mb-16 w-full max-w-5xl px-4">
-          <h2 className="text-3xl font-bold tracking-tight mb-12 bg-gradient-to-r from-fd-foreground to-fd-muted-foreground bg-clip-text text-transparent">
+          <h2 className="text-3xl font-bold tracking-tight mb-12 bg-gradient-to-r from-fd-foreground to-fd-foreground/70 bg-clip-text text-transparent">
              {t.personas.heading}
           </h2>
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -166,7 +166,7 @@ function FeatureCard({ icon, title, description, href }: { icon: React.ReactNode
       <h3 className="mb-2 text-lg font-semibold text-fd-card-foreground group-hover:text-fd-primary transition-colors">
         {title}
       </h3>
-      <p className="text-sm text-fd-muted-foreground leading-relaxed">
+      <p className="text-sm text-fd-foreground/70 leading-relaxed">
         {description}
       </p>
     </div>
@@ -188,7 +188,7 @@ function PersonaCard({ icon, title, description, href, action }: { icon: React.R
     <Link href={href} className="flex flex-col items-start p-8 rounded-2xl bg-fd-secondary/30 border border-fd-border/50 hover:bg-fd-secondary/60 hover:border-fd-primary/30 transition-all group text-left">
       {icon}
       <h3 className="text-xl font-bold mb-3">{title}</h3>
-      <p className="text-fd-muted-foreground mb-6 text-sm leading-relaxed flex-grow text-left">
+      <p className="text-fd-foreground/70 mb-6 text-sm leading-relaxed flex-grow text-left">
         {description}
       </p>
       <div className="flex items-center text-sm font-semibold text-fd-primary mt-auto group-hover:translate-x-1 transition-transform">

apps/docs/app/layout.config.tsx

@@ -22,6 +22,11 @@ export const baseOptions: BaseLayoutProps = {
       url: '/docs/',
       active: 'nested-url',
     },
+    {
+      text: 'Blog',
+      url: '/blog',
+      active: 'nested-url',
+    },
     // {
     //   text: 'Concepts',
     //   url: '/docs/concepts/manifesto',

apps/docs/app/source.ts

@@ -1,9 +1,14 @@
-import { docs } from 'fumadocs-mdx:collections/server';
+import { docs, blog as blogCollection } from 'fumadocs-mdx:collections/server';
 import { loader } from 'fumadocs-core/source';
 import { i18n } from '@/lib/i18n';
 
 export const source = loader({
   baseUrl: '/docs',
   i18n,
-  source: (docs as any).toFumadocsSource(),
+  source: docs.toFumadocsSource(),
+});
+
+export const blog = loader({
+  baseUrl: '/blog',
+  source: blogCollection.toFumadocsSource(),
 });

apps/docs/source.config.ts

@@ -1,7 +1,21 @@
-import { defineDocs, defineConfig } from 'fumadocs-mdx/config';
+import { defineDocs, defineConfig, frontmatterSchema } from 'fumadocs-mdx/config';
+import { z } from 'zod';
 
 export const docs = defineDocs({
   dir: '../../content/docs',
-}) as any;
+});
+
+const blogSchema = frontmatterSchema.extend({
+  author: z.string().optional(),
+  date: z.coerce.string().optional(),
+  tags: z.array(z.string()).optional(),
+});
+
+export const blog = defineDocs({
+  dir: '../../content/blog',
+  docs: {
+    schema: blogSchema,
+  },
+});
 
 export default defineConfig();