[feature] migrate to monorepo

frontend/src/App.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+import { Header } from './components/layout/Header';
+import { Suspense, lazy } from 'react';
+import Footer from './components/Footer';
+
+// Lazy load pages
+const Home = lazy(() => import('./pages/Home'));
+const Daily = lazy(() => import('./pages/Daily'));
+const Article = lazy(() => import('./pages/Article'));
+
+function App() {
+  return (
+    <BrowserRouter>
+      <div className="flex flex-col min-h-screen bg-white dark:bg-neutral-900 text-gray-900 dark:text-gray-100">
+        <Header />
+        {/* 页眉分隔线 */}
+        <div className="w-[95%] mx-auto">
+          <div className="border-t-2 border-gray-900 dark:border-gray-100 w-full mb-2" />
+        </div>
+        
+        <main className="flex-1 w-[95%] mx-auto py-8">
+          <Suspense fallback={<div>Loading...</div>}>
+            <Routes>
+              <Route path="/" element={<Home />} />
+              <Route path="/daily" element={<Daily />} />
+              <Route path="/posts/:articleId" element={<Article />} />
+            </Routes>
+          </Suspense>
+        </main>
+
+        <Footer />
+      </div>
+    </BrowserRouter>
+  );
+}
+
+export default App;

frontend/src/components/Footer.tsx

