feat: rebuild website for styled-components v6.4

Ships a full site overhaul on top of Next.js App Router with a sidebar-
driven information architecture, a new blog section, a v6.4
documentation pass, and a redesigned homepage.

- Design system built on OKLCH tokens via createTheme, dark/light/auto
  modes with pre-hydration class sync, next/font for display/body/mono.
- Homepage: two-column hero with a live editor, proof badges, company
  logos, CSS-bloom celebration effect for the v6 decade milestone.
- Navigation: persistent sidebar with DocSearch, scroll-spy docs index,
  redesigned navbar, mobile hamburger.
- Blog: MDX posts indexed via posts.json, year-as-poster layout, byline
  and colophon split, blog asset pipeline.
- Docs: v6.4 refresh covering createTheme, ThemeProvider semantics,
  @Property registration, ServerStyleSheet/RSC plugin guidance; ships
  public/llms.txt as the machine cheatsheet.
- Code rendering: unified HighlightedCode with shared prismLanguageSC
  grammar extensions and a logo-derived syntax palette.
- Logo: CSS 3D Platonic solid cycling through five shapes with
  per-face OKLCH coloring.
- Infrastructure: styled-components SSR registry, scroll-margin heading
  anchors, sitemap/robots, error/not-found boundaries, componentized
  live-code scope.

Author: quantizor

.playwright-mcp/page-2026-04-09T01-05-48-242Z.yml

@@ -1,9 +1,7 @@
-import axios from 'axios';
 import { NextRequest, NextResponse } from 'next/server';
 
 const proxyMap: Record<string, string> = {
   'npm-v.svg': 'https://img.shields.io/npm/v/styled-components.svg',
-  'size.svg': 'https://img.shields.io/badge/gzip%20size-12.4%20kB-brightgreen.svg',
   'downloads.svg': 'https://img.shields.io/npm/dm/styled-components.svg?maxAge=3600',
   'stars.svg':
     'https://img.shields.io/github/stars/styled-components/styled-components.svg?style=social&label=Star&maxAge=3600',
@@ -23,11 +21,9 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
   }
 
   try {
-    const { data, headers } = await axios.get(remoteUrl, {
-      responseType: 'arraybuffer',
-    });
-
-    const contentType = headers['content-type'];
+    const resp = await fetch(remoteUrl);
+    const data = await resp.arrayBuffer();
+    const contentType = resp.headers.get('content-type') || 'application/octet-stream';
 
     return new NextResponse(data, {
       status: 200,
@@ -36,7 +32,7 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
         'cache-control': 's-maxage=3600,stale-while-revalidate',
       },
     });
-  } catch (error) {
+  } catch {
     return NextResponse.json({ error: 'Error fetching remote asset' }, { status: 500 });
   }
 }

.playwright-mcp/page-2026-04-09T01-06-15-833Z.png

