From 9c5a049a6731af943fb05eaea6d2872c5e17ea83 Mon Sep 17 00:00:00 2001
From: Tyler Mercer <acct@tylermercer.net>
Date: Thu, 6 Feb 2025 21:37:19 -0700
Subject: [PATCH] Add comments link and focus comment box when clicked

---
 src/components/LinkCard.astro |  3 +++
 src/layouts/Base.astro        | 11 +++++++++++
 src/pages/links/[slug].astro  |  6 ++++++
 3 files changed, 20 insertions(+)

diff --git a/src/components/LinkCard.astro b/src/components/LinkCard.astro
index 88d17986..f780a485 100644
--- a/src/components/LinkCard.astro
+++ b/src/components/LinkCard.astro
@@ -31,6 +31,9 @@ const permalink = `/links/${getLinkSlug(l)}`;
             <time datetime={getLinkDate(l.slug).toISOString()}>
                 {formatPostDate(getLinkDate(l.slug))}
             </time>
+        </a> &middot;{" "}
+        <a href={permalink + "#comments"}>
+            No comments
         </a>
     </p>
 </article>
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 7ffcc2e4..21f2a276 100644
--- a/src/layouts/Base.astro
+++ b/src/layouts/Base.astro
@@ -126,5 +126,16 @@ const description = unMarkdown(descriptionRaw);
 
             footnotesSection.appendChild(details);
         }
+
+        // Focus the comment box
+        if (window.location.hash === "#comments") {
+            requestAnimationFrame(() => {
+                (
+                    document.querySelector(
+                        "label.jc-CommentBox-label > textarea",
+                    ) as HTMLTextAreaElement | null
+                )?.focus();
+            });
+        }
     });
 </script>
diff --git a/src/pages/links/[slug].astro b/src/pages/links/[slug].astro
index ee6b592a..9e3a624a 100644
--- a/src/pages/links/[slug].astro
+++ b/src/pages/links/[slug].astro
@@ -52,3 +52,9 @@ const { entry } = Astro.props;
         }
     }
 </style>
+
+<style lang="scss" is:global>
+    html:has(#comments:target) {
+        scroll-behavior: smooth;
+    }
+</style>
\ No newline at end of file