danielheene · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026 · Oct 9, 2026
diff --git a/...ponents/ThemeToggleIconButton.stories.tsx → ...rybook/components/ThemeSwitch.stories.tsx b/...ponents/ThemeToggleIconButton.stories.tsx → ...rybook/components/ThemeSwitch.stories.tsx
@@ -2,11 +2,11 @@ import { useState } from 'react'
 
 import type { Meta, StoryObj } from '@storybook/nextjs-vite'
 
-import { ThemeToggleIconButton } from '@/components/ThemeToggle'
+import { ThemeSwitch } from '@/components/ThemeSwitch'
 
 const meta = {
-  title: 'ThemeToggleIconButton',
-  component: ThemeToggleIconButton,
+  title: 'ThemeSwitch',
+  component: ThemeSwitch,
   args: {
     theme: 'light',
   },
@@ -15,13 +15,13 @@ const meta = {
       control: {
         type: 'select',
       },
-      options: ['light', 'dark'],
+      options: ['light', 'system', 'dark'],
     },
     setTheme: {
       control: false,
     },
   },
-} satisfies Meta<typeof ThemeToggleIconButton>
+} satisfies Meta<typeof ThemeSwitch>
 
 export default meta
 
@@ -57,7 +57,7 @@ export const Interactive: Story = {
     },
   },
   render: () => {
-    const [theme, setTheme] = useState('light')
-    return <ThemeToggleIconButton theme={theme} setTheme={setTheme} />
+    const [theme, setTheme] = useState('system')
+    return <ThemeSwitch theme={theme} setTheme={setTheme} />
   },
 }
diff --git a/app/(frontend)/[slug]/page.tsx b/app/(frontend)/[slug]/page.tsx
@@ -8,10 +8,12 @@ import config from '@payload-config'
 import { getPayload } from 'payload'
 
 import { RenderBlocks } from '@/blocks/RenderBlocks'
+import { ArticleSidebar } from '@/components/ArticleSidebar'
 import { Headline } from '@/components/Headline'
 import { HeroMedia } from '@/components/HeroMedia'
 import { LivePreviewListener } from '@/components/LivePreviewListener'
 import { PageContainer } from '@/components/PageContainer'
+import { extractHeadings } from '@/lib/extractHeadings'
 import { extractSections } from '@/lib/extractSections'
 import { generateMeta } from '@/lib/generateMeta'
 import { placeholderParams } from '@/lib/placeholderParams'
