From f4bcae37db8ddea2cfaabd8e3ca89b0128983de1 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Sat, 22 Apr 2023 21:57:02 +0100
Subject: [PATCH] refactor: use Tailwind CSS prose styles

---
 assets/css/components.pcss           | 63 ----------------------------
 src/components/AboutMe.astro         | 44 ++++++++++---------
 src/components/DailyEmailForm.astro  |  9 ++--
 src/components/ListingPageItem.astro | 32 +++++++-------
 src/components/Markdown.astro        | 18 +++++++-
 src/components/talk/Events.astro     | 10 +++--
 src/components/talk/Slides.astro     |  6 ++-
 src/components/talk/Video.astro      |  6 ++-
 src/layouts/Layout.astro             |  2 +-
 src/layouts/PageLayout.astro         |  5 +--
 src/pages/daily.mdx                  | 17 ++++----
 src/pages/talks/[slug].astro         |  2 +-
 src/pages/talks/index.astro          | 13 +++---
 tailwind.config.cjs                  | 11 +----
 14 files changed, 102 insertions(+), 136 deletions(-)

diff --git a/assets/css/components.pcss b/assets/css/components.pcss
index a0ed6c94..f7690f86 100644
--- a/assets/css/components.pcss
+++ b/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;
   }
diff --git a/src/components/AboutMe.astro b/src/components/AboutMe.astro
index aba7b265..f173bfd5 100644
--- a/src/components/AboutMe.astro
+++ b/src/components/AboutMe.astro
@@ -1,24 +1,30 @@
+---
+import Markdown from "./Markdown.astro";
+---
+
 <aside>
-  <h2>About me</h2>
+  <Markdown>
+    <h2>About me</h2>
 
-  <div class="flex mt-4 space-x-4">
-    <div class="flex-shrink-0">
-      <img
-        src="/images/social-avatar.jpg"
-        alt="Picture of Oliver"
-        class="w-16 h-16 rounded-full border border-grey"
-      />
-    </div>
+    <div class="flex space-x-4">
+      <div class="flex-shrink-0 flex flex-col justify-start">
+        <img
+          src="/images/social-avatar.jpg"
+          alt="Picture of Oliver"
+          class="not-prose my-0 w-16 h-16 rounded-full border border-grey"
+        />
+      </div>
 
-    <div>
-      <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
-        application development, and a Lead Developer at <a
-          href="https://tfw.wales"
-          class="link">Transport for Wales</a
-        >.
-      </p>
+      <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 application development, and a Lead Developer at <a
+            href="https://tfw.wales"
+            class="link">Transport for Wales</a
+          >.
+        </p>
+      </Markdown>
     </div>
-  </div>
+  </Markdown>
 </aside>
diff --git a/src/components/DailyEmailForm.astro b/src/components/DailyEmailForm.astro
index 817d4dfd..32d0a743 100644
--- a/src/components/DailyEmailForm.astro
+++ b/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">
-        <p>
-          Not sure? <a class="link" href="/archive">Browse the archive →</a>
-        </p>
+        <Markdown>
+          <p>
+            Not sure? <a class="link" href="/archive">Browse the archive &rarr;</a>
+          </p>
+        </Markdown>
       </footer>
 
       <style>
diff --git a/src/components/ListingPageItem.astro b/src/components/ListingPageItem.astro
index dc1f3f6e..e12a161f 100644
--- a/src/components/ListingPageItem.astro
+++ b/src/components/ListingPageItem.astro
@@ -1,4 +1,6 @@
 ---
+import Markdown from "./Markdown.astro";
+
 interface ItemProps {
   date: string;
   description?: string;
@@ -12,20 +14,22 @@ 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 && (
-      <time class="block mt-0 mb-2 text-base" datetime={date}>
-        {new Date(date).toLocaleDateString("en-GB", {
-          day: "numeric",
-          month: "long",
-          year: "numeric",
-        })}
-      </time>
-    )
-  }
+    {
+      date && (
+        <time class="block mt-0 mb-2 text-base" datetime={date}>
+          {new Date(date).toLocaleDateString("en-GB", {
+            day: "numeric",
+            month: "long",
+            year: "numeric",
+          })}
+        </time>
+      )
+    }
 
-  {description && <p>{description}</p>}
-  {excerpt && <p>{excerpt}</p>}
+    {description && <p>{description}</p>}
+    {excerpt && <p>{excerpt}</p>}
+  </Markdown>
 </article>
diff --git a/src/components/Markdown.astro b/src/components/Markdown.astro
index 5dd518ff..c5e4b778 100644
--- a/src/components/Markdown.astro
+++ b/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>
diff --git a/src/components/talk/Events.astro b/src/components/talk/Events.astro
index 92741a80..326484d2 100644
--- a/src/components/talk/Events.astro
+++ b/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>
   )
 }
diff --git a/src/components/talk/Slides.astro b/src/components/talk/Slides.astro
index 321d72c3..a2fd3e67 100644
--- a/src/components/talk/Slides.astro
+++ b/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>
diff --git a/src/components/talk/Video.astro b/src/components/talk/Video.astro
index c26cde42..9df1f24b 100644
--- a/src/components/talk/Video.astro
+++ b/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>
   )
 }
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index f4494e03..2b9de516 100644
--- a/src/layouts/Layout.astro
+++ b/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}
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 6ce7d6c5..0b2da5e7 100644
--- a/src/layouts/PageLayout.astro
+++ b/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>
+  <slot />
 </BaseLayout>
diff --git a/src/pages/daily.mdx b/src/pages/daily.mdx
index 400cce2a..599c98ae 100644
--- a/src/pages/daily.mdx
+++ b/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 set:html={testimonial.text} />
-                </blockquote>
+                <Markdown>
+                  <blockquote class="m-0"set:html={testimonial.text} />
 
-                <figcaption class="mt-6">{testimonial.name}</figcaption>
+                  <figcaption class="mt-6">{testimonial.name}</figcaption>
+                </Markdown>
               </div>
 
               <div class="hidden flex-shrink-0 sm:block">
diff --git a/src/pages/talks/[slug].astro b/src/pages/talks/[slug].astro
index b0f81e48..b8c41dd5 100644
--- a/src/pages/talks/[slug].astro
+++ b/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>
diff --git a/src/pages/talks/index.astro b/src/pages/talks/index.astro
index df0e81e1..606d47c7 100644
--- a/src/pages/talks/index.astro
+++ b/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">
-  <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>
+    <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>
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 50848909..fffefadf 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -7,22 +7,13 @@ module.exports = {
   mode: "jit",
   darkMode: "media",
   important: true,
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
   theme: {
     outline: {
       black: "1px solid black",
       white: "1px solid white",
     },
     extend: {
-      typography: (theme) => ({
-        DEFAULT: {
-          css: {
-            p: {
-              lineHeight: 400,
-            },
-          },
-        },
-      }),
       colors,
       fontFamily: {
         sans: [