retypeset-odyssey 0.1.0

package/src/assets/icons/lang-zh.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <g transform="translate(-0.07,20.92) scale(0.0238,-0.0238)">
+    <path d="M425 765C387 765 361 766 334 770V702C359 706 379 707 423 707C434 604 447 543 475 464C510 365 550 290 605 216C530 131 417 53 276 -11C297 -29 307 -42 321 -65C387 -33 443 1 515 53C561 86 581 105 643 168C669 135 705 99 745 63C802 13 851 -21 927 -62C940 -33 950 -18 969 3C846 60 769 118 684 215C724 267 773 350 802 418C841 506 877 627 894 726C900 757 900 757 903 769C877 766 855 765 824 765ZM828 707C797 567 771 491 721 391C695 338 673 301 645 264C594 335 555 408 527 487C503 555 491 617 482 707ZM45 523C120 482 171 445 232 386L271 445C201 502 160 531 84 575ZM92 769C159 728 211 686 270 626L311 679C258 730 204 771 134 814ZM235 297C179 171 107 54 54 7L111 -48C112 -45 127 -24 153 15C194 75 245 167 285 255Z"/>
+  </g>
+</svg>

package/src/assets/icons/language-switcher.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M19.18 21.1 12.4 1.89h-1.21L4.52 21.1l-2.53.2v.81h6.37v-.81l-2.83-.2 2.02-5.97h7.58l2.02 5.97-3.34.2v.81H22v-.81l-2.83-.2zM7.85 14.33l3.44-10.21 3.54 10.21z"/>
+</svg>

package/src/assets/icons/pin-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M23.7,8.1l-2.2-2.2-3.3-3.3L15.9.3C9,6.4,6.5,7,.4,7.5l6.4,6.4,1,1-6.5,6.9.9.9,6.9-6.5,1,1,6.4,6.4c.5-6.1,1.1-8.6,7.2-15.5ZM7.9,12.7l-4.4-4.4c4.1-.5,5.9-1,12-6l1.4,1.4,3.3,3.3,1.4,1.4c-5,6.1-5.5,7.9-6,12l-4.4-4.4-3.3-3.3Z"/>
+</svg>

package/src/assets/icons/search-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m23.37 23.12-5.13-5.57c3.28-3.96 2.96-9.92-.9-13.78C13.25-.33 6.8-.45 2.87 3.48s-3.81 10.38.28 14.47c3.86 3.86 9.82 4.19 13.78.9l5.58 5.13zM3.61 17.49C.26 14.14.54 8.48 4.21 4.82c3.67-3.67 9.32-3.95 12.67-.6s3.07 9.01-.6 12.67c-3.67 3.67-9.32 3.95-12.67.6"/>
+</svg>

package/src/assets/icons/theme-toggle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M12.06.61C5.66.61.46 5.71.46 12.11s5.1 11.5 11.6 11.5 11.5-5.1 11.5-11.5S18.46.61 12.06.61m0 21c-6.07 0-10.94-4.2-10.94-9.5s4.87-9.4 10.94-9.4S23 6.91 23 12.21s-4.88 9.4-10.94 9.4"/>
+</svg>

package/src/assets/icons/toc-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="M22.2 2.3H1.8V4h19.9zM22.2 20H1.8v1.7h19.9zM15.5 11.2H1.8v1.6H15z"/>
+</svg>

package/src/assets/icons/top-icon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path d="m.74 3.99.53-1.54h21.46l.53 1.54zm22.62 16.78L12 8.02.64 20.77l.88.68L12 11.15l10.48 10.3z"/>
+</svg>

package/src/assets/lqip-map.json

@@ -0,0 +1,10 @@
+{
+  "/_astro/1-dark.BivCfSmu_Z1BFPSa.webp": "55644522",
+  "/_astro/1-light.ClVuZxd5_Z1g9Oj3.webp": "bcddfed5",
+  "/_astro/2-dark.prgZMrfY_Z1exqGN.webp": "55644523",
+  "/_astro/2-light.DLXS38ks_ZXNxHS.webp": "bbddded6",
+  "/_astro/3-dark.CGQcMuXC_Z28xNQs.webp": "55644522",
+  "/_astro/3-light.8aAAK8Ad_2oyxts.webp": "bbdfdad5",
+  "/_astro/4-dark.CKqTknpt_2qCYkU.webp": "55644523",
+  "/_astro/4-light.DIUeDw9p_ZrQwsm.webp": "bcdffede"
+}

