Add highlight for selected diary entry, theme mode-aware

xlxs4 · Jan 4, 2024 · 08ebbb5 · 08ebbb5
1 parent 7046772
commit 08ebbb5
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 5 deletions.
diff --git a/assets/css/extended/custom.css b/assets/css/extended/custom.css
@@ -3,15 +3,27 @@
 }
 
 .diary-entries {
-    list-style-type: none; /* Remove bullets */
-    padding-left: 0; /* Adjust padding if needed */
+    list-style-type: none;
+    padding-left: 0;
 }
 
 .diary-entry-number {
-    font-weight: bold; /* Make the number bold */
-    margin-right: 0.5em; /* Add space after the number */
+    font-weight: bold;
+    margin-right: 0.5em;
 }
 
 .diary-entry-content {
-    display: inline; /* Keep content inline with the number */
+    display: inline;
+}
+
+:root {
+    --diary-entry-highlight-color: rgba(224, 247, 250, 1.0);
+}
+
+.dark {
+    --diary-entry-highlight-color: rgba(114, 167, 207, 0.4);
+}
+
+.diary-entry-highlighted {
+    background-color: var(--diary-entry-highlight-color);
 }
diff --git a/layouts/_default/diary.html b/layouts/_default/diary.html
@@ -4,6 +4,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Diary | {{ .Site.Title }}</title>
+    <script src="/js/diary.js"></script>
 </head>
 <body>
 

diff --git a/static/js/diary.js b/static/js/diary.js
@@ -0,0 +1,33 @@
+document.addEventListener('DOMContentLoaded', (event) => {
+    function clearHighlights() {
+        document.querySelectorAll('.diary-entry').forEach((el) => {
+            el.classList.remove('diary-entry-highlighted');
+        });
+    }
+
+    function highlightEntry(hash) {
+        clearHighlights();
+        const entry = document.querySelector(hash);
+        if (entry) {
+            entry.classList.add('diary-entry-highlighted');
+            entry.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+    }
+
+    if(window.location.hash) {
+        highlightEntry(window.location.hash);
+    }
+
+    document.querySelectorAll('.diary-entry-number').forEach((number) => {
+        number.addEventListener('click', () => {
+            highlightEntry(number.getAttribute('href'));
+        });
+    });
+
+    window.addEventListener('hashchange', () => {
+        highlightEntry(window.location.hash);
+    }, false);
+});