3

public/js/twikoo-loader.js

@@ -2,25 +2,21 @@
   var TWIKOO_SRC =
     'https://cdn.jsdelivr.net/npm/twikoo@1.6.44/dist/twikoo.min.js'
   var TARGET_SELECTOR = '#tcomment'
-  var state = { loading: false, loaded: false }
+  var state = { loading: false }
 
-  function init() {
+  function renderTwikoo() {
     var container = document.querySelector(TARGET_SELECTOR)
-    if (!container) return
+    if (!container || !window.twikoo) return
 
-    function runInit() {
-      if (state.loaded) return
-      state.loaded = true
-      if (window.twikoo) {
     window.twikoo.init({
       envId: 'https://twikoo.hk.nvme0n1p.dev/',
       el: TARGET_SELECTOR,
     })
   }
-    }
 
+  function init() {
     if (window.twikoo) {
-      runInit()
+      renderTwikoo()
       return
     }
 
@@ -30,8 +26,12 @@
     var script = document.createElement('script')
     script.src = TWIKOO_SRC
     script.async = true
-    script.onload = runInit
+    script.onload = function () {
+      state.loading = false
+      renderTwikoo()
+    }
     script.onerror = function (err) {
+      state.loading = false
       console.error('Failed to load Twikoo:', err)
     }
     document.head.appendChild(script)

src/components/notion/Code.astro

@@ -198,6 +198,34 @@ const displayLanguage =
     min-width: 0;
     background: transparent;
     -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in oklab, var(--muted-foreground) 60%, transparent)
+      transparent;
+  }
+
+  .code pre::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+  }
+
+  .code pre::-webkit-scrollbar-track {
+    background: color-mix(in oklab, var(--muted) 14%, transparent);
+    border-radius: 999px;
+  }
+
+  .code pre::-webkit-scrollbar-thumb {
+    background: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
+    border-radius: 999px;
+    border: 2px solid transparent;
+    background-clip: content-box;
+  }
+
+  .code pre::-webkit-scrollbar-thumb:hover {
+    background: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
+  }
+
+  .code pre::-webkit-scrollbar-corner {
+    background: transparent;
   }
 
   .code pre.mermaid {