package/src/components/Button.astro

@@ -0,0 +1,152 @@
+---
+import type { Language } from '@/i18n/config'
+import LangEnIcon from '@/assets/icons/lang-en.svg'
+import LangJaIcon from '@/assets/icons/lang-ja.svg'
+import LangZhIcon from '@/assets/icons/lang-zh.svg'
+import SearchIcon from '@/assets/icons/search-icon.svg'
+import ThemeToggleIcon from '@/assets/icons/theme-toggle.svg'
+import { allLocales, moreLocales, themeConfig } from '@/config'
+import { getNextGlobalLangPath, getNextSupportedLangPath } from '@/i18n/path'
+import { getPageInfo } from '@/utils/page'
+
+interface Props {
+  supportedLangs: Language[]
+}
+
+const {
+  light: { background: lightMode },
+  dark: { background: darkMode },
+} = themeConfig.color
+
+const { supportedLangs } = Astro.props
+const currentPath = Astro.url.pathname
+const { currentLang } = getPageInfo(currentPath)
+
+const effectiveLangs = supportedLangs.length > 0 ? supportedLangs : allLocales
+const showLanguageSwitcher = moreLocales.length > 0 && effectiveLangs.length > 1
+
+// Choose a language switch list according to supported languages (when available)
+const nextUrl = supportedLangs.length > 1
+  ? getNextSupportedLangPath(currentPath, supportedLangs)
+  : getNextGlobalLangPath(currentPath)
+
+// Determine which icon to show based on current language
+// Show the icon of the NEXT language user will switch to
+const langIconMap: Record<string, typeof LangEnIcon> = {
+  'zh': LangEnIcon,    // zh → en, show "A"
+  'en': LangJaIcon,    // en → ja, show "あ"
+  'ja': LangZhIcon,    // ja → zh, show "汉"
+}
+const CurrentLangIcon = langIconMap[currentLang] || LangEnIcon
+---
+
+<div
+  class:list={[
+  'absolute right-7.25vw top-14.6 flex gap-6 min-[823px]:max-lg:right-[calc(50vw-22rem)]',
+  'lg:(fixed bottom-[min(10.27rem+1.92vw,12rem)] right-[max(5rem,calc(50vw-35rem))] top-auto w-14rem)',
+]}
+>
+  <!-- Search Button -->
+  <button
+    id="search-button"
+    class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+    aria-label="Search"
+  >
+    <SearchIcon aria-hidden="true" fill="currentColor" />
+  </button>
+
+  <!-- Language Switcher -->
+  {showLanguageSwitcher && (
+    <a
+      id="language-switcher"
+      href={nextUrl}
+      class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+      aria-label="Switch website language"
+    >
+      <CurrentLangIcon
+        aria-hidden="true"
+        fill="currentColor"
+      />
+    </a>
+  )}
+
+  <!-- Theme Toggle -->
+  <button
+    id="theme-toggle-button"
+    class="aspect-square w-4 c-secondary active:scale-90 hover:c-primary"
+    data-light-mode={lightMode}
+    data-dark-mode={darkMode}
+    aria-label="Switch light/dark theme"
+  >
+    <ThemeToggleIcon
+      aria-hidden="true"
+      fill="currentColor"
+    />
+  </button>
+</div>
+
+<!-- Theme Toggle Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script>
+// Apply theme changes
+function applyTheme(isDark: boolean) {
+  document.documentElement.classList.toggle('dark', isDark)
+
+  // Update meta theme-color tag
+  const metaThemeColor = document.head.querySelector('meta[name="theme-color"]')
+  const themeButton = document.getElementById('theme-toggle-button')
+  const lightMode = themeButton?.dataset.lightMode
+  const darkMode = themeButton?.dataset.darkMode
+
+  if (metaThemeColor && lightMode && darkMode) {
+    metaThemeColor.setAttribute('content', isDark ? darkMode : lightMode)
+  }
+
+  localStorage.setItem('theme', isDark ? 'dark' : 'light')
+  document.dispatchEvent(new Event('theme-changed'))
+}
+
+// Toggle theme mode
+function toggleTheme() {
+  const isDark = !document.documentElement.classList.contains('dark')
+  applyTheme(isDark)
+}
+
+// Handle theme toggle click events
+function handleThemeToggle(e: MouseEvent) {
+  if (!(e.target instanceof Element)) {
+    return
+  }
+
+  if (!e.target.closest('#theme-toggle-button')) {
+    return
+  }
+
+  // If reduceMotion is enabled, update theme directly
+  if (document.documentElement.classList.contains('reduce-motion')) {
+    toggleTheme()
+    return
+  }
+
+  // Add temporary markers before view transition
+  document.documentElement.style.setProperty('view-transition-name', 'theme-toggle-transition')
+  document.documentElement.setAttribute('data-theme-changing', '')
+
+  // Use View Transitions API for theme toggle
+  const transition = document.startViewTransition(toggleTheme)
+
+  // Remove temporary markers after view transition
+  transition.finished.then(() => {
+    document.documentElement.style.removeProperty('view-transition-name')
+    document.documentElement.removeAttribute('data-theme-changing')
+  })
+}
+
+// Listen to system theme changes in real time
+function handleSystemChange(event: MediaQueryListEvent) {
+  const isDark = event.matches
+  applyTheme(isDark)
+}
+
+document.addEventListener('click', handleThemeToggle)
+window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', handleSystemChange)
+</script>

