feat: add comments focus feature.

astro.config.ts

@@ -63,6 +63,9 @@ export default defineConfig({
   vite: {
     // Add this for avoiding the needless import optimize in Vite.
     optimizeDeps: { exclude: ['@napi-rs/canvas'] },
+    esbuild: {
+      drop: ['console', 'debugger'],
+    },
   },
   build: {
     assets: 'cats',

src/assets/scripts/yufan.me.js

@@ -1,6 +1,8 @@
 import Aplayer from 'aplayer/dist/APlayer.min.js';
 import stickySidebar from './sticky-sidebar.js';
 
+const LOGO = '';
+
 // Menu toggle.
 const menuBody = document.querySelector('.site-aside');
 document.addEventListener('keydown', (event) => {
@@ -212,10 +214,41 @@ if (typeof comments !== 'undefined' && comments !== null) {
 
     cancelReply();
   });
-
-  // TODO: Highlighting the selected comment.
 }
 
+const scrollIntoView = (elem) => {
+  let top = 0;
+
+  const rect = elem.getBoundingClientRect();
+  const elemTop = rect.top + window.scrollY;
+  top = elemTop - (window.innerHeight / 2 - rect.height / 2);
+
+  const scrollOptions = {
+    top,
+    left: 0,
+    behavior: 'smooth',
+  };
+
+  window.scroll(scrollOptions);
+};
+
+const focusComment = () => {
+  // Highlighting the selected comment.
+  if (location.hash.startsWith('#atk-comment-')) {
+    for (const li of document.querySelectorAll('.comment-body')) {
+      li.classList.remove('active');
+    }
+
+    const li = document.querySelector(location.hash);
+    if (li !== null) {
+      scrollIntoView(li);
+      li.querySelector('.comment-body').classList.add('active');
+    }
+  }
+};
+window.addEventListener('hashchange', focusComment);
+window.addEventListener('load', focusComment);
+
 // Add like button for updating likes.
 const likeButton = document.querySelector('button.post-like');
 

src/assets/styles/globals.css

@@ -3025,6 +3025,10 @@ a:hover .overlay {
   border-bottom: 1px solid var(--border-light);
 }
 
+.comment .active {
+  background-color: var(--bg-warning);
+}
+
 .comment:last-child {
   margin: 0;
   padding: 0;

src/helpers/db/query.ts

@@ -32,11 +32,14 @@ export const latestComments = async (): Promise<Comment[]> => {
     if (trimTitle.includes(` - ${options.title}`)) {
       trimTitle = trimTitle.substring(0, trimTitle.indexOf(` - ${options.title}`));
     }
+
+    const link = !options.isProd() && page !== null ? page.replace(options.website, import.meta.env.SITE) : page;
+
     return {
       title: trimTitle,
       author: author ?? '',
       authorLink: authorLink ?? '',
-      permalink: `${page}#atk-comment-${id}`,
+      permalink: `${link}#atk-comment-${id}`,
     };
   });
 };