Add comments link and focus comment box when clicked

tylermercer · Feb 7, 2025 · 9c5a049 · 9c5a049
1 parent 6d92b40
commit 9c5a049
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 0 deletions.
diff --git 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
@@ -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
@@ -52,3 +52,9 @@ const { entry } = Astro.props;
         }
     }
 </style>
+
+<style lang="scss" is:global>
+    html:has(#comments:target) {
+        scroll-behavior: smooth;
+    }
+</style>