76 lines
2.9 KiB
Markdown
76 lines
2.9 KiB
Markdown
|
# Website Restructure Design
|
||
|
|
|
||
|
|
## Overview
|
||
|
|
Restructure the single-page OCR app into a multi-section website with Home, Docs, Blog, Pricing, Contact modules while maintaining the core OCR tool functionality in a dedicated workspace page.
|
||
|
|
|
||
|
|
## Routes
|
||
|
|
|
||
|
|
| Route | Page | SEO | Layout |
|
||
|
|
|-------|------|-----|--------|
|
||
|
|
| `/` | HomePage (Hero + Features + HowItWorks + Pricing + Contact) | Prerender | MarketingLayout |
|
||
|
|
| `/app` | WorkspacePage (current 3-panel OCR layout) | noindex | AppLayout |
|
||
|
|
| `/docs` | DocsListPage | Prerender | MarketingLayout |
|
||
|
|
| `/docs/:slug` | DocDetailPage | Prerender | MarketingLayout |
|
||
|
|
| `/blog` | BlogListPage | Prerender | MarketingLayout |
|
||
|
|
| `/blog/:slug` | BlogDetailPage | Prerender | MarketingLayout |
|
||
|
|
| `/auth/google/callback` | AuthCallbackPage | noindex | None |
|
||
|
|
|
||
|
|
## Home Page Sections
|
||
|
|
1. **Hero** — Product tagline + mini upload demo + CTA to `/app`
|
||
|
|
2. **Features** — Feature cards grid (formula recognition, multi-format export, etc.)
|
||
|
|
3. **How it works** — 3-step process
|
||
|
|
4. **Pricing** — Static price cards (Free / Pro / Enterprise), payment integration later
|
||
|
|
5. **Contact** — Contact info display + form submission
|
||
|
|
|
||
|
|
## SEO Strategy
|
||
|
|
- **Prerendering**: `vite-plugin-prerender` for static HTML generation of marketing pages
|
||
|
|
- **Meta tags**: `react-helmet-async` for per-page title, description, OG/Twitter cards
|
||
|
|
- **Structured data**: JSON-LD (SoftwareApplication, Article, TechArticle)
|
||
|
|
- **Sitemap**: Auto-generated at build time from routes + markdown content
|
||
|
|
- **i18n SEO**: `hreflang` tags for zh/en
|
||
|
|
- `/app` route gets `noindex`
|
||
|
|
|
||
|
|
## Markdown Content System
|
||
|
|
```
|
||
|
|
content/
|
||
|
|
├── docs/{en,zh}/*.md
|
||
|
|
└── blog/{en,zh}/*.md
|
||
|
|
```
|
||
|
|
- Frontmatter: title, description, slug, date, tags, order, cover
|
||
|
|
- Build script scans content/, parses frontmatter, generates manifest JSON
|
||
|
|
- Body compiled via remark + rehype (reusing existing KaTeX pipeline)
|
||
|
|
|
||
|
|
## Component Architecture
|
||
|
|
|
||
|
|
### Layouts
|
||
|
|
- `MarketingLayout` — MarketingNavbar + Outlet + Footer
|
||
|
|
- `AppLayout` — AppNavbar + Outlet
|
||
|
|
|
||
|
|
### New Pages
|
||
|
|
- `src/pages/HomePage.tsx`
|
||
|
|
- `src/pages/WorkspacePage.tsx` (migrated from App.tsx)
|
||
|
|
- `src/pages/DocsListPage.tsx`
|
||
|
|
- `src/pages/DocDetailPage.tsx`
|
||
|
|
- `src/pages/BlogListPage.tsx`
|
||
|
|
- `src/pages/BlogDetailPage.tsx`
|
||
|
|
|
||
|
|
### Home Sections
|
||
|
|
- `src/components/home/HeroSection.tsx`
|
||
|
|
- `src/components/home/FeaturesSection.tsx`
|
||
|
|
- `src/components/home/HowItWorksSection.tsx`
|
||
|
|
- `src/components/home/PricingSection.tsx`
|
||
|
|
- `src/components/home/ContactSection.tsx`
|
||
|
|
|
||
|
|
### Shared Layout Components
|
||
|
|
- `src/components/layout/MarketingNavbar.tsx`
|
||
|
|
- `src/components/layout/AppNavbar.tsx` (evolved from current Navbar.tsx)
|
||
|
|
- `src/components/layout/Footer.tsx`
|
||
|
|
|
||
|
|
## Migration
|
||
|
|
- `App.tsx` core logic → `WorkspacePage.tsx`
|
||
|
|
- `Navbar.tsx` → split into `MarketingNavbar` + `AppNavbar`
|
||
|
|
- All existing components (LeftSidebar, FilePreview, ResultPanel, etc.) unchanged, referenced by WorkspacePage
|
||
|
|
|
||
|
|
## Lazy Loading
|
||
|
|
All page components use `React.lazy()` + `Suspense` to keep initial bundle small.
|