feat: add plugins and example overview

Code2Life · Oct 23, 2024 · 9ab4d36 · 9ab4d36
1 parent 14e2150
commit 9ab4d36
Show file tree

Hide file tree

Showing 22 changed files with 866 additions and 420 deletions.
diff --git a/.github/workflows/deadlink.yml b/.github/workflows/deadlink.yml
@@ -0,0 +1,18 @@
+name: Check for dead links pointing outside
+
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '00 18 * * *'
+
+jobs:
+  linkChecker:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Link Checker
+        id: lychee
+        uses: lycheeverse/lychee-action@v1.8.0
+        with:
+          args: --verbose --no-progress './**/*.md' './**/*.vue' --accept=200,204,206,403 --scheme https
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -1,101 +1,142 @@
-import { defineConfig } from 'vitepress'
-import { renderSandbox } from 'vitepress-plugin-sandpack'
+import { DefaultTheme, defineConfig, UserConfig } from "vitepress";
+import { renderSandbox } from "vitepress-plugin-sandpack";
 import { withMermaid } from "vitepress-plugin-mermaid";
-import container from 'markdown-it-container'
+import container from "markdown-it-container";
 
-import { en } from './en.mts'
-import { zh } from './zh.mts'
+import { en } from "./en.mts";
+import { zh } from "./zh.mts";
 
 // https://vitepress.dev/reference/site-config
