Merge pull request #112 from jermspeaks/bug/relative-link-fix-1

Fix the relative links by removing on mobile and making classes for c…
jermspeaks · Jun 6, 2023 · 71e7127 · 71e7127
2 parents fb26fa3 + 8041fb6
commit 71e7127
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 16 deletions.
diff --git 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: [],
-              // },
             ],
           },
         },
@@ -72,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
@@ -8,9 +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 md:opacity-0 relative;
+  }
+  .heading-link svg {
+    @apply absolute top-1/2 -translate-y-1/2 -left-7;
+  }
+
+  .external-link {
+    @apply inline-block align-super;
+  }
+</style>