chore: fix waline language switching exceptions, remove unused global variables, update theme guide

src/components/Comments/Waline.astro

@@ -2,18 +2,6 @@
 import { defaultLocale, themeConfig } from '@/config'
 import { walineLocaleMap } from '@/i18n/config'
 
-// Get the language code of Waline
-function getWalineLang(currentPath: string, defaultLocale: string): string {
-  // Extract language code from path
-  const pathLang = Object.keys(walineLocaleMap).find(code =>
-    currentPath.startsWith(`/${code}/`),
-  )
-  // Return found path language or default language
-  const lang = pathLang || defaultLocale
-  return walineLocaleMap[lang as keyof typeof walineLocaleMap]
-}
-
-const walineLang = getWalineLang(Astro.url.pathname, defaultLocale)
 const { waline: { serverURL = '', emoji = [], search = false, imageUploader = false } = {} } = themeConfig.comment ?? {}
 ---
 
@@ -27,23 +15,31 @@ const { waline: { serverURL = '', emoji = [], search = false, imageUploader = fa
 <script
   is:inline
   define:vars={{
-    walineLang,
     serverURL,
     emoji,
     search,
     imageUploader,
+    walineLocaleMap,
+    defaultLocale,
   }}
   type="module"
 >
 import { init } from '/assets/waline/waline.js'
 
 function initWaline() {
+  const currentPath = window.location.pathname
+  const pathLang = Object.keys(walineLocaleMap).find(code =>
+    currentPath.startsWith(`/${code}/`),
+  )
+  const lang = pathLang || defaultLocale
+  const currentWalineLang = walineLocaleMap[lang]
+
   init({
     el: '#waline',
     serverURL,
     // Share comments on posts in different languages
     path: window.location.pathname.replace(/^\/([a-z]{2}(-[a-z]{2})?)\//, '/'),
-    lang: walineLang,
+    lang: currentWalineLang,
     emoji,
     dark: 'html.dark',
     requiredMeta: ['nick', 'mail'],
@@ -157,28 +153,28 @@ document.addEventListener('astro:page-load', initWaline)
 <style>
 #waline {
   /* Regular Colors */
-  --waline-white: var(--uno-colors-background);
+  --waline-white: oklch(var(--un-preset-theme-colors-background));
   --waline-light-grey: oklch(var(--un-preset-theme-colors-primary) / 0.25);
-  --waline-dark-grey: var(--uno-colors-secondary);
+  --waline-dark-grey: oklch(var(--un-preset-theme-colors-secondary));
 
   /* Theme Colors */
-  --waline-theme-color: var(--uno-colors-primary);
+  --waline-theme-color: oklch(var(--un-preset-theme-colors-primary));
-  --waline-active-color: var(--uno-colors-primary);
+  --waline-active-color: oklch(var(--un-preset-theme-colors-primary));
 
   /* Layout Colors */
-  --waline-color: var(--uno-colors-secondary);
+  --waline-color: oklch(var(--un-preset-theme-colors-secondary));
-  --waline-bg-color: var(--uno-colors-background);
+  --waline-bg-color: oklch(var(--un-preset-theme-colors-background));
-  --waline-bg-color-light: var(--uno-colors-background);
+  --waline-bg-color-light: oklch(var(--un-preset-theme-colors-background));
-  --waline-bg-color-hover: var(--uno-colors-background);
+  --waline-bg-color-hover: oklch(var(--un-preset-theme-colors-background));
   --waline-border-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
   --waline-disable-bg-color: oklch(var(--un-preset-theme-colors-secondary) / 0.05);
-  --waline-disable-color: var(--uno-colors-primary);
+  --waline-disable-color: oklch(var(--un-preset-theme-colors-primary));
 
   /* Special Colors */
   --waline-bq-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
 
   /* Information */
-  --waline-info-bg-color: var(--uno-colors-background);
+  --waline-info-bg-color: oklch(var(--un-preset-theme-colors-background));
   --waline-info-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
 
   /* Rendering Options */

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

@@ -26,7 +26,7 @@ site: {
   subtitle: 'Revive the beauty of typography'
   // descripción del sitio
   description: 'Retypeset is a static blog theme...'
-  // usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos anteriores
+  // usar título/subtítulo/descripción en varios idiomas desde src/i18n/ui.ts en lugar de los estáticos de arriba
   i18nTitle: true // true, false
   // nombre del autor
   author: 'radishzz'

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

@@ -26,7 +26,7 @@ site: {
   subtitle: 'Revive the beauty of typography'
   // サイト説明
   description: 'Retypeset is a static blog theme...'
-  // 上記の静的設定の代わりに src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用
+  // 上記の静的設定ではなく src/i18n/ui.ts の多言語タイトル/サブタイトル/説明を使用
   i18nTitle: true // true, false
   // 著者名
   author: 'radishzz'

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

@@ -26,7 +26,7 @@ site: {
   subtitle: 'Revive the beauty of typography'
   // описание сайта
   description: 'Retypeset is a static blog theme...'
-  // использовать многоязычные заголовок/подзаголовок/описание из src/i18n/ui.ts вместо статических выше
+  // использовать многоязычные заголовок/подзаголовок/описание из src/i18n/ui.ts, а не статические выше
   i18nTitle: true // true, false
   // имя автора
   author: 'radishzz'

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

@@ -26,7 +26,7 @@ site: {
   subtitle: 'Revive the beauty of typography'
   // 站點描述
   description: 'Retypeset is a static blog theme...'
-  // 使用 src/i18n/ui.ts 中的多語言標題/副標題/站點描述，替換以上靜態配置
+  // 使用 src/i18n/ui.ts 中的多語言標題/副標題/站點描述，而不是上方靜態配置
   i18nTitle: true // true, false
   // 作者名稱
   author: 'radishzz'

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

@@ -26,7 +26,7 @@ site: {
   subtitle: 'Revive the beauty of typography'
   // 站点描述
   description: 'Retypeset is a static blog theme...'
-  // 使用 src/i18n/ui.ts 中的多语言标题/副标题/站点描述，替换以上静态配置
+  // 使用 src/i18n/ui.ts 中的多语言标题/副标题/站点描述，而不是上方静态配置
   i18nTitle: true // true, false
   // 作者名称
   author: 'radishzz'

src/i18n/config.ts

@@ -16,15 +16,15 @@ export const langMap: Record<string, string[]> = {
 // Waline Language Map
 // https://waline.js.org/en/guide/features/i18n.html
 export const walineLocaleMap: Record<string, string> = {
-  'de': 'de',
+  'de': 'en-US', // fallback to English
-  'en': 'en',
+  'en': 'en-US',
   'es': 'es',
-  'fr': 'fr',
+  'fr': 'fr-FR',
-  'ja': 'jp',
+  'ja': 'jp-JP',
-  'ko': 'en', // Waline does not support Korean, using English as fallback
+  'ko': 'en-US', // fallback to English
-  'pl': 'en', // Waline does not support Polish, using English as fallback
+  'pl': 'en-US', // fallback to English
   'pt': 'pt-BR',
-  'ru': 'ru',
+  'ru': 'ru-RU',
   'zh': 'zh-CN',
   'zh-tw': 'zh-TW',
 }

src/pages/[...posts_slug].astro

@@ -124,7 +124,7 @@ const { Content, headings, remarkPluginFrontmatter } = await render(post)
     <!-- Date -->
     <div
       id="gsap-post-page-date"
-      class="mb-16.3 block c-primary font-time"
+      class="mb-17.2 block c-primary font-time"
       transition:name={`time-${post.data.abbrlink || post.id}-${lang}`}
       data-disable-theme-transition
     >

src/styles/global.css

@@ -1,8 +1,3 @@
-:root {
-  --uno-colors-primary: theme('colors.primary');
-  --uno-colors-secondary: theme('colors.secondary');
-  --uno-colors-background: theme('colors.background');
-}
 html {
   --at-apply: 'bg-background c-secondary antialiased';
   scrollbar-width: thin;