@@ -0,0 +1,93 @@
+import { useTranslation } from 'react-i18next';
+import { FaTwitter, FaDiscord, FaWeibo } from 'react-icons/fa';
+import { MdVerified, MdHome } from 'react-icons/md';
+import { AiFillBilibili } from 'react-icons/ai';
+import { SiNeteasecloudmusic, SiTencentqq, SiYoutube, SiForgejo, SiBluesky } from 'react-icons/si';
+import { PiFediverseLogo } from 'react-icons/pi';
+
+// 定义所有社交媒体链接
+const socialLinks = [
+  { icon: MdVerified, href: '#', label: 'Keyoxide', order: 1 },
+  { icon: SiYoutube, href: '#', label: 'YouTube', order: 2 },
+  { icon: PiFediverseLogo, href: '#', label: 'Fediverse', order: 3 },
+  { icon: SiBluesky, href: '#', label: 'Bluesky', order: 4 },
+  { icon: FaDiscord, href: '#', label: 'Discord', order: 5 },
+  { icon: SiForgejo, href: '#', label: 'Forgejo', order: 6 },
+  { icon: FaTwitter, href: '#', label: 'Twitter', order: 7 },
+  // 预留的额外图标，暂时隐藏
+  { icon: AiFillBilibili, href: '#', label: 'Bilibili', hidden: true },
+  { icon: SiNeteasecloudmusic, href: '#', label: 'NetEaseMusic', hidden: true },
+  { icon: SiTencentqq, href: '#', label: 'QQGroup', hidden: true },
+  { icon: FaWeibo, href: '#', label: 'Weibo', hidden: true },
+  { icon: MdHome, href: '#', label: 'Home', hidden: true }
+];
+
+const Footer = () => {
+  const { t } = useTranslation();
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <footer className="mt-auto py-4">
+      <div className="w-[95%] mx-auto">
+        {/* 页脚分隔线 */}
+        <div className="border-t-2 border-gray-900 dark:border-gray-100 w-full my-2" />
+        
+        {/* 桌面端：两端对齐布局 */}
+        <div className="hidden md:flex justify-between items-center">
+          {/* Copyright */}
+          <div className="text-gray-800 dark:text-gray-100 text-sm">
+            &copy; {currentYear} {t('footer.copyright')}
+          </div>
+
+          {/* Social Links */}
+          <div className="flex items-center space-x-6">
+            {socialLinks
+              .filter(link => !link.hidden)
+              .sort((a, b) => a.order - b.order)
+              .map(({ icon: Icon, href, label }) => (
+                <a
+                  key={label}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white transition-colors"
+                  aria-label={label}
+                >
+                  <Icon size={18} />
+                </a>
+              ))}
+          </div>
+        </div>
+
+        {/* 移动端：居中布局 */}
+        <div className="md:hidden flex flex-col items-center space-y-3">
+          {/* Copyright */}
+          <div className="text-gray-800 dark:text-gray-100 text-sm">
+            &copy; {currentYear} {t('footer.copyright')}
+          </div>
+
+          {/* Social Links */}
+          <div className="flex items-center space-x-6">
+            {socialLinks
+              .filter(link => !link.hidden)
+              .sort((a, b) => a.order - b.order)
+              .map(({ icon: Icon, href, label }) => (
+                <a
+                  key={label}
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-gray-800 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white transition-colors"
+                  aria-label={label}
+                >
+                  <Icon size={18} />
+                </a>
+              ))}
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

frontend/src/components/layout/Header.tsx

@@ -0,0 +1,239 @@
+import { useState, useRef, useEffect } from 'react';
+import { Link } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { FiSun, FiMoon, FiSearch, FiGlobe, FiMonitor } from 'react-icons/fi';
+import { Menu } from '@headlessui/react';
+import { useTheme } from '../../hooks/useTheme';
+
+const LANGUAGES = [
+  { code: 'en', nativeName: 'English' },
+  { code: 'zh-Hans', nativeName: '简体中文' },
+  { code: 'zh-Hant', nativeName: '繁體中文' },
+];
+
+export function Header() {
+  const { t, i18n } = useTranslation();
+  const { theme, setTheme } = useTheme();
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const searchRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (searchRef.current && !searchRef.current.contains(event.target as Node)) {
+        setIsSearchOpen(false);
+      }
+    };
+
+    if (isSearchOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isSearchOpen]);
+
+  const getThemeIcon = (themeType: string) => {
+    switch (themeType) {
+      case 'light':
+        return <FiSun className="w-5 h-5" />;
+      case 'dark':
+        return <FiMoon className="w-5 h-5" />;
+      case 'system':
+        return <FiMonitor className="w-5 h-5" />;
+      default:
+        return <FiSun className="w-5 h-5" />;
+    }
+  };
+
+  return (
+    <header className="bg-white dark:bg-neutral-900">
+      <div className="w-[95%] mx-auto py-4">
+        <div className="flex items-center justify-between lg:grid lg:grid-cols-[1fr_auto_1fr] lg:gap-8">
+          <div className="flex-1 lg:flex-none order-2 lg:order-none">
+            <Link to="/" className="block text-center lg:text-left" aria-label="TSS News">
+              <picture>
+                <source srcSet="/logo.avif" type="image/avif" />
+                <source srcSet="/logo.webp" type="image/webp" />
+                <img 
+                  src="/logo.webp" 
+                  alt="TSS News" 
+                  className="h-8 lg:h-10 w-auto mx-auto lg:mx-0 dark:invert dark:brightness-200 transition-[filter]"
+                />
+              </picture>
+            </Link>
+          </div>
+          
+          <div className="order-1 lg:order-none lg:hidden">
+            <Menu as="div" className="relative">
+              <Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </Menu.Button>
+              <Menu.Items className="absolute left-0 mt-2 w-48 origin-top-left bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div className="py-1">
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        to="/"
+                        className={`${
+                          active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                        } block px-4 py-2 text-sm`}
+                      >
+                        {t('nav.home')}
+                      </Link>
+                    )}
+                  </Menu.Item>
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        to="/daily"
+                        className={`${
+                          active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                        } block px-4 py-2 text-sm`}
+                      >
+                        {t('nav.daily')}
+                      </Link>
+                    )}
+                  </Menu.Item>
+                  {Object.entries(t('categories', { returnObjects: true })).map(([key, value]) => (
+                    <Menu.Item key={key}>
+                      {({ active }) => (
+                        <Link
+                          to={`/category/${key}`}
+                          className={`${
+                            active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                          } block px-4 py-2 text-sm`}
+                        >
+                          {value as string}
+                        </Link>
+                      )}
+                    </Menu.Item>
+                  ))}
+                  <Menu.Item>
+                    {({ active }) => (
+                      <Link
+                        to="/about"
+                        className={`${
+                          active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                        } block px-4 py-2 text-sm`}
+                      >
+                        {t('nav.about')}
+                      </Link>
+                    )}
+                  </Menu.Item>
+                </div>
+              </Menu.Items>
+            </Menu>
+          </div>
+          
+          <nav className="hidden lg:flex items-center justify-center space-x-6">
+            <Link to="/" className="hover:text-gray-600 dark:hover:text-gray-300">
+              {t('nav.home')}
+            </Link>
+            <Link to="/daily" className="hover:text-gray-600 dark:hover:text-gray-300">
+              {t('nav.daily')}
+            </Link>
+            {Object.entries(t('categories', { returnObjects: true })).map(([key, value]) => (
+              <Link
+                key={key}
+                to={`/category/${key}`}
+                className="hover:text-gray-600 dark:hover:text-gray-300"
+              >
+                {value as string}
+              </Link>
+            ))}
+            <Link to="/about" className="hover:text-gray-600 dark:hover:text-gray-300">
+              {t('nav.about')}
+            </Link>
+          </nav>
+
+          <div className="flex items-center space-x-4 order-3 lg:order-none justify-end">
+            <button
+              onClick={() => setIsSearchOpen(true)}
+              className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full"
+              aria-label={t('nav.search')}
+            >
+              <FiSearch className="w-5 h-5" />
+            </button>
+            
+            <Menu as="div" className="relative">
+              <Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
+                {getThemeIcon(theme)}
+              </Menu.Button>
+              <Menu.Items className="absolute right-0 mt-2 w-36 origin-top-right bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div className="py-1">
+                  {['light', 'dark', 'system'].map((themeType) => (
+                    <Menu.Item key={themeType}>
+                      {({ active }) => (
+                        <button
+                          className={`${
+                            active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                          } ${
+                            theme === themeType ? 'text-blue-600 dark:text-blue-400' : ''
+                          } group flex w-full items-center px-4 py-2 text-sm gap-3`}
+                          onClick={() => setTheme(themeType as Theme)}
+                        >
+                          {getThemeIcon(themeType)}
+                          {t(`theme.${themeType}`)}
+                        </button>
+                      )}
+                    </Menu.Item>
+                  ))}
+                </div>
+              </Menu.Items>
+            </Menu>
+
+            <Menu as="div" className="relative">
+              <Menu.Button className="p-2 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-full">
+                <FiGlobe className="w-5 h-5" />
+              </Menu.Button>
+              <Menu.Items className="absolute right-0 mt-2 w-36 origin-top-right bg-white dark:bg-gray-800 rounded-md shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                <div className="py-1">
+                  {LANGUAGES.map((lang) => (
+                    <Menu.Item key={lang.code}>
+                      {({ active }) => (
+                        <button
+                          className={`${
+                            active ? 'bg-gray-100 dark:bg-gray-700' : ''
+                          } ${
+                            i18n.language === lang.code ? 'text-blue-600 dark:text-blue-400' : ''
+                          } group flex w-full items-center px-4 py-2 text-sm`}
+                          onClick={() => i18n.changeLanguage(lang.code)}
+                        >
+                          {lang.nativeName}
+                        </button>
+                      )}
+                    </Menu.Item>
+                  ))}
+                </div>
+              </Menu.Items>
+            </Menu>
+          </div>
+        </div>
+      </div>
+
+      {isSearchOpen && (
+        <div className="fixed inset-0 bg-gray-500/20 dark:bg-black/50 backdrop-blur-sm z-50">
+          <div ref={searchRef} className="container mx-auto px-4 pt-20">
+            <div className="relative">
+              <input
+                type="text"
+                placeholder={t('nav.search')}
+                className="w-full p-4 rounded-lg bg-white dark:bg-gray-800 shadow-lg pr-12"
+
+              />
+              <button
+                onClick={() => setIsSearchOpen(false)}
+                className="absolute right-4 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700 dark:hover:text-gray-300"
+              >
+                ESC
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+    </header>
+  );
+}

