[feature] migrate to monorepo

2025-02-21 00:49:20 +08:00 · 2025-02-21 00:49:20 +08:00 · 05ddc1f783
commit 05ddc1f783
267 changed files with 75165 additions and 0 deletions
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/data/i18n/en.json
+++ b/frontend/data/i18n/en.json
@ -0,0 +1,24 @@
+{
+  "categories": {
+    "man": "Man",
+    "machine": "Machine",
+    "earth": "Earth",
+    "space": "Space",
+    "futures": "Futures",
+    "exclusive": "Exclusive"
+  },
+  "nav": {
+    "home": "Home",
+    "daily": "Daily",
+    "about": "About",
+    "search": "Search"
+  },
+  "theme": {
+    "light": "Light Mode",
+    "dark": "Dark Mode",
+    "system": "System Mode"
+  },
+  "footer": {
+    "copyright": "TSS Rocks. All rights reserved."
+  }
+}
--- a/frontend/data/i18n/zh-Hans.json
+++ b/frontend/data/i18n/zh-Hans.json
@ -0,0 +1,24 @@
+{
+  "categories": {
+    "man": "人类",
+    "machine": "机器",
+    "earth": "地球",
+    "space": "太空",
+    "futures": "未来",
+    "exclusive": "独家"
+  },
+  "nav": {
+    "home": "首页",
+    "daily": "每日",
+    "about": "关于",
+    "search": "搜索"
+  },
+  "theme": {
+    "light": "浅色模式",
+    "dark": "深色模式",
+    "system": "跟随系统"
+  },
+  "footer": {
+    "copyright": "TSS.Rocks. 版权所有。"
+  }
+}
--- a/frontend/data/i18n/zh-Hant.json
+++ b/frontend/data/i18n/zh-Hant.json
@ -0,0 +1,24 @@
+{
+  "categories": {
+    "man": "人類",
+    "machine": "機器",
+    "earth": "地球",
+    "space": "太空",
+    "futures": "未來",
+    "exclusive": "獨家"
+  },
+  "nav": {
+    "home": "首頁",
+    "daily": "每日",
+    "about": "關於",
+    "search": "搜尋"
+  },
+  "theme": {
+    "light": "淺色模式",
+    "dark": "深色模式",
+    "system": "跟隨系統"
+  },
+  "footer": {
+    "copyright": "TSS.Rocks. 版權所有。"
+  }
+}
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@ -0,0 +1,28 @@
+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);
--- a/frontend/index.html
+++ b/frontend/index.html
@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TSS.Rocks</title>
+    
+    <!-- Favicon -->
+    <link rel="icon" href="/favicon.ico" sizes="any" />
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+    
+    <!-- Web App Manifest -->
+    <link rel="manifest" href="/site.webmanifest" />
+    
+    <!-- Theme Color -->
+    <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#c9e7ff" media="(prefers-color-scheme: light)" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/frontend/package.json
+++ b/frontend/package.json
@ -0,0 +1,44 @@
+{
+  "name": "@tss-rocks/frontend",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tss-rocks/api": "workspace:*",
+    "@headlessui/react": "^2.2.0",
+    "@types/markdown-it": "^14.1.2",
+    "i18next": "^24.2.2",
+    "lucide-react": "^0.474.0",
+    "markdown-it": "^14.1.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.4.0",
+    "react-icons": "^5.4.0",
+    "react-router-dom": "^7.1.5"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@tailwindcss/postcss": "^4.0.3",
+    "@tailwindcss/typography": "^0.5.16",
+    "@tailwindcss/vite": "^4.0.3",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^4.0.3",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^6.1.0"
+  }
+}
--- a/frontend/pnpm-lock.yaml
+++ b/frontend/pnpm-lock.yaml
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    "@tailwindcss/postcss": {},
+    autoprefixer: {},
+  },
+};
--- a/frontend/public/apple-touch-icon.png
+++ b/frontend/public/apple-touch-icon.png
--- a/frontend/public/favicon-96x96.png
+++ b/frontend/public/favicon-96x96.png
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/favicon.svg
+++ b/frontend/public/favicon.svg
--- a/frontend/public/logo.avif
+++ b/frontend/public/logo.avif
--- a/frontend/public/logo.webp
+++ b/frontend/public/logo.webp
--- a/frontend/public/site.webmanifest
+++ b/frontend/public/site.webmanifest
@ -0,0 +1,21 @@
+{
+  "name": "TSS Rocks",
+  "short_name": "TSS Rocks",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#000000",
+  "background_color": "#c9e7ff",
+  "display": "standalone"
+}
--- a/frontend/public/web-app-manifest-192x192.png
+++ b/frontend/public/web-app-manifest-192x192.png
--- a/frontend/public/web-app-manifest-512x512.png
+++ b/frontend/public/web-app-manifest-512x512.png
--- a/frontend/src/App.tsx
+++ b/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;
--- a/frontend/src/components/Footer.tsx
+++ b/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;
--- a/frontend/src/components/layout/Header.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/hooks/useTheme.ts
+++ b/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 };
+}
--- a/frontend/src/i18n.ts
+++ b/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;
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
--- a/frontend/src/main.tsx
+++ b/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>
+);
--- a/frontend/src/pages/Article.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/pages/Daily.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/pages/Home.tsx
+++ b/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>
+  );
+}
--- a/frontend/src/vite-env.d.ts
+++ b/frontend/src/vite-env.d.ts
@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@ -0,0 +1,14 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {},
+  },
+  plugins: [
+    require('@tailwindcss/typography'),
+  ],
+}
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/frontend/tsconfig.node.json
+++ b/frontend/tsconfig.node.json
@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@ -0,0 +1,14 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import tailwindcss from "@tailwindcss/vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss()
+  ],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});