docs(landing): add multi-language and dark-mode for landing

ArtalkJS · Sep 17, 2024 · 6d54b72 · 6d54b72
1 parent cb4596d
commit 6d54b72
Show file tree

Hide file tree

Showing 47 changed files with 1,720 additions and 572 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -12,7 +12,7 @@ pnpm-lock.yaml
 ui/artalk/src/api/v2.ts
 docs/swagger/swagger.json
 docs/swagger/swagger.yaml
-docs/**
+docs/docs/**
 ui/artalk-sidebar/src/lib/md5.js
 ui/artalk/src/lib/detect.ts
 **/dist/**
diff --git a/README.md b/README.md
@@ -54,10 +54,10 @@ Artalk 是一款简单易用但功能丰富的评论系统，你可以开箱即
 * [图片懒加载](https://artalk.js.org/guide/frontend/img-lazy-load.html): 延迟加载图片，优化体验
 * [Latex](https://artalk.js.org/guide/frontend/latex.html): Latex 公式解析集成
 * [夜间模式](https://artalk.js.org/guide/frontend/config.html#darkmode): 夜间模式切换
-* [扩展插件](https://artalk.js.org/develop/): 创造更多可能性
+* [扩展插件](https://artalk.js.org/develop/plugin.html): 创造更多可能性
 * [多语言](https://artalk.js.org/guide/frontend/i18n.html): 多国语言切换
 * [命令行](https://artalk.js.org/guide/backend/config.html): 命令行操作管理能力
-* [API 文档](https://artalk.js.org/develop/): 提供 OpenAPI 格式文档
+* [API 文档](https://artalk.js.org/http-api.html): 提供 OpenAPI 格式文档
 * [程序升级](https://artalk.js.org/guide/backend/update.html): 版本检测，一键升级
 <!-- /features -->
 

diff --git a/docs/docs/guide/intro.md b/docs/docs/guide/intro.md
@@ -45,10 +45,10 @@ Artalk 的功能包括但不限于：
 * [图片懒加载](https://artalk.js.org/guide/frontend/img-lazy-load.html): 延迟加载图片，优化体验
 * [Latex](https://artalk.js.org/guide/frontend/latex.html): Latex 公式解析集成
 * [夜间模式](https://artalk.js.org/guide/frontend/config.html#darkmode): 夜间模式切换
-* [扩展插件](https://artalk.js.org/develop/): 创造更多可能性
+* [扩展插件](https://artalk.js.org/develop/plugin.html): 创造更多可能性
 * [多语言](https://artalk.js.org/guide/frontend/i18n.html): 多国语言切换
 * [命令行](https://artalk.js.org/guide/backend/config.html): 命令行操作管理能力
-* [API 文档](https://artalk.js.org/develop/): 提供 OpenAPI 格式文档
+* [API 文档](https://artalk.js.org/http-api.html): 提供 OpenAPI 格式文档
 * [程序升级](https://artalk.js.org/guide/backend/update.html): 版本检测，一键升级
 <!-- /features -->
 

diff --git a/docs/landing/index.html b/docs/landing/index.html
@@ -1,14 +1,17 @@
-<!DOCTYPE html>
-<html lang="zh">
+<!doctype html>
+<html>
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.png" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi"
     />
-    <title>Artalk | 自托管评论系统</title>
-    <meta name="description" content="一款简洁的自托管评论系统" />
+    <title>Artalk - A Self-hosted Comment System</title>
+    <meta
+      name="description"
+      content="A self-hosted comment system built in Golang, providing a lightweight and highly customizable solution for adding comments to your website."
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/docs/landing/package.json b/docs/landing/package.json
@@ -22,8 +22,13 @@
     "react-icons": "5.3.0"
   },
   "devDependencies": {
+    "@headlessui/react": "^2.1.8",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@vitejs/plugin-react-swc": "^3.7.0"
+    "@vitejs/plugin-react-swc": "^3.7.0",
+    "i18next": "^23.15.1",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "react-i18next": "^15.0.2",
+    "usehooks-ts": "^3.1.0"
   }
 }
diff --git a/docs/landing/public/images/demo-video-1-thumbnail.png b/docs/landing/public/images/demo-video-1-thumbnail.png
diff --git a/docs/landing/scripts/update-readme.ts b/docs/landing/scripts/update-readme.ts
@@ -1,19 +1,24 @@
 import path from 'node:path'
 import { writeFileSync, readFileSync } from 'node:fs'
-import { Features } from '../src/Features'
+import { getFeatures } from '../src/features'
+import { initI18nSSR } from '../src/i18n'
+
+const t = await initI18nSSR('zh-CN')
 
 const __dirname = new URL('.', import.meta.url).pathname
-const features = Features.map(o => `* [${o.name}](${o.link}): ${o.desc}`).join('\n')
+const features = getFeatures(t)
+  .map((o) => `* [${o.name}](${o.link}): ${o.desc}`)
+  .join('\n')
 
-const pathList = [
-  '../../../README.md',
-  '../../docs/guide/intro.md',
-]
+const pathList = ['../../../README.md', '../../docs/guide/intro.md']
 
-pathList.forEach(p => {
+pathList.forEach((p) => {
   p = path.resolve(__dirname, p)
 
-  const newReadme = readFileSync(p, 'utf-8').replace(/<!-- features -->[\s\S]*<!-- \/features -->/, `<!-- features -->\n${features}\n<!-- /features -->`)
+  const newReadme = readFileSync(p, 'utf-8').replace(
+    /<!-- features -->[\s\S]*<!-- \/features -->/,
+    `<!-- features -->\n${features}\n<!-- /features -->`,
+  )
   writeFileSync(p, newReadme)
 
   console.log(`Updated ${p}`)

diff --git a/docs/landing/src/App.scss b/docs/landing/src/App.scss
@@ -2,29 +2,62 @@
   box-sizing: border-box;
 }
 
+:root {
+  --color-primary: #007bff;
+  --color-font: #333;
+  --color-font-secondary: #67757f;
+  --color-bg: #fff;
+  --color-bg-transparent: rgba(255, 255, 255, 0.9);
+  --color-bg-grey: #f6f8fa;
+  --color-border: #e1e4ec;
+}
+
 body {
-  font: 16px "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+  font:
+    16px 'SF Pro Display',
+    'SF Pro Icons',
+    'Helvetica Neue',
+    'Helvetica',
+    'Arial',
+    sans-serif;
   overflow-x: hidden;
+  background-color: var(--color-bg);
+  color: var(--color-font);
 }
 
 .container {
   width: 100%;
   margin: 0 auto;
 
-  @media (min-width: 640px) { max-width: 640px; }
-  @media (min-width: 720px) { max-width: 720px; }
-  @media (min-width: 768px) { max-width: 768px; }
-  @media (min-width: 1024px) { max-width: 1024px; }
-  @media (min-width: 1280px) { max-width: 1280px; }
-  @media (min-width: 1536px) { max-width: 1536px; }
+  @media (min-width: 640px) {
+    max-width: 590px;
+  }
+  @media (min-width: 720px) {
+    max-width: 670px;
+  }
+  @media (min-width: 768px) {
+    max-width: 718px;
+  }
+  @media (min-width: 1024px) {
+    max-width: 974px;
+  }
+  @media (min-width: 1280px) {
+    max-width: 1230px;
+  }
+  @media (min-width: 1536px) {
+    max-width: 1446px;
+  }
+  @media (min-width: 1920px) {
+    max-width: 80%;
+  }
 }
 
 a {
   text-decoration: none;
 }
 
 .anim-fade-in {
-  animation: fadeIn .8s ease-in-out;
+  animation: fadeIn 0.8s ease-in-out;
 }
 
 @keyframes fadeIn {

diff --git a/docs/landing/src/App.tsx b/docs/landing/src/App.tsx
@@ -1,6 +1,10 @@
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
 import 'normalize.css'
 import './App.scss'
+import './darkmode.scss'
 
+import { useDarkMode } from './hooks/darkmode'
 import { Header } from './components/Header'
 import { Slogan } from './components/Slogan'
 import { Footer } from './components/Footer'
@@ -11,9 +15,22 @@ import { FuncFeature } from './components/Features/FuncFeature'
 import { SafeFeature } from './components/Features/SafeFeature'
 
 function App() {
+  const { t, i18n } = useTranslation()
+  const { isDarkMode, toggle: toggleDarkMode } = useDarkMode()
+
+  useEffect(() => {
+    document.title = t('home_title')
+    document.documentElement.lang = i18n.language
+  }, [t, i18n.language])
+
+  useEffect(() => {
+    if (isDarkMode) document.documentElement.classList.add('app-dark-mode')
+    else document.documentElement.classList.remove('app-dark-mode')
+  }, [isDarkMode])
+
   return (
     <>
-      <Header />
+      <Header darkModeHandler={{ isDarkMode, toggle: toggleDarkMode }} />
       <Slogan />
 
       <SlightFeature />