Clean up blog posts (#2209)

This PR does a bunch of cleanup to the blog posts — issues that were
largely introduced during the v3 to v4 migration, including:

- Adding more consistent media styles for video, image, and iframe
styles
- Add `<ol>` styles
- Moving the first video/image to the top of the blog posts (where
appropriate)
- Making heading casing more consistent
- Fixing various formatting issues

Author: reinink

src/app/typography.css

@@ -95,6 +95,24 @@
     }
   }
 
+  ol:where(:not(.not-prose, .not-prose *)) {
+    padding-left: calc(var(--spacing) * 6);
+    list-style-type: decimal;
+  }
+
+  ol li:where(:not(.not-prose, .not-prose *)) {
+    padding-left: calc(var(--spacing) * 3);
+  }
+
+  ol li + li:where(:not(.not-prose, .not-prose *)) {
+    margin-top: calc(var(--spacing) * 4);
+  }
+
+  ol li:where(:not(.not-prose, .not-prose *))::marker {
+    font-weight: 600;
+    color: var(--prose-strong-color);
+  }
+
   ul:where(:not(.not-prose, .not-prose *)) {
     padding-left: calc(var(--spacing) * 6);
     list-style-type: square;
@@ -128,6 +146,10 @@
     text-decoration-thickness: 2px;
   }
 
