refactor: use Tailwind CSS prose styles

assets/css/components.pcss

@@ -5,69 +5,6 @@
     text-underline-offset: 0.1em;
   }
 
-  .markdown {
-    > * + * {
-      @apply mt-4;
-    }
-
-    > *:first-child {
-      @apply mt-0;
-    }
-
-    h2 + * {
-      @apply mt-2;
-    }
-
-    h2 {
-      @apply mt-6;
-    }
-
-    h3 {
-      @apply mt-8 font-bold;
-    }
-
-    h2 + h3 {
-      @apply mt-2
-    }
-
-    blockquote {
-      @apply my-8;
-    }
-
-    ol {
-      @apply pl-6 list-decimal;
-    }
-
-    ul {
-      @apply pl-6 list-disc;
-    }
-
-    li {
-      @apply mt-1 first:mt-0;
-    }
-
-    a {
-      @apply link;
-    }
-
-    pre {
-      @apply my-8;
-    }
-
-    pre code {
-      @apply block;
-    }
-
-    .media--type-image {
-      @apply my-8;
-    }
-
-    .speakerdeck-embed-wrapper,
-    .video-full {
-      @apply my-8 aspect-w-4 aspect-h-3;
-    }
-  }
-
   .visually-hidden {
     @apply sr-only;
   }

src/components/AboutMe.astro

@@ -1,24 +1,30 @@
+---
+import Markdown from "./Markdown.astro";
+---
+
 <aside>
+  <Markdown>
     <h2>About me</h2>
 
-  <div class="flex mt-4 space-x-4">
+    <div class="flex space-x-4">
-    <div class="flex-shrink-0">
+      <div class="flex-shrink-0 flex flex-col justify-start">
         <img
           src="/images/social-avatar.jpg"
           alt="Picture of Oliver"
-        class="w-16 h-16 rounded-full border border-grey"
+          class="not-prose my-0 w-16 h-16 rounded-full border border-grey"
         />
       </div>
 
-    <div>
+      <Markdown>
         <p>
           Oliver Davies is a PHP Developer and Linux Systems Administrator based
-        in the UK. He is a Full Stack Software Consultant specialising in Drupal
+          in the UK. He is a Full Stack Software Consultant specialising in
-        application development, and a Lead Developer at <a
+          Drupal application development, and a Lead Developer at <a
             href="https://tfw.wales"
             class="link">Transport for Wales</a
           >.
         </p>
+      </Markdown>
     </div>
-  </div>
+  </Markdown>
 </aside>

src/components/DailyEmailForm.astro

@@ -1,4 +1,5 @@
 ---
+import Markdown from "./Markdown.astro";
 const { intro } = Astro.props;
 ---
 
@@ -55,9 +56,11 @@ const { intro } = Astro.props;
       </div>
 
       <footer class="px-4 mt-4 text-center">
+        <Markdown>
           <p>
-          Not sure? <a class="link" href="/archive">Browse the archive →</a>
+            Not sure? <a class="link" href="/archive">Browse the archive &rarr;</a>
           </p>
+        </Markdown>
       </footer>
 
       <style>

src/components/ListingPageItem.astro

@@ -1,4 +1,6 @@
 ---