@@ -59,6 +61,15 @@ export default async function Page({ params }: PageProps) {
   if (!page) notFound()
 
   const { title, layout, hero, content } = page
+
+  const legalHeadings =
+    layout === 'legal'
+      ? (content ?? []).flatMap((block) => {
+          const lexical = (block as { content?: unknown }).content
+          return extractHeadings(lexical)
+        })
+      : []
+
   return (
     <PageContainer layout={layout} sections={extractSections(content)}>
       <HeroMedia
@@ -79,7 +90,18 @@ export default async function Page({ params }: PageProps) {
           </div>
         )}
       </HeroMedia>
-      <RenderBlocks blocks={content} />
+      {layout === 'legal' ? (
+        <div className="container py-20">
+          <div className="mx-auto grid w-full max-w-7xl lg:grid-cols-12 gap-16 items-start">
+            <div className="min-w-0 lg:col-span-8 [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24 [&_h4]:scroll-mt-24">
+              <RenderBlocks blocks={content} />
+            </div>
+            <ArticleSidebar headings={legalHeadings} className="lg:col-span-4 w-auto" />
+          </div>
+        </div>
+      ) : (
+        <RenderBlocks blocks={content} />
+      )}
 
       {draft && <LivePreviewListener />}
     </PageContainer>

diff --git a/app/(frontend)/blog/_shared/BlogListPage.tsx b/app/(frontend)/blog/_shared/BlogListPage.tsx
@@ -10,8 +10,6 @@ import { cn } from 'tailwind-variants'
 
 import { Button } from '@/components/Button'
 import { DuoTone } from '@/components/DuoTone'
-import { Headline } from '@/components/Headline'
-import { HeroMedia } from '@/components/HeroMedia'
 import { SHADER_PRESET_MAP } from '@/components/HeroMedia/shaderPresets'
 import { toSlideItems } from '@/components/HeroMedia/toSlideItems'
 import { ImageMedia } from '@/components/ImageMedia'
@@ -260,7 +258,11 @@ const PostsGrid = async ({
 
   return (
     <Reveal className={POSTS_GRID_CLASS}>
-      {totalDocs > 1 && <SortControl basePath={basePath} sort={sort} />}
+      {totalDocs > 1 ? (
+        <SortControl basePath={basePath} sort={sort} />
+      ) : (
+        <div className={cn(['col-span-full h-9'])} aria-hidden />
+      )}
       {posts.map((post) => (
         <PostCard key={post.id} post={post as BlogPostData} />
       ))}
@@ -296,61 +298,27 @@ export interface BlogListPageProps {
  */
 export const BlogListPage = async ({ topic, searchParams }: BlogListPageProps) => {
   const basePath = topic ? `${BLOG_PATH}/${topic.slug}` : BLOG_PATH
-  const hasTopicHero = toSlideItems(topic?.hero?.slides, topic?.title ?? '').length > 0
-
   return (
     <PageContainer>
-      {hasTopicHero && (
-        <HeroMedia
-          className="border-b-2 border-b-primary"
-          fallbackAlt={topic?.title}
-          slides={topic?.hero?.slides}
-        >
-          <div className="pt-40 pb-20">
-            <div className="container">
-              <Headline
-                variant="page-title"
-                className="text-balance text-foreground textshadow-lg shadow-primary/75"
-              >
-                {topic?.title}
-              </Headline>
-            </div>
-          </div>
-        </HeroMedia>
-      )}
-      <section className={cn(['py-32 w-full'])}>
+      <section className={cn(['w-full py-32'])}>
         <div className={cn(['container'])}>
-          <div className={cn(['relative mx-auto flex max-w-7xl flex-col gap-20 lg:flex-row'])}>
+          <div className={cn(['mx-auto grid w-full max-w-7xl gap-16 lg:grid-cols-12'])}>
             <header
               className={cn([
-                'top-10 flex h-fit flex-col items-center gap-5 text-center lg:sticky lg:max-w-80 lg:items-start lg:gap-8 lg:text-left',
+                'top-10 flex h-fit flex-col items-center gap-5 text-center lg:col-span-4 lg:sticky lg:items-start lg:gap-8 lg:text-left',
               ])}
             >
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width={24}
-                height={24}
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth={1}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                className={cn(['lucide lucide-file-text h-full w-14'])}
-                aria-hidden="true"
-              >
-                <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
-                <path d="M14 2v5a1 1 0 0 0 1 1h5" />
-                <path d="M10 9H8" />
-                <path d="M16 13H8" />
-                <path d="M16 17H8" />
-              </svg>
-              <h1 className={cn(['text-4xl font-extrabold lg:text-5xl'])}>
+              <h1 className={cn(['text-4xl font-extrabold lg:text-5xl font-mono'])}>
                 {topic ? topic.title : 'All Posts'}
               </h1>
-              <p className={cn(['text-muted-foreground lg:text-xl'])}>
-                Blog posts are a great way to share your knowledge and expertise with the world.
-              </p>
+              {topic?.content && !isEmptyValue(topic.content) && (
+                <RichText
+                  data={topic.content}
+                  enableGutter={false}
+                  enableProse={false}
+                  className={cn(['text-muted-foreground lg:text-xl'])}
+                />
+              )}
               <div
                 data-orientation="horizontal"
                 role="none"
@@ -365,7 +333,7 @@ export const BlogListPage = async ({ topic, searchParams }: BlogListPageProps) =
                 </Suspense>
               </nav>
             </header>
-            <div className={cn(['flex-1'])}>
+            <div className={cn(['lg:col-span-8'])}>
               <Suspense
                 fallback={
                   <div className={POSTS_GRID_CLASS}>

diff --git a/app/(frontend)/blog/post/[slug]/page.tsx b/app/(frontend)/blog/post/[slug]/page.tsx
@@ -13,7 +13,9 @@ import { format } from 'date-fns'
 
 import { ArticleSidebar } from '@/components/ArticleSidebar'
 import { HeroMedia } from '@/components/HeroMedia'
+import { CMSLink } from '@/components/Link'
 import { RichText } from '@/components/RichText'
+import type { LinkFieldDataLean } from '@/fields/Link/lib/resolveLinkTarget'
 import { extractHeadings } from '@/lib/extractHeadings'
 import { generateMeta } from '@/lib/generateMeta'
 import { reduceDataToBilingualLanguage } from '@/lib/i18n'
@@ -64,7 +66,7 @@ export default async function Page({ params: paramsPromise }: PageProps) {
   })
   if (!post) return notFound()
 
-  const { title, content, hero, createdAt, updatedAt, topics } = post
+  const { title, content, hero, createdAt, updatedAt, topics, links } = post
   const baseUrl = process.env.SERVER_URL || 'https://danielheene.de'
   const postUrl = `${baseUrl}/posts/${slug}`
 
@@ -161,7 +163,7 @@ export default async function Page({ params: paramsPromise }: PageProps) {
                   <div className="flex items-center justify-center gap-2.5 font-mono text-sm text-foreground/60">
                     <time dateTime={createdAt}>{format(createdAt, 'MMMM d, yyyy')}</time>
                   </div>
-                  <h1 className="text-[2.5rem] leading-[1.1] font-semibold text-balance md:text-6xl lg:text-7xl">
+                  <h1 className="text-[2.5rem] leading-[1.1] font-semibold font-mono text-balance md:text-6xl lg:text-7xl">
                     {title}
                   </h1>
                   {post.meta?.description && (
@@ -189,9 +191,9 @@ export default async function Page({ params: paramsPromise }: PageProps) {
           </HeroMedia>
 
           <div className="container pt-20">
-            <div className="mx-auto flex w-full max-w-5xl items-start justify-between gap-16">
+            <div className="mx-auto grid w-full max-w-7xl lg:grid-cols-12 gap-16 items-start">
               {/* scroll-mt keeps TOC anchor targets clear of the fixed header */}
-              <article className="w-full min-w-0 max-w-[46rem] [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24 [&_h4]:scroll-mt-24">
+              <article className="min-w-0 lg:col-span-8 [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24 [&_h4]:scroll-mt-24">
                 {content ? (
                   // RichText is a Client Component that calls randomUUID(), which
                   // Cache Components requires to sit behind a Suspense boundary
@@ -207,7 +209,32 @@ export default async function Page({ params: paramsPromise }: PageProps) {
                 )}
               </article>
 
-              <ArticleSidebar headings={headings} />
+              <ArticleSidebar
+                headings={headings}
+                className="lg:col-span-4 w-auto"
+                sections={
+                  links && links.length > 0
+                    ? [
+                        {
+                          title: 'Links',
+                          children: (
+                            <ul className="flex flex-col gap-1">
+                              {links.map(({ id, link }) => (
+                                <li key={id}>
+                                  <CMSLink
+                                    {...(link as LinkFieldDataLean)}
+                                    className="text-muted-foreground no-underline transition-colors hover:text-foreground hover:underline"
+                                    variant="link"
+                                  />
+                                </li>
+                              ))}
+                            </ul>
+                          ),
+                        },
+                      ]
+                    : []
+                }
+              />
             </div>
           </div>
         </section>

diff --git a/bun.lock b/bun.lock
diff --git a/next.config.ts b/next.config.ts
@@ -127,7 +127,7 @@ export default async (phase, { defaultConfig }) => {
 
     experimental: {
       appNewScrollHandler: true,
-      turbopackServerFastRefresh: true,
+      turbopackServerFastRefresh: false,
       serverActions: {
         bodySizeLimit: '10mb',
       },

diff --git a/package.json b/package.json
@@ -98,7 +98,6 @@
     "@react-pdf/types": "^2.14.0",
     "@sentry/nextjs": "^11.0.0",
     "@sindresorhus/slugify": "^3.0.1",
-    "@tailwindcss/typography": "^0.5.20",
     "ai": "^7.0.107",
     "date-fns": "^4.4.0",
     "dedent": "^1.7.2",

diff --git a/src/blocks/ResumeExperienceBlock/Renderer/JobEntry.tsx b/src/blocks/ResumeExperienceBlock/Renderer/JobEntry.tsx