diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml index 67055ad..c420242 100644 --- a/.github/workflows/build.yml +++ b/.github/workflows/build.yml @@ -11,6 +11,9 @@ jobs: uses: actions/checkout@v2 with: fetch-depth: 0 + - uses: actions/setup-node@v2 + with: + node-version: '16' - name: Get yarn cache directory path id: yarn-cache-dir-path run: echo "::set-output name=dir::$(yarn cache dir)" @@ -22,6 +25,8 @@ jobs: restore-keys: | ${{ runner.os }}-yarn- - name: Install and Build + env: + XRAY_DOCS_USE_VITE: "true" run: | yarn install yarn docs:build @@ -30,3 +35,15 @@ jobs: with: github_token: ${{ secrets.GITHUB_TOKEN }} publish_dir: docs/.vuepress/dist + - name: Build for Main Repository + env: + XRAY_DOCS_MAIN_REPO: "true" + run: | + yarn docs:build + - name: Deploy to main Repository + uses: peaceiris/actions-gh-pages@v3 + with: + personal_token: ${{ secrets.ACTION_PERSONAL_TOKEN }} + publish_dir: docs/.vuepress/dist + external_repository: XTLS/XTLS.github.io + publish_branch: gh-pages-next diff --git a/.prettierignore b/.prettierignore index 7e5f626..17b1d76 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,4 +1,5 @@ node_modules/ .vuepress/dist +.cache/ .temp/ dist/ diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts index 6b7b2fd..35c461d 100644 --- a/docs/.vuepress/config.ts +++ b/docs/.vuepress/config.ts @@ -1,18 +1,46 @@ -import { defineUserConfig, DefaultThemeOptions } from "vuepress"; +import { defineUserConfig } from "@vuepress/cli"; +import type { DefaultThemeOptions } from "@vuepress/theme-default"; import * as sidebar from "./config/sidebar"; import * as navbar from "./config/navbar"; import * as path from "path"; +const isProduction = process.env.NODE_ENV === "production"; +const forMainRepo = process.env.XRAY_DOCS_MAIN_REPO === "true"; +const useVite = process.env.XRAY_DOCS_USE_VITE === "true"; + +console.log("base:", forMainRepo ? "/" : "/Xray-docs-next/"); +console.log( + "bundler:", + isProduction && !useVite ? "@vuepress/webpack" : "@vuepress/vite" +); + export default defineUserConfig({ theme: path.join(__dirname, "./theme"), - plugins: ["@vuepress/back-to-top", "vuepress-plugin-mermaidjs"], - base: "/Xray-docs-next/", + plugins: [ + [ + "@vuepress/plugin-search", + { + locales: { + "/": { + placeholder: "搜索", + }, + }, + }, + ], + ["@vuepress/plugin-debug", !isProduction], + ], + base: forMainRepo ? "/" : "/Xray-docs-next/", locales: { "/": { lang: "zh-CN", title: "Project X", description: "Xray 官方文档", }, + "/en/": { + lang: "en-US", + title: "Project X", + description: "Official document of Xray", + }, }, themeConfig: { smoothScroll: true, @@ -24,13 +52,19 @@ export default defineUserConfig({ enableToggle: true, themePlugins: { - git: process.env.NODE_ENV === "production", + git: isProduction, }, locales: { "/": { - ToggleText: "切换主题", repoLabel: "查看源码", editLinkText: "帮助我们改善此页面！", + tip: "提示", + warning: "注意", + danger: "警告", + lastUpdatedText: "最近更改", + selectLanguageName: "简体中文", + selectLanguageText: "多语言", + selectLanguageAriaLabel: "多语言", sidebar: { "/config/": sidebar.getConfigSidebar( "特性详解", @@ -60,6 +94,39 @@ export default defineUserConfig({ }, navbar: navbar.hans, }, + "/en/": { + repoLabel: "Source", + selectLanguageName: "English (WIP)", + // TODO: translation + sidebar: { + "/en/config/": sidebar.getConfigSidebar( + "特性详解", + "基础配置", + "入站代理", + "出站代理", + "底层传输", + "/en/config/" + ), + "/en/document/level-0/": sidebar.getDocumentLv0Sidebar( + "小小白白话文", + "/en/document/level-0/" + ), + "/en/document/level-1/": sidebar.getDocumentLv1Sidebar( + "入门技巧", + "/en/document/level-1/" + ), + "/en/document/level-2/": sidebar.getDocumentLv2Sidebar( + "进阶技巧", + "/en/document/level-2/" + ), + "/en/development/": sidebar.getDevelopmentSidebar( + "开发指南", + "协议详解", + "/en/development/" + ), + }, + navbar: navbar.en, + }, }, }, head: [["link", { rel: "icon", href: `/logo.png` }]], @@ -71,17 +138,5 @@ export default defineUserConfig({ extendsMarkdown: (md) => { md.use(require("markdown-it-footnote")); }, - bundlerConfig: { - chainWebpack: (config) => { - config.module - .rule("webp") - .test(/\.(webp)(\?.*)?$/) - .use("file-loader") - .loader("file-loader") - .options({ - name: `assets/img/[name].[hash:8].[ext]`, - }); - }, - }, - //postcss: { plugins: [require("autoprefixer")] } + bundler: isProduction && !useVite ? "@vuepress/webpack" : "@vuepress/vite", }); diff --git a/docs/.vuepress/config/navbar.ts b/docs/.vuepress/config/navbar.ts index b7780a8..1d5921f 100644 --- a/docs/.vuepress/config/navbar.ts +++ b/docs/.vuepress/config/navbar.ts @@ -1,4 +1,4 @@ -import { NavbarConfig } from "@vuepress/theme-default/lib/types/nav"; +import { NavbarConfig } from "@vuepress/theme-default"; export const hans: NavbarConfig = [ { text: "首页", link: "/" }, @@ -6,12 +6,13 @@ export const hans: NavbarConfig = [ { text: "配置指南", link: "/config/" }, { text: "开发指南", link: "/development/" }, { text: "使用指南", link: "/document/" }, - { - text: "多语言", - ariaLabel: "Language Menu", - children: [ - { text: "简体中文", link: "/" }, - { text: "English", link: "/en" }, - ], - }, +]; + +// TODO: translation +export const en: NavbarConfig = [ + { text: "首页", link: "/en" }, + { text: "大史记", link: "/en/about/news.md" }, + { text: "配置指南", link: "/en/config/" }, + { text: "开发指南", link: "/en/development/" }, + { text: "使用指南", link: "/en/document/" }, ]; diff --git a/docs/.vuepress/config/sidebar.ts b/docs/.vuepress/config/sidebar.ts index 552ce2e..3433d1f 100644 --- a/docs/.vuepress/config/sidebar.ts +++ b/docs/.vuepress/config/sidebar.ts @@ -1,4 +1,4 @@ -import { SidebarConfigArray } from "@vuepress/theme-default/lib/types/nav"; +import { SidebarConfigArray } from "@vuepress/theme-default"; export function getConfigSidebar( feature: string, @@ -11,20 +11,20 @@ export function getConfigSidebar( return [ { text: feature, - isGroup: true, children: [ path + "features/vless.md", path + "features/xtls.md", path + "features/fallback.md", + path + "features/browser_dialer.md", path + "features/env.md", path + "features/multiple.md", ], }, { text: config, - isGroup: true, children: [ path + "", + path + "log.md", path + "api.md", path + "dns.md", path + "fakedns.md", @@ -39,7 +39,6 @@ export function getConfigSidebar( }, { text: inbound, - isGroup: true, children: [ path + "inbounds/", path + "inbounds/dokodemo.md", @@ -53,7 +52,6 @@ export function getConfigSidebar( }, { text: outbound, - isGroup: true, children: [ path + "outbounds/", path + "outbounds/blackhole.md", @@ -69,7 +67,6 @@ export function getConfigSidebar( }, { text: transport, - isGroup: true, children: [ path + "transports/", path + "transports/grpc.md", @@ -90,7 +87,6 @@ export function getDocumentLv0Sidebar( return [ { text: title, - isGroup: true, children: [ path + "ch01-preface.md", path + "ch02-preparation.md", @@ -113,7 +109,6 @@ export function getDocumentLv1Sidebar( return [ { text: title, - isGroup: true, children: [ path + "fallbacks-lv1.md", path + "routing-lv1-part1.md", @@ -132,7 +127,6 @@ export function getDocumentLv2Sidebar( return [ { text: title, - isGroup: true, children: [ path + "transparent_proxy/transparent_proxy.md", path + "tproxy.md", @@ -151,14 +145,12 @@ export function getDevelopmentSidebar( return [ { text: title, - isGroup: true, children: [ path + "intro/compile.md", path + "intro/design.md", path + "intro/guide.md", { text: protocols, - isGroup: true, children: [ path + "protocols/vless.md", path + "protocols/vmess.md", diff --git a/docs/.vuepress/styles/index.scss b/docs/.vuepress/styles/index.scss new file mode 100644 index 0000000..895a4a5 --- /dev/null +++ b/docs/.vuepress/styles/index.scss @@ -0,0 +1,70 @@ +:root { + --c-brand: #407ce8; + --c-brand-light: #2e73ea; + --c-text-accent: #2e73ea; + --c-brand-lighter: rgba(46, 115, 234, 0.75); + --c-bg-light: rgba(95, 101, 106, 0.1); + --c-badge-tip: #44c98d; + --c-warning-text-accent: var(--c-text-accent); + --c-danger-text-accent: var(--c-text-accent); + + --x-nav-text-hover: #0a51bd; +} + +html.dark { + --c-bg: #262a31; + --c-bg-light: #31353e; + --c-bg-lighter: #3a4049; + + --c-brand: #407ce8; + --c-brand-light: #2e73ea; + --c-brand-lighter: rgba(46, 115, 234, 0.8); + --c-warning-bg: rgba(185, 174, 119, 0.3); + --c-warning-text: #c0bebe; + --c-warning-text-accent: var(--c-text-accent); + + --c-danger-title: #b40505; + --c-danger-bg: rgba(72, 56, 57, 0.4); + --c-danger-text: #c0bebe; + --c-danger-text-accent: var(--c-text-accent); + + --c-bg-light: rgba(255, 255, 255, 0.1); + + --x-nav-text-hover: #7ca6f2; + + .badge.tip > a { + color: #305bac; + & > span > svg.icon.outbound { + color: #7d57b0; + } + } +} + +.badge.tip > a { + color: #3c71c0; + & > span > svg.icon.outbound { + color: #ad74e1; + } +} + +blockquote { + color: var(--c-text); + background-color: var(--c-bg-lighter); + border-left: 4px solid #17a2b8; +} + +* { + scroll-behavior: smooth; + transition: background-color 0.1s ease; + @media screen and (prefers-reduced-motion: reduce) { + scroll-behavior: auto; + } +} + +.meta-item.edit-link > a.meta-item-label { + color: var(--c-text-accent); +} + +.sidebar { + scrollbar-color: var(--c-brand-lighter) var(--c-border); +} diff --git a/docs/.vuepress/theme/README.md b/docs/.vuepress/theme/README.md index 4ea07af..d551b28 100644 --- a/docs/.vuepress/theme/README.md +++ b/docs/.vuepress/theme/README.md @@ -1,3 +1 @@ -# Xray-docs-next dark theme - -Fork from https://github.com/tolking/vuepress-theme-default-prefers-color-scheme . +# Xray-docs-next theme diff --git a/docs/.vuepress/theme/clientAppEnhance.ts b/docs/.vuepress/theme/clientAppEnhance.ts index 999c0da..a3b8ff5 100644 --- a/docs/.vuepress/theme/clientAppEnhance.ts +++ b/docs/.vuepress/theme/clientAppEnhance.ts @@ -1,10 +1,10 @@ import { defineClientAppEnhance } from "@vuepress/client"; import Tab from "./components/Tab.vue"; import Tabs from "./components/Tabs.vue"; - -import "./styles/default/index.scss"; +import Mermaid from "./components/Mermaid.vue"; export default defineClientAppEnhance(({ app, router, siteData }) => { app.component("Tab", Tab); app.component("Tabs", Tabs); + app.component("Mermaid", Mermaid); }); diff --git a/docs/.vuepress/theme/components/Mermaid.vue b/docs/.vuepress/theme/components/Mermaid.vue new file mode 100644 index 0000000..fb59ab0 --- /dev/null +++ b/docs/.vuepress/theme/components/Mermaid.vue @@ -0,0 +1,66 @@ + + + + + diff --git a/docs/.vuepress/theme/components/Tab.vue b/docs/.vuepress/theme/components/Tab.vue index 4a737fd..3bbd6ed 100644 --- a/docs/.vuepress/theme/components/Tab.vue +++ b/docs/.vuepress/theme/components/Tab.vue @@ -19,23 +19,23 @@ export default defineComponent({ }, }, data() { + let tag = this.title; return { - tabID: "", - labelID: "", + tabID: tag, }; }, - beforeMount() { - let tag = "tab-" + Math.random().toString(36).substring(2); - this.tabID = tag; - this.labelID = tag + "-" + "label"; - - // Since Vue 3.0, we have no access to $children. - // So we need another approach to register our child components. - this.$parent.$data.children.push(this); + mounted() { + this.tabID = "tab-" + Math.random().toString(36).substring(2); + this.$parent.$data.children.push({ id: this.tabID, title: this.title }); + }, + computed: { + labelID(): String { + return this.tabID + "-label"; + }, }, }); diff --git a/docs/.vuepress/theme/components/Tabs.vue b/docs/.vuepress/theme/components/Tabs.vue index 4dec442..2a236ad 100644 --- a/docs/.vuepress/theme/components/Tabs.vue +++ b/docs/.vuepress/theme/components/Tabs.vue @@ -4,9 +4,9 @@