+import Markdown from "./Markdown.astro";
+
 interface ItemProps {
   date: string;
   description?: string;
@@ -12,7 +14,8 @@ const { slug } = Astro.props.item;
 ---
 
 <article>
-  <a href={slug} class="mb-2"><h2>{title}</h2></a>
+  <Markdown overrideLinkColours={true}>
+    <a href={slug}><h2>{title}</h2></a>
 
     {
       date && (
@@ -28,4 +31,5 @@ const { slug } = Astro.props.item;
 
     {description && <p>{description}</p>}
     {excerpt && <p>{excerpt}</p>}
+  </Markdown>
 </article>

src/components/Markdown.astro

@@ -1,3 +1,19 @@
-<div class="markdown">
+---
+type Props = {
+  overrideLinkColours: boolean;
+};
+
+const { overrideLinkColours } = Astro.props as Props;
+---
+
+<div
+  class:list={[
+    "prose prose-p:text-black prose-a:font-light prose-a:text-blue-primary prose-p:text-lg prose-blockquote:border-blue-primary dark:marker:text-white prose-li:my-1 prose-li:text-lg prose-figcaption:text-white prose-li:text-black marker:text-black dark:prose-p:text-white dark:prose-invert dark:prose-a:text-blue-400 dark:prose-blockquote:border-blue-400 dark:prose-li:text-white hover:prose-a:no-underline prose-h2:text-xl prose-code:font-normal prose-h2:mb-4 prose-ul:my-3",
+    {
+      "prose-a:text-blue-primary dark:prose-a:text-blue-400 prose-headings:text-current":
+        overrideLinkColours,
+    },
+  ]}
+>
   <slot />
 </div>

src/components/talk/Events.astro

@@ -1,4 +1,6 @@
 ---
+import Markdown from "../Markdown.astro";
+
 interface Event {
   date: string;
   location: string;
@@ -17,15 +19,15 @@ const { events } = Astro.props;
 
 {
   events && (
-    <div>
+    <Markdown>
       <h2>Events</h2>
 
       <div>
-        <ul class="ml-4 list-disc">
+        <ul>
           {events.map((event) => (
             <li>
               {event.url ? (
-                <a class="link" href={event.url}>
+                <a class="inline-block" href={event.url}>
                   {event.name}
                 </a>
               ) : (
@@ -42,6 +44,6 @@ const { events } = Astro.props;
           ))}
         </ul>
       </div>
-    </div>
+    </Markdown>
   )
 }

src/components/talk/Slides.astro

@@ -1,4 +1,6 @@
 ---
+import Markdown from '../Markdown.astro';
+
 interface Props {
   id: string;
   ratio?: string;
@@ -7,7 +9,7 @@ interface Props {
 const { id, ratio }: Props = Astro.props;
 ---
 
-<div>
+<Markdown>
   <h2 class="mb-2">Slides</h2>
 
   <div class="slides">
@@ -19,4 +21,4 @@ const { id, ratio }: Props = Astro.props;
       src="//speakerdeck.com/assets/embed.js"
     ></script>
   </div>
-</div>
+</Markdown>

src/components/talk/Video.astro

@@ -1,4 +1,6 @@
 ---
+import Markdown from '../Markdown.astro';
+
 interface Props {
   id: string;
   type: string;
@@ -9,7 +11,7 @@ const { id, type }: Props = Astro.props;
 
 {
   type == "youtube" && (
-    <div>
+    <Markdown>
       <h2 class="mb-2">Video</h2>
 
       <div>
@@ -20,6 +22,6 @@ const { id, type }: Props = Astro.props;
           src={`https://www.youtube.com/embed/${id}?rel=0&iv_load_policy=3`}
         />
       </div>
-    </div>
+    </Markdown>
   )
 }

src/layouts/Layout.astro

@@ -73,7 +73,7 @@ const footerLinks = [
                 footerLinks &&
                   footerLinks.map((link) => (
                     <a
-                      class="mx-3 mb-3 text-sm md:text-lg dark:text-white link dark:hover:text-blue-400 hover:text-grey-900"
+                      class="mx-3 mb-3 text-sm underline md:text-lg dark:text-white hover:no-underline link dark:hover:text-blue-400 hover:text-grey-900"
                       href={link.href}
                     >
                       {link.title}

src/layouts/PageLayout.astro

@@ -1,12 +1,9 @@
 ---
 import BaseLayout from "./Layout.astro";
-import Markdown from "../components/Markdown.astro";
 
 const { title } = Astro.props.frontmatter || Astro.props;
 ---
 
 <BaseLayout title={title}>
-  <Markdown>
   <slot />
-  </Markdown>
 </BaseLayout>

src/pages/daily.mdx

@@ -16,19 +16,22 @@ export const testimonials = [
   },
   {
     name: "Stephen Mulvihill",
-    text: 'I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!',
+    text: '<p>I like the "$ git log -S" and "$ git log --grep" commands, will definitely be using these, thanks!</p>',
     image: "stephen-mulvihill.jpg",
   },
   {
     name: "Marcos Duran",
-    text: "<p>    I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>",
+    text: "<p>I am a big fan of your git approaches. I especially remember pairing with you and watching how many commands you run to solve many problems and how fast you were. It's a skill I believe not many have, particularly those who are used to working with a GUI like me, and personally I think it is quite valuable.</p>",
     image: "marcos-duran.jpg",
   },
 ];
 
 export const sortedTestimonials = _.reverse(testimonials);
 
-A daily newsletter on software development, DevOps, community, and open-source.
+<p>
+  A daily newsletter on software development, DevOps, community, and
+  open-source.
+</p>
 
 <div class="space-y-12">
   <div class="space-y-20">
@@ -42,11 +45,11 @@ A daily newsletter on software development, DevOps, community, and open-source.
           {testimonials.map(testimonial => (
             <article class="flex space-x-10">
               <div>
-                <blockquote class="m-0">
+                <Markdown>
-                  <Markdown set:html={testimonial.text} />
+                  <blockquote class="m-0"set:html={testimonial.text} />
-                </blockquote>
 
                   <figcaption class="mt-6">{testimonial.name}</figcaption>
+                </Markdown>
               </div>
 
               <div class="hidden flex-shrink-0 sm:block">

src/pages/talks/[slug].astro

@@ -24,7 +24,7 @@ const { events, speakerdeck, title, video } = Astro.props.talk.data;
 ---
 
 <Layout title={title}>
-  <div class="space-y-6">
+  <div class="space-y-8">
     <Markdown>
       <Content />
     </Markdown>

src/pages/talks/index.astro

@@ -2,6 +2,7 @@
 import ListingPage from "~/components/ListingPage.astro";
 import _ from "lodash";
 import { getCollection } from "astro:content";
+import Markdown from "~/components/Markdown.astro";
 
 const talks = await getCollection("talk");
 
@@ -28,9 +29,11 @@ const sortedTalks = talks
 ---
 
 <ListingPage items={sortedTalks} title="Talks and workshops">
+  <Markdown>
     <p slot="intro">
       Starting with my first talk in September 2012, I have given {talkCount} presentations
       and workshops at various conferences and meetups, in-person and remotely, on
       topics including PHP, Drupal, automated testing, Git, CSS, and systems administration.
     </p>
+  </Markdown>
 </ListingPage>

tailwind.config.cjs

@@ -14,15 +14,6 @@ module.exports = {
       white: "1px solid white",
     },
     extend: {
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            p: {
-              lineHeight: 400,
-            },
-          },
-        },
-      }),
       colors,
       fontFamily: {
         sans: [