From fa5052d85ed57cbb126af1707a22b2ca232fc3ba Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Thu, 11 Jun 2026 13:22:37 +0530
Subject: [PATCH 1/3] docs: redesign blog index page

- Render blog posts as cards with rounded borders and hover states
- Show the author name on each card alongside the date
- Page background is white in light mode and #171717 in dark mode
- Add the shared site Footer to the blog index

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/blog/page.tsx | 58 +++++++++++++++++++++++++++---------------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/docs/app/blog/page.tsx b/docs/app/blog/page.tsx
index e3661d00e..f0e9cc4ef 100644
--- a/docs/app/blog/page.tsx
+++ b/docs/app/blog/page.tsx
@@ -1,5 +1,14 @@
 import { blog } from "@/lib/source";
 import Link from "next/link";
+import { Footer } from "../(home)/sections/Footer/Footer";
+
+function formatDate(date: string | Date) {
+  return new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
 
 export default function BlogIndex() {
   const posts = blog.getPages().sort((a, b) => {
@@ -7,27 +16,36 @@ export default function BlogIndex() {
   });
 
   return (
-    <main className="mx-auto w-full max-w-[800px] flex-1 px-4 py-16 md:px-8">
-      <h1 className="mb-12 text-4xl font-bold">Blog</h1>
-      <div className="flex flex-col divide-y divide-fd-border">
-        {posts.map((post) => (
-          <Link
-            key={post.url}
-            href={post.url}
-            className="group flex flex-col gap-1 py-6 no-underline"
-          >
-            <div className="flex items-baseline justify-between gap-4">
-              <h2 className="text-lg font-semibold transition-colors group-hover:text-fd-primary">
+    <div className="flex min-h-screen flex-col bg-white [[data-theme=dark]_&]:bg-[#171717]">
+      <main className="mx-auto w-full max-w-[800px] flex-1 px-4 py-16 md:px-8">
+        <h1 className="mb-12 text-4xl font-bold text-neutral-900 [[data-theme=dark]_&]:text-white">
+          Blog
+        </h1>
+        <div className="flex flex-col gap-5">
+          {posts.map((post) => (
+            <Link
+              key={post.url}
+              href={post.url}
+              className="group flex flex-col gap-3 rounded-2xl border border-black/[0.07] bg-white p-6 no-underline shadow-sm transition-colors hover:border-black/[0.16] [[data-theme=dark]_&]:border-white/10 [[data-theme=dark]_&]:bg-white/[0.04] [[data-theme=dark]_&]:shadow-none [[data-theme=dark]_&]:hover:border-white/25 [[data-theme=dark]_&]:hover:bg-white/[0.07]"
+            >
+              <h2 className="text-lg font-semibold text-neutral-900 [[data-theme=dark]_&]:text-white">
                 {post.data.title}
               </h2>
-              <time className="shrink-0 text-sm text-fd-muted-foreground">
-                {new Date(post.data.date).toLocaleDateString()}
-              </time>
-            </div>
-            <p className="text-sm text-fd-muted-foreground">{post.data.description}</p>
-          </Link>
-        ))}
-      </div>
-    </main>
+              <p className="text-sm leading-relaxed text-black/55 [[data-theme=dark]_&]:text-white/60">
+                {post.data.description}
+              </p>
+              <div className="mt-1 flex items-center gap-2 text-sm text-black/45 [[data-theme=dark]_&]:text-white/50">
+                <span className="font-medium text-black/70 [[data-theme=dark]_&]:text-white/70">
+                  {post.data.author}
+                </span>
+                <span aria-hidden="true">·</span>
+                <time>{formatDate(post.data.date)}</time>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </main>
+      <Footer />
+    </div>
   );
 }

From 5f805fab32bd5acd7049f4dc48afff0344a384a5 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Thu, 11 Jun 2026 13:47:02 +0530
Subject: [PATCH 2/3] docs: blog cards in 2-column grid with featured support

- Restyle blog cards to match the project card design (openui border,
  radius, shadow, and surface variables, so they theme automatically)
- Lay cards out in a 2-column grid with equal row heights
- Add optional 'featured' boolean to the blog frontmatter schema;
  featured posts sort first and span the full grid width with a
  Featured chip
- Mark the OpenUI origin story post as featured

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/blog/page.tsx                        | 36 +++++++++++++------
 .../blog/stop-making-ai-write-json.mdx        |  1 +
 docs/source.config.ts                         |  1 +
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/docs/app/blog/page.tsx b/docs/app/blog/page.tsx
index f0e9cc4ef..946ca0d5b 100644
--- a/docs/app/blog/page.tsx
+++ b/docs/app/blog/page.tsx
@@ -11,31 +11,45 @@ function formatDate(date: string | Date) {
 }
 
 export default function BlogIndex() {
-  const posts = blog.getPages().sort((a, b) => {
+  const byDate = blog.getPages().sort((a, b) => {
     return new Date(b.data.date).getTime() - new Date(a.data.date).getTime();
   });
+  // Featured posts lead so their full-width cards sit on top of the grid
+  const posts = [
+    ...byDate.filter((post) => post.data.featured),
+    ...byDate.filter((post) => !post.data.featured),
+  ];
 
   return (
     <div className="flex min-h-screen flex-col bg-white [[data-theme=dark]_&]:bg-[#171717]">
-      <main className="mx-auto w-full max-w-[800px] flex-1 px-4 py-16 md:px-8">
-        <h1 className="mb-12 text-4xl font-bold text-neutral-900 [[data-theme=dark]_&]:text-white">
+      <main className="mx-auto w-full max-w-[960px] flex-1 px-4 py-16 md:px-8">
+        <h1 className="mb-12 text-4xl font-bold text-[color:var(--openui-text-neutral-primary)]">
           Blog
         </h1>
-        <div className="flex flex-col gap-5">
+        <div className="grid grid-cols-1 gap-5 md:auto-rows-fr md:grid-cols-2">
           {posts.map((post) => (
             <Link
               key={post.url}
               href={post.url}
-              className="group flex flex-col gap-3 rounded-2xl border border-black/[0.07] bg-white p-6 no-underline shadow-sm transition-colors hover:border-black/[0.16] [[data-theme=dark]_&]:border-white/10 [[data-theme=dark]_&]:bg-white/[0.04] [[data-theme=dark]_&]:shadow-none [[data-theme=dark]_&]:hover:border-white/25 [[data-theme=dark]_&]:hover:bg-white/[0.07]"
+              className={`group flex min-h-[12.5rem] flex-col rounded-[var(--openui-radius-4xl)] border border-[var(--openui-border-default)] bg-[var(--openui-foreground)] p-6 no-underline shadow-[var(--openui-shadow-m)] transition-[border-color,box-shadow] hover:border-[var(--openui-border-interactive-emphasis)] hover:shadow-[var(--openui-shadow-l)] ${
+                post.data.featured ? "md:col-span-2" : ""
+              }`}
             >
-              <h2 className="text-lg font-semibold text-neutral-900 [[data-theme=dark]_&]:text-white">
-                {post.data.title}
-              </h2>
-              <p className="text-sm leading-relaxed text-black/55 [[data-theme=dark]_&]:text-white/60">
+              <div className="flex items-start justify-between gap-3">
+                <h2 className="text-lg font-semibold leading-snug text-[color:var(--openui-text-neutral-primary)]">
+                  {post.data.title}
+                </h2>
+                {post.data.featured && (
+                  <span className="inline-flex h-[1.625rem] shrink-0 items-center rounded-lg bg-[color-mix(in_srgb,#7c3aed_14%,transparent)] px-2 text-xs font-semibold uppercase tracking-wide text-[#7c3aed] [[data-theme=dark]_&]:text-[#a78bfa]">
+                    Featured
+                  </span>
+                )}
+              </div>
+              <p className="mt-3 line-clamp-3 text-sm leading-relaxed text-[color:var(--openui-text-neutral-secondary)]">
                 {post.data.description}
               </p>
-              <div className="mt-1 flex items-center gap-2 text-sm text-black/45 [[data-theme=dark]_&]:text-white/50">
-                <span className="font-medium text-black/70 [[data-theme=dark]_&]:text-white/70">
+              <div className="mt-auto flex items-center gap-2 pt-5 text-sm text-[color:var(--openui-text-neutral-secondary)]">
+                <span className="font-medium text-[color:var(--openui-text-neutral-primary)]">
                   {post.data.author}
                 </span>
                 <span aria-hidden="true">·</span>
diff --git a/docs/content/blog/stop-making-ai-write-json.mdx b/docs/content/blog/stop-making-ai-write-json.mdx
index 440c388f2..8b42be4c4 100644
--- a/docs/content/blog/stop-making-ai-write-json.mdx
+++ b/docs/content/blog/stop-making-ai-write-json.mdx
@@ -3,6 +3,7 @@ title: "Stop making AI write JSON - Why we built OpenUI"
 description: "We shipped a JSON-based Generative UI SDK. When we tried to add interactivity, JSON fell apart. A full programming language was worse. This is the story behind why we built OpenUI."
 date: "2026-04-10"
 author: "Thesys Engineering Team"
+featured: true
 ---
 
 JSON is a data format pretending to be a language. When you need a UI that can fetch data, manage state, and respond to user input, that distinction stops being theoretical.
diff --git a/docs/source.config.ts b/docs/source.config.ts
index 6f5903f2b..e7795bbf2 100644
--- a/docs/source.config.ts
+++ b/docs/source.config.ts
@@ -24,6 +24,7 @@ export const blogPosts = defineCollections({
   schema: pageSchema.extend({
     author: z.string(),
     date: z.string().date().or(z.date()),
+    featured: z.boolean().optional(),
   }),
 });
 

From 55c197beff6a5315a0dc44fee0b04e530ca12dd5 Mon Sep 17 00:00:00 2001
From: Parikshit Deshmukh <ar.parikshit.d@gmail.com>
Date: Thu, 11 Jun 2026 13:55:57 +0530
Subject: [PATCH 3/3] docs: use dark mascot variant in footer when theme is
 dark

The footer's HandcraftedMascot already shipped a dark variant (the same
white-body art as the header logo) but isDark was hardcoded to false,
so dark mode rendered the light outline mascot invisibly against the
dark background. Resolve the theme via next-themes after mount so the
server and first client render stay consistent.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 docs/app/(home)/sections/Footer/Footer.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/app/(home)/sections/Footer/Footer.tsx b/docs/app/(home)/sections/Footer/Footer.tsx
index 727642e2a..0616c76ba 100644
--- a/docs/app/(home)/sections/Footer/Footer.tsx
+++ b/docs/app/(home)/sections/Footer/Footer.tsx
@@ -2,7 +2,8 @@
 import mascotDarkSvgPaths from "@/imports/svg-mascot-dark";
 import svgPaths from "@/imports/svg-urruvoh2be";
 import mascotSvgPaths from "@/imports/svg-xeurqn3j1r";
-import { useId } from "react";
+import { useTheme } from "next-themes";
+import { useEffect, useId, useState } from "react";
 import styles from "./Footer.module.css";
 
 // ---------------------------------------------------------------------------
@@ -193,7 +194,11 @@ function HandcraftedMascot({ isDark }: { isDark: boolean }) {
 // ---------------------------------------------------------------------------
 
 export function Footer() {
-  const isDark = false;
+  const { resolvedTheme } = useTheme();
+  // Resolve the theme only after mount so the server and first client render match
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  const isDark = mounted && resolvedTheme === "dark";
 
   return (
     <footer className={styles.footer}>