From f6797595457c96535e39bf890d4acfa873284ac9 Mon Sep 17 00:00:00 2001 From: chufan Date: Thu, 17 Oct 2024 11:26:09 +0800 Subject: [PATCH] =?UTF-8?q?feat(vitepress-demo):=20=E5=A2=9E=E5=8A=A0`vite?= =?UTF-8?q?press-demo`=E6=BC=94=E7=A4=BA=E6=A8=A1=E5=9D=97=EF=BC=8C?= =?UTF-8?q?=E7=AE=80=E5=8C=96`@142vip/vitepress`=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E4=BD=BF=E7=94=A8=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/vitepress-demo/.vitepress/config.ts | 145 ++++++++++++++++++ .../.vitepress/theme/components/HomePage.vue | 129 ++++++++++++++++ apps/vitepress-demo/.vitepress/theme/index.ts | 24 +++ .../vitepress-demo/.vitepress/theme/style.css | 130 ++++++++++++++++ apps/vitepress-demo/CHANGELOG.md | 9 ++ apps/vitepress-demo/README.md | 23 +++ apps/vitepress-demo/docs/example/test-1.md | 3 + apps/vitepress-demo/docs/example/test-2.md | 3 + apps/vitepress-demo/docs/example/test-3.md | 3 + apps/vitepress-demo/docs/index.md | 35 +++++ apps/vitepress-demo/package.json | 17 ++ apps/vitepress-demo/tsconfig.json | 38 +++++ package.json | 2 +- pnpm-lock.yaml | 9 ++ 14 files changed, 569 insertions(+), 1 deletion(-) create mode 100644 apps/vitepress-demo/.vitepress/config.ts create mode 100644 apps/vitepress-demo/.vitepress/theme/components/HomePage.vue create mode 100644 apps/vitepress-demo/.vitepress/theme/index.ts create mode 100644 apps/vitepress-demo/.vitepress/theme/style.css create mode 100644 apps/vitepress-demo/CHANGELOG.md create mode 100644 apps/vitepress-demo/README.md create mode 100644 apps/vitepress-demo/docs/example/test-1.md create mode 100644 apps/vitepress-demo/docs/example/test-2.md create mode 100644 apps/vitepress-demo/docs/example/test-3.md create mode 100644 apps/vitepress-demo/docs/index.md create mode 100644 apps/vitepress-demo/package.json create mode 100644 apps/vitepress-demo/tsconfig.json diff --git a/apps/vitepress-demo/.vitepress/config.ts b/apps/vitepress-demo/.vitepress/config.ts new file mode 100644 index 0000000..37d984e --- /dev/null +++ b/apps/vitepress-demo/.vitepress/config.ts @@ -0,0 +1,145 @@ +import path from 'node:path' +import { defineConfig } from 'vitepress' +import { getThemeConfig, getVipFooter, zhSearch } from '@142vip/vitepress' +import { OPEN_SOURCE_ADDRESS, getDocSiteBase } from '@142vip/utils' +import type { DefaultTheme } from 'vitepress/types/default-theme' +import { name as pkgName, version as pkgVersion } from '../package.json' + +/** + * 导航栏 + */ +const navbarConfig: DefaultTheme.NavItem[] = [ + { text: '🔥 首页', link: '/docs/index.md' }, + { + text: '💻 示例文档', + items: [ + { text: '👩🏻‍💻 示例文档-1', link: '/docs/example/test-1.md' }, + { text: '👨🏻‍💻 示例文档-2', link: '/docs/example/test-2.md' }, + { text: '👨🏻 示例文档-3', link: '/docs/example/test-3.md' }, + ], + }, + { + text: `⚡ ${pkgVersion}`, + items: [ + { text: '🎉 历史版本', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/releases` }, + { text: '📄 更新日志', link: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/blob/main/CHANGELOG.md` }, + { + text: '开源博客', + items: [ + { text: '🤡 408CSFamily', link: 'https://142vip-cn.feishu.cn/share/base/view/shrcnuuRDWBoHLmYaknXWFuhR4d' }, + { text: '📘 JavaScriptCollection', link: 'https://142vip.github.io/JavaScriptCollection/' }, + ], + }, + ], + }, +] + +/** + * 侧边栏 + */ +const sidebarConfig: DefaultTheme.SidebarItem[] = [ + { + text: '示例文档', + collapsed: false, + items: [ + { text: '示例文档-1', link: '/docs/example/test-1.md' }, + { text: '示例文档-2', link: '/docs/example/test-2.md' }, + { text: '示例文档-3', link: '/docs/example/test-3.md' }, + ], + }, +] + +/** + * 所有配置 + */ +export default defineConfig({ + base: getDocSiteBase('core-x'), + lang: 'zh-CN', + title: '@142vip/vitepress-demo', + titleTemplate: ':title - @142vip/core-x', + description: '@142vip/vitepress包的使用Demo演示', + srcDir: './', + // 排除部分 + srcExclude: [ + ], + // 编译输出目录 + outDir: './dist', + // dev 模式下的缓存目录，默认cache + cacheDir: './.vitepress/.vite', + assetsDir: 'static', + metaChunk: true, + head: [ + ['meta', { name: 'theme-color', content: '#3c8772' }], + ['meta', { property: 'og:url', content: 'https://github.com/142vip/core-x' }], + ['meta', { property: 'og:type', content: 'website' }], + ['meta', { property: 'og:title', content: '@142vip/core-x' }], + ['meta', { property: 'og:description', content: `${pkgName} - @142vip/vitepress-demo演示项目` }], + ], + // markdown + markdown: { + theme: { + dark: 'dracula-soft', + light: 'vitesse-light', + }, + attrs: { + leftDelimiter: '%{', + rightDelimiter: '}%', + }, + + }, + // 配置主题 + ...getThemeConfig({ + // 导航栏 + nav: navbarConfig, + sidebar: { + '/': sidebarConfig, + }, + // 页脚 + footer: getVipFooter({ + license: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X, + pkgName, + pkgVersion, + orgLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_VIP, + ownerLink: OPEN_SOURCE_ADDRESS.HOME_PAGE_MMDAPL, + }), + + // 搜索 + search: { + provider: 'algolia', + options: { + appId: '69JA242WYX', + apiKey: 'dec73bdf3277684a92aaa734e3b776c0', + indexName: 'core-x', + locales: { + // 支持中文搜索 + ...zhSearch, + }, + }, + }, + // 一些链接 + socialLinks: [ + { icon: 'github', link: OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X }, + { icon: 'npm', link: 'https://www.npmjs.com/~mmdapl' }, + ], + // 编辑链接 + editLink: { + pattern: `${OPEN_SOURCE_ADDRESS.GITHUB_REPO_CORE_X}/edit/next/:path`, + text: '在 Github 上对本页提出修改建议', + }, + }), + // 路径重写 + rewrites: { + 'CHANGELOG.md': 'changelog.md', + 'README.md': 'index.md', + }, + // 编译时路径别名 + vite: { + resolve: { + alias: { + '@packages': path.resolve(__dirname, '../packages'), + }, + }, + plugins: [ + ], + }, +}) diff --git a/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue b/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue new file mode 100644 index 0000000..2daf09f --- /dev/null +++ b/apps/vitepress-demo/.vitepress/theme/components/HomePage.vue @@ -0,0 +1,129 @@ + + + + + + diff --git a/apps/vitepress-demo/.vitepress/theme/index.ts b/apps/vitepress-demo/.vitepress/theme/index.ts new file mode 100644 index 0000000..627251b --- /dev/null +++ b/apps/vitepress-demo/.vitepress/theme/index.ts @@ -0,0 +1,24 @@ +import { h } from 'vue' +import DefaultTheme from 'vitepress/theme' +import './style.css' +import type { Theme } from 'vitepress' +import { VipBackTop } from '@142vip/vitepress/components' +// 导入 element-plus样式 +// import 'element-plus/dist/index.css' + +/** + * 自定义主题 + * 参考： https://vitepress.dev/guide/custom-theme + */ +export default { + extends: DefaultTheme, + Layout: () => { + return h(DefaultTheme.Layout, null, { + // https://vitepress.dev/guide/extending-default-theme#layout-slots + 'doc-bottom': () => h(VipBackTop), + }) + }, + // todo 查看这里的app、router、siteData的作用 + enhanceApp() { + }, +} satisfies Theme diff --git a/apps/vitepress-demo/.vitepress/theme/style.css b/apps/vitepress-demo/.vitepress/theme/style.css new file mode 100644 index 0000000..30d648b --- /dev/null +++ b/apps/vitepress-demo/.vitepress/theme/style.css @@ -0,0 +1,130 @@ +/** + * Customize default theme styling by overriding CSS variables: + * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css + */ + +/** + * Colors + * + * Each colors have exact same color scale system with 3 levels of solid + * colors with different brightness, and 1 soft color. + * + * - `XXX-1`: The most solid color used mainly for colored text. It must + * satisfy the contrast ratio against when used on top of `XXX-soft`. + * + * - `XXX-2`: The color used mainly for hover state of the button. + * + * - `XXX-3`: The color for solid background, such as bg color of the button. + * It must satisfy the contrast ratio with pure white (#ffffff) text on + * top of it. + * + * - `XXX-soft`: The color used for subtle background such as custom container + * or badges. It must satisfy the contrast ratio when putting `XXX-1` colors + * on top of it. + * + * The soft color must be semi transparent alpha channel. This is crucial + * because it allows adding multiple "soft" colors on top of each other + * to create a accent, such as when having inline code block inside + * custom containers. + * + * - `default`: The color used purely for subtle indication without any + * special meanings attched to it such as bg color for menu hover state. + * + * - `brand`: Used for primary brand colors, such as link text, button with + * brand theme, etc. + * + * - `tip`: Used to indicate useful information. The default theme uses the + * brand color for this by default. + * + * - `warning`: Used to indicate warning to the users. Used in custom + * container, badges, etc. + * + * - `danger`: Used to show error, or dangerous message to the users. Used + * in custom container, badges, etc. + * -------------------------------------------------------------------------- */ + +:root { + --vp-c-default-1: var(--vp-c-gray-1); + --vp-c-default-2: var(--vp-c-gray-2); + --vp-c-default-3: var(--vp-c-gray-3); + --vp-c-default-soft: var(--vp-c-gray-soft); + + --vp-c-brand-1: var(--vp-c-indigo-1); + --vp-c-brand-2: var(--vp-c-indigo-2); + --vp-c-brand-3: var(--vp-c-indigo-3); + --vp-c-brand-soft: var(--vp-c-indigo-soft); + + --vp-c-tip-1: var(--vp-c-brand-1); + --vp-c-tip-2: var(--vp-c-brand-2); + --vp-c-tip-3: var(--vp-c-brand-3); + --vp-c-tip-soft: var(--vp-c-brand-soft); + + --vp-c-warning-1: var(--vp-c-yellow-1); + --vp-c-warning-2: var(--vp-c-yellow-2); + --vp-c-warning-3: var(--vp-c-yellow-3); + --vp-c-warning-soft: var(--vp-c-yellow-soft); + + --vp-c-danger-1: var(--vp-c-red-1); + --vp-c-danger-2: var(--vp-c-red-2); + --vp-c-danger-3: var(--vp-c-red-3); + --vp-c-danger-soft: var(--vp-c-red-soft); +} + +/** + * Component: Button + * -------------------------------------------------------------------------- */ + +:root { + --vp-button-brand-border: transparent; + --vp-button-brand-text: var(--vp-c-white); + --vp-button-brand-bg: var(--vp-c-brand-3); + --vp-button-brand-hover-border: transparent; + --vp-button-brand-hover-text: var(--vp-c-white); + --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-active-border: transparent; + --vp-button-brand-active-text: var(--vp-c-white); + --vp-button-brand-active-bg: var(--vp-c-brand-1); +} + +/** + * Component: Home + * -------------------------------------------------------------------------- */ + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); + + --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%); + --vp-home-hero-image-filter: blur(44px); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(56px); + } +} + +@media (min-width: 960px) { + :root { + --vp-home-hero-image-filter: blur(68px); + } +} + +/** + * Component: Custom Block + * -------------------------------------------------------------------------- */ + +:root { + --vp-custom-block-tip-border: transparent; + --vp-custom-block-tip-text: var(--vp-c-text-1); + --vp-custom-block-tip-bg: var(--vp-c-brand-soft); + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); +} + +/** + * Component: Algolia + * -------------------------------------------------------------------------- */ + +.DocSearch { + --docsearch-primary-color: var(--vp-c-brand-1) !important; +} diff --git a/apps/vitepress-demo/CHANGELOG.md b/apps/vitepress-demo/CHANGELOG.md new file mode 100644 index 0000000..9786d45 --- /dev/null +++ b/apps/vitepress-demo/CHANGELOG.md @@ -0,0 +1,9 @@ +# Changelog + +All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines. + + + + + + diff --git a/apps/vitepress-demo/README.md b/apps/vitepress-demo/README.md new file mode 100644 index 0000000..37908bc --- /dev/null +++ b/apps/vitepress-demo/README.md @@ -0,0 +1,23 @@ +# vitepress-demo + +## 介绍 + +```bash +# 在项目根目录下载依赖 +pnpm i + +# 切换到vuepress-demo根目录 +cd apps/viteperss-demo + +# 本地启动 +pnpm dev + +# 本地编译 +pnpm build +``` + +## 证书 + +[MIT](https://opensource.org/license/MIT) + +Copyright (c) 2019-present, 142vip 储凡 diff --git a/apps/vitepress-demo/docs/example/test-1.md b/apps/vitepress-demo/docs/example/test-1.md new file mode 100644 index 0000000..f324fcc --- /dev/null +++ b/apps/vitepress-demo/docs/example/test-1.md @@ -0,0 +1,3 @@ +# 示例文档-1 + +这里是`示例文档-1`，内容随便写写 diff --git a/apps/vitepress-demo/docs/example/test-2.md b/apps/vitepress-demo/docs/example/test-2.md new file mode 100644 index 0000000..e97a315 --- /dev/null +++ b/apps/vitepress-demo/docs/example/test-2.md @@ -0,0 +1,3 @@ +# 示例文档-2 + +这里是`示例文档-2`，内容随便写写 diff --git a/apps/vitepress-demo/docs/example/test-3.md b/apps/vitepress-demo/docs/example/test-3.md new file mode 100644 index 0000000..3a458c5 --- /dev/null +++ b/apps/vitepress-demo/docs/example/test-3.md @@ -0,0 +1,3 @@ +# 示例文档-3 + +这里是`示例文档-3`，内容随便写写 diff --git a/apps/vitepress-demo/docs/index.md b/apps/vitepress-demo/docs/index.md new file mode 100644 index 0000000..9753f95 --- /dev/null +++ b/apps/vitepress-demo/docs/index.md @@ -0,0 +1,35 @@ +--- +layout: home + +hero: + name: "@142vip/core-x" + text: "X代表一切都有可能" + tagline: "易学易用、性能出色，适用工程化的通用工具包" + actions: + - theme: brand + text: 快速开始 🚀 + link: /packages/fairy-cli/index.html + - theme: alt + text: 🤡 408CSFamily + link: https://github.com/142vip/408CSFamily + - theme: alt + text: 📘 JavaScriptCollection + link: https://github.com/142vip/JavaScriptCollection +# 功能页 +features: + - title: 易学易用 + details: 文档丰富、提供完整、丰富的入门方案 + icon: 🛡️ + - title: 性能出色 + details: 类型安全、基于TS编码的工具包 + icon: 🚀 + - title: 通用工具包 + details: 适用工程化，可服用在各类项目中，支持Monorepo架构 + icon: 🧰 +--- + + + + diff --git a/apps/vitepress-demo/package.json b/apps/vitepress-demo/package.json new file mode 100644 index 0000000..254c284 --- /dev/null +++ b/apps/vitepress-demo/package.json @@ -0,0 +1,17 @@ +{ + "name": "vitepress-demo", + "type": "module", + "version": "0.0.1-alpha.0", + "private": true, + "packageManager": "pnpm@9.6.0", + "description": "@142vip/vitepress包的使用Demo演示", + "scripts": { + "dev": "npx vitepress dev --port 3080 --host --force --strictPort", + "build": "npx vitepress build --minify && pnpm build:proxy", + "build:proxy": "NEED_PROXY=true vitepress build --minify" + }, + "devDependencies": { + "@142vip/utils": "workspace:*", + "@142vip/vitepress": "workspace:*" + } +} diff --git a/apps/vitepress-demo/tsconfig.json b/apps/vitepress-demo/tsconfig.json new file mode 100644 index 0000000..ebc52d5 --- /dev/null +++ b/apps/vitepress-demo/tsconfig.json @@ -0,0 +1,38 @@ +{ + "compileOnSave": true, + "compilerOptions": { + "target": "es2018", + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "baseUrl": ".", + "module": "commonjs", + "moduleResolution": "node", + "paths": { + "@theme/*": [ + ".vitepress/theme/*" + ], + "@packages/*": [ + "packages/*" + ] + }, + "typeRoots": [ + "./typings", + "./node_modules/@types" + ], + "strictNullChecks": true, + "noImplicitThis": true, + "noUnusedLocals": true, + "declaration": true, + "inlineSourceMap": true, + "stripInternal": true, + "allowSyntheticDefaultImports": true, + "forceConsistentCasingInFileNames": true, + "skipLibCheck": true, + "pretty": true + }, + "exclude": [ + "dist", + "node_modules", + "test" + ] +} diff --git a/package.json b/package.json index 644ecdc..8842d57 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "build:packages": "npx turbo run build --filter @142vip/* --color --only", "build:docs": "vitepress build --minify", "build:docs-proxy": "NEED_PROXY=true vitepress build", - "build": "pnpm build:packages && pnpm build:docs && pnpm build:docs-proxy", + "build": "pnpm build:packages && pnpm build:apps && pnpm build:docs && pnpm build:docs-proxy", "preview:docs": "pnpm build:docs && npx vitepress preview --port 8081", "preview:docs-proxy": "pnpm build:docs-proxy && npx vitepress preview --port 8082 --base '/core-x'", "lint": "npx fa lint", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4c8ecec..a0e2351 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -64,6 +64,15 @@ importers: apps/nest-demo: {} + apps/vitepress-demo: + devDependencies: + '@142vip/utils': + specifier: workspace:* + version: link:../../packages/utils + '@142vip/vitepress': + specifier: workspace:* + version: link:../../packages/vitepress + apps/vuepress-demo: devDependencies: '@142vip/utils':