-export default defineConfig(withMermaid({
-  locales: {
-    root: { label: 'English', ...en },
-    zh: { label: '简体中文', ...zh },
-  },
+export default defineConfig(
+	withMermaid({
+		locales: {
+			root: { label: "English", ...en },
+			zh: { label: "简体中文", ...zh },
+		},
 
-  title: "Awesome Doc Site",
+		vite: {
+			optimizeDeps: {
+				include: ["@videojs-player/vue"],
+			},
+		},
 
-  rewrites: {
-    'en/:rest*': ':rest*'
-  },
-  markdown: {
-    lineNumbers: true,
-    config(md: any) {
-      md.use(container, 'sandbox', {
-        render(tokens: any, idx: any) {
-          return renderSandbox(tokens, idx, 'sandbox')
-        }
-      })
-    }
-  },
-  lastUpdated: true,
-  cleanUrls: true,
-  metaChunk: true,
+		title: "Awesome Doc Site",
 
-  sitemap: {
-    hostname: 'https://doc-tpl.code2life.top'
-  },
+		rewrites: {
+			"en/:rest*": ":rest*",
+		},
+		markdown: {
+			lineNumbers: true,
+			config(md: any) {
+				md.use(container, "sandbox", {
+					render(tokens: any, idx: any) {
+						return renderSandbox(tokens, idx, "sandbox");
+					},
+				});
+			},
+		},
+		lastUpdated: true,
+		cleanUrls: true,
+		metaChunk: true,
 
-  mermaid: {},
+		sitemap: {
+			hostname: "https://docs.code2life.top",
+		},
 
-  head: [
-    ['meta', { name: 'color-scheme', content: 'dark' }],
-    ['script', {}, `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
+		mermaid: {},
+
+		vue: {
+			template: {
+				compilerOptions: {
+					isCustomElement: (tag: string) => {
+						// elements-api is API reference generator, need exclude from Vue components
+						// refer https://github.com/stoplightio/elements?tab=readme-ov-file#web-component
+						return tag.toLowerCase().indexOf("elements-api") === 0;
+					},
+				},
+			},
+		},
+
+		head: [
+			["meta", { name: "color-scheme", content: "dark" }],
+			[
+				"link",
+				{
+					rel: "stylesheet",
+					href: "https://unpkg.com/@stoplight/elements/styles.min.css",
+				},
+			],
+			[
+				"script",
+				{
+					src: "https://unpkg.com/@stoplight/elements/web-components.min.js",
+				},
+			],
+			[
+				"script",
+				{},
+				`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);
       posthog.init('phc_ebcwZBxJNxpbbX2Mb3YJdlAIwg9Se8z2PIL9egV0Ra2',{api_host:'https://us.i.posthog.com', person_profiles: 'always'
-          })`]
-  ],
+          })`,
+			],
+		],
 
-  themeConfig: {
-    logo: { src: '/logo.svg', width: 24, height: 24 },
+		themeConfig: {
+			logo: { src: "/logo.svg", width: 24, height: 24 },
 
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
-    ],
-    search: {
-      provider: 'local',
-      options: {
-        locales: {
-          zh: { // make this `root` if you want to translate the default locale
-            translations: {
-              button: {
-                buttonText: '搜索',
-                buttonAriaLabel: '搜索'
-              },
-              modal: {
-                displayDetails: '显示详细列表',
-                resetButtonTitle: '重置搜索',
-                backButtonTitle: '关闭搜索',
-                noResultsText: '没有结果',
-                footer: {
-                  selectText: '选择',
-                  selectKeyAriaLabel: '输入',
-                  navigateText: '导航',
-                  navigateUpKeyAriaLabel: '上箭头',
-                  navigateDownKeyAriaLabel: '下箭头',
-                  closeText: '关闭',
-                  closeKeyAriaLabel: 'esc'
-                }
-              }
-            }
-          }
-        }
-      }
-    },
+			// https://vitepress.dev/reference/default-theme-config
+			nav: [
+				{ text: "Home", link: "/" },
+				{ text: "Examples", link: "/markdown-examples" },
+			],
+			search: {
+				provider: "local",
+				options: {
+					locales: {
+						zh: {
+							// make this `root` if you want to translate the default locale
+							translations: {
+								button: {
+									buttonText: "搜索",
+									buttonAriaLabel: "搜索",
+								},
+								modal: {
+									displayDetails: "显示详细列表",
+									resetButtonTitle: "重置搜索",
+									backButtonTitle: "关闭搜索",
+									noResultsText: "没有结果",
+									footer: {
+										selectText: "选择",
+										selectKeyAriaLabel: "输入",
+										navigateText: "导航",
+										navigateUpKeyAriaLabel: "上箭头",
+										navigateDownKeyAriaLabel: "下箭头",
+										closeText: "关闭",
+										closeKeyAriaLabel: "esc",
+									},
+								},
+							},
+						},
+					},
+				},
+			},
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+			sidebar: [
+				{
+					text: "Examples",
+					items: [
+						{ text: "Markdown Examples", link: "/markdown-examples" },
+						{ text: "Runtime API Examples", link: "/api-examples" },
+					],
+				},
+			],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/code2life/vitepress-diataxis-template' }
-    ]
-  }
-}))
+			socialLinks: [
+				{
+					icon: "github",
+					link: "https://github.com/code2life/vitepress-diataxis-template",
+				},
+			],
+		},
+	} satisfies UserConfig<DefaultTheme.Config> & { mermaid: any }),
+);
diff --git a/docs/.vitepress/en.mts b/docs/.vitepress/en.mts
@@ -29,19 +29,19 @@ function nav(): DefaultTheme.NavItem[] {
   return [
     {
       text: 'Guide',
-      link: '/guide/api-examples',
+      link: '/guide/overview',
       activeMatch: '/guide/'
     },
     {
       text: 'Reference',
-      link: '/reference/site-config',
+      link: '/reference/api',
       activeMatch: '/reference/'
     },
     {
       text: "Resources",
       items: [{
         text: "Contributing",
-        link: 'https://github.com/vuejs/vitepress/blob/main/.github/contributing.md'
+        link: 'https://github.com/Code2Life/vitepress-diataxis-template'
       }]
     }
   ]

diff --git a/docs/.vitepress/sidebar.mts b/docs/.vitepress/sidebar.mts
@@ -1,35 +1,85 @@
 export const Guide = (lang: string) => [
   {
-    text: 'Introduction',
+    text: 'Overview',
     collapsed: false,
-    base: '/quickstart',
+    base: '/guide',
     items: [
       {
         text: match(lang, {
-          en: 'What is VitePress?',
-          zh: '什么是Vitepress'
+          en: 'Overview Sample',
+          zh: 'Overview Sample'
         }),
-        link: 'what-is-vitepress'
+        link: '/overview'
+      },
+    ]
+  }, 
+  {
+    text: 'Getting Started',
+    collapsed: false,
+    base: '/guide',
+    items: [
+      {
+        text: match(lang, {
+          en: 'Quick Start',
+          zh: '快速开始'
+        }),
+        link: '/get-started'
+      },
+    ]
+  },
+  {
+    text: 'Recipes',
+    collapsed: false,
+    base: '/guide',
+    items: [
+      {
+        text: match(lang, {
+          en: 'Use Markdown',
+          zh: '使用Markdown'
+        }),
+        link: '/markdown-examples'
+      },
+      {
+        text: match(lang, {
+          en: 'Add Playground',
+          zh: '添加互动教程'
+        }),
+        link: '/playground'
+      },
+      {
+        text: match(lang, {
+          en: 'Built-in Extensions',
+          zh: '扩展能力'
+        }),
+        link: '/plugin-examples'
+      },
+      {
+        text: match(lang, {
+          en: 'Deploy Site',
+          zh: '部署站点'
+        }),
+        link: '/deployment'
       },
     ]
   }
 ]
 export const Reference = (lang: string) => [
   {
-    text: 'Introduction',
+    text: 'API',
     collapsed: false,
     items: [
       {
         text: match(lang, {
-          en: 'What is VitePress?',
-          zh: '什么是Vitepress'
+          en: 'API Reference',
+          zh: 'API 参考'
         }),
-        link: 'what-is-vitepress'
+        link: '/reference/api'
       },
     ]
   }
 ]
 
 function match(lang: string, dict: Record<string, string>): string {
-  return dict[lang] ?? dict['en'] ?? 'wording not set'
+  console.log(dict[lang])
+  return dict[lang] ?? dict.en ?? 'wording not set'
 }
diff --git a/docs/.vitepress/theme/components/VPlayer.vue b/docs/.vitepress/theme/components/VPlayer.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts">
+import { VideoPlayer } from "@videojs-player/vue/dist/videojs-player.cjs.js";
+const props = defineProps<{ src: string, poster: string }>()
+</script>
+
+<template>
+    <VideoPlayer class="vjs-fluid vjs-16-9" :src="props.src" :poster="props.poster" :controls="true" />
+</template>