+  a:where(:not(.not-prose, .not-prose *)):has(> [data-media]) {
+    display: block;
+  }
+
   strong:where(:not(.not-prose, .not-prose *)) {
     color: var(--prose-strong-color);
     font-weight: var(--font-weight-semibold);

src/blog/2022-05-23-headless-ui-v1-6-tailwind-ui-team-management/index.mdx

@@ -2,7 +2,7 @@ import { adamwathan } from "@/app/blog/authors";
 import card from "./card.jpg";
 import { Figure } from "@/components/figure.tsx";
 import { Example } from "@/components/example.tsx";
-import Image from "next/image";
+import { Image } from "@/components/media";
 import Link from "next/link";
 import teamManagement from "./team-management.png";
 import playGeneratedCss from "./play-generated-css.png";

src/blog/2022-06-23-tailwind-templates-and-all-access/index.mdx

@@ -3,7 +3,7 @@ import card from "./card.jpg";
 import allAccess from "./all-access.jpg";
 import codeStructure from "./code-structure.jpg";
 import templates from "./templates.jpg";
-import Image from "next/image";
+import { Image } from "@/components/media";
 import Link from "next/link";
 
 export const meta = {
@@ -21,41 +21,21 @@ export const meta = {
   ),
 };
 
-When I was early in my programming career, I loved following{" "}
-
-<Link href="https://thoughtbot.com/">thoughtbot</Link>. They were always writing interesting programming articles,
-producing fantastic screencasts, and publishing incredible books. I could tell they really cared about their craft and
-it inspired the hell out of me.
-
-But when they launched{" "}
-
-<Link href="https://thoughtbot.com/upcase">Upcase</Link>, the thing I was most excited about wasn't the courses or
-weekly videos. What I was most excited about was the source code for Upcase itself — the _actual-in-production_ Rails
-codebase that they gave you access to when you subscribed.
+<Image alt="Tailwind CSS Templates" src={templates} />
 
-I'd learned a ton from blog posts, books, and screencasts, but I still craved
-the chance to dig into a real-world codebase crafted by people I trust and
-study how they put all that knowledge together to build a production-ready
-application.
+When I was early in my programming career, I loved following <Link href="https://thoughtbot.com/">thoughtbot</Link>. They were always writing interesting programming articles, producing fantastic screencasts, and publishing incredible books. I could tell they really cared about their craft and it inspired the hell out of me.
 
-That experience was transformative for me, and so for a long time I've wanted
-to give people something like it to learn how real websites are built with
-Tailwind CSS.
+But when they launched <Link href="https://thoughtbot.com/upcase">Upcase</Link>, the thing I was most excited about wasn't the courses or weekly videos. What I was most excited about was the source code for Upcase itself — the _actual-in-production_ Rails codebase that they gave you access to when you subscribed.
 
-How a layout is broken down into components, what sort of APIs those
-components expose, how the config has been customized — all of the interesting
-decisions that you can't see when you just click _view source_ in the browser.
+I'd learned a ton from blog posts, books, and screencasts, but I still craved the chance to dig into a real-world codebase crafted by people I trust and study how they put all that knowledge together to build a production-ready application.
 
-So today we're releasing our first batch of official Tailwind CSS{" "}
+That experience was transformative for me, and so for a long time I've wanted to give people something like it to learn how real websites are built with Tailwind CSS.
 
-<Link href="https://tailwindui.com/templates">website templates</Link> — beautiful designs engineered into
-production-quality codebases, powered by Tailwind CSS and Next.js.
+How a layout is broken down into components, what sort of APIs those components expose, how the config has been customized — all of the interesting decisions that you can't see when you just click _view source_ in the browser.
 
-<Image alt="Tailwind CSS Templates" src={templates} />
+So today we're releasing our first batch of official Tailwind CSS <Link href="https://tailwindui.com/templates">website templates</Link> — beautiful designs engineered into production-quality codebases, powered by Tailwind CSS and Next.js.
 
-We started designing these way back in March and I'm really excited to get
-these first five out the door so you can check them out and start playing with
-them:
+We started designing these way back in March and I'm really excited to get these first five out the door so you can check them out and start playing with them:
 
 - <Link href="https://syntax.tailwindui.com/">Syntax</Link> — a documentation site template powered by Stripe's new <Link href="https://markdoc.io/">
     Markdoc
@@ -69,80 +49,43 @@ them:
 - <Link href="https://transmit.tailwindui.com/">Transmit</Link> — an awesome podcasting template with a custom
   persistent audio player that you can wire up to your own RSS feed in no time.
 
-We've put a ton of time and attention into both the design and the code, and
-everything is structured exactly the way we'd do it in a real production
-project. They're the perfect starting point when you don't want to start from a
-blank canvas, and the best way to learn how experts build modern websites with
-Tailwind CSS.
+We've put a ton of time and attention into both the design and the code, and everything is structured exactly the way we'd do it in a real production project. They're the perfect starting point when you don't want to start from a blank canvas, and the best way to learn how experts build modern websites with Tailwind CSS.
 
 <Image alt="Code Structure" src={codeStructure} />
 
-Each template can be purchased on its own for **$99**, or you can get all of
-them with <Link href="https://tailwindui.com/all-access">all-access</Link> —
-the new _get-everything-we-ever-add-forever_ package we're launching today.
+Each template can be purchased on its own for **$99**, or you can get all of them with <Link href="https://tailwindui.com/all-access">all-access</Link> — the new _get-everything-we-ever-add-forever_ package we're launching today.
 
 ---
 
 ## Going all in on all-access
 
-When we started working on templates, one of the things I was really sure about
-is that I wanted it to be easy to get access to _all_ of them.
+When we started working on templates, one of the things I was really sure about is that I wanted it to be easy to get access to _all_ of them.
 
 This was important to me for two reasons:
 
-1. **I want people to think of our templates more like educational resources
-   than traditional website themes**. Every template we build has its own
-   unique learning moments, and I don't want people to have to be selective
-   about what they get to learn from.
-
-2. **I don't want to worry about ROI on a per-template basis**. Nothing would
-   suck the fun out of designing and building templates like having to make
-   sure each one had mass appeal. I want us to have the freedom to make niche,
-   interesting stuff with cool ideas to study, not just templates that can sell
-   enough copies on their own to justify the work we put into them.
-
-When I was a kid I went to this{" "}
-
-<Link href="https://en.concerts-metal.com/concert_-_Hellfest_2008-3308.html">music festival</Link> in France where
-almost a hundred bands performed. There were a couple of bands on the bill I absolutely _loved_, knew every song, and
-would buy a ticket to see any day of the week.
+1. **I want people to think of our templates more like educational resources than traditional website themes**. Every template we build has its own unique learning moments, and I don't want people to have to be selective about what they get to learn from.
+2. **I don't want to worry about ROI on a per-template basis**. Nothing would suck the fun out of designing and building templates like having to make sure each one had mass appeal. I want us to have the freedom to make niche, interesting stuff with cool ideas to study, not just templates that can sell enough copies on their own to justify the work we put into them.
 
-Most of them though were bands I really _liked_, but wouldn't have made the 90
-minute drive to make it out to a show. But putting all of them on a bill
-together got me to buy a plane ticket to Paris, and have one of the best
-experiences of my life.
+When I was a kid I went to this <Link href="https://en.concerts-metal.com/concert_-_Hellfest_2008-3308.html">music festival</Link> in France where almost a hundred bands performed. There were a couple of bands on the bill I absolutely _loved_, knew every song, and would buy a ticket to see any day of the week.
 
-I want Tailwind UI to feel like a music festival, where you can wander from
-stage to stage, enjoy a song or two from a band you've never heard of, and once
-in a while be blown away by a performance you would have never otherwise
-bothered to check out.
+Most of them though were bands I really _liked_, but wouldn't have made the 90 minute drive to make it out to a show. But putting all of them on a bill together got me to buy a plane ticket to Paris, and have one of the best experiences of my life.
 
-So we're launching a new{" "}
+I want Tailwind UI to feel like a music festival, where you can wander from stage to stage, enjoy a song or two from a band you've never heard of, and once in a while be blown away by a performance you would have never otherwise bothered to check out.
 
-<Link href="https://tailwindui.com/all-access">all-access package</Link> for Tailwind UI that includes access to every
-template and component package that exists today and any new content we add in the future.
+So we're launching a new <Link href="https://tailwindui.com/all-access">all-access package</Link> for Tailwind UI that includes access to every template and component package that exists today and any new content we add in the future.
 
 <Image alt="Get Tailwind UI all-access" src={allAccess} />
 
-It's a one-time purchase of **$299**. No subscription, no upgrade costs — if we
-add something new to Tailwind UI, it's yours, forever.
+It's a one-time purchase of **$299**. No subscription, no upgrade costs — if we add something new to Tailwind UI, it's yours, forever.
 
-And if you already own everything in Tailwind UI, **we've upgraded you to
-all-access for free**.
+And if you already own everything in Tailwind UI, **we've upgraded you to all-access for free**.
 
 ---
 
-So there you have it — that's everything we've been working on for the last few
-months!
+So there you have it — that's everything we've been working on for the last few months!
 
-We've got a bunch of new templates in the works already, and we're actively
-working on extracting a lot of the component ideas from these templates into
-new examples to include in the Marketing, Application UI, and Ecommerce
-component categories.
+We've got a bunch of new templates in the works already, and we're actively working on extracting a lot of the component ideas from these templates into new examples to include in the Marketing, Application UI, and Ecommerce component categories.
 
-That's one of my favorite things about working on these site templates —
-building real-world stuff with Tailwind is the best way for us to come up with
-new component ideas, and to find ways to improve both Tailwind CSS and Headless
-UI too.
+That's one of my favorite things about working on these site templates — building real-world stuff with Tailwind is the best way for us to come up with new component ideas, and to find ways to improve both Tailwind CSS and Headless UI too.
 
 Look forward to lots of new Tailwind UI stuff in the coming months!

src/blog/2022-08-17-tailwind-framer-motion-template-and-tailwind-jobs/index.mdx

@@ -1,6 +1,6 @@
 import { adamwathan } from "@/app/blog/authors";
 import { Figure } from "@/components/figure.tsx";
-import Image from "next/image";
+import { Image } from "@/components/media";
 import Link from "next/link";
 
 import tailwindJobs from "./tailwind-jobs.jpg";

src/blog/2022-09-09-new-personal-website-heroicons-2-headless-ui-v17/index.mdx

@@ -6,7 +6,7 @@ import heroiconsCover from "./heroicons-cover.jpg";
 import headlessuiV17 from "./headlessui-v17.jpg";
 import playInsiders from "./play-insiders.png";
 import phoenix from "./phoenix.png";
-import Image from "next/image";
+import { Image } from "@/components/media";
 import Link from "next/link";
 import { Example, Figure } from "@/components/example.tsx";
 import { CodeExampleGroup, CodeBlock, js, ts } from "@/components/code-example";

src/blog/2022-12-15-protocol-api-documentation-template/index.mdx

@@ -1,8 +1,8 @@
 import { adamwathan } from "@/app/blog/authors";
-import Image from "next/image";
 import Link from "next/link";
 import { Example } from "@/components/example.tsx";
 import { Figure } from "@/components/figure";
+import { Image, Video } from "@/components/media";
 
 import home from "./home.png";
 import documentation from "./documentation.png";
@@ -23,12 +23,12 @@ export const meta = {
   ),
 };
 
