feat: add official website with bilingual support

[Scofieldfree]

Summary

Add a modern, responsive official website for Voice Key with bilingual English/Chinese support.

Features

• Bilingual Support: Full EN/ZH translations with language switcher
• Modern Design: Geek-style aesthetic with grid patterns and tech-inspired UI
• Theme Toggle: Light/dark mode switching with localStorage persistence
• Responsive: Mobile-first design that works on all devices
• Deployment: GitHub Actions workflow for automatic deployment to GitHub Pages

Tech Stack

• Framework: Astro 5
• Styling: Tailwind CSS 4
• Icons: lucide-react
• Deployment: GitHub Pages via GitHub Actions

Website Structure

website/
├── src/
│   ├── components/
│   │   ├── LanguageSwitch.astro
│   │   └── ThemeToggle.astro
│   ├── layouts/
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   ├── index.astro (English)
│   │   └── zh/
│   │       └── index.astro (Chinese)
│   ├── assets/
│   │   └── logo.png
│   └── styles/
│       └── global.css
├── public/
└── astro.config.mjs

CI/CD Changes

• Added .github/workflows/deploy-website.yml for automatic deployment
• Excluded website/ from root project CI/linting (independent subproject)
• Updated .prettierignore and eslint.config.mjs

Preview

Website will be deployed to: https://buildwithais.github.io/voicekey/

Testing

• English page renders correctly
• Chinese page renders correctly
• Language switcher works
• Theme toggle works
• Responsive design on mobile/tablet/desktop
• GitHub Actions workflow configured

🤖 Generated with Claude Code

[Scofieldfree]

---

Code review

Found 1 issue:

1. Missing localStorage error handling can crash theme initialization in private browsing mode (CLAUDE.md says "Only validate at system boundaries" - localStorage is a browser API that can throw SecurityError/QuotaExceededError)

voicekey/website/src/layouts/BaseLayout.astro

Lines 64 to 77 in b42292a

	const getTheme = () => {
	if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
	return localStorage.getItem('theme');
	}
	if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
	return 'dark';
	}
	return 'dark'; // 默认暗色
	};
	const theme = getTheme();
	document.documentElement.classList.toggle('dark', theme === 'dark');
	window.localStorage.setItem('theme', theme);
	})();

The script accesses localStorage without try-catch protection. In Safari private browsing, Firefox strict privacy mode, or when storage quota is exceeded, localStorage exists but throws errors when getItem or setItem is called. This will crash the entire theme initialization script, leaving the page unstyled.

Recommend wrapping localStorage operations in try-catch:

const getTheme = () => {
  try {
    if (typeof localStorage !== 'undefined') {
      const stored = localStorage.getItem('theme');
      if (stored) return stored;
    }
  } catch (e) {
    // Silently fail - localStorage unavailable
  }
  // Fallback to system preference or default
  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};

const theme = getTheme();
document.documentElement.classList.toggle('dark', theme === 'dark');
try {
  if (typeof localStorage !== 'undefined') {
    localStorage.setItem('theme', theme);
  }
} catch (e) {
  // Silently fail
}

This pattern follows the same defensive approach used for navigator.language fallback in commit 0ee7adc (src/i18n.ts).

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}