package/src/components/CategoryList.astro

@@ -0,0 +1,66 @@
+---
+import type { Language } from '@/i18n/config'
+import type { UserCategoryWithCount } from '@/utils/content'
+
+interface Props {
+  categories: UserCategoryWithCount[]
+  currentCategory?: string
+  lang: Language
+}
+
+const { categories, currentCategory = '', lang } = Astro.props
+
+// Generate category path (user-defined categories)
+function getCategoryPagePath(category: string): string {
+  const langPrefix = lang === 'zh' ? '' : `/${lang}`
+  return `${langPrefix}/categories/${encodeURIComponent(category)}`
+}
+---
+
+<ul class="category-list no-heti">
+  {categories.map(cat => {
+    const isActive = currentCategory === cat.name
+    return (
+      <li class="category-item">
+        <a
+          href={getCategoryPagePath(cat.name)}
+          class:list={[
+            'category-link',
+            isActive && 'active',
+          ]}
+        >
+          <span class="category-name">{cat.name}</span>
+          <span class="category-count">({cat.count})</span>
+        </a>
+      </li>
+    )
+  })}
+</ul>
+
+<style>
+.category-list {
+  --at-apply: 'list-none p-0 m-0';
+}
+
+.category-item {
+  --at-apply: 'py-1.5';
+}
+
+.category-link {
+  --at-apply: 'inline-flex items-center gap-2';
+  --at-apply: 'c-secondary/80 transition-colors';
+  --at-apply: 'hover:c-primary';
+}
+
+.category-link.active {
+  --at-apply: 'c-primary font-semibold';
+}
+
+.category-name {
+  --at-apply: 'text-4';
+}
+
+.category-count {
+  --at-apply: 'text-3.5 c-secondary/60';
+}
+</style>

package/src/components/Comment/Giscus.astro

@@ -0,0 +1,119 @@
+---
+import { base, defaultLocale, themeConfig } from '@/config'
+import { giscusLocaleMap } from '@/i18n/config'
+
+const {
+  repo = '',
+  repoId = '',
+  category = '',
+  categoryId = '',
+  mapping = 'pathname',
+  strict = '0',
+  reactionsEnabled = '1',
+  emitMetadata = '0',
+  inputPosition = 'bottom',
+} = themeConfig.comment.giscus ?? {}
+
+
+const currentPath = Astro.url.pathname
+
+// Determine language
+const pathWithoutBase = base && currentPath.startsWith(base)
+  ? currentPath.slice(base.length)
+  : currentPath
+const matchedLang = Object.keys(giscusLocaleMap).find(code => pathWithoutBase.startsWith(`/${code}/`))
+const lang = (matchedLang ?? defaultLocale) as keyof typeof giscusLocaleMap
+
+const giscusConfig = {
+  repo,
+  repoId,
+  category,
+  categoryId,
+  mapping,
+  strict,
+  reactionsEnabled,
+  emitMetadata,
+  inputPosition,
+  lang: giscusLocaleMap[lang],
+}
+---
+
+<div
+  id="giscus"
+  class="giscus mt-16"
+  data-config={JSON.stringify(giscusConfig)}
+/>
+
+<!-- Giscus Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script>
+let giscusContainer: HTMLElement | null = null
+
+function getThemeUrl() {
+  const isDark = document.documentElement.classList.contains('dark')
+  return isDark
+    ? `https://cdn.jsdelivr.net/gh/radishzzz/astro-theme-retypeset@master/public/giscus/theme-dark.css`
+    : `https://cdn.jsdelivr.net/gh/radishzzz/astro-theme-retypeset@master/public/giscus/theme-light.css`
+}
+
+function updateGiscusTheme() {
+  if (!giscusContainer || !giscusContainer.dataset.config) {
+    return
+  }
+
+  const giscusWindow = giscusContainer.querySelector<HTMLIFrameElement>('iframe.giscus-frame')?.contentWindow
+  if (!giscusWindow) {
+    return
+  }
+
+  try {
+    giscusWindow.postMessage(
+      { giscus: { setConfig: { theme: getThemeUrl() } } },
+      'https://giscus.app',
+    )
+  }
+  catch (error) {
+    console.error('[Giscus] Failed to update theme:', error)
+  }
+}
+
+function setupGiscus() {
+  giscusContainer = document.getElementById('giscus')
+  if (!giscusContainer || !giscusContainer.dataset.config) {
+    return
+  }
+
+  giscusContainer.innerHTML = ''
+
+  try {
+    const config = JSON.parse(giscusContainer.dataset.config)
+    const { category, ...restConfig } = config
+
+    const dataAttributes: Record<string, string> = {
+      ...restConfig,
+      ...(category && { category }),
+      theme: getThemeUrl(),
+    }
+
+    const script = document.createElement('script')
+    script.crossOrigin = 'anonymous'
+    script.async = true
+    Object.assign(script.dataset, dataAttributes)
+    script.src = 'https://giscus.app/client.js'
+    giscusContainer.appendChild(script)
+  }
+  catch (error) {
+    console.error('[Giscus] Failed to initialize:', error)
+  }
+}
+
+function cleanupGiscus() {
+  if (giscusContainer) {
+    giscusContainer.innerHTML = ''
+    giscusContainer = null
+  }
+}
+
+document.addEventListener('astro:page-load', setupGiscus)
+document.addEventListener('astro:before-swap', cleanupGiscus)
+document.addEventListener('theme-changed', updateGiscusTheme)
+</script>

package/src/components/Comment/Index.astro

@@ -0,0 +1,30 @@
+---
+// import Disqus from '@/components/Comment/Disqus.astro'
+import Giscus from '@/components/Comment/Giscus.astro'
+import Twikoo from '@/components/Comment/Twikoo.astro'
+import Waline from '@/components/Comment/Waline.astro'
+import { themeConfig } from '@/config'
+
+const { enabled: enableComment } = themeConfig.comment
+
+// Disqus
+// const disqusShortname = themeConfig.comment.disqus?.shortname ?? ''
+// const showDisqus = enableComment && Boolean(disqusShortname.trim())
+
+// Giscus
+const giscusRepo = themeConfig.comment.giscus?.repo ?? ''
+const showGiscus = enableComment && Boolean(giscusRepo.trim())
+
+// Twikoo
+const twikooEnvId = themeConfig.comment.twikoo?.envId ?? ''
+const showTwikoo = enableComment && Boolean(twikooEnvId.trim())
+
+// Waline
+const walineURL = themeConfig.comment.waline?.serverURL ?? ''
+const showWaline = enableComment && Boolean(walineURL.trim())
+---
+
+<!-- {showDisqus && <Disqus />} -->
+{showGiscus && <Giscus />}
+{showTwikoo && <Twikoo />}
+{showWaline && <Waline />}

package/src/components/Comment/Twikoo.astro

