🚀 perf: use native scrollbar instead of overlayscrollbars, switch waline to cdn import

- remove preload comment configuration
- remove preload meta tags in head
- update 404 page

src/components/Comments/Waline.astro

@@ -2,13 +2,6 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { walineLocaleMap } from '@/i18n/config'
 
-const {
-  serverURL = '',
-  emoji = [],
-  search = false,
-  imageUploader = false,
-} = themeConfig.comment?.waline ?? {}
-
 // Get the language code of Waline
 function getWalineLang(currentPath: string, defaultLocale: string): string {
   // Extract language code from path
@@ -20,43 +13,45 @@ function getWalineLang(currentPath: string, defaultLocale: string): string {
   return walineLocaleMap[lang as keyof typeof walineLocaleMap]
 }
 
-// Get Waline language and generate configuration json
 const walineLang = getWalineLang(Astro.url.pathname, defaultLocale)
-const walineConfigJson = JSON.stringify({
-  serverURL,
-  lang: walineLang,
-  emoji,
-  search,
-  imageUploader,
-})
+const { waline: { serverURL = '', emoji = [], search = false, imageUploader = false } = {} } = themeConfig.comment ?? {}
 ---
 
 <div
   id="waline"
   class="mt-16"
-  data-config={walineConfigJson}
->
-</div>
+></div>
 
-<!-- Not use is:inline or define:vars >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-<script>
-import { init } from '@waline/client'
-import '@waline/client/style'
+<!-- >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+
+<script
+  is:inline
+  define:vars={{
+    walineLang,
+    serverURL,
+    emoji,
+    search,
+    imageUploader,
+  }}
+  type="module"
+>
+import { init } from '/assets/waline/waline.js'
 
 function initWaline() {
-  const walineEl = document.getElementById('waline')
-  const walineConfig = JSON.parse(walineEl?.dataset.config || '{}')
-
   init({
     el: '#waline',
+    serverURL,
     path: window.location.pathname.replace(/^\/([a-z]{2}(-[a-z]{2})?)\//, '/'),
+    lang: walineLang,
+    emoji,
     dark: 'html.dark',
     requiredMeta: ['nick', 'mail'],
     highlighter: false,
     texRenderer: false,
+    imageUploader,
+    search,
     noCopyright: true,
     reaction: [],
-    ...walineConfig,
   })
 }
 
@@ -79,7 +74,7 @@ document.addEventListener('astro:page-load', initWaline)
   --at-apply: 'leading-3.6 mt-1.4';
 }
 #waline .wl-panel {
-  --at-apply: 'm-0 rounded border-secondary/25'
+  --at-apply: 'm-0 rounded-lg border-secondary/25'
 }
 #waline .wl-header {
   --at-apply: 'p-0';
@@ -109,9 +104,6 @@ document.addEventListener('astro:page-load', initWaline)
 #waline .wl-footer {
   --at-apply: 'm-2';
 }
-#waline .wl-info .wl-btn {
-  --at-apply: 'rounded';
-}
 #waline .wl-text-number,
 #waline .wl-action[title="Markdown Guide"],
 #waline .wl-sort,
@@ -119,11 +111,10 @@ document.addEventListener('astro:page-load', initWaline)
   --at-apply: 'hidden';
 }
 #waline .wl-emoji-popup {
-  --at-apply: 'start-0 rounded border-secondary/25';
+  --at-apply: 'start-0 border-secondary/25 max-w-532px';
 }
-#waline {
+#waline .wl-emoji-popup .wl-tab-wrapper {
   scrollbar-width: thin;
-  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.25) transparent;
 }
 #waline .wl-gif-popup {
   --at-apply: 'border-secondary/25';
@@ -162,7 +153,6 @@ document.addEventListener('astro:page-load', initWaline)
 </style>
 
 <!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
-<!-- https://waline.js.org/reference/client/style.html -->
 <style>
 #waline {
   /* Regular Colors */

src/config.ts

