From ec9467ee725ed485e7c4b1b542b1ee14a2bd0dfb Mon Sep 17 00:00:00 2001
From: Yufan Sheng <syhily@gmail.com>
Date: Fri, 21 Jun 2024 15:16:14 +0800
Subject: [PATCH] feat: add comments focus feature.

---
 astro.config.ts                |  3 +++
 src/assets/scripts/yufan.me.js | 37 ++++++++++++++++++++++++++++++++--
 src/assets/styles/globals.css  |  4 ++++
 src/helpers/db/query.ts        |  5 ++++-
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/astro.config.ts b/astro.config.ts
index 87fbaca..e4c3173 100644
--- a/astro.config.ts
+++ b/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',
diff --git a/src/assets/scripts/yufan.me.js b/src/assets/scripts/yufan.me.js
index 5f29f07..24e90c3 100644
--- a/src/assets/scripts/yufan.me.js
+++ b/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');
 
diff --git a/src/assets/styles/globals.css b/src/assets/styles/globals.css
index 57d2789..b4cde75 100644
--- a/src/assets/styles/globals.css
+++ b/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;
diff --git a/src/helpers/db/query.ts b/src/helpers/db/query.ts
index bbe1afb..82422a7 100644
--- a/src/helpers/db/query.ts
+++ b/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}`,
     };
   });
 };