frontend/src/hooks/useTheme.ts

@@ -0,0 +1,35 @@
+import { useState, useEffect } from 'react';
+
+type Theme = 'light' | 'dark' | 'system';
+
+export function useTheme() {
+  const [theme, setTheme] = useState<Theme>(
+    () => (localStorage.getItem('theme') as Theme) || 'system'
+  );
+
+  const getSystemTheme = () => 
+    window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    const systemTheme = getSystemTheme();
+    
+    root.classList.remove('light', 'dark');
+    root.classList.add(theme === 'system' ? systemTheme : theme);
+    
+    localStorage.setItem('theme', theme);
+
+    if (theme === 'system') {
+      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+      const handleChange = (e: MediaQueryListEvent) => {
+        root.classList.remove('light', 'dark');
+        root.classList.add(e.matches ? 'dark' : 'light');
+      };
+
+      mediaQuery.addEventListener('change', handleChange);
+      return () => mediaQuery.removeEventListener('change', handleChange);
+    }
+  }, [theme]);
+
+  return { theme, setTheme };
+}

frontend/src/i18n.ts

@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import en from '../data/i18n/en.json';
+import zhHans from '../data/i18n/zh-Hans.json';
+import zhHant from '../data/i18n/zh-Hant.json';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: { translation: en },
+      'zh-Hans': { translation: zhHans },
+      'zh-Hant': { translation: zhHant },
+    },
+    lng: 'zh-Hans',
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+
+export default i18n;

frontend/src/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));

frontend/src/main.tsx

@@ -0,0 +1,11 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+import './i18n';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

frontend/src/pages/Article.tsx

@@ -0,0 +1,30 @@
+import { useParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from 'react';
+
+export default function Article() {
+  const { articleId } = useParams();
+  const { i18n } = useTranslation();
+  const [article, setArticle] = useState<{
+    content: string;
+    metadata: any;
+  } | null>(null);
+
+  useEffect(() => {
+    // In a real application, we would fetch the article content here
+    // based on the articleId and current language
+    console.log(`Fetching article ${articleId} in ${i18n.language}`);
+  }, [articleId, i18n.language]);
+
+  if (!article) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <article className="max-w-4xl mx-auto">
+      <div className="prose dark:prose-invert max-w-none">
+        <div dangerouslySetInnerHTML={{ __html: article.content }} />
+      </div>
+    </article>
+  );
+}

frontend/src/pages/Daily.tsx

@@ -0,0 +1,15 @@
+import { useTranslation } from 'react-i18next';
+
+export default function Daily() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="max-w-4xl mx-auto">
+      <h1 className="text-3xl font-bold mb-8">{t('nav.daily')}</h1>
+      <div className="prose dark:prose-invert max-w-none">
+        {/* Daily content will be rendered here */}
+        <p className="text-lg">Coming soon...</p>
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Home.tsx

@@ -0,0 +1,17 @@
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+
+export default function Home() {
+  const { t } = useTranslation();
+
+  return (
+    <div className="space-y-8">
+      <section>
+        <h2 className="text-2xl font-bold mb-6">Latest Articles</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Article cards will be rendered here */}
+        </div>
+      </section>
+    </div>
+  );
+}

frontend/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />