feat: rebuild website for styled-components v6.4

Complete site rebuild: createTheme-based OKLCH token system, sidebar-first
navigation with scroll-spy, dark mode (CSS-first with raw script in head),
blog section with dynamic MDX assembly, live code editors, 404 page,
DocSearch integration, responsive layout, and SSR registry.

Author: quantizor

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

@@ -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 });
   }
 }

app/blog/[slug]/page.tsx

@@ -0,0 +1,46 @@
+import { notFound } from 'next/navigation';
+import BlogPostPage from '@/components/BlogPostPage';
+import CelebrationEffect from '@/components/CelebrationEffect';
+import { getPosts, getPostBySlug } from '@/utils/blog.server';
+
+export async function generateStaticParams() {
+  const posts = await getPosts();
+  return posts.map(post => ({ slug: post.slug }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getPostBySlug(slug);
+  if (!post) return { title: 'Post Not Found' };
+
+  return {
+    title: post.title,
+    description: post.description ?? `${post.title} by ${post.author}`,
+  };
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getPostBySlug(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/blog/blog.css

@@ -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/layout.tsx

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

app/blog/page.tsx

@@ -0,0 +1,13 @@
+import BlogListPage from '@/components/BlogListPage';
+import { getPosts } from '@/utils/blog.server';
+
+export const metadata = {
+  title: 'Blog',
+  description: 'Articles and announcements from the styled-components team',
+};
+
+export default async function BlogPage() {
+  const posts = await getPosts();
+
+  return <BlogListPage posts={posts} />;
+}

app/docs.json

@@ -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/docs/advanced/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/api/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 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>
   );
 }

app/docs/basics/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 Motivation from '@/sections/basics/motivation.mdx';
 import Installation from '@/sections/basics/installation.mdx';
@@ -13,9 +14,14 @@ import AttachingAdditionalProps from '@/sections/basics/attaching-additional-pro
 import Animations from '@/sections/basics/animations.mdx';
 import ReactNative from '@/sections/basics/react-native.mdx';
 
+export const metadata: Metadata = {
+  title: 'The Basics',
+  description: 'Get Started with styled-components basics.',
+};
+
 export default function BasicsPage() {
   return (
-    <DocsLayout title="Basics" description="Get Started with styled-components basics.">
+    <DocsLayout title="The Basics">
       <Motivation />
       <Installation />
       <GettingStarted />
@@ -27,7 +33,7 @@ export default function BasicsPage() {
       <AttachingAdditionalProps />
       <Animations />
       <ReactNative />
-      <NextPage href="/docs/advanced" title="Advanced" />
+      <DocsPageNav current="basics" />
     </DocsLayout>
   );
 }

app/docs/faqs/page.tsx

@@ -1,4 +1,8 @@
+import { Metadata } from 'next';
+import styled from 'styled-components';
 import DocsLayout from '@/components/DocsLayout';
+import DocsPageNav from '@/components/DocsPageNav';
+import { theme, font } from '@/utils/theme';
 
 import MigrationV6 from '@/sections/faqs/migration-v6.mdx';
 import DynamicStylingPatterns from '@/sections/faqs/dynamic-styling-patterns.mdx';
@@ -18,26 +22,53 @@ import NPMLink from '@/sections/faqs/npm-link.mdx';
 import MissingNativeImport from '@/sections/faqs/missing-native-import.mdx';
 import MigrationV5 from '@/sections/faqs/migration-v5.mdx';
 
+export const metadata: Metadata = {
+  title: 'FAQs',
+  description: 'Commonly asked questions about styled-components',
+};
+
 export default function FAQsPage() {
   return (
-    <DocsLayout title="FAQs" description="Commonly asked questions about styled-components">
+    <DocsLayout title="FAQs">
+      <Category>Migration</Category>
       <MigrationV6 />
+      <MigrationV5 />
+
+      <Category>Styling Patterns</Category>
       <DynamicStylingPatterns />
       <WhenToUseAttrs />
       <DeclareComponentsInRenderMethod />
       <Nesting />
       <OverrideStyles />
       <OverrideInlineStyles />
+      <CSSFrameworks />
+
+      <Category>Troubleshooting</Category>
       <HTMLAttributeWarnings />
-      <BrowserSupport />
       <TwoDomClasses />
       <DuplicatedStyledComponents />
-      <CSSFrameworks />
-      <LibraryAuthors />
       <FlickeringText />
       <NPMLink />
       <MissingNativeImport />
-      <MigrationV5 />
+
+      <Category>General</Category>
+      <BrowserSupport />
+      <LibraryAuthors />
+      <DocsPageNav current="faqs" />
     </DocsLayout>
   );
 }
+
+const Category = styled.h2`
+  font-family: ${font.sans};
+  font-size: ${theme.text.xl};
+  font-weight: ${theme.fontWeight.semibold};
+  color: ${theme.color.text};
+  margin: ${theme.space[10]} 0 ${theme.space[2]};
+  padding-bottom: ${theme.space[2]};
+  border-bottom: 1px solid ${theme.color.border};
+
+  &:first-of-type {
+    margin-top: ${theme.space[6]};
+  }
+`;