370 lines
18 KiB
TypeScript
370 lines
18 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect } from 'react';
|
||
|
|
import { Header } from '../../components/Header';
|
||
|
|
import { Footer } from '../../components/Footer';
|
||
|
|
import { DocumentList } from '../../components/DocumentList';
|
||
|
|
import { ContentItem } from '../../lib/content';
|
||
|
|
import Link from 'next/link';
|
||
|
|
|
||
|
|
export default function DocsPage() {
|
||
|
|
const [currentLang, setCurrentLang] = useState('zh-CN');
|
||
|
|
const [isLoading, setIsLoading] = useState(true);
|
||
|
|
const [documents, setDocuments] = useState<ContentItem[]>([]);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const detectLanguage = () => {
|
||
|
|
const browserLang = navigator.language || navigator.languages[0];
|
||
|
|
if (browserLang.startsWith('zh-TW') || browserLang.startsWith('zh-HK')) {
|
||
|
|
setCurrentLang('zh-TW');
|
||
|
|
} else if (browserLang.startsWith('en')) {
|
||
|
|
setCurrentLang('en');
|
||
|
|
} else {
|
||
|
|
setCurrentLang('zh-CN');
|
||
|
|
}
|
||
|
|
setIsLoading(false);
|
||
|
|
};
|
||
|
|
|
||
|
|
detectLanguage();
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const loadDocuments = () => {
|
||
|
|
// 创建模拟文档数据
|
||
|
|
const mockDocuments: ContentItem[] = [
|
||
|
|
{
|
||
|
|
slug: 'getting-started',
|
||
|
|
metadata: {
|
||
|
|
title: currentLang === 'en' ? 'Getting Started' : '快速开始',
|
||
|
|
description:
|
||
|
|
currentLang === 'en'
|
||
|
|
? 'Learn how to quickly get started with MultiSite for building multi-language websites'
|
||
|
|
: '学习如何快速开始使用 MultiSite 构建多语言网站',
|
||
|
|
date: '2024-01-15',
|
||
|
|
author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
|
||
|
|
category: currentLang === 'en' ? 'Getting Started' : '入门指南',
|
||
|
|
tags:
|
||
|
|
currentLang === 'en'
|
||
|
|
? ['getting-started', 'installation', 'setup']
|
||
|
|
: ['快速开始', '安装', '设置'],
|
||
|
|
},
|
||
|
|
content: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
slug: 'configuration',
|
||
|
|
metadata: {
|
||
|
|
title: currentLang === 'en' ? 'Configuration Guide' : '配置指南',
|
||
|
|
description:
|
||
|
|
currentLang === 'en'
|
||
|
|
? 'Learn how to configure MultiSite to meet your project requirements'
|
||
|
|
: '了解如何配置 MultiSite 以满足您的项目需求',
|
||
|
|
date: '2024-01-16',
|
||
|
|
author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
|
||
|
|
category: currentLang === 'en' ? 'Configuration' : '配置',
|
||
|
|
tags:
|
||
|
|
currentLang === 'en'
|
||
|
|
? ['configuration', 'setup', 'customization']
|
||
|
|
: ['配置', '设置', '自定义'],
|
||
|
|
},
|
||
|
|
content: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
slug: 'content-management',
|
||
|
|
metadata: {
|
||
|
|
title: currentLang === 'en' ? 'Content Management' : '内容管理',
|
||
|
|
description:
|
||
|
|
currentLang === 'en'
|
||
|
|
? 'Learn how to manage and organize your content in MultiSite'
|
||
|
|
: '学习如何在 MultiSite 中管理和组织您的内容',
|
||
|
|
date: '2024-01-17',
|
||
|
|
author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
|
||
|
|
category: currentLang === 'en' ? 'Content' : '内容',
|
||
|
|
tags:
|
||
|
|
currentLang === 'en'
|
||
|
|
? ['content', 'management', 'markdown']
|
||
|
|
: ['内容', '管理', 'markdown'],
|
||
|
|
},
|
||
|
|
content: '',
|
||
|
|
},
|
||
|
|
{
|
||
|
|
slug: 'deployment',
|
||
|
|
metadata: {
|
||
|
|
title: currentLang === 'en' ? 'Deployment Guide' : '部署指南',
|
||
|
|
description:
|
||
|
|
currentLang === 'en'
|
||
|
|
? 'Learn how to deploy your MultiSite project to production'
|
||
|
|
: '了解如何将您的 MultiSite 项目部署到生产环境',
|
||
|
|
date: '2024-01-18',
|
||
|
|
author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
|
||
|
|
category: currentLang === 'en' ? 'Deployment' : '部署',
|
||
|
|
tags:
|
||
|
|
currentLang === 'en'
|
||
|
|
? ['deployment', 'production', 'CI/CD']
|
||
|
|
: ['部署', '生产', 'CI/CD'],
|
||
|
|
},
|
||
|
|
content: '',
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
setDocuments(mockDocuments);
|
||
|
|
};
|
||
|
|
|
||
|
|
if (!isLoading) {
|
||
|
|
loadDocuments();
|
||
|
|
}
|
||
|
|
}, [currentLang, isLoading]);
|
||
|
|
|
||
|
|
const content = {
|
||
|
|
'zh-CN': {
|
||
|
|
title: '文档',
|
||
|
|
subtitle: '完整的多语言静态站点开发指南',
|
||
|
|
description: '了解如何使用我们的多语言静态站点解决方案构建现代化的网站。',
|
||
|
|
nav: {
|
||
|
|
home: '首页',
|
||
|
|
docs: '文档',
|
||
|
|
about: '关于',
|
||
|
|
contact: '联系我们',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
'zh-TW': {
|
||
|
|
title: '文檔',
|
||
|
|
subtitle: '完整的多語言靜態站點開發指南',
|
||
|
|
description: '了解如何使用我們的多語言靜態站點解決方案構建現代化的網站。',
|
||
|
|
nav: {
|
||
|
|
home: '首頁',
|
||
|
|
docs: '文檔',
|
||
|
|
about: '關於',
|
||
|
|
contact: '聯繫我們',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
en: {
|
||
|
|
title: 'Documentation',
|
||
|
|
subtitle: 'Complete guide for multi-language static site development',
|
||
|
|
description:
|
||
|
|
'Learn how to build modern websites using our multi-language static site solution.',
|
||
|
|
nav: {
|
||
|
|
home: 'Home',
|
||
|
|
docs: 'Docs',
|
||
|
|
about: 'About',
|
||
|
|
contact: 'Contact',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
const currentContent = content[currentLang];
|
||
|
|
|
||
|
|
if (isLoading) {
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
|
||
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="min-h-screen bg-white">
|
||
|
|
<header className="bg-white shadow-sm border-b border-gray-200">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="flex justify-between items-center h-16">
|
||
|
|
<div className="flex items-center">
|
||
|
|
<div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold text-sm">MS</span>
|
||
|
|
</div>
|
||
|
|
<div className="ml-4">
|
||
|
|
<span className="text-xl font-semibold text-gray-900">
|
||
|
|
MultiSite
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<nav className="hidden md:flex space-x-8">
|
||
|
|
<Link
|
||
|
|
href="/"
|
||
|
|
className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Home' : '首页'}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/docs"
|
||
|
|
className="text-blue-600 px-3 py-2 text-sm font-medium border-b-2 border-blue-600"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Docs' : '文档'}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/about"
|
||
|
|
className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'About' : '关于'}
|
||
|
|
</Link>
|
||
|
|
<Link
|
||
|
|
href="/contact"
|
||
|
|
className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Contact' : '联系我们'}
|
||
|
|
</Link>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<div className="flex items-center space-x-4">
|
||
|
|
<select
|
||
|
|
value={currentLang}
|
||
|
|
onChange={(e) => setCurrentLang(e.target.value)}
|
||
|
|
className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
||
|
|
>
|
||
|
|
<option value="zh-CN">简体中文</option>
|
||
|
|
<option value="zh-TW">繁體中文</option>
|
||
|
|
<option value="en">English</option>
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="text-center">
|
||
|
|
<h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
|
||
|
|
{currentContent.title}
|
||
|
|
</h1>
|
||
|
|
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
||
|
|
{currentContent.subtitle}
|
||
|
|
</p>
|
||
|
|
<p className="text-lg text-gray-500 max-w-2xl mx-auto">
|
||
|
|
{currentContent.description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||
|
|
{/* Quick Start Section */}
|
||
|
|
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-12">
|
||
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-6">
|
||
|
|
{currentLang === 'en' ? 'Getting Started' : '快速开始'}
|
||
|
|
</h2>
|
||
|
|
<div className="prose prose-lg max-w-none">
|
||
|
|
<p className="text-gray-600 mb-4">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Welcome to the MultiSite documentation. This guide will help you get started with building multi-language static websites.'
|
||
|
|
: '欢迎使用 MultiSite 文档。本指南将帮助您开始构建多语言静态网站。'}
|
||
|
|
</p>
|
||
|
|
<h3 className="text-xl font-semibold text-gray-800 mb-3">
|
||
|
|
{currentLang === 'en' ? 'Features' : '特性'}
|
||
|
|
</h3>
|
||
|
|
<ul className="list-disc list-inside text-gray-600 space-y-2">
|
||
|
|
<li>
|
||
|
|
{currentLang === 'en' ? 'Multi-language support' : '多语言支持'}
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
{currentLang === 'en' ? 'Static site generation' : '静态站点生成'}
|
||
|
|
</li>
|
||
|
|
<li>{currentLang === 'en' ? 'SEO optimization' : 'SEO 优化'}</li>
|
||
|
|
<li>{currentLang === 'en' ? 'Responsive design' : '响应式设计'}</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Documentation Cards Section */}
|
||
|
|
<div className="mb-12">
|
||
|
|
<div className="flex items-center justify-between mb-8">
|
||
|
|
<h2 className="text-3xl font-bold text-gray-900">
|
||
|
|
{currentLang === 'en' ? 'Documentation' : '文档列表'}
|
||
|
|
</h2>
|
||
|
|
<div className="text-sm text-gray-500">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? `${documents.length} documents available`
|
||
|
|
: `共 ${documents.length} 篇文档`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="flex items-center justify-center py-12">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
|
||
|
|
<span className="ml-3 text-gray-600">
|
||
|
|
{currentLang === 'en' ? 'Loading documents...' : '加载文档中...'}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<DocumentList documents={documents} currentLang={currentLang} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<footer className="bg-gray-900 text-white py-12 mt-16">
|
||
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||
|
|
<div className="col-span-1 md:col-span-2">
|
||
|
|
<div className="flex items-center mb-4">
|
||
|
|
<div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||
|
|
<span className="text-white font-bold text-sm">MS</span>
|
||
|
|
</div>
|
||
|
|
<span className="ml-3 text-xl font-semibold">MultiSite</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-400 mb-4">
|
||
|
|
{currentLang === 'en'
|
||
|
|
? 'Enterprise-grade multi-language static site solution powered by React/Next.js'
|
||
|
|
: '基于 React/Next.js 的企业级多语言静态站点解决方案'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold mb-4">
|
||
|
|
{currentLang === 'en' ? 'Resources' : '资源'}
|
||
|
|
</h3>
|
||
|
|
<ul className="space-y-2 text-gray-400">
|
||
|
|
<li>
|
||
|
|
<Link href="/docs" className="hover:text-white transition-colors">
|
||
|
|
{currentLang === 'en' ? 'Docs' : '文档'}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="#" className="hover:text-white transition-colors">
|
||
|
|
API
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="#" className="hover:text-white transition-colors">
|
||
|
|
{currentLang === 'en' ? 'Examples' : '示例'}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<h3 className="text-lg font-semibold mb-4">
|
||
|
|
{currentLang === 'en' ? 'Support' : '支持'}
|
||
|
|
</h3>
|
||
|
|
<ul className="space-y-2 text-gray-400">
|
||
|
|
<li>
|
||
|
|
<Link
|
||
|
|
href="/contact"
|
||
|
|
className="hover:text-white transition-colors"
|
||
|
|
>
|
||
|
|
{currentLang === 'en' ? 'Contact' : '联系我们'}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="#" className="hover:text-white transition-colors">
|
||
|
|
GitHub
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
<li>
|
||
|
|
<Link href="#" className="hover:text-white transition-colors">
|
||
|
|
{currentLang === 'en' ? 'Community' : '社区'}
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
|
||
|
|
<p>
|
||
|
|
© 2024 MultiSite.{' '}
|
||
|
|
{currentLang === 'en' ? 'All rights reserved.' : '保留所有权利。'}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|