From 4e84f4238097801fb6c01aac05bfc5669800c69e Mon Sep 17 00:00:00 2001
From: jermspeaks <jeremy.wong@clearlabs.com>
Date: Tue, 6 Jun 2023 09:31:50 -0700
Subject: [PATCH 1/2] Fix the relative links by removing on mobile and making
 classes for css in prose

---
 astro.config.mjs                  | 14 +-------------
 src/components/ProseArticle.astro |  8 ++++++++
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 9ac40b68..de6a75ba 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -22,14 +22,12 @@ export default defineConfig({
           content: {
             type: "element",
             tagName: "span",
-            properties: { className: ["relative"] },
+            properties: { className: ["heading-link"] },
             children: [
               {
                 type: "element",
                 tagName: "svg",
                 properties: {
-                  className: ["absolute top-0 -left-16"],
-                  style: "top: 0.8rem; left: -2.4rem;",
                   width: 24,
                   height: 24,
                   version: 1.1,
@@ -48,16 +46,6 @@ export default defineConfig({
                   },
                 ],
               },
-              // {
-              //   type: "element",
-              //   tagName: "img",
-              //   properties: {
-              //     src: "/images/heading-link.svg",
-              //     alt: "Link icon",
-              //     className: ["m-0", "h-4", "w-4"],
-              //   },
-              //   children: [],
-              // },
             ],
           },
         },
diff --git a/src/components/ProseArticle.astro b/src/components/ProseArticle.astro
index e054e605..34c13eb1 100644
--- a/src/components/ProseArticle.astro
+++ b/src/components/ProseArticle.astro
@@ -14,3 +14,11 @@ const { class: className } = Astro.props;
 >
   <slot />
 </article>
+<style lang="css" is:global>
+  .heading-link {
+    @apply hidden md:inline relative;
+  }
+  .heading-link svg {
+    @apply absolute top-1 lg:top-3 -left-8;
+  }
+</style>

From 8041fb6c80fba813d8afe7429120f09a876bee23 Mon Sep 17 00:00:00 2001
From: jermspeaks <jeremy.wong@clearlabs.com>
Date: Tue, 6 Jun 2023 09:55:32 -0700
Subject: [PATCH 2/2] Adjustments to heading link using opacity

---
 astro.config.mjs                  |  3 +--
 src/components/ProseArticle.astro | 16 +++++++++++++---
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index de6a75ba..4fa2afe9 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -60,11 +60,10 @@ export default defineConfig({
               src: "/images/external-link.svg",
               alt: "External link icon",
               width: "16",
-              className: "inline-block ml-2 align-super",
             },
             children: [],
           },
-          contentProperties: { className: ["external-link "] },
+          contentProperties: { className: ["external-link"] },
         },
       ],
     ],
diff --git a/src/components/ProseArticle.astro b/src/components/ProseArticle.astro
index 34c13eb1..f753f1dc 100644
--- a/src/components/ProseArticle.astro
+++ b/src/components/ProseArticle.astro
@@ -8,17 +8,27 @@ const { class: className } = Astro.props;
 
 <article
   class:list={[
-    "prose lg:prose-xl dark:prose-invert prose-img:mt-0 prose-img:mb-0 mx-auto",
+    "prose lg:prose-xl dark:prose-invert prose-img:mt-0 prose-img:mb-0 hover:prose-a:text-amber-600 mx-auto",
     className,
   ]}
 >
   <slot />
 </article>
 <style lang="css" is:global>
+  h2:hover .heading-link,
+  h3:hover .heading-link,
+  h4:hover .heading-link,
+  h5:hover .heading-link {
+    @apply opacity-100;
+  }
   .heading-link {
-    @apply hidden md:inline relative;
+    @apply hidden md:inline md:opacity-0 relative;
   }
   .heading-link svg {
-    @apply absolute top-1 lg:top-3 -left-8;
+    @apply absolute top-1/2 -translate-y-1/2 -left-7;
+  }
+
+  .external-link {
+    @apply inline-block align-super;
   }
 </style>