@@ -157,8 +157,6 @@ export const themeConfig: ThemeConfig = {
     // link prefetch
     // docs: https://docs.astro.build/en/guides/prefetch/#prefetch-strategies
     linkPrefetch: 'viewport', // hover, tap, viewport, load
-    // comment server url
-    commentURL: 'https://retypeset-comment.radishzz.cc',
     // image hosting url
     imageHostURL: 'https://image.radishzz.cc',
     // custom google analytics js

src/content.config.ts

@@ -1,6 +1,6 @@
-import { allLocales } from '@/config'
 import { glob } from 'astro/loaders'
 import { defineCollection, z } from 'astro:content'
+import { allLocales } from '@/config'
 
 const posts = defineCollection({
   loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/posts' }),

src/content/posts/guides/Markdown Style Guide-es.md

@@ -2,7 +2,7 @@
 title: Guía de Estilo Markdown
 published: 2025-03-08
 updated: 2025-03-23
-tags: 
+tags:
   - Guía
 pin: 98
 toc: false

src/content/posts/guides/Markdown Style Guide-ja.md

@@ -2,7 +2,7 @@
 title: Markdown スタイルガイド
 published: 2025-03-08
 updated: 2025-03-23
-tags: 
+tags:
   - ガイド
 pin: 98
 toc: false

src/content/posts/guides/Markdown Style Guide-ru.md

@@ -2,7 +2,7 @@
 title: Руководство по стилю Markdown
 published: 2025-03-08
 updated: 2025-03-23
-tags: 
+tags:
   - Руководство
 pin: 98
 toc: false

src/content/posts/guides/Markdown Style Guide-zh-tw.md

@@ -2,7 +2,7 @@
 title: Markdown 樣式指南
 published: 2025-03-08
 updated: 2025-03-23
-tags: 
+tags:
   - 指南
 pin: 98
 toc: false

src/content/posts/guides/Markdown Style Guide-zh.md

@@ -258,4 +258,4 @@ X<sup>n</sup> + Y<sup>n</sup> = Z<sup>n</sup>
 
 按下 <kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Delete</kbd> 以结束会话。
 
-大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。
+大多数<mark>蝾螈</mark>昼伏夜出，以昆虫、蠕虫等小生物为食。

src/content/posts/guides/Theme Guide-en.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // link prefetch strategies
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // comment server url
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // image hosting url
   imageHostURL: 'https://image.radishzz.cc'
   // custom google analytics js

src/content/posts/guides/Theme Guide-es.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // estrategias de precarga de enlaces
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // URL del servidor de comentarios
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // URL de alojamiento de imágenes
   imageHostURL: 'https://image.radishzz.cc'
   // js personalizado de google analytics

src/content/posts/guides/Theme Guide-ja.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // リンクプリフェッチ戦略
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // コメントサーバー URL
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // 画像ホスティング URL
   imageHostURL: 'https://image.radishzz.cc'
   // カスタム Google Analytics JS

src/content/posts/guides/Theme Guide-ru.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // стратегии предзагрузки ссылок
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // URL сервера комментариев
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // URL хостинга изображений
   imageHostURL: 'https://image.radishzz.cc'
   // пользовательский скрипт Google Analytics

src/content/posts/guides/Theme Guide-zh-tw.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // 鏈接預加載策略
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // 評論服務器地址
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // 圖床地址
   imageHostURL: 'https://image.radishzz.cc'
   // 定制 google analytics js

src/content/posts/guides/Theme Guide-zh.md

@@ -182,8 +182,6 @@ footer: {
 preload: {
   // 链接预加载策略
   linkPrefetch: 'viewport' // hover, tap, viewport, load
-  // 评论服务器地址
-  commentURL: 'https://retypeset-comment.radishzz.cc'
   // 图床地址
   imageHostURL: 'https://image.radishzz.cc'
   // 定制 google analytics js

src/layouts/Head.astro

@@ -18,10 +18,11 @@ const langCode = currentLang === defaultLocale ? '' : `${currentLang}/`
 
 const { title, subtitle, description, author, url, favicon, i18nTitle } = themeConfig.site
 const { mode, light: { background: lightMode }, dark: { background: darkMode } } = themeConfig.color
-const { katex } = themeConfig.global
+const { katex: katexEnabled } = themeConfig.global
+const { enabled: commentEnabled = false, waline: { serverURL: walineServerURL = '' } = {} } = themeConfig.comment ?? {}
 const { verification = {}, twitterID = '', googleAnalyticsID = '', umamiAnalyticsID = '', apiflashKey = '' } = themeConfig.seo ?? {}
 const { google = '', bing = '', yandex = '', baidu = '' } = verification
-const { commentURL = '', customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
+const { customGoogleAnalyticsJS = '', customUmamiAnalyticsJS = '' } = themeConfig.preload
 
 const initMetaTheme = mode === 'dark' ? darkMode : lightMode
 const siteTitle = i18nTitle ? currentUI.title : title
@@ -54,9 +55,8 @@ const pageImage = postSlug
 <link rel="preload" href="/fonts/EarlySummer-Subset.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/fonts/Snell-Black.woff2" as="font" type="font/woff2" crossorigin />
 <link rel="preload" href="/fonts/Snell-Bold.woff2" as="font" type="font/woff2" crossorigin />
-{katex && <link rel="stylesheet" href={katexCSS} />}
-{commentURL && <link rel="preconnect" href={commentURL} crossorigin />}
-{commentURL && <link rel="dns-prefetch" href={commentURL} />}
+{commentEnabled && walineServerURL && <link rel="stylesheet" href="/assets/waline/waline.css" />}
+{katexEnabled && <link rel="stylesheet" href={katexCSS} />}
 <link rel="alternate" href="/rss.xml" type="application/rss+xml" title="RSS Feed" />
 <link rel="alternate" href="/atom.xml" type="application/atom+xml" title="Atom Feed" />
 <link rel="sitemap" href="/sitemap-index.xml" />

src/layouts/Layout.astro

@@ -4,7 +4,7 @@ import Footer from '@/components/Footer.astro'
 import Header from '@/components/Header.astro'
 import Navbar from '@/components/Navbar.astro'
 import GithubCard from '@/components/Widgets/GithubCard.astro'
-import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
+// import PhotoSwipe from '@/components/Widgets/PhotoSwipe.astro'
 import themeConfig from '@/config'
 import Head from '@/layouts/Head.astro'
 import { getPageInfo } from '@/utils/page'
@@ -48,6 +48,6 @@ const MarginBottom = isPost && themeConfig.comment?.enabled
     </div>
     <Button supportedLangs={supportedLangs} />
     <GithubCard />
-    <PhotoSwipe />
+    <!-- <PhotoSwipe /> -->
   </body>
 </html>

src/pages/404.astro

@@ -6,8 +6,15 @@ import Layout from '@/layouts/Layout.astro'
   <!-- Decorative Line -->
   <div class="uno-decorative-line"></div>
   <!-- Page Not Found -->
-  <h3 class="mt--1.3 text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">PAGE<br>NOT<br>FOUND</h3>
-  <p class="mt-3.6 text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">It looks like the page you're looking for<br>does not exist or has been moved.</p>
+  <h3 class="mt--1.3 flex flex-col text-8 text-primary font-bold leading-1.2em font-navbar lg:text-9">
+    <span>PAGE</span>
+    <span>NOT</span>
+    <span>FOUND</span>
+  </h3>
+  <p class="mt-3.6 flex flex-col text-3.6 leading-1.4em font-navbar lg:(mt-4 text-4)">
+    <span>It looks like the page you're looking for</span>
+    <span>does not exist or has been moved.</span>
+  </p>
   <!-- Unused Div -->
   <div class=""></div>
 </Layout>

src/styles/extend.css

@@ -1,10 +1,8 @@
 /* GitHub Card */
 .gc-container {
-  --at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5 scrollbar-hidden';
+  --at-apply: 'block mb-4 px-5 py-4 overflow-x-auto uno-round-border bg-secondary/5';
   --at-apply: 'transition-colors lg:(px-6 py-5) hover:(bg-secondary/10 c-primary)';
-}
-.gc-container::-webkit-scrollbar {
-  display: none;
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 
 /* Title Bar */

src/styles/heti.css

@@ -94,6 +94,10 @@
 .heti :where(pre) {
   --at-apply: 'mb-4 overflow-auto uno-round-border px-4 py-3 bg-secondary/5!';
   scrollbar-width: thin;
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
+  transition: scrollbar-color 0.3s ease-out;
+}
+.heti :where(pre:hover) {
   scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 .heti pre :where(code) {
@@ -137,10 +141,13 @@ html.dark .heti pre :where(span) {
 
 /* Tables */
 .heti :where(table) {
-  --at-apply: 'mb-4 box-border block max-w-full table-fixed overflow-x-auto scrollbar-hidden';
+  --at-apply: 'mb-4 box-border block max-w-full table-fixed overflow-x-auto';
+  scrollbar-width: thin;
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0) transparent;
+  transition: scrollbar-color 0.3s ease-out;
 }
-.heti :where(table)::-webkit-scrollbar {
-  --at-apply: 'hidden';
+.heti :where(table:hover) {
+  scrollbar-color: oklch(var(--un-preset-theme-colors-secondary) / 0.15) transparent;
 }
 .heti :where(th),
 .heti :where(td) {

src/types/index.d.ts

@@ -73,7 +73,6 @@ export interface ThemeConfig {
 
   preload: {
     linkPrefetch: 'hover' | 'tap' | 'viewport' | 'load'
-    commentURL?: string
     imageHostURL?: string
     customGoogleAnalyticsJS?: string
     customUmamiAnalyticsJS?: string