www: render blog posts on server (#45461)

Render blog posts on server so they are available in initial HTML
response.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
  * New collapsible sections for blog content
  * Server-side MDX compilation for blog posts
  * Improved TOC extraction producing both structured JSON and markdown

* **Refactor**
* Blog rendering converted to a server-rendered flow with unified MDX
components
  * Tag handling normalized for related-post matching

* **Bug Fixes**
* Consistent image/self-closing tag normalization and corrected TOC
indentation
  * Errors are now surfaced instead of being swallowed
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

apps/www/app/blog/[slug]/page.tsx

@@ -105,14 +105,17 @@ export default async function BlogPostPage({ params }: { params: Promise<Params>
   const { isEnabled: isDraft } = await draftMode()
 
   const matter = (await import('gray-matter')).default
-  const { mdxSerialize } = await import('lib/mdx/mdxSerialize')
 
   try {
     const postContent = await getPostdata(slug, '_blog')
     const parsedContent = matter(postContent) as unknown as MatterReturn
     const content = parsedContent.content
     const tocDepth = (parsedContent.data as any)?.toc_depth ?? 3
-    const mdxSource = await mdxSerialize(content, { tocDepth })
+    const { preprocessMdxWithCodeTabs } = await import('~/components/CodeTabs')
+    const { addSelfClosingTags } = await import('lib/mdx/addSelfClosingTags')
+    const { extractToc } = await import('lib/mdx/extractToc')
+    const preprocessed = await preprocessMdxWithCodeTabs(addSelfClosingTags(content))
+    const tocResult = await extractToc(preprocessed, tocDepth)
     const { generateReadingTime } = await import('lib/helpers')
     const blogPost = {
       ...parsedContent.data,
@@ -129,12 +132,15 @@ export default async function BlogPostPage({ params }: { params: Promise<Params>
     const currentIndex = allPosts.findIndex((post) => post.slug === slug)
     const nextPost = currentIndex === allPosts.length - 1 ? null : allPosts[currentIndex + 1]
     const prevPost = currentIndex === 0 ? null : allPosts[currentIndex - 1]
-    const tocResult = (mdxSource as any).scope?.toc || { content: '' }
-    const processedContent = tocResult.content
+    const frontmatterTags = (parsedContent.data as { tags?: Array<string | { name: string }> })
+      ?.tags
+    const tagNames = Array.isArray(frontmatterTags)
+      ? frontmatterTags.map((t) => (typeof t === 'string' ? t : t?.name)).filter(Boolean)
+      : undefined
     const relatedPosts = getSortedPosts({
       directory: '_blog',
       limit: 3,
-      tags: (mdxSource as { scope: { tags?: string[] } }).scope.tags,
+      tags: tagNames,
       currentPostSlug: slug,
     }) as unknown as (BlogData & PostReturnType)[]
 
@@ -145,11 +151,8 @@ export default async function BlogPostPage({ params }: { params: Promise<Params>
       blog: {
         ...(blogPost as any),
         slug,
-        content: mdxSource,
-        toc: {
-          ...tocResult,
-          content: processedContent,
-        },
+        content: preprocessed,
+        toc: tocResult,
       } as any,
       isDraftMode: isDraft,
     }
@@ -177,5 +180,7 @@ export default async function BlogPostPage({ params }: { params: Promise<Params>
         <BlogPostClient {...props} />
       </>
     )
-  } catch {}
+  } catch (err) {
+    throw err
+  }
 }

apps/www/components/Blog/BlogCollapsible.tsx

@@ -0,0 +1,35 @@
+'use client'
+
+import { Triangle } from 'lucide-react'
+import type { PropsWithChildren } from 'react'
+import { Collapsible_Shadcn_, CollapsibleContent_Shadcn_, CollapsibleTrigger_Shadcn_ } from 'ui'
+
+type BlogCollapsibleProps = PropsWithChildren<{
+  title: string
+  containerClassName?: string
+}>
+
+const BlogCollapsible = ({ title, containerClassName, ...props }: BlogCollapsibleProps) => {
+  return (
+    <Collapsible_Shadcn_ className={containerClassName}>
+      <CollapsibleTrigger_Shadcn_
+        className="
+        data-[state=open]:text
+        hover:text-foreground-light
+        flex items-center gap-3
+        [&>svg]:fill-current
+        [&>svg]:rotate-90
+        [&>svg]:transition-transform
+        [&>svg]:data-[state='open']:rotate-180
+        [&>svg]:data-[state='open']:text
+        "
+      >
+        <Triangle size={10} />
+        <span>{title}</span>
+      </CollapsibleTrigger_Shadcn_>
+      <CollapsibleContent_Shadcn_ {...props} />
+    </Collapsible_Shadcn_>
+  )
+}
+
+export default BlogCollapsible

apps/www/components/Blog/BlogPostRenderer.tsx

@@ -1,9 +1,288 @@
-'use client'
+import dayjs from 'dayjs'
+import { ChevronLeft } from 'lucide-react'
+import Image from 'next/image'
+import Link from 'next/link'
+import ReactMarkdown from 'react-markdown'
+import type { PostReturnType, ProcessedBlogData, StaticAuthor, Tag } from 'types/post'
+import { Badge } from 'ui'
 
-import dynamic from 'next/dynamic'
+import DraftModeBanner from '@/components/Blog/DraftModeBanner'
+import ShareArticleActions from '@/components/Blog/ShareArticleActions'
+import CTABanner from '@/components/CTABanner'
+import BlogLinks from '@/components/LaunchWeek/7/BlogLinks'
+import LW11Summary from '@/components/LaunchWeek/11/LW11Summary'
+import LW12Summary from '@/components/LaunchWeek/12/LWSummary'
+import LW13Summary from '@/components/LaunchWeek/13/Releases/LWSummary'
+import LW14Summary from '@/components/LaunchWeek/14/Releases/LWSummary'
+import LW15Summary from '@/components/LaunchWeek/15/LWSummary'
+import LWXSummary from '@/components/LaunchWeek/X/LWXSummary'
+import DefaultLayout from '@/components/Layouts/Default'
+import { BLOG_POST_HERO_IMAGE_SIZES, getBlogThumbnailImage } from '@/lib/blog-images'
+import { compileBlogMdx } from '@/lib/mdx/compileBlogMdx'
+import mdxComponents from '@/lib/mdx/mdxComponents'
 
-const BlogPostRenderer = dynamic(() => import('./BlogPostRendererClient'), {
-  ssr: false,
-})
+type NextCardProps = {
+  post: { path: string; title: string; formattedDate: string }
+  label: string
+  className?: string
+}
+
+const NextCard = (props: NextCardProps) => {
+  const { post, label, className } = props
+
+  return (
+    <Link href={`${post.path}`} as={`${post.path}`}>
+      <div className={className ?? ''}>
+        <div className="hover:bg-control cursor-pointer rounded-sm border p-6 transition">
+          <div className="space-y-4">
+            <div>
+              <p className="text-foreground-lighter text-sm">{label}</p>
+            </div>
+            <div className="flex flex-col gap-2">
+              {'title' in post && (
+                <h4 className="text-foreground text-lg text-balance">
+                  {(post as { title?: string }).title}
+                </h4>
+              )}
+              {'formattedDate' in post && (
+                <p className="small">{(post as { formattedDate?: string }).formattedDate}</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </Link>
+  )
+}
+
+const BlogPostRenderer = async ({
+  blog,
+  blogMetaData,
+  isDraftMode,
+  prevPost,
+  nextPost,
+  authors,
+}: {
+  blog: ProcessedBlogData
+  blogMetaData: ProcessedBlogData
+  isDraftMode: boolean
+  prevPost?: PostReturnType | null
+  nextPost?: PostReturnType | null
+  authors: Array<StaticAuthor>
+}) => {
+  const mdxRendered = await compileBlogMdx(blog.content as string, mdxComponents('blog'))
+
+  const isLaunchWeek7 = blogMetaData.launchweek === '7'
+  const isLaunchWeekX = blogMetaData.launchweek?.toString().toLocaleLowerCase() === 'x'
+  const isGAWeek = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '11'
+  const isLaunchWeek12 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '12'
+  const isLaunchWeek13 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '13'
+  const isLaunchWeek14 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '14'
+  const isLaunchWeek15 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '15'
+
+  const toc = blogMetaData.toc && (
+    <div>
+      <p className="text-foreground mb-4">On this page</p>
+      <div className="prose-toc">
+        {blogMetaData.toc && (
+          <ReactMarkdown>
+            {typeof blogMetaData.toc === 'string'
+              ? (blogMetaData.toc as string)
+              : (blogMetaData.toc as { content: string }).content}
+          </ReactMarkdown>
+        )}
+      </div>
+    </div>
+  )
+
+  const imageUrl = getBlogThumbnailImage(blogMetaData, {
+    fallbackToPlaceholder: false,
+  })
+
+  return (
+    <>
+      {isDraftMode && <DraftModeBanner />}
+      <DefaultLayout className="overflow-x-hidden">
+        <div
+          className="
+            container mx-auto px-4 py-4 md:py-8 xl:py-10 sm:px-16
+            xl:px-20
+          "
+        >
+          <div className="grid grid-cols-12 gap-4">
+            <div className="hidden col-span-12 xl:block lg:col-span-2">
+              {/* Back button */}
+              <Link
+                href="/blog"
+                className="text-foreground-lighter hover:text-foreground flex cursor-pointer items-center text-sm transition"
+              >
+                <ChevronLeft style={{ padding: 0 }} />
+                Back
+              </Link>
+            </div>
+            <div className="col-span-12 lg:col-span-12 xl:col-span-10">
+              {/* Title and description */}
+              <div className="mb-6 lg:mb-10 max-w-5xl space-y-8">
+                <div className="space-y-4">
+                  <Link href="/blog" className="text-brand hidden lg:inline-flex items-center">
+                    Blog
+                  </Link>
+                  <h1 className="text-2xl sm:text-4xl">{blogMetaData.title}</h1>
+                  <div className="text-light flex space-x-3 text-sm">
+                    <p>{dayjs(blogMetaData.date).format('DD MMM YYYY')}</p>
+                    <p>·</p>
+                    <p>{(blogMetaData as any).readingTime}</p>
+                  </div>
+                  {authors.length > 0 && (
+                    <div className="flex justify-between">
+                      <div className="flex-1 flex flex-wrap gap-3 pt-2 md:gap-0 lg:gap-3">
+                        {authors.map((author, i: number) => {
+                          const authorImageUrl = author.author_image_url
+
+                          const authorId =
+                            (author as any).author_id ||
+                            (author as any).username ||
+                            author.author.toLowerCase().replace(/\s+/g, '_')
+
+                          return (
+                            <div className="mr-4 w-max" key={`author-${i}-${author.author}`}>
+                              <Link href={`/blog/authors/${authorId}`} className="cursor-pointer">
+                                <div className="flex items-center gap-3">
+                                  {authorImageUrl && (
+                                    <div className="w-10">
+                                      <Image
+                                        src={authorImageUrl}
+                                        className="border-default rounded-full border w-full max-h-10 aspect-square object-cover"
+                                        alt={`${author.author} avatar`}
+                                        width={40}
+                                        height={40}
+                                      />
+                                    </div>
+                                  )}
+                                  <div className="flex flex-col">
+                                    <span className="text-foreground mb-0 text-sm">
+                                      {author.author}
+                                    </span>
+                                    <span className="text-foreground-lighter mb-0 text-xs">
+                                      {author.position}
+                                    </span>
+                                  </div>
+                                </div>
+                              </Link>
+                            </div>
+                          )
+                        })}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              </div>
+              <div className="grid grid-cols-12 lg:gap-16 xl:gap-8">
+                {/* Content */}
+                <div className="col-span-12 lg:col-span-7 xl:col-span-7">
+                  <article>
+                    <div className={['prose prose-docs'].join(' ')}>
+                      {blogMetaData.youtubeHero ? (
+                        <iframe
+                          title="YouTube video player"
+                          className="w-full"
+                          width="700"
+                          height="350"
+                          src={blogMetaData.youtubeHero}
+                          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                          allowFullScreen={true}
+                        />
+                      ) : (
+                        imageUrl && (
+                          <div className="hidden md:block relative mb-8 w-full aspect-[1.91/1] overflow-auto rounded-lg border">
+                            <Image
+                              src={imageUrl}
+                              alt={blogMetaData.title}
+                              fill
+                              sizes={BLOG_POST_HERO_IMAGE_SIZES}
+                              className="object-cover m-0"
+                            />
+                          </div>
+                        )
+                      )}
+                      {mdxRendered}
+                    </div>
+                  </article>
+                  {isLaunchWeek7 && <BlogLinks />}
+                  {isLaunchWeekX && <LWXSummary />}
+                  {isGAWeek && <LW11Summary />}
+                  {isLaunchWeek12 && <LW12Summary />}
+                  {isLaunchWeek13 && <LW13Summary />}
+                  {isLaunchWeek14 && <LW14Summary />}
+                  {isLaunchWeek15 && <LW15Summary />}
+                  <div className="block lg:hidden py-8">
+                    <div className="text-foreground-lighter text-sm">Share this article</div>
+                    <ShareArticleActions title={blogMetaData.title} slug={blogMetaData.slug} />
+                  </div>
+                  <div className="grid gap-8 py-8 lg:grid-cols-1">
+                    <div>
+                      {prevPost && (
+                        <NextCard
+                          post={
+                            prevPost as unknown as {
+                              path: string
+                              title: string
+                              formattedDate: string
+                            }
+                          }
+                          label="Previous post"
+                        />
+                      )}
+                    </div>
+                    <div>
+                      {nextPost && (
+                        <NextCard
+                          post={
+                            nextPost as unknown as {
+                              path: string
+                              title: string
+                              formattedDate: string
+                            }
+                          }
+                          label="Next post"
+                          className="text-right"
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+                {/* Sidebar */}
+                <div className="relative col-span-12 space-y-8 lg:col-span-5 xl:col-span-3 xl:col-start-9">
+                  <div className="space-y-6">
+                    <div className="hidden lg:block">
+                      <div className="flex flex-wrap gap-2">
+                        {(blogMetaData.tags as Array<Tag>)?.map((tag) => {
+                          const tagName = typeof tag === 'string' ? tag : tag.name
+                          const tagId = typeof tag === 'string' ? tag : tag.id.toString()
+                          return (
+                            <Link href={`/blog/tags/${tagName}`} key={`category-badge-${tagId}`}>
+                              <Badge>{tagName}</Badge>
+                            </Link>
+                          )
+                        })}
+                      </div>
+                    </div>
+                    <div className="hidden lg:block">{toc}</div>
+                    <div className="hidden lg:block">
+                      <div className="text-foreground text-sm">Share this article</div>
+                      <ShareArticleActions title={blogMetaData.title} slug={blogMetaData.slug} />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <CTABanner />
+      </DefaultLayout>
+    </>
+  )
+}
 
 export default BlogPostRenderer

apps/www/components/Blog/BlogPostRendererClient.tsx

@@ -1,333 +0,0 @@
-'use client'
-
-import dayjs from 'dayjs'
-import { ChevronLeft } from 'lucide-react'
-import { MDXRemote } from 'next-mdx-remote'
-import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
-import dynamic from 'next/dynamic'
-import Image from 'next/image'
-import Link from 'next/link'
-import { useMemo, useState } from 'react'
-import type { ComponentType } from 'react'
-import type { PostReturnType, ProcessedBlogData, StaticAuthor, Tag } from 'types/post'
-import { Badge } from 'ui'
-
-import { BLOG_POST_HERO_IMAGE_SIZES, getBlogThumbnailImage } from '@/lib/blog-images'
-import mdxComponents from '@/lib/mdx/mdxComponents'
-
-const ShareArticleActions = dynamic(() => import('@/components/Blog/ShareArticleActions'))
-const CTABanner = dynamic(() => import('@/components/CTABanner'))
-const LW11Summary = dynamic(() => import('@/components/LaunchWeek/11/LW11Summary'))
-const LW12Summary = dynamic(() => import('@/components/LaunchWeek/12/LWSummary'))
-const LW13Summary = dynamic(() => import('@/components/LaunchWeek/13/Releases/LWSummary'))
-const LW14Summary = dynamic(() => import('@/components/LaunchWeek/14/Releases/LWSummary'))
-const LW15Summary = dynamic(() => import('@/components/LaunchWeek/15/LWSummary'))
-const BlogLinks = dynamic(() => import('@/components/LaunchWeek/7/BlogLinks'))
-const LWXSummary = dynamic(() => import('@/components/LaunchWeek/X/LWXSummary'))
-const DefaultLayout = dynamic(() => import('@/components/Layouts/Default'))
-const DraftModeBanner = dynamic(() => import('@/components/Blog/DraftModeBanner'))
-const ReactMarkdown = dynamic<{ children: string }>(
-  () =>
-    import('react-markdown').then(
-      (m) => m.default as unknown as ComponentType<{ children: string }>
-    ),
-  { ssr: false }
-)
-
-const BlogPostRenderer = ({
-  blog,
-  blogMetaData,
-  isDraftMode,
-  prevPost,
-  nextPost,
-  authors,
-}: {
-  blog: ProcessedBlogData
-  blogMetaData: ProcessedBlogData
-  isDraftMode: boolean
-  prevPost?: PostReturnType | null
-  nextPost?: PostReturnType | null
-  authors: StaticAuthor[]
-}) => {
-  const [previewData] = useState<ProcessedBlogData>(blog)
-
-  // For LivePreview, we'll use the raw content directly with ReactMarkdown
-  // instead of trying to use MDXRemote which requires specific serialization
-  const isLivePreview = isDraftMode && previewData !== blog
-
-  // Extract raw content from data if available
-  const livePreviewContent = useMemo(() => {
-    // Priority 2: Use data from postMessage updates
-    if (isDraftMode && previewData !== blog) {
-      // If content is a string, use it directly
-      if (typeof (previewData as unknown as { content?: unknown }).content === 'string') {
-        return (previewData as unknown as { content?: string }).content as string
-      }
-
-      // If content is from source property
-      if (
-        (previewData as unknown as { source?: unknown }).source &&
-        typeof (previewData as unknown as { source?: unknown }).source === 'string'
-      ) {
-        return (previewData as unknown as { source?: string }).source as string
-      }
-    }
-
-    return blog.source || ''
-  }, [isDraftMode, previewData, blog])
-
-  const isLaunchWeek7 = blogMetaData.launchweek === '7'
-  const isLaunchWeekX = blogMetaData.launchweek?.toString().toLocaleLowerCase() === 'x'
-  const isGAWeek = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '11'
-  const isLaunchWeek12 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '12'
-  const isLaunchWeek13 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '13'
-  const isLaunchWeek14 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '14'
-  const isLaunchWeek15 = blogMetaData.launchweek?.toString().toLocaleLowerCase() === '15'
-
-  type NextCardProps = {
-    post: { path: string; title: string; formattedDate: string }
-    label: string
-    className?: string
-  }
-  const NextCard = (props: NextCardProps) => {
-    const { post, label, className } = props
-
-    return (
-      <Link href={`${post.path}`} as={`${post.path}`}>
-        <div className={className ?? ''}>
-          <div className="hover:bg-control cursor-pointer rounded-sm border p-6 transition">
-            <div className="space-y-4">
-              <div>
-                <p className="text-foreground-lighter text-sm">{label}</p>
-              </div>
-              <div className="flex flex-col gap-2">
-                {'title' in post && (
-                  <h4 className="text-foreground text-lg text-balance">
-                    {(post as { title?: string }).title}
-                  </h4>
-                )}
-                {'formattedDate' in post && (
-                  <p className="small">{(post as { formattedDate?: string }).formattedDate}</p>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      </Link>
-    )
-  }
-
-  const toc = blogMetaData.toc && (
-    <div>
-      <p className="text-foreground mb-4">On this page</p>
-      <div className="prose-toc">
-        {blogMetaData.toc && (
-          <ReactMarkdown>
-            {typeof blogMetaData.toc === 'string'
-              ? (blogMetaData.toc as string)
-              : (blogMetaData.toc as { content: string }).content}
-          </ReactMarkdown>
-        )}
-      </div>
-    </div>
-  )
-
-  const imageUrl = getBlogThumbnailImage(blogMetaData, {
-    fallbackToPlaceholder: false,
-  })
-
-  return (
-    <>
-      {isDraftMode && <DraftModeBanner />}
-      <DefaultLayout className="overflow-x-hidden">
-        <div
-          className="
-            container mx-auto px-4 py-4 md:py-8 xl:py-10 sm:px-16
-            xl:px-20
-          "
-        >
-          <div className="grid grid-cols-12 gap-4">
-            <div className="hidden col-span-12 xl:block lg:col-span-2">
-              {/* Back button */}
-              <Link
-                href="/blog"
-                className="text-foreground-lighter hover:text-foreground flex cursor-pointer items-center text-sm transition"
-              >
-                <ChevronLeft style={{ padding: 0 }} />
-                Back
-              </Link>
-            </div>
-            <div className="col-span-12 lg:col-span-12 xl:col-span-10">
-              {/* Title and description */}
-              <div className="mb-6 lg:mb-10 max-w-5xl space-y-8">
-                <div className="space-y-4">
-                  <Link href="/blog" className="text-brand hidden lg:inline-flex items-center">
-                    Blog
-                  </Link>
-                  <h1 className="text-2xl sm:text-4xl">{blogMetaData.title}</h1>
-                  <div className="text-light flex space-x-3 text-sm">
-                    <p>{dayjs(blogMetaData.date).format('DD MMM YYYY')}</p>
-                    <p>·</p>
-                    <p>{(blogMetaData as any).readingTime}</p>
-                  </div>
-                  {authors.length > 0 && (
-                    <div className="flex justify-between">
-                      <div className="flex-1 flex flex-wrap gap-3 pt-2 md:gap-0 lg:gap-3">
-                        {authors.map((author, i: number) => {
-                          const authorImageUrl = author.author_image_url
-
-                          const authorId =
-                            (author as any).author_id ||
-                            (author as any).username ||
-                            author.author.toLowerCase().replace(/\s+/g, '_')
-
-                          return (
-                            <div className="mr-4 w-max" key={`author-${i}-${author.author}`}>
-                              <Link href={`/blog/authors/${authorId}`} className="cursor-pointer">
-                                <div className="flex items-center gap-3">
-                                  {authorImageUrl && (
-                                    <div className="w-10">
-                                      <Image
-                                        src={authorImageUrl}
-                                        className="border-default rounded-full border w-full max-h-10 aspect-square object-cover"
-                                        alt={`${author.author} avatar`}
-                                        width={40}
-                                        height={40}
-                                      />
-                                    </div>
-                                  )}
-                                  <div className="flex flex-col">
-                                    <span className="text-foreground mb-0 text-sm">
-                                      {author.author}
-                                    </span>
-                                    <span className="text-foreground-lighter mb-0 text-xs">
-                                      {author.position}
-                                    </span>
-                                  </div>
-                                </div>
-                              </Link>
-                            </div>
-                          )
-                        })}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </div>
-              <div className="grid grid-cols-12 lg:gap-16 xl:gap-8">
-                {/* Content */}
-                <div className="col-span-12 lg:col-span-7 xl:col-span-7">
-                  <article>
-                    <div className={['prose prose-docs'].join(' ')}>
-                      {blogMetaData.youtubeHero ? (
-                        <iframe
-                          title="YouTube video player"
-                          className="w-full"
-                          width="700"
-                          height="350"
-                          src={blogMetaData.youtubeHero}
-                          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                          allowFullScreen={true}
-                        />
-                      ) : (
-                        imageUrl && (
-                          <div className="hidden md:block relative mb-8 w-full aspect-[1.91/1] overflow-auto rounded-lg border">
-                            <Image
-                              src={imageUrl}
-                              alt={blogMetaData.title}
-                              fill
-                              sizes={BLOG_POST_HERO_IMAGE_SIZES}
-                              className="object-cover m-0"
-                            />
-                          </div>
-                        )
-                      )}
-                      {/* Use ReactMarkdown for LivePreview mode, MDXRemote for normal mode */}
-                      {isLivePreview ? (
-                        <ReactMarkdown>{livePreviewContent}</ReactMarkdown>
-                      ) : (
-                        <MDXRemote
-                          {...(blog.content as MDXRemoteSerializeResult)}
-                          components={mdxComponents('blog')}
-                        />
-                      )}
-                    </div>
-                  </article>
-                  {isLaunchWeek7 && <BlogLinks />}
-                  {isLaunchWeekX && <LWXSummary />}
-                  {isGAWeek && <LW11Summary />}
-                  {isLaunchWeek12 && <LW12Summary />}
-                  {isLaunchWeek13 && <LW13Summary />}
-                  {isLaunchWeek14 && <LW14Summary />}
-                  {isLaunchWeek15 && <LW15Summary />}
-                  <div className="block lg:hidden py-8">
-                    <div className="text-foreground-lighter text-sm">Share this article</div>
-                    <ShareArticleActions title={blogMetaData.title} slug={blogMetaData.slug} />
-                  </div>
-                  <div className="grid gap-8 py-8 lg:grid-cols-1">
-                    <div>
-                      {prevPost && (
-                        <NextCard
-                          post={
-                            prevPost as unknown as {
-                              path: string
-                              title: string
-                              formattedDate: string
-                            }
-                          }
-                          label="Previous post"
-                        />
-                      )}
-                    </div>
-                    <div>
-                      {nextPost && (
-                        <NextCard
-                          post={
-                            nextPost as unknown as {
-                              path: string
-                              title: string
-                              formattedDate: string
-                            }
-                          }
-                          label="Next post"
-                          className="text-right"
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-                {/* Sidebar */}
-                <div className="relative col-span-12 space-y-8 lg:col-span-5 xl:col-span-3 xl:col-start-9">
-                  <div className="space-y-6">
-                    <div className="hidden lg:block">
-                      <div className="flex flex-wrap gap-2">
-                        {(blogMetaData.tags as Tag[])?.map((tag) => {
-                          const tagName = typeof tag === 'string' ? tag : tag.name
-                          const tagId = typeof tag === 'string' ? tag : tag.id.toString()
-                          return (
-                            <Link href={`/blog/tags/${tagName}`} key={`category-badge-${tagId}`}>
-                              <Badge>{tagName}</Badge>
-                            </Link>
-                          )
-                        })}
-                      </div>
-                    </div>
-                    <div className="hidden lg:block">{toc}</div>
-                    <div className="hidden lg:block">
-                      <div className="text-foreground text-sm">Share this article</div>
-                      <ShareArticleActions title={blogMetaData.title} slug={blogMetaData.slug} />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <CTABanner />
-      </DefaultLayout>
-    </>
-  )
-}
-
-export default BlogPostRenderer

apps/www/components/LaunchWeek/7/BlogLinks.tsx

@@ -1,8 +1,10 @@
+'use client'
+
+import days from '~/components/LaunchWeek/7/lw7_days'
 import { motion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 import React from 'react'
-import days from '~/components/LaunchWeek/7/lw7_days'
 
 const BlogLinks = () => {
   const activeDays = days.filter((day) => Date.parse(day.publishedAt) <= Date.now())

apps/www/lib/mdx/addSelfClosingTags.ts

@@ -0,0 +1,16 @@
+function transformOutsideCodeFences(source: string, transform: (chunk: string) => string): string {
+  const fenceRe = /(^(?:`{3,}|~{3,})[^\n]*\n[\s\S]*?\n(?:`{3,}|~{3,})[ \t]*$)/gm
+  const parts = source.split(fenceRe)
+  return parts.map((part, i) => (i % 2 === 0 ? transform(part) : part)).join('')
+}
+
+export function addSelfClosingTags(htmlString: string): string {
+  if (!htmlString || typeof htmlString !== 'string') {
+    return ''
+  }
+  return transformOutsideCodeFences(htmlString, (chunk) =>
+    chunk.replace(/<img[^>]*>|<br[^>]*>|<hr[^>]*>/g, (match) =>
+      match.endsWith('/>') ? match : match.slice(0, -1) + ' />'
+    )
+  )
+}

apps/www/lib/mdx/compileBlogMdx.ts

@@ -0,0 +1,22 @@
+import { compile, run } from '@mdx-js/mdx'
+import type { ReactElement } from 'react'
+import * as runtime from 'react/jsx-runtime'
+
+import { mdxOptionsBlog } from './mdxOptionsBlog'
+
+export async function compileBlogMdx(
+  source: string,
+  components: Record<string, unknown>
+): Promise<ReactElement> {
+  const compiled = await compile(source, {
+    outputFormat: 'function-body',
+    development: false,
+    remarkPlugins: mdxOptionsBlog.remarkPlugins,
+    rehypePlugins: mdxOptionsBlog.rehypePlugins,
+  })
+  const { default: MDXContent } = await run(String(compiled), {
+    ...(runtime as any),
+    baseUrl: import.meta.url,
+  })
+  return MDXContent({ components: components as any })
+}

apps/www/lib/mdx/extractToc.ts

@@ -0,0 +1,75 @@
+import { remark } from 'remark'
+import remarkGfm from 'remark-gfm'
+
+type TocItem = { content: string; slug: string; lvl: number }
+
+function createRemarkCollectToc(maxDepth: number) {
+  return function remarkCollectToc() {
+    return function transformer(tree: any) {
+      const items: Array<TocItem> = []
+
+      const getText = (node: any): string => {
+        if (!node) return ''
+        if (node.type === 'text') return node.value || ''
+        if (Array.isArray(node.children)) return node.children.map(getText).join('')
+        return ''
+      }
+
+      const slugify = (input: string) =>
+        input
+          .trim()
+          .toLowerCase()
+          .replace(/[`~!@#$%^&*()+=|{}\[\]\\:";'<>?,./]+/g, '')
+          .replace(/\s+/g, '-')
+
+      const walk = (node: any) => {
+        if (node.type === 'heading' && typeof node.depth === 'number') {
+          if (node.depth <= maxDepth) {
+            const text = getText(node)
+            if (text) {
+              items.push({ content: text, slug: slugify(text), lvl: node.depth })
+            }
+          }
+        }
+        if (node.children) {
+          for (const child of node.children) walk(child)
+        }
+      }
+
+      walk(tree)
+
+      if (!tree.data) {
+        tree.data = {}
+      }
+      tree.data.__collectedToc = items
+    }
+  }
+}
+
+export async function extractToc(
+  rawMdx: string,
+  depth: number
+): Promise<{ content: string; json: Array<TocItem> }> {
+  let collectedToc: Array<TocItem> = []
+
+  await remark()
+    .use(remarkGfm)
+    .use(() => {
+      const plugin = createRemarkCollectToc(depth)
+      const transformer = (plugin as any)()
+      return (tree: any) => {
+        transformer(tree)
+        if (tree?.data?.__collectedToc) {
+          collectedToc = tree.data.__collectedToc as Array<TocItem>
+        }
+      }
+    })
+    .process(rawMdx)
+
+  const minLvl = collectedToc.length > 0 ? Math.min(...collectedToc.map((h) => h.lvl)) : 1
+  const tocMarkdown = collectedToc
+    .map((h) => `${'  '.repeat(Math.max(0, h.lvl - minLvl))}- [${h.content}](#${h.slug})`)
+    .join('\n')
+
+  return { content: tocMarkdown, json: collectedToc }
+}

apps/www/lib/mdx/mdxComponents.tsx

@@ -1,45 +1,51 @@
-'use client'
-
-import { CH } from '@code-hike/mdx/components'
-import { ArrowUpRight, Triangle } from 'lucide-react'
-import dynamic from 'next/dynamic'
-import type { PropsWithChildren } from 'react'
 import {
-  Badge,
-  cn,
-  Collapsible_Shadcn_,
-  CollapsibleContent_Shadcn_,
-  CollapsibleTrigger_Shadcn_,
-  Heading,
-} from 'ui'
+  Annotation,
+  annotations,
+  Code,
+  CodeSlot,
+  InlineCode,
+  Preview,
+  PreviewSlot,
+  Scrollycoding,
+  Section,
+  SectionCode,
+  SectionLink,
+  Slideshow,
+  Spotlight,
+} from '@code-hike/mdx/components'
+import Avatar from '~/components/Avatar'
+import BlogCollapsible from '~/components/Blog/BlogCollapsible'
+import DeveloperGrowthChart from '~/components/Charts/DeveloperGrowthChart'
+import Chart from '~/components/Charts/PGCharts'
+import CodeBlock from '~/components/CodeBlock/CodeBlock'
+import { NamedCodeBlock } from '~/components/CodeTabs'
+import ImageFadeStack from '~/components/ImageFadeStack'
+import ImageGrid from '~/components/ImageGrid'
+import InlineCodeTag from '~/components/InlineCode'
+import Quote from '~/components/Quote'
+import Tabs, { TabPanel } from '~/components/Tabs/Tabs'
+import { ArrowUpRight } from 'lucide-react'
+import type { PropsWithChildren } from 'react'
+import { Badge, cn, Heading } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 import { Image, type ImageProps } from 'ui-patterns/Image'
 import { Mermaid } from 'ui-patterns/Mermaid'
 
-const Avatar = dynamic(() => import('~/components/Avatar'))
-const Chart = dynamic(() => import('~/components/Charts/PGCharts'))
-const DeveloperGrowthChart = dynamic(() => import('~/components/Charts/DeveloperGrowthChart'), {
-  ssr: false,
-})
-const CodeBlock = dynamic(() => import('~/components/CodeBlock/CodeBlock'))
-const Tabs = dynamic(() => import('~/components/Tabs/Tabs'), { ssr: false })
-const TabPanel = dynamic(
-  () => import('~/components/Tabs/Tabs').then((mod) => ({ default: mod.TabPanel })),
-  { ssr: false }
-)
-const NamedCodeBlock = dynamic(
-  () =>
-    import('~/components/CodeTabs').then((mod) => ({
-      default: mod.NamedCodeBlock,
-    })),
-  {
-    ssr: false,
-  }
-)
-const ImageFadeStack = dynamic(() => import('~/components/ImageFadeStack'))
-const ImageGrid = dynamic(() => import('~/components/ImageGrid'))
-const InlineCodeTag = dynamic(() => import('~/components/InlineCode'))
-const Quote = dynamic(() => import('~/components/Quote'))
+const CH = {
+  Annotation,
+  Code,
+  CodeSlot,
+  InlineCode,
+  Preview,
+  PreviewSlot,
+  Scrollycoding,
+  Section,
+  SectionCode,
+  SectionLink,
+  Slideshow,
+  Spotlight,
+  annotations,
+}
 
 // import all components used in blog articles here
 // to do: move this into a helper/utils, it is used elsewhere
@@ -57,36 +63,6 @@ const LinkComponent = (props: PropsWithChildren<HTMLAnchorElement>) => (
   </a>
 )
 
-const BlogCollapsible = ({
-  title,
-  containerClassName,
-  ...props
-}: {
-  title: string
-  containerClassName?: string
-}) => {
-  return (
-    <Collapsible_Shadcn_ className={containerClassName}>
-      <CollapsibleTrigger_Shadcn_
-        className="
-        data-[state=open]:text
-        hover:text-foreground-light
-        flex items-center gap-3
-        [&>svg]:fill-current
-        [&>svg]:rotate-90
-        [&>svg]:transition-transform
-        [&>svg]:data-[state='open']:rotate-180
-        [&>svg]:data-[state='open']:text
-        "
-      >
-        <Triangle size={10} />
-        <span>{title}</span>
-      </CollapsibleTrigger_Shadcn_>
-      <CollapsibleContent_Shadcn_ {...props} />
-    </Collapsible_Shadcn_>
-  )
-}
-
 export default function mdxComponents(type?: 'blog' | 'lp' | undefined) {
   const components = {
     CodeBlock,

apps/www/lib/mdx/mdxOptionsBlog.ts

@@ -0,0 +1,81 @@
+import { remarkCodeHike, type CodeHikeConfig } from '@code-hike/mdx'
+import codeHikeTheme from 'config/code-hike.theme.json' with { type: 'json' }
+import type { MDXRemoteProps } from 'next-mdx-remote/rsc'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
+
+const codeHikeOptions: CodeHikeConfig = {
+  theme: codeHikeTheme,
+  lineNumbers: true,
+  showCopyButton: true,
+  skipLanguages: ['mermaid'],
+  autoImport: false,
+}
+
+type MdxOptions = NonNullable<NonNullable<MDXRemoteProps['options']>['mdxOptions']>
+
+export const mdxOptionsBlog: MdxOptions = {
+  remarkPlugins: [remarkNormalizeHtmlImages, [remarkCodeHike, codeHikeOptions], remarkGfm],
+  rehypePlugins: [
+    // @ts-ignore
+    rehypeSlug,
+  ],
+}
+
+/**
+ * Remark plugin: converts raw HTML `<img>` nodes and MDX JSX `<img />` elements
+ * to standard markdown `image` AST nodes so they go through the mdxComponents
+ * img rendering pipeline.
+ */
+function remarkNormalizeHtmlImages() {
+  return function transformer(tree: any) {
+    const getAttrFromString = (attrs: string, name: string) => {
+      const m = attrs.match(new RegExp(`${name}\\s*=\\s*("([^"]*)"|'([^']*)')`, 'i'))
+      return (m?.[2] ?? m?.[3] ?? '').trim()
+    }
+
+    const walk = (node: any, parent: any, index: number) => {
+      if (node.type === 'code' || node.type === 'inlineCode') return
+
+      if (parent !== null) {
+        if (node.type === 'html') {
+          const match = /^\s*<img\b([^>]*)\/?>\s*$/i.exec(node.value)
+          if (match) {
+            const src = getAttrFromString(match[1], 'src')
+            if (src) {
+              const alt = getAttrFromString(match[1], 'alt')
+              parent.children[index] = { type: 'image', url: src, alt, title: null }
+              return
+            }
+          }
+        }
+
+        if (
+          (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') &&
+          node.name === 'img'
+        ) {
+          const getJsxAttr = (name: string): string => {
+            const attr = node.attributes?.find(
+              (a: any) => a.type === 'mdxJsxAttribute' && a.name === name
+            )
+            return typeof attr?.value === 'string' ? attr.value : ''
+          }
+          const src = getJsxAttr('src')
+          if (src) {
+            const alt = getJsxAttr('alt')
+            parent.children[index] = { type: 'image', url: src, alt, title: null }
+            return
+          }
+        }
+      }
+
+      if (node.children) {
+        for (let i = 0; i < node.children.length; i++) {
+          walk(node.children[i], node, i)
+        }
+      }
+    }
+
+    walk(tree, null, 0)
+  }
+}

apps/www/lib/mdx/mdxSerialize.ts

@@ -187,8 +187,9 @@ export async function mdxSerialize(source: string, options?: { tocDepth?: number
   })
 
   // Expose TOC via scope for consumers (keeps function signature stable)
+  const minLvl = collectedToc.length > 0 ? Math.min(...collectedToc.map((h) => h.lvl)) : 1
   const tocMarkdown = collectedToc
-    .map((h) => `${'  '.repeat(Math.max(0, h.lvl - 1))}- [${h.content}](#${h.slug})`)
+    .map((h) => `${'  '.repeat(Math.max(0, h.lvl - minLvl))}- [${h.content}](#${h.slug})`)
     .join('\n')
 
   mdxSource.scope = {

apps/www/package.json

@@ -24,6 +24,7 @@
     "@codesandbox/sandpack-react": "^2.20.0",
     "@hcaptcha/react-hcaptcha": "^1.12.0",
     "@heroicons/react": "^1.0.6",
+    "@mdx-js/mdx": "^3.0.1",
     "@mdx-js/react": "^3.0.0",
     "@next/bundle-analyzer": "15.3.1",
     "@next/mdx": "15.3.1",

apps/www/types/post.ts

@@ -1,5 +1,3 @@
-import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
-
 import type { getSortedPosts } from '@/lib/posts'
 
 export interface PostTypes {
@@ -78,7 +76,7 @@ export type Blog = {
   slug: string
   title: string
   description?: string
-  content: MDXRemoteSerializeResult
+  content: string
   toc: string | { content: string }
   author?: string
   authors?: StaticAuthor[]
@@ -113,7 +111,7 @@ export type BlogData = {
   slug: string
   title: string
   description?: string
-  content: MDXRemoteSerializeResult
+  content: string
   toc: string | { content: string }
   author?: string
   authors?: StaticAuthor[]

pnpm-lock.yaml

@@ -1594,6 +1594,9 @@ importers:
       '@heroicons/react':
         specifier: ^1.0.6
         version: 1.0.6(react@18.3.1)
+      '@mdx-js/mdx':
+        specifier: ^3.0.1
+        version: 3.0.1(supports-color@8.1.1)
       '@mdx-js/react':
         specifier: ^3.0.0
         version: 3.1.1(@types/react@18.3.3)(react@18.3.1)
@@ -9246,10 +9249,6 @@ packages:
     resolution: {integrity: sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==}
     engines: {node: '>=8'}
 
-  astring@1.8.6:
-    resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
-    hasBin: true
-
   astring@1.9.0:
     resolution: {integrity: sha512-LElXdjswlqjWrPpJFg1Fx4wpkOCxj1TDHlSV4PlaRxHGWko024xICaa97ZkMfs6DRKlCguiAI+rbXv5GWwXIkg==}
     hasBin: true
@@ -25971,8 +25970,6 @@ snapshots:
 
   astral-regex@2.0.0: {}
 
-  astring@1.8.6: {}
-
   astring@1.9.0: {}
 
   async-sema@3.1.1: {}
@@ -28035,7 +28032,7 @@ snapshots:
   estree-util-to-js@2.0.0:
     dependencies:
       '@types/estree-jsx': 1.0.1
-      astring: 1.8.6
+      astring: 1.9.0
       source-map: 0.7.6
 
   estree-util-value-to-estree@3.3.3: