retypeset-odyssey 0.1.0

package/src/components/Widgets/CodeCopyButton.astro

@@ -0,0 +1,47 @@
+<script>
+const timeoutMap = new WeakMap<Element, number>()
+
+async function handleCodeCopyClick(e: MouseEvent) {
+  if (!(e.target instanceof Element)) {
+    return
+  }
+
+  const button = e.target.closest('.code-copy-button')
+  if (!button) {
+    return
+  }
+
+  const text = button.parentElement?.querySelector('pre > code')?.textContent
+  if (!text) {
+    return
+  }
+
+  // Copy text to clipboard
+  try {
+    await navigator.clipboard.writeText(text)
+  }
+  catch (error) {
+    console.error('[CodeCopyButton] Failed to copy:', error)
+    return
+  }
+
+  // Add copied state
+  button.classList.add('copied')
+
+  // Clear existing timeout to prevent state flickering
+  const existingTimeout = timeoutMap.get(button)
+  if (existingTimeout) {
+    clearTimeout(existingTimeout)
+  }
+
+  // Reset state after 1.5s
+  const timeoutId = window.setTimeout(() => {
+    button.classList.remove('copied')
+    timeoutMap.delete(button)
+  }, 1500)
+
+  timeoutMap.set(button, timeoutId)
+}
+
+document.addEventListener('click', handleCodeCopyClick)
+</script>

package/src/components/Widgets/GithubCard.astro

@@ -0,0 +1,110 @@
+<script>
+interface GithubRepoData {
+  owner: { avatar_url: string }
+  description: string | null
+  stargazers_count: number
+  forks_count: number
+  license: { spdx_id: string } | null
+}
+
+const compactNumberFormat = new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 })
+
+// Fetch repository data from GitHub API with caching
+async function fetchRepoData(repo: string): Promise<GithubRepoData | null> {
+  const cacheKey = `github-repo-${repo}`
+
+  // Check session storage for cached data
+  try {
+    const cachedData = sessionStorage.getItem(cacheKey)
+    if (cachedData) {
+      return JSON.parse(cachedData) as GithubRepoData
+    }
+  }
+  catch {
+    try {
+      sessionStorage.removeItem(cacheKey)
+    }
+    catch {}
+  }
+
+  // Fetch from API if not cached
+  try {
+    const response = await fetch(`https://api.github.com/repos/${repo}`)
+    if (!response.ok) {
+      console.warn(`[GithubCard] Failed to fetch ${repo}: ${response.status} ${response.statusText}`)
+      return null
+    }
+
+    const raw = await response.json()
+    const data: GithubRepoData = {
+      owner: { avatar_url: raw.owner?.avatar_url },
+      description: raw.description,
+      stargazers_count: raw.stargazers_count,
+      forks_count: raw.forks_count,
+      license: raw.license ? { spdx_id: raw.license.spdx_id } : null,
+    }
+
+    // Cache the successful response
+    try {
+      sessionStorage.setItem(cacheKey, JSON.stringify(data))
+    }
+    catch {}
+
+    return data
+  }
+  catch (error) {
+    console.error(`[GithubCard] Failed to fetch ${repo}:`, error)
+    return null
+  }
+}
+
+// Update card UI with repository data
+function updateCardUI(card: HTMLElement, data: GithubRepoData | null) {
+  const setText = (selector: string, text: string) => {
+    const el = card.querySelector<HTMLElement>(selector)
+    if (el) {
+      el.textContent = text
+    }
+  }
+
+  if (!data) {
+    setText('.gc-repo-description', 'Failed to load data')
+    return
+  }
+
+  const avatar = card.querySelector<HTMLElement>('.gc-owner-avatar')
+  if (avatar && data.owner?.avatar_url) {
+    avatar.style.backgroundImage = `url(${data.owner.avatar_url})`
+  }
+
+  setText('.gc-repo-description', data.description ?? 'No description')
+  setText('.gc-stars-count', compactNumberFormat.format(data.stargazers_count ?? 0))
+  setText('.gc-forks-count', compactNumberFormat.format(data.forks_count ?? 0))
+  setText('.gc-license-info', data.license?.spdx_id ?? 'No License')
+}
+
+// Load data for a specific card element
+async function loadRepoData(card: HTMLElement) {
+  const repo = card.dataset.repo
+  if (!repo) {
+    return
+  }
+
+  const data = await fetchRepoData(repo)
+  updateCardUI(card, data)
+}
+
+// Initialize all GitHub cards on the page
+function setupGithubCards() {
+  const cards = document.querySelectorAll<HTMLElement>('.gc-container')
+  if (cards.length === 0) {
+    return
+  }
+
+  cards.forEach((card) => {
+    loadRepoData(card)
+  })
+}
+
+document.addEventListener('astro:page-load', setupGithubCards)
+</script>

package/src/components/Widgets/ImageZoom.astro

@@ -0,0 +1,135 @@
+<script>
+let overlay: HTMLDivElement | null = null
+let zoomedImg: HTMLImageElement | null = null
+let originalImg: HTMLImageElement | null = null
+
+// Setup overlay element
+function setupOverlay() {
+  overlay = document.createElement('div')
+  overlay.className = 'zoom-overlay'
+  overlay.setAttribute('role', 'dialog')
+  overlay.setAttribute('aria-modal', 'true')
+  overlay.setAttribute('aria-label', 'Image Viewer')
+  overlay.setAttribute('tabindex', '-1')
+
+  document.body.appendChild(overlay)
+}
+
+// Clean up zoom state
+function cleanupZoom() {
+  overlay = null
+  zoomedImg = null
+  originalImg = null
+}
+
+// Zoom in the image
+function zoomIn(img: HTMLImageElement) {
+  if (!overlay) {
+    return
+  }
+
+  // Disable scrolling and get position
+  document.body.style.overflow = 'hidden'
+  const rect = img.getBoundingClientRect()
+  originalImg = img
+
+  // Clone and setup image
+  zoomedImg = img.cloneNode() as HTMLImageElement
+  zoomedImg.className = 'zoom-img'
+  zoomedImg.removeAttribute('id')
+  zoomedImg.removeAttribute('loading')
+
+  zoomedImg.style.top = `${rect.top}px`
+  zoomedImg.style.left = `${rect.left}px`
+  zoomedImg.style.width = `${rect.width}px`
+  zoomedImg.style.height = `${rect.height}px`
+
+  // Add to DOM and show
+  document.body.appendChild(zoomedImg)
+  overlay.style.display = 'block'
+  overlay.focus()
+
+  // Calculate scale and position
+  const viewportWidth = window.innerWidth
+  const viewportHeight = window.innerHeight
+  const scaleFactor = window.innerWidth < 768 ? 1 : 0.8
+  const scale = Math.min(
+    (viewportWidth * scaleFactor) / rect.width,
+    (viewportHeight * scaleFactor) / rect.height,
+  )
+  const translateX = (-rect.left + (viewportWidth - rect.width) / 2) / scale
+  const translateY = (-rect.top + (viewportHeight - rect.height) / 2) / scale
+
+  // Start animation
+  requestAnimationFrame(() => {
+    if (overlay) {
+      overlay.style.opacity = '1'
+    }
+
+    if (zoomedImg) {
+      zoomedImg.style.transform = `scale(${scale}) translate3d(${translateX}px, ${translateY}px, 0)`
+    }
+  })
+}
+
+// Zoom out the image
+function zoomOut() {
+  if (!overlay || !zoomedImg || !originalImg) {
+    return
+  }
+
+  // Start closing animation
+  zoomedImg.style.transform = ''
+  overlay.style.opacity = '0'
+  document.body.style.overflow = ''
+
+  // Define cleanup logic
+  const cleanup = () => {
+    if (!zoomedImg) {
+      return
+    }
+
+    // Remove zoomed image
+    zoomedImg?.remove()
+    zoomedImg = null
+
+    // Hide overlay
+    if (overlay) {
+      overlay.style.display = 'none'
+    }
+
+    // Restore focus
+    originalImg?.focus()
+    originalImg = null
+  }
+
+  // Listen for transition end to cleanup
+  zoomedImg.addEventListener('transitionend', cleanup, { once: true })
+}
+
+// Handle click events
+function handleClick(event: MouseEvent) {
+  if (zoomedImg) {
+    zoomOut()
+    return
+  }
+
+  const target = event.target
+  if (!(target instanceof HTMLImageElement)) {
+    return
+  }
+
+  // Ignore small or incomplete images
+  if (!target.complete || target.width < 100 || target.height < 100) {
+    return
+  }
+
+  event.preventDefault()
+  zoomIn(target)
+}
+
+document.addEventListener('astro:page-load', setupOverlay)
+document.addEventListener('astro:before-swap', cleanupZoom)
+document.addEventListener('click', handleClick)
+window.addEventListener('resize', zoomOut)
+</script>

package/src/components/Widgets/MediaEmbed.astro

@@ -0,0 +1,127 @@
+---
+import 'lite-youtube-embed/src/lite-yt-embed.css'
+---
+
+<script>
+// Initialize Mermaid diagrams
+async function setupMermaidEmbeds() {
+  const mermaids = document.querySelectorAll('pre.mermaid')
+  if (mermaids.length === 0) {
+    return
+  }
+
+  // Store original code for re-rendering
+  mermaids.forEach((element) => {
+    const mermaid = element as HTMLElement
+    if (!mermaid.dataset.mermaidCode) {
+      mermaid.dataset.mermaidCode = mermaid.textContent?.trim() ?? ''
+    }
+  })
+
+  // Load and run Mermaid
+  try {
+    const { default: mermaid } = await import('mermaid')
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: document.documentElement.classList.contains('dark') ? 'dark' : 'default',
+    })
+    mermaid.run()
+  }
+  catch (error) {
+    console.error('[MediaEmbed] Failed to load Mermaid:', error)
+  }
+}
+
+// Load YouTube embed script
+async function setupYouTubeEmbeds() {
+  const youtube = document.querySelectorAll('lite-youtube')
+  if (youtube.length === 0) {
+    return
+  }
+
+  try {
+    // @ts-expect-error - No type definitions available for lite-youtube-embed
+    await import('lite-youtube-embed')
+  }
+  catch (error) {
+    console.error('[MediaEmbed] Failed to load YouTube embed:', error)
+  }
+}
+
+// Initialize Twitter widgets
+async function setupTweetEmbeds() {
+  const tweets = document.querySelectorAll('.twitter-tweet')
+  if (tweets.length === 0) {
+    return
+  }
+
+  tweets.forEach((tweet) => {
+    tweet.setAttribute('data-theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light')
+  })
+
+  // Inject Twitter script
+  const script = document.createElement('script')
+  script.src = 'https://platform.twitter.com/widgets.js'
+  script.async = true
+  document.head.appendChild(script)
+}
+
+// Initialize all media embeds
+async function setupMediaEmbeds() {
+  await Promise.allSettled([
+    setupYouTubeEmbeds(),
+    setupTweetEmbeds(),
+    setupMermaidEmbeds(),
+  ])
+}
+
+// Re-render Mermaid diagrams on theme change
+function updateMermaidTheme() {
+  const mermaids = document.querySelectorAll('pre.mermaid[data-mermaid-code]')
+  if (mermaids.length === 0) {
+    return
+  }
+
+  const isDark = document.documentElement.classList.contains('dark')
+
+  import('mermaid').then(({ default: mermaid }) => {
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: isDark ? 'dark' : 'default',
+    })
+
+    // Reset content and re-run Mermaid
+    mermaids.forEach((element) => {
+      const mermaid = element as HTMLElement
+      mermaid.innerHTML = mermaid.dataset.mermaidCode ?? ''
+      mermaid.removeAttribute('data-processed')
+    })
+
+    mermaid.run()
+  }).catch((error) => {
+    console.error('[MediaEmbed] Failed to update Mermaid theme:', error)
+  })
+}
+
+// Handle horizontal scrolling for gallery
+function handleGalleryWheel(e: WheelEvent) {
+  const container = (e.target as Element)?.closest('.gallery-container') as HTMLElement
+  if (!container) {
+    return
+  }
+
+  // Convert vertical scroll to horizontal
+  const previousScrollLeft = container.scrollLeft
+  container.scrollLeft += e.deltaY
+  if (container.scrollLeft === previousScrollLeft) {
+    return
+  }
+
+  // Prevent default scroll only if horizontal scroll occurred
+  e.preventDefault()
+}
+
+document.addEventListener('astro:page-load', setupMediaEmbeds)
+document.addEventListener('theme-changed', updateMermaidTheme)
+document.addEventListener('wheel', handleGalleryWheel, { passive: false })
+</script>

package/src/components/Widgets/SoundEffect.astro

@@ -0,0 +1,179 @@
+<script>
+const soundTypes = {
+  click: 'tap',
+  typing: 'type',
+} as const
+
+type SoundType = typeof soundTypes[keyof typeof soundTypes]
+
+const volumeSettings: Record<SoundType, number> = {
+  [soundTypes.click]: 0.8,
+  [soundTypes.typing]: 0.4,
+}
+
+const clickTargets = [
+  '#language-switcher',
+  '#theme-toggle-button',
+] as const
+
+const typingTargets = [
+  // Twikoo
+  '.el-input__inner',
+  '.el-textarea__inner',
+  // Waline
+  '#wl-nick',
+  '#wl-mail',
+  '#wl-link',
+  '#wl-edit',
+] as const
+
+const ignoredKeys = new Set([
+  'Shift',
+  'Control',
+  'Alt',
+  'Meta',
+  'Tab',
+  'Escape',
+  'CapsLock',
+])
+
+const clickSelector = clickTargets.join(',')
+const typingSelector = typingTargets.join(',')
+
+function isMobileDevice(): boolean {
+  return window.matchMedia('(max-width: 1023px)').matches
+}
+
+function getBasePath(): string {
+  const sitemap = document.head.querySelector('link[rel="sitemap"]')
+  const href = sitemap?.getAttribute('href')
+  return href?.replace('/sitemap-index.xml', '') || ''
+}
+
+class SoundEffectManager {
+  private audioContext: AudioContext | null = null
+  private audioBuffers: Record<SoundType, AudioBuffer[]> = {
+    [soundTypes.click]: [],
+    [soundTypes.typing]: [],
+  }
+
+  private initPromise: Promise<void> | null = null
+
+  // Preload all sound files during browser idle time
+  constructor() {
+    if (!isMobileDevice() && 'requestIdleCallback' in window) {
+      requestIdleCallback(() => this.initialize())
+    }
+  }
+
+  // Fetch, decode and cache a single sound file
+  private async fetchAndCacheSound(type: SoundType, index: number): Promise<void> {
+    if (!this.audioContext) {
+      throw new Error('Audio context not initialized')
+    }
+
+    const soundId = `${type}_0${index + 1}`
+    const response = await fetch(`${getBasePath()}/sounds/${soundId}.wav`)
+    const arrayBuffer = await response.arrayBuffer()
+    const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer)
+    this.audioBuffers[type].push(audioBuffer)
+  }
+
+  // Preload all sound variants
+  private async preloadAllSounds(): Promise<void> {
+    const soundTypeValues = Object.values(soundTypes) as SoundType[]
+    const allPromises = soundTypeValues.flatMap(type =>
+      Array.from({ length: 5 }, (_, i) => this.fetchAndCacheSound(type, i)),
+    )
+
+    await Promise.allSettled(allPromises)
+  }
+
+  // Initialize audio context and preload sound files (executes only once)
+  private async initialize(): Promise<void> {
+    return this.initPromise ??= (async () => {
+      const AudioContextClass = window.AudioContext || window.webkitAudioContext
+      this.audioContext = new AudioContextClass()
+      await this.preloadAllSounds()
+    })()
+  }
+
+  // Play a random sound of the specified type
+  public async playSound(soundType: SoundType): Promise<void> {
+    try {
+      await this.initialize()
+
+      if (!this.audioContext) {
+        return
+      }
+
+      // Resume audio context if suspended
+      if (this.audioContext.state === 'suspended') {
+        await this.audioContext.resume()
+      }
+
+      // Get matching sound buffers for the requested type
+      const buffers = this.audioBuffers[soundType]
+      if (buffers.length === 0) {
+        return
+      }
+
+      // Select random sound from available buffers
+      const source = this.audioContext.createBufferSource()
+      source.buffer = buffers[Math.floor(Math.random() * buffers.length)]
+
+      // Create and configure audio nodes
+      const gainNode = this.audioContext.createGain()
+      gainNode.gain.value = volumeSettings[soundType]
+
+      // Connect nodes and play sound
+      source.connect(gainNode).connect(this.audioContext.destination)
+      source.start(0)
+    }
+    catch (error) {
+      console.warn('Sound playback failed:', error)
+    }
+  }
+}
+
+const soundManager = new SoundEffectManager()
+
+// Handle click events on interactive elements
+function handleGlobalClick(event: MouseEvent) {
+  if (isMobileDevice()) {
+    return
+  }
+
+  const target = event.target as Element | null
+  if (!target?.closest(clickSelector)) {
+    return
+  }
+
+  soundManager.playSound(soundTypes.click)
+}
+
+// Handle keyboard events for typing sounds
+function handleGlobalKeydown(event: KeyboardEvent) {
+  if (isMobileDevice()) {
+    return
+  }
+
+  if (event.ctrlKey || event.altKey || event.metaKey) {
+    return
+  }
+
+  if (ignoredKeys.has(event.key)) {
+    return
+  }
+
+  const target = event.target as Element | null
+  if (!target?.closest(typingSelector)) {
+    return
+  }
+
+  soundManager.playSound(soundTypes.typing)
+}
+
+document.addEventListener('click', handleGlobalClick)
+document.addEventListener('keydown', handleGlobalKeydown)
+</script>