` and `` wrappers since `AppLayout` provides those. Keep the inner flex container with LeftSidebar, FilePreview, ResultPanel, modals, and loading overlay. The component should render: ```tsx <> {/* Left Sidebar */}

{/* Resize Handle */}

{/* Middle: FilePreview */}

{/* Right: ResultPanel */}

{/* Modals */} {showUploadModal && } {showAuthModal && } {loading &&

...

} ``` Note: `AppLayout` already provides `

` and `` and `

`, so WorkspacePage renders directly inside that flex container. - [ ] **Step 2: Update App.tsx** Replace `App.tsx` with a simple redirect to maintain backward compatibility if anything imports it: ```tsx import { Navigate } from 'react-router-dom'; export default function App() { return ; } ``` - [ ] **Step 3: Verify build** ```bash npm run typecheck ``` - [ ] **Step 4: Commit** ```bash git add src/pages/WorkspacePage.tsx src/App.tsx git commit -m "feat: migrate App.tsx logic to WorkspacePage" ``` --- ### Task 7: Update AppRouter with layout routes **Files:** - Modify: `src/routes/AppRouter.tsx` - [ ] **Step 1: Update AppRouter** ```tsx import { lazy, Suspense } from 'react'; import { Routes, Route } from 'react-router-dom'; import MarketingLayout from '../components/layout/MarketingLayout'; import AppLayout from '../components/layout/AppLayout'; import AuthCallbackPage from '../pages/AuthCallbackPage'; const HomePage = lazy(() => import('../pages/HomePage')); const WorkspacePage = lazy(() => import('../pages/WorkspacePage')); const DocsListPage = lazy(() => import('../pages/DocsListPage')); const DocDetailPage = lazy(() => import('../pages/DocDetailPage')); const BlogListPage = lazy(() => import('../pages/BlogListPage')); const BlogDetailPage = lazy(() => import('../pages/BlogDetailPage')); function LoadingFallback() { return (

); } export default function AppRouter() { return ( }> }> } /> } /> } /> } /> } /> }> } /> } /> ); } ``` - [ ] **Step 2: Commit** ```bash git add src/routes/AppRouter.tsx git commit -m "feat: update AppRouter with layout routes and lazy loading" ``` --- ### Task 8: Create placeholder Docs and Blog pages **Files:** - Create: `src/pages/DocsListPage.tsx` - Create: `src/pages/DocDetailPage.tsx` - Create: `src/pages/BlogListPage.tsx` - Create: `src/pages/BlogDetailPage.tsx` - [ ] **Step 1: Create DocsListPage** List page showing available docs. For now, hardcode a few placeholder entries. Each entry links to `/docs/:slug`. Include SEOHead. ```tsx import { Link } from 'react-router-dom'; import SEOHead from '../components/seo/SEOHead'; import { useLanguage } from '../contexts/LanguageContext'; const docs = [ { slug: 'getting-started', title: 'Getting Started', titleZh: '快速开始', description: 'Learn how to use TexPixel', descriptionZh: '了解如何使用 TexPixel' }, ]; export default function DocsListPage() { const { language } = useLanguage(); return ( <>

{language === 'en' ? 'Documentation' : '文档'}

{docs.map((doc) => (

{language === 'en' ? doc.title : doc.titleZh}

{language === 'en' ? doc.description : doc.descriptionZh}

))}

); } ``` - [ ] **Step 2: Create DocDetailPage** Placeholder that reads `:slug` from params and shows a coming-soon message. ```tsx import { useParams } from 'react-router-dom'; import SEOHead from '../components/seo/SEOHead'; export default function DocDetailPage() { const { slug } = useParams<{ slug: string }>(); return ( <>

{slug}

Content coming soon.

); } ``` - [ ] **Step 3: Create BlogListPage and BlogDetailPage** Same pattern as docs. BlogListPage shows placeholder blog entries with date and title. BlogDetailPage reads `:slug` param. - [ ] **Step 4: Commit** ```bash git add src/pages/DocsListPage.tsx src/pages/DocDetailPage.tsx src/pages/BlogListPage.tsx src/pages/BlogDetailPage.tsx git commit -m "feat: add placeholder Docs and Blog pages" ``` --- ### Task 9: Build content pipeline (Markdown → JSON) **Files:** - Create: `content/docs/en/getting-started.md` - Create: `content/docs/zh/getting-started.md` - Create: `content/blog/en/2026-03-25-introducing-texpixel.md` - Create: `content/blog/zh/2026-03-25-introducing-texpixel.md` - Create: `scripts/build-content.ts` - Create: `src/lib/content.ts` - Modify: `package.json` (add build:content script) - [ ] **Step 1: Create sample markdown files** Each file has frontmatter (title, description, slug, date, tags, order) and body content. - [ ] **Step 2: Create build-content script** Node script that: 1. Scans `content/docs/{en,zh}/` and `content/blog/{en,zh}/` 2. Parses frontmatter with `gray-matter` 3. Compiles markdown body with `remark` + `rehype` → HTML string 4. Outputs `public/content/docs-manifest.json` and `public/content/blog-manifest.json` 5. Outputs individual `public/content/docs/{lang}/{slug}.json` and `public/content/blog/{lang}/{slug}.json` Manifest format: ```json { "en": [{ "slug": "getting-started", "title": "...", "description": "...", "date": "...", "tags": [], "order": 1 }], "zh": [...] } ``` Individual file format: ```json { "meta": { ... frontmatter ... }, "html": "

compiled html

" } ``` - [ ] **Step 3: Create content loader utility** ```tsx // src/lib/content.ts import type { Language } from './translations'; export interface ContentMeta { slug: string; title: string; description: string; date: string; tags: string[]; order?: number; cover?: string; } export interface ContentManifest { en: ContentMeta[]; zh: ContentMeta[]; } export interface ContentItem { meta: ContentMeta; html: string; } const BASE = '/content'; export async function loadManifest(type: 'docs' | 'blog'): Promise { const res = await fetch(`${BASE}/${type}-manifest.json`); return res.json(); } export async function loadContent(type: 'docs' | 'blog', lang: Language, slug: string): Promise { const res = await fetch(`${BASE}/${type}/${lang}/${slug}.json`); return res.json(); } ``` - [ ] **Step 4: Add npm script** In `package.json`, add: ```json "build:content": "npx tsx scripts/build-content.ts", "build": "npm run build:content && vite build" ``` - [ ] **Step 5: Commit** ```bash git add content/ scripts/build-content.ts src/lib/content.ts package.json git commit -m "feat: add markdown content pipeline with build script" ``` --- ### Task 10: Wire Docs/Blog pages to content pipeline **Files:** - Modify: `src/pages/DocsListPage.tsx` - Modify: `src/pages/DocDetailPage.tsx` - Modify: `src/pages/BlogListPage.tsx` - Modify: `src/pages/BlogDetailPage.tsx` - [ ] **Step 1: Update DocsListPage to load from manifest** Use `useEffect` + `loadManifest('docs')` to fetch doc list. Render based on current language. - [ ] **Step 2: Update DocDetailPage to load content** Use `useEffect` + `loadContent('docs', language, slug)` to fetch and render HTML. Use `dangerouslySetInnerHTML` for the compiled HTML (safe since we control the source markdown). Apply Tailwind typography classes (`prose`). - [ ] **Step 3: Update Blog pages similarly** Same pattern. BlogListPage shows date + cover image. BlogDetailPage renders article with `type="article"` in SEOHead. - [ ] **Step 4: Run build:content and test** ```bash npm run build:content && npm run dev ``` Visit `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel`. - [ ] **Step 5: Commit** ```bash git add src/pages/ git commit -m "feat: wire Docs and Blog pages to markdown content pipeline" ``` --- ### Task 11: Update sitemap and SEO infrastructure **Files:** - Modify: `public/sitemap.xml` - Modify: `public/robots.txt` - Modify: `index.html` - [ ] **Step 1: Update sitemap.xml** Add all new routes: `/`, `/app`, `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel`. Set appropriate `changefreq` and `priority`. - [ ] **Step 2: Update robots.txt** Add `Disallow: /app` to prevent indexing of the workspace. - [ ] **Step 3: Clean up index.html** Since SEOHead now manages per-page meta tags via react-helmet-async, simplify `index.html` to only keep the base defaults. Remove the inline language detection script (LanguageContext handles this). - [ ] **Step 4: Commit** ```bash git add public/sitemap.xml public/robots.txt index.html git commit -m "feat: update sitemap, robots.txt, and index.html for new routes" ``` --- ### Task 12: Final verification - [ ] **Step 1: Type check** ```bash npm run typecheck ``` - [ ] **Step 2: Lint** ```bash npm run lint ``` - [ ] **Step 3: Build** ```bash npm run build ``` - [ ] **Step 4: Test all routes in dev** ```bash npm run dev ``` Visit: `/`, `/app`, `/docs`, `/docs/getting-started`, `/blog`, `/blog/introducing-texpixel` Verify: - Home page shows all sections, anchor links work - `/app` workspace functions as before - Docs/Blog pages load content - Language switching works across all pages - Mobile responsive nav works - [ ] **Step 5: Commit any fixes and final commit** ```bash git add -A git commit -m "feat: complete website restructure with marketing pages, docs, and blog" ```