fix(site): render changelog with shared MDX typography (#1846)

site/src/content.config.ts

@@ -97,13 +97,13 @@ const docs = defineCollection({
 });
 
 // Release notes generated by the release workflow (raw git-cliff bullets),
-// then rewritten into prose by the changelog-prose workflow. Plain `.md` —
-// generated content never contains components. Filename is the version.
+// then rewritten into prose by the changelog-prose workflow. MDX lets the
+// changelog use the same typography component mapping as the blog.
 const changelog = defineCollection({
   loader: glob({
     base: './src/content/changelog',
-    pattern: '*.md',
-    generateId: ({ entry }) => entry.replace(/\.md$/, ''),
+    pattern: '*.mdx',
+    generateId: ({ entry }) => entry.replace(/\.mdx$/, ''),
   }),
   schema: z.object({
     description: z.string(),

site/src/pages/changelog/[...slug].astro

@@ -4,6 +4,7 @@ import type { CollectionEntry } from 'astro:content';
 import { getCollection, render } from 'astro:content';
 import { ArrowUpRight } from 'lucide-react';
 import FormattedDate from '@/components/FormattedDate.astro';
+import defaultMarkdownComponents from '@/components/typography/defaultMarkdownComponents';
 import Blog from '@/layouts/Blog.astro';
 
 export async function getStaticPaths() {
@@ -60,68 +61,6 @@ const description =
         Compare changes on GitHub <ArrowUpRight size="1em" aria-hidden="true" />
       </a>
     </header>
-    <div class="changelog-content mx-auto max-w-3xl">
-      <Content />
-    </div>
+    <Content components={{ ...defaultMarkdownComponents }} />
   </article>
 </Blog>
-
-{
-  /*
-  Changelog entries are plain `.md` (generated by CI), and Astro's `components`
-  prop on <Content /> is MDX-only — so the typography components in
-  `@/components/typography` can't be applied here. Mirror their classes instead;
-  keep in sync with that directory and `typography/styles.ts`.
-*/
-}
-<style>
-  @reference "../../styles/globals.css";
-
-  .changelog-content :global(h2) {
-    @apply mt-16 mb-8 font-display text-h3 leading-tight uppercase @lg:text-h25;
-  }
-
-  .changelog-content :global(h3) {
-    @apply my-8 font-display text-h3 leading-tight;
-  }
-
-  .changelog-content :global(h4) {
-    @apply mt-8 mb-4 text-p15 font-bold;
-  }
-
-  .changelog-content :global(p) {
-    @apply my-4;
-  }
-
-  .changelog-content :global(ul) {
-    @apply mb-4 list-outside list-disc pl-4;
-  }
-
-  .changelog-content :global(ol) {
-    @apply mb-4 list-outside list-decimal pl-4;
-  }
-
-  .changelog-content :global(li + li) {
-    @apply mt-1;
-  }
-
-  .changelog-content :global(a) {
-    @apply underline intent:decoration-gold;
-  }
-
-  .changelog-content :global(strong) {
-    @apply font-bold;
-  }
-
-  .changelog-content :global(em) {
-    @apply italic;
-  }
-
-  .changelog-content :global(code) {
-    @apply rounded border border-manila-75 bg-manila-25 px-1 font-mono text-code break-words normal-case dark:border-warm-gray dark:bg-soot;
-  }
-
-  .changelog-content :global(hr) {
-    @apply my-8 border-t border-manila-75 dark:border-warm-gray;
-  }
-</style>