-It's been months in the making but I'm excited to finally release our next website template — <Link href="https://tailwindui.com/templates/protocol">Protocol</Link>, a beautiful starter kit for building amazing API reference websites.
-
 <Link href="https://tailwindui.com/templates/protocol">
   <Image alt="Learn about the Protocol template" src={home} />
 </Link>
 
+It's been months in the making but I'm excited to finally release our next website template — <Link href="https://tailwindui.com/templates/protocol">Protocol</Link>, a beautiful starter kit for building amazing API reference websites.
+
 Powered by Next.js and MDX and styled with Tailwind CSS, it's built exactly the way we'd build our own API reference documentation.
 
 Play with the <Link href="https://protocol.tailwindui.com/">live demo</Link> or <Link href="https://tailwindui.com/templates/protocol">download the source</Link> if you've got a Tailwind UI all-access license — it's a free update of course for all-access customers.
@@ -39,57 +39,15 @@ As usual we had a lot of fun getting carried away with the design, and putting t
 
 We've got sticky code blocks that stay in view as you scroll through the request and response details for that endpoint:
 
-<Example>
-  {
-    <div className="relative overflow-hidden rounded-2xl">
-      <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-slate-900/10 ring-inset"></div>
-      <video
-        src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/sticky-code-blocks.mp4"
-        autoPlay
-        playsInline
-        loop
-        muted
-        className="m-0 block"
-      />
-    </div>
-  }
-</Example>
+<Video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/sticky-code-blocks.mp4" />
 
 There's also this beautiful hover effect on the homepage cards — it follows your mouse cursor with this gradient glow that uncovers a subtle background pattern:
 