@@ -0,0 +1,48 @@
+import { notFound } from 'next/navigation';
+import BlogPostPage from '@/components/BlogPostPage';
+import CelebrationEffect from '@/components/CelebrationEffect';
+import posts from '@/sections/blog/posts.json';
+import { postBySlug } from '@/utils/blog';
+
+export function generateStaticParams() {
+  return posts.map(post => ({ slug: post.slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = postBySlug.get(slug);
+  if (!post) return { title: 'Post Not Found' };
+
+  const mod = await import(`@/sections/blog/${post.date}-${post.slug}.mdx`);
+
+  return {
+    title: mod.meta?.title ?? post.title,
+    description: mod.meta?.description ?? `${post.title} by ${post.author}`,
+  };
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = postBySlug.get(slug);
+
+  if (!post) {
+    notFound();
+  }
+
+  let MdxContent: React.ComponentType;
+  try {
+    const mod = await import(`@/sections/blog/${post.date}-${post.slug}.mdx`);
+    MdxContent = mod.default;
+  } catch {
+    notFound();
+  }
+
+  return (
+    <>
+      {slug === 'celebrating-a-decade-of-styled-components' && <CelebrationEffect />}
+      <BlogPostPage post={post}>
+        <MdxContent />
+      </BlogPostPage>
+    </>
+  );
+}

app/api/proxy/[asset]/route.ts

@@ -0,0 +1,18 @@
+/* Route-level overrides for blog pages.
+   Static CSS to avoid the createGlobalStyle SSR -> client hydration flash. */
+
+[data-e2e-id='content'] img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 4px;
+}
+
+/* Magazine-style section break: short warm rule, generous air. */
+[data-e2e-id='content'] hr {
+  border: 0;
+  margin: 3.5rem auto;
+  width: 4rem;
+  height: 2px;
+  background: var(--sc-color-blogAccent);
+  opacity: 0.6;
+}

app/blog/[slug]/page.tsx

@@ -0,0 +1,5 @@
+import './blog.css';
+
+export default function BlogLayout({ children }: { children: React.ReactNode }) {
+  return children;
+}

app/blog/blog.css

@@ -0,0 +1,10 @@
+import BlogListPage from '@/components/BlogListPage';
+
+export const metadata = {
+  title: 'Blog',
+  description: 'Articles and announcements from the styled-components team',
+};
+
+export default function BlogPage() {
+  return <BlogListPage />;
+}

app/blog/layout.tsx

@@ -1,7 +1,7 @@
 {
   "pages": [
     {
-      "title": "Basics",
+      "title": "The Basics",
       "pathname": "basics",
       "sections": [
         {
@@ -134,57 +134,23 @@
       "title": "FAQs",
       "pathname": "faqs",
       "sections": [
-        {
-          "title": "What do I need to do to migrate to v6?"
-        },
-        {
-          "title": "How should I handle dynamic styles?"
-        },
-        {
-          "title": "When to use attrs?"
-        },
-        {
-          "title": "Why should I avoid declaring styled components in the render method?"
-        },
-        {
-          "title": "Can I nest rules?"
-        },
-        {
-          "title": "How can I override styles with higher specificity?"
-        },
-        {
-          "title": "How can I override inline styles?"
-        },
-        {
-          "title": "Why am I getting HTML attribute warnings?"
-        },
-        {
-          "title": "Which browsers are supported?"
-        },
-        {
-          "title": "Why do my DOM nodes have two classes?"
-        },
-        {
-          "title": "Why am I getting a warning about several instances of module on the page?"
-        },
-        {
-          "title": "Can I use css frameworks?"
-        },
-        {
-          "title": "I am a library author. Should I bundle styled-components with my library?"
-        },
-        {
-          "title": "How do I fix flickering text after server side rendering?"
-        },
-        {
-          "title": "How can I fix issues when using npm link or yarn link?"
-        },
-        {
-          "title": "Missing Declarations for styled-components/native?"
-        },
-        {
-          "title": "What do I need to do to migrate to v5?"
-        }
+        { "title": "What do I need to do to migrate to v6?" },
+        { "title": "What do I need to do to migrate to v5?" },
+        { "title": "How should I handle dynamic styles?" },
+        { "title": "When to use attrs?" },
+        { "title": "Why should I avoid declaring styled components in the render method?" },
+        { "title": "Can I nest rules?" },
+        { "title": "How can I override styles with higher specificity?" },
+        { "title": "How can I override inline styles?" },
+        { "title": "Can I use css frameworks?" },
+        { "title": "Why am I getting HTML attribute warnings?" },
+        { "title": "Why do my DOM nodes have two classes?" },
+        { "title": "Why am I getting a warning about several instances of module on the page?" },
+        { "title": "How do I fix flickering text after server side rendering?" },
+        { "title": "How can I fix issues when using npm link or yarn link?" },
+        { "title": "Missing Declarations for styled-components/native?" },
+        { "title": "Which browsers are supported?" },
+        { "title": "I am a library author. Should I bundle styled-components with my library?" }
       ]
     }
   ]

app/blog/page.tsx

@@ -1,5 +1,6 @@
+import { Metadata } from 'next';
 import DocsLayout from '@/components/DocsLayout';
-import NextPage from '@/components/NextPage';
+import DocsPageNav from '@/components/DocsPageNav';
 
 import Theming from '@/sections/advanced/theming.mdx';
 import ServerSideRendering from '@/sections/advanced/server-side-rendering.mdx';
@@ -12,12 +13,14 @@ import Refs from '@/sections/advanced/refs.mdx';
 import Security from '@/sections/advanced/security.mdx';
 import TaggedTemplateLiterals from '@/sections/advanced/tagged-template-literals.mdx';
 
+export const metadata: Metadata = {
+  title: 'Advanced Usage',
+  description: 'Theming, Server-Side Rendering, Performance, Existing CSS, Style Objects, Accessibility and more',
+};
+
 export default function AdvancedPage() {
   return (
-    <DocsLayout
-      title="Advanced Usage"
-      description="Theming, Server-Side Rendering, Performance, Existing CSS, Style Objects, Accessibility and more"
-    >
+    <DocsLayout title="Advanced Usage">
       <Theming />
       <ServerSideRendering />
       <Performance />
@@ -28,7 +31,7 @@ export default function AdvancedPage() {
       <Refs />
       <Security />
       <TaggedTemplateLiterals />
-      <NextPage href="/docs/api" title="API Reference" />
+      <DocsPageNav current="advanced" />
     </DocsLayout>
   );
 }

app/docs.json

@@ -1,5 +1,6 @@
+import { Metadata } from 'next';
 import DocsLayout from '@/components/DocsLayout';
-import NextPage from '@/components/NextPage';
+import DocsPageNav from '@/components/DocsPageNav';
 
 import Primary from '@/sections/api/primary/index.mdx';
 import Helpers from '@/sections/api/helpers/index.mdx';
@@ -8,16 +9,21 @@ import TypeScript from '@/sections/api/typescript.mdx';
 import OldAPIs from '@/sections/api/old/index.mdx';
 import TestUtilities from '@/sections/api/test-utils/index.mdx';
 
+export const metadata: Metadata = {
+  title: 'API Reference',
+  description: 'API Reference of styled-components',
+};
+
 export default function APIPage() {
   return (
-    <DocsLayout title="API Reference" description="API Reference of styled-components">
+    <DocsLayout title="API Reference">
       <Primary />
       <Helpers />
       <TestUtilities />
       <SupportedCSS />
       <TypeScript />
       <OldAPIs />
-      <NextPage href="/docs/tooling" title="Tooling" />
+      <DocsPageNav current="api" />
     </DocsLayout>
   );
 }