@@ -0,0 +1,114 @@
+---
+import twikooCSS from 'twikoo/dist/twikoo.css?url'
+import twikooJS from 'twikoo/dist/twikoo.nocss.js?url' // Using twikoo.min.js causes CSS loading failure after page switching
+import { allLocales, base, defaultLocale, themeConfig } from '@/config'
+import { twikooLocaleMap } from '@/i18n/config'
+
+const { envId = '' } = themeConfig.comment.twikoo ?? {}
+
+// Remove locale prefix from path
+const currentPath = Astro.url.pathname
+const localePattern = new RegExp(`\\/(${allLocales.join('|')})\\/`)
+const twikooPath = currentPath.replace(localePattern, '/')
+
+// Determine language
+const pathWithoutBase = base && currentPath.startsWith(base)
+  ? currentPath.slice(base.length)
+  : currentPath
+const matchedLang = Object.keys(twikooLocaleMap).find(code => pathWithoutBase.startsWith(`/${code}/`))
+const lang = (matchedLang ?? defaultLocale) as keyof typeof twikooLocaleMap
+
+const twikooConfig = {
+  envId,
+  path: twikooPath,
+  lang: twikooLocaleMap[lang],
+  twikooCSS,
+}
+---
+
+<!-- Class not working on twikoo div -->
+<div
+  id="twikoo-wrapper"
+  class="no-heti mt-16"
+  data-config={JSON.stringify(twikooConfig)}
+>
+  <div id="twikoo" />
+</div>
+
+<!-- Twikoo Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script
+  is:inline
+  src={twikooJS}
+></script>
+
+<script>
+declare const twikoo: any
+
+let twikooObserver: IntersectionObserver | null = null
+let twikooWrapper: HTMLElement | null = null
+
+function setupTwikoo() {
+  const twikooWrapper = document.getElementById('twikoo-wrapper')
+  if (!twikooWrapper || !twikooWrapper.dataset.config) {
+    return
+  }
+
+  try {
+    const config = JSON.parse(twikooWrapper.dataset.config)
+    const { envId, path, lang } = config
+
+    twikoo.init({
+      envId,
+      el: '#twikoo',
+      // region: 'ap-shanghai', // Specify for Tencent Cloud, omit for Vercel
+      path,
+      lang,
+    })
+  }
+  catch (error) {
+    console.error('[Twikoo] Failed to initialize:', error)
+  }
+}
+
+// Lazy load Twikoo when the wrapper enters viewport
+function lazySetupTwikoo() {
+  twikooWrapper = document.getElementById('twikoo-wrapper')
+  if (!twikooWrapper || !twikooWrapper.dataset.config) {
+    return
+  }
+
+  const config = JSON.parse(twikooWrapper.dataset.config)
+  const { twikooCSS } = config
+
+  if (!document.getElementById('twikoo-css')) {
+    const link = document.createElement('link')
+    link.id = 'twikoo-css'
+    link.rel = 'stylesheet'
+    link.href = twikooCSS
+    document.head.appendChild(link)
+  }
+
+  twikooObserver = new IntersectionObserver((entries) => {
+    if (entries.some(entry => entry.isIntersecting)) {
+      setupTwikoo()
+      twikooObserver?.disconnect()
+      twikooObserver = null
+    }
+  }, { rootMargin: '500px' })
+
+  twikooObserver.observe(twikooWrapper)
+}
+
+function cleanupTwikoo() {
+  twikooObserver?.disconnect()
+  twikooObserver = null
+
+  if (twikooWrapper) {
+    twikooWrapper.innerHTML = ''
+    twikooWrapper = null
+  }
+}
+
+document.addEventListener('astro:page-load', lazySetupTwikoo)
+document.addEventListener('astro:before-swap', cleanupTwikoo)
+</script>

package/src/components/Comment/Waline.astro

