refactor: styles and i18n for documents site

2025-05-11 10:25:52 +02:00 · 2023-05-05 23:08:03 +08:00 · 2023-05-05 23:08:03 +08:00 · a2fe98e1a2
commit a2fe98e1a2
parent 5b34f0f052
14 changed files with 493 additions and 107 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -1,103 +0,0 @@
-import {defineConfig} from 'vitepress'
-
-// https://vitepress.dev/reference/site-config
-
-function thisYear() {
-    return new Date().getFullYear()
-}
-
-export default defineConfig({
-    lang: 'en-US',
-    title: 'Nginx UI',
-    description: 'Yet another Nginx Web UI',
-
-    lastUpdated: true,
-
-    locales: {
-        root: {
-            label: 'English',
-            lang: 'en'
-        },
-        zh_CN: {
-            label: '简体中文',
-            lang: 'zh_CN'
-        }
-    },
-
-    themeConfig: {
-        // https://vitepress.dev/reference/default-theme-config
-        nav: [
-            {text: 'Home', link: '/'},
-            {text: 'Guide', link: '/guide/about'},
-            {text: 'Demo', link: 'https://demo.nginxui.com'}
-        ],
-
-        sidebar: sidebar(),
-
-        editLink: {
-            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/frontend/docs/:path'
-        },
-
-        search: {
-            provider: 'local'
-        },
-
-        footer: {
-            message: 'Released under the AGPL-3.0 License.',
-            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
-        },
-
-        socialLinks: [
-            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
-        ]
-    }
-})
-
-function sidebar() {
-    return {
-        '/guide/': [
-            {
-                text: 'Introduction',
-                collapsed: false,
-                items: [
-                    {text: 'What is Nginx UI?', link: '/guide/about'},
-                    {text: 'Getting Started', link: '/guide/getting-started'},
-                    {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
-                    {text: 'Contributing', link: '/guide/contributing'},
-                    {text: 'License', link: '/guide/license'}
-                ]
-            },
-            {
-                text: 'Configuration',
-                collapsed: false,
-                items: [
-                    {text: 'Server', link: '/guide/config-server'},
-                    {text: 'Nginx Log', link: '/guide/config-nginx-log'},
-                    {text: 'Open AI', link: '/guide/config-openai'}
-                ]
-            }
-        ],
-        '/zh_CN/guide/': [
-            {
-                text: '介绍',
-                collapsed: false,
-                items: [
-                    {text: '何为 Nginx UI?', link: '/zh_CN/guide/about'},
-                    {text: '即刻开始', link: '/zh_CN/guide/getting-started'},
-                    {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
-                    {text: '贡献代码', link: '/zh_CN/guide/contributing'},
-                    {text: '开源协议', link: '/zh_CN/guide/license'}
-                ]
-            },
-            {
-                text: '配置',
-                collapsed: false,
-                items: [
-                    {text: '服务端', link: '/zh_CN/guide/config-server'},
-                    {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
-                    {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
-                ]
-            }
-        ]
-    }
-}
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@ -0,0 +1,36 @@
+import {LocaleSpecificConfig, DefaultTheme} from "vitepress"
+
+export const enConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        nav: [
+            {text: 'Home', link: '/'},
+            {text: 'Guide', link: '/guide/about'},
+            {text: 'Demo', link: 'https://demo.nginxui.com'}
+        ],
+
+        sidebar: {
+            '/guide/': [
+                {
+                    text: 'Introduction',
+                    collapsed: false,
+                    items: [
+                        {text: 'What is Nginx UI?', link: '/guide/about'},
+                        {text: 'Getting Started', link: '/guide/getting-started'},
+                        {text: 'Nginx Proxy Example', link: '/guide/nginx-proxy-example'},
+                        {text: 'Contributing', link: '/guide/contributing'},
+                        {text: 'License', link: '/guide/license'}
+                    ]
+                },
+                {
+                    text: 'Configuration',
+                    collapsed: false,
+                    items: [
+                        {text: 'Server', link: '/guide/config-server'},
+                        {text: 'Nginx Log', link: '/guide/config-nginx-log'},
+                        {text: 'Open AI', link: '/guide/config-openai'}
+                    ]
+                }
+            ],
+        },
+    }
+}
--- a/docs/.vitepress/config/index.ts
+++ b/docs/.vitepress/config/index.ts
@ -0,0 +1,12 @@
+import { defineConfig } from 'vitepress'
+import { sharedConfig } from './shared'
+import { enConfig } from "./en"
+import { zhCNConfig } from "./zh_CN"
+
+export default defineConfig({
+    ...sharedConfig,
+    locales: {
+        root: { label: 'English', lang: 'en', ...enConfig },
+        zh_CN: { label: '简体中文', lang: 'zh-CN', ...zhCNConfig }
+    }
+})
--- a/docs/.vitepress/config/shared.ts
+++ b/docs/.vitepress/config/shared.ts
@ -0,0 +1,33 @@
+import { defineConfig } from 'vitepress'
+
+function thisYear() {
+    return new Date().getFullYear()
+}
+
+export const sharedConfig = defineConfig({
+    title: 'Nginx UI',
+    description: 'Yet another Nginx Web UI',
+
+    lastUpdated: true,
+
+    themeConfig: {
+        logo: '/logo.svg',
+
+        search: {
+            provider: 'local'
+        },
+
+        editLink: {
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/docs/:path'
+        },
+
+        footer: {
+            message: 'Released under the AGPL-3.0 License.',
+            copyright: 'Copyright © 2021-' + thisYear() + ' Nginx UI Team'
+        },
+
+        socialLinks: [
+            {icon: 'github', link: 'https://github.com/0xJacky/nginx-ui'}
+        ]
+    }
+})
--- a/docs/.vitepress/config/zh_CN.ts
+++ b/docs/.vitepress/config/zh_CN.ts
@ -0,0 +1,76 @@
+import {LocaleSpecificConfig, DefaultTheme} from "vitepress"
+
+export const zhCNConfig: LocaleSpecificConfig<DefaultTheme.Config> = {
+    themeConfig: {
+        nav: [
+            {text: '首页', link: '/zh_CN/'},
+            {text: '手册', link: '/zh_CN/guide/about'},
+            {text: '演示', link: 'https://demo.nginxui.com'}
+        ],
+
+        editLink: {
+            text: '编辑此页',
+            pattern: 'https://github.com/0xJacky/nginx-ui/edit/master/docs/:path'
+        },
+
+        sidebar: {
+            '/zh_CN/guide/': [
+                {
+                    text: '介绍',
+                    collapsed: false,
+                    items: [
+                        {text: '何为 Nginx UI?', link: '/zh_CN/guide/about'},
+                        {text: '即刻开始', link: '/zh_CN/guide/getting-started'},
+                        {text: 'Nginx 代理示例', link: '/zh_CN/guide/nginx-proxy-example'},
+                        {text: '贡献代码', link: '/zh_CN/guide/contributing'},
+                        {text: '开源协议', link: '/zh_CN/guide/license'}
+                    ]
+                },
+                {
+                    text: '配置',
+                    collapsed: false,
+                    items: [
+                        {text: '服务端', link: '/zh_CN/guide/config-server'},
+                        {text: 'Nginx 日志', link: '/zh_CN/guide/config-nginx-log'},
+                        {text: 'Open AI', link: '/zh_CN/guide/config-openai'}
+                    ]
+                }
+            ]
+        },
+
+        docFooter: {
+            prev: '上一页',
+            next: '下一页',
+        },
+        returnToTopLabel: '返回顶部',
+        outlineTitle: '导航栏',
+        darkModeSwitchLabel: '外观',
+        sidebarMenuLabel: '归档',
+        lastUpdatedText: '更新于',
+
+        search: {
+            provider: 'local',
+            options: {
+                locales: {
+                    zh_CN: {
+                        translations: {
+                            button: {
+                                buttonText: '搜索文档',
+                                buttonAriaLabel: '搜索文档'
+                            },
+                            modal: {
+                                noResultsText: '无法找到相关结果',
+                                resetButtonTitle: '清除查询条件',
+                                footer: {
+                                    selectText: '选择',
+                                    navigateText: '切换',
+                                    closeText: '关闭'
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
--- a/docs/.vitepress/theme/Layout.vue
+++ b/docs/.vitepress/theme/Layout.vue
@ -0,0 +1,12 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+    <Layout />
+</template>
+
+<style scoped lang="less">
+
+</style>
--- a/docs/.vitepress/theme/index.ts
+++ b/docs/.vitepress/theme/index.ts
@ -0,0 +1,8 @@
+import DefaultTheme from 'vitepress/theme'
+import Layout from './Layout.vue'
+import './styles/custom.less'
+
+export default {
+    extends: DefaultTheme,
+    Layout: Layout
+}
--- a/docs/.vitepress/theme/styles/custom.less
+++ b/docs/.vitepress/theme/styles/custom.less
@ -0,0 +1,123 @@
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+@brand-color: #3682D8;
+@brand-gradient-color: #00D2FF;
+
+:root {
+    --vp-c-brand: @brand-color;
+    --vp-c-brand-light: lighten(@brand-color, 8%);
+    --vp-c-brand-lighter: lighten(@brand-color, 16%);
+    --vp-c-brand-lightest: lighten(@brand-color, 24%);
+    --vp-c-brand-dark: darken(@brand-color, 8%);
+    --vp-c-brand-darker: darken(@brand-color, 16%);
+    --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-button-brand-border: var(--vp-c-brand-light);
+    --vp-button-brand-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-bg: var(--vp-c-brand);
+    --vp-button-brand-hover-border: var(--vp-c-brand-light);
+    --vp-button-brand-hover-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+    --vp-button-brand-active-border: var(--vp-c-brand-light);
+    --vp-button-brand-active-text: var(--vp-c-text-dark-1);
+    --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+        120deg,
+        @brand-color 30%,
+        @brand-gradient-color
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+        -45deg,
+        @brand-color 50%,
+        @brand-gradient-color 50%
+    );
+    --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+    :root {
+        --vp-home-hero-image-filter: blur(56px);
+    }
+}
+
+@media (min-width: 960px) {
+    :root {
+        --vp-home-hero-image-filter: blur(72px);
+    }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+    --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+
+/**
+ * VitePress: Custom fix
+ * -------------------------------------------------------------------------- */
+
+/*
+  Use lighter colors for links in dark mode for a11y.
+  Also specify some classes twice to have higher specificity
+  over scoped class data attribute.
+*/
+.dark .vp-doc a,
+.dark .vp-doc a > code,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink:hover,
+.dark .VPNavBarMenuLink.VPNavBarMenuLink.active,
+.dark .link.link:hover,
+.dark .link.link.active,
+.dark .edit-link-button.edit-link-button,
+.dark .pager-link .title {
+    color: var(--vp-c-brand-lighter);
+}
+
+.dark .vp-doc a:hover,
+.dark .vp-doc a > code:hover {
+    color: var(--vp-c-brand-lightest);
+    opacity: 1;
+}
+
+/* Transition by color instead of opacity */
+.dark .vp-doc .custom-block a {
+    transition: color 0.25s;
+}
+
+.VPNavBar {
+    white-space: nowrap;
+}