-<Example>
-  {
-    <div className="relative overflow-hidden rounded-2xl">
-      <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-slate-900/10 ring-inset"></div>
-      <video
-        src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/hovering-cards.mp4"
-        autoPlay
-        playsInline
-        loop
-        muted
-        className="m-0 block"
-      />
-    </div>
-  }
-</Example>
+<Video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/hovering-cards.mp4" />
 
 My favorite detail though has to be the sidebar navigation, which tracks the visible page content but using a sort of "minimap" strategy, where _all_ visible page sections are highlighted:
 
-<Example>
-  {
-    <div className="relative overflow-hidden rounded-2xl">
-      <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-slate-900/10 ring-inset"></div>
-      <video
-        src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/animated-sidebar.mp4"
-        autoPlay
-        playsInline
-        loop
-        muted
-        className="m-0 block"
-      />
-    </div>
-  }
-</Example>
+<Video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/animated-sidebar.mp4" />
 
 Watching this animate as you scroll through the page is really a sight to behold — props to <Link href="https://www.framer.com/motion/">Framer Motion</Link> for doing the heavy lifting here as usual. Even if I absolutely hated React I'm pretty sure I'd still use it just to use this library, it's really that good.
 
@@ -228,21 +186,7 @@ We love Algolia for documentation search, and we use it for the Tailwind CSS web
 
 We've wired it up for Protocol as well, but this time using Algolia's headless <Link href="https://www.algolia.com/doc/ui-libraries/autocomplete/introduction/what-is-autocomplete/">autocomplete library</Link> so we had total control of the search UI:
 
-<Example>
-  {
-    <div className="relative overflow-hidden rounded-2xl">
-      <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-slate-900/10 ring-inset"></div>
-      <video
-        src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/command-palette.mp4"
-        autoPlay
-        playsInline
-        loop
-        muted
-        className="m-0 block"
-      />
-    </div>
-  }
-</Example>
+<Video src="https://assets.tailwindcss.com/blog/2022-12-15-protocol-api-documentation-template/command-palette.mp4" />
 
 The nice thing about this approach is we can use regular old utility classes to style everything instead of writing custom CSS to style an already-styled widget, which just feels a lot more _right_ in a Tailwind CSS project.
 

src/blog/2023-04-24-new-changelog-template-and-the-biggest-tailwind-ui-update-ever/index.mdx

@@ -1,7 +1,7 @@
 import { adamwathan } from "@/app/blog/authors";
 import twitterCard from "./twitter-card.png";
 import Link from "next/link";
-import Image from "next/image";
+import { Image } from "@/components/media";
 import commitTemplate from "./commit-template.png";
 import commitTemplateDarkMode from "./commit-template-dark-mode.png";
 import commitTemplateForMotionOne from "./commit-template-for-motion-one.png";
@@ -36,11 +36,9 @@ Over the last four months we've probably done more work on Tailwind UI than we e
 
 Just a few days ago we released [Commit](https://tailwindui.com/templates/commit), a brand new changelog template we designed for Tailwind UI — built of course with Tailwind CSS and Next.js.
 
-<p>
-  <Link href="https://tailwindui.com/templates/commit">
-    <Image src={commitTemplate} alt="The Commit template" />
-  </Link>
-</p>
+<Link href="https://tailwindui.com/templates/commit">
+  <Image src={commitTemplate} alt="The Commit template" />
+</Link>
 
 Public changelogs have become a really popular way to keep people in the loop about what you've been working on, and to stay accountable and build your shipping muscles. They aren't a new concept by any means of course, but I don't think it was until [Linear](https://linear.app/changelog) started publishing to their changelog site that others got excited about using them almost as an alternative to a company blog.