@@ -0,0 +1,149 @@
+---
+import walineJS from '@waline/client/full?url'
+import walineCSS from '@waline/client/style?url'
+import { allLocales, base, defaultLocale, themeConfig } from '@/config'
+import { walineLocaleMap } from '@/i18n/config'
+
+const {
+  serverURL = '',
+  emoji = [],
+  search = false,
+  imageUploader = false,
+} = themeConfig.comment.waline ?? {}
+
+// Remove locale prefix from path
+const currentPath = Astro.url.pathname
+const localePattern = new RegExp(`\\/(${allLocales.join('|')})\\/`)
+const walinePath = currentPath.replace(localePattern, '/')
+
+// Determine language
+const pathWithoutBase = base && currentPath.startsWith(base)
+  ? currentPath.slice(base.length)
+  : currentPath
+const matchedLang = Object.keys(walineLocaleMap).find(code => pathWithoutBase.startsWith(`/${code}/`))
+const lang = (matchedLang ?? defaultLocale) as keyof typeof walineLocaleMap
+
+const walineConfig = {
+  serverURL,
+  path: walinePath,
+  lang: walineLocaleMap[lang],
+  emoji,
+  search,
+  imageUploader,
+  walineJS,
+  walineCSS,
+}
+---
+
+<div
+  id="waline"
+  class="no-heti mt-16"
+  data-config={JSON.stringify(walineConfig)}
+/>
+
+<!-- Waline Script >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<script>
+import type { WalineInstance } from '@waline/client'
+
+let walineObserver: IntersectionObserver | null = null
+let walineInstance: WalineInstance | null = null
+
+async function setupWaline() {
+  const walineContainer = document.getElementById('waline')
+  if (!walineContainer || !walineContainer.dataset.config) {
+    return
+  }
+
+  try {
+    const config = JSON.parse(walineContainer.dataset.config)
+    const { walineJS, walineCSS, ...restConfig } = config
+    const { init } = await import(/* @vite-ignore */ walineJS)
+
+    walineInstance = init({
+      el: '#waline',
+      dark: 'html.dark',
+      requiredMeta: ['nick', 'mail'],
+      highlighter: false,
+      texRenderer: false,
+      noCopyright: true,
+      reaction: [],
+      ...restConfig,
+    })
+  }
+  catch (error) {
+    console.error('[Waline] Failed to initialize:', error)
+  }
+}
+
+// Lazy load Waline when the container enters viewport
+function lazySetupWaline() {
+  const walineContainer = document.getElementById('waline')
+  if (!walineContainer || !walineContainer.dataset.config) {
+    return
+  }
+
+  const config = JSON.parse(walineContainer.dataset.config)
+  const { walineCSS } = config
+
+  if (!document.getElementById('waline-css')) {
+    const link = document.createElement('link')
+    link.id = 'waline-css'
+    link.rel = 'stylesheet'
+    link.href = walineCSS
+    document.head.appendChild(link)
+  }
+
+  walineObserver = new IntersectionObserver((entries) => {
+    if (entries.some(entry => entry.isIntersecting)) {
+      setupWaline()
+      walineObserver?.disconnect()
+      walineObserver = null
+    }
+  }, { rootMargin: '500px' })
+
+  walineObserver.observe(walineContainer)
+}
+
+function cleanupWaline() {
+  walineObserver?.disconnect()
+  walineObserver = null
+  walineInstance?.destroy?.()
+  walineInstance = null
+}
+
+document.addEventListener('astro:page-load', lazySetupWaline)
+document.addEventListener('astro:before-swap', cleanupWaline)
+</script>
+
+<!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
+<style>
+#waline {
+  /* Regular Colors */
+  --waline-white: oklch(var(--un-preset-theme-colors-background));
+  --waline-light-grey: oklch(var(--un-preset-theme-colors-primary) / 0.25);
+  --waline-dark-grey: oklch(var(--un-preset-theme-colors-secondary));
+
+  /* Theme Colors */
+  --waline-theme-color: oklch(var(--un-preset-theme-colors-primary));
+  --waline-active-color: oklch(var(--un-preset-theme-colors-primary));
+
+  /* Layout Colors */
+  --waline-color: oklch(var(--un-preset-theme-colors-secondary));
+  --waline-bg-color: oklch(var(--un-preset-theme-colors-background));
+  --waline-bg-color-light: oklch(var(--un-preset-theme-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: 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: oklch(var(--un-preset-theme-colors-background));
+  --waline-info-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
+
+  /* Rendering Options */
+  --waline-avatar-radius: 0.5rem;
+}
+</style>