✨ feat(#283): modify contributors component to responsible editor com…

…ponent

fix inline-link-preview & bi-directional-links, still some problem
fix repeated contributors

.vitepress/config.ts

@@ -1,10 +1,20 @@
 import process from "node:process"
 import { fileURLToPath } from "node:url"
-import { defineConfig } from "vitepress"
+import { defineConfigWithTheme } from "vitepress"
 import type { DefaultTheme } from "vitepress/theme"
 import { withPwa, type PwaOptions } from "@vite-pwa/vitepress"
 import { BiDirectionalLinks } from "@nolebase/markdown-it-bi-directional-links"
 import { InlineLinkPreviewElementTransform } from "@nolebase/vitepress-plugin-inline-link-preview/markdown-it"
+import {
+	GitChangelog,
+	GitChangelogMarkdownSection
+} from "@nolebase/vitepress-plugin-git-changelog"
+
+import authors from "./data/authors.json"
+
+function generateAvatarUrl(username: string) {
+	return `https://cdn.crashmc.com/https://github.com/${username}.png`
+}
 
 const COMMIT_ID =
 	process.env.COMMIT_REF ||
@@ -22,6 +32,16 @@ const viteConfig = {
 			"@": fileURLToPath(new URL(".", import.meta.url)),
 		},
 	},
+	plugins: [
+		GitChangelog({
+			repoURL: () => "https://github.com/GlobeMC/crashmc.com",
+			mapAuthors: authors.map((author) => ({
+				...author,
+				avatar: generateAvatarUrl(author.avatar)
+			}))
+		}),
+		GitChangelogMarkdownSection()
+	],
 	optimizeDeps: {
 		include: [
 			// @rive-app/canvas is a CJS/UMD module, so it needs to be included here
@@ -279,7 +299,7 @@ const themeConfig: DefaultTheme.Config = {
 }
 
 export default withPwa(
-	defineConfig({
+	defineConfigWithTheme({
 		title: "GlobeMC",
 		lang: "zh-CN",
 		lastUpdated: true,
@@ -298,13 +318,11 @@ export default withPwa(
 			},
 			lineNumbers: true,
 			config: (md) => {
-				md.use(() =>
-					BiDirectionalLinks({
-						dir: "docs",
-						baseDir: "/",
-					}),
-				),
-					md.use(() => InlineLinkPreviewElementTransform)
+				md.use(BiDirectionalLinks({
+					dir: "docs",
+					baseDir: "/"
+				}))
+					.use(InlineLinkPreviewElementTransform)
 			},
 		},
 

.vitepress/data/authors.json

@@ -0,0 +1,135 @@
+[
+	{
+		"name": "Big_Cake",
+		"nameAliases": [
+			"Big-Cake-jpg",
+			"Big_Cake"
+		],
+		"avatar": "Big-Cake-jpg"
+	},
+	{
+		"name": "bingling_sama",
+		"nameAliases": [
+			"bingling-sama",
+			"bingling_sama"
+		],
+		"avatar": "bingling-sama"
+	},
+	{
+		"name": "柚子柚子",
+		"nameAliases": [
+			"youzi-2333",
+			"柚子柚子"
+		],
+		"avatar": "youzi-2333"
+	},
+	{
+		"name": "Pigeon0v0",
+		"nameAliases": [
+			"bwtx2023",
+			"bwtx1981",
+			"Yousa Ling",
+			"Pigeon0v0"
+		],
+		"avatar": "Pigeon0v0"
+	},
+	{
+		"name": "233355607",
+		"nameAliases": [
+			"2623684696",
+			"233355607"
+		],
+		"avatar": "2623684696"
+	},
+	{
+		"name": "hejiehao",
+		"nameAliases": [
+			"何杰豪",
+			"hejiehao"
+		],
+		"avatar": "hejiehao"
+	},
+	{
+		"name": "Rovniced",
+		"nameAliases": [
+			"Rovniced",
+			"Enlysure"
+		],
+		"avatar": "Rovniced"
+	},
+	{
+		"name": "zyxkad",
+		"nameAliases": [
+			"zyxkad",
+			"Kevin Z"
+		],
+		"avatar": "zyxkad"
+	},
+	{
+		"name": "HRxiaohu",
+		"nameAliases": [
+			"HRxiaohu"
+		],
+		"avatar": "HRxiaohu"
+	},
+	{
+		"name": "Pysio",
+		"nameAliases": [
+			"pysio2007",
+			"Pysio"
+		],
+		"avatar": "pysio2007"
+	},
+	{
+		"name": "XieXiLin",
+		"nameAliases": [
+			"XieXiLin",
+			"XieXiLin2"
+		],
+		"avatar": "XieXiLin2"
+	},
+	{
+		"name": "Z_Tsin",
+		"nameAliases": [
+			"Z_Tsin",
+			"ztsinsun"
+		],
+		"avatar": "ztsinsun"
+	},
+	{
+		"name": "9Bakabaka",
+		"nameAliases": [
+			"9Bakabaka"
+		],
+		"avatar": "9Bakabaka"
+	},
+	{
+		"name": "ZhuRuoLing",
+		"nameAliases": [
+			"ZhuRuoLing"
+		],
+		"avatar": "ZhuRuoLing"
+	},
+	{
+		"name": "bingxin666",
+		"nameAliases": [
+			"bingxin666"
+		],
+		"avatar": "bingxin666"
+	},
+	{
+		"name": "zkitefly",
+		"nameAliases": [
+			"zkitefly"
+		],
+		"avatar": "zkitefly"
+	},
+	{
+		"name": "思遥方",
+		"nameAliases": [
+			"Seayay",
+			"思遥方"
+		],
+		"avatar": "Seayay"
+	}
+]

.vitepress/theme/components/Contributors.vue → .vitepress/theme/components/ResponsibleEditor.vue

@@ -6,11 +6,8 @@ import { useCDN } from "@/cdn"
 const defaultAuthor = "GlobeMC"
 const { frontmatter } = useData()
 
-const contributors = computed(() => {
-	return [
-		frontmatter.value?.author,
-		...(frontmatter.value.contributors || []),
-	].filter((x) => x)
+const editor = computed(() => {
+	return frontmatter.value?.editor
 })
 
 function getAvatarUrl(name: string) {
@@ -21,34 +18,23 @@ function getGitHubLink(name: string) {
 	return `https://github.com/${name}`
 }
 
-function isNotEmpty(arr: string | string[]) {
-	return Array.isArray(arr) && arr.length
-}
+// function isNotEmpty(arr: string | string[]) {
+// 	return Array.isArray(arr) && arr.length
+// }
 </script>
 
 <template>
-	<p class="vp-main-color con">本文贡献者:</p>
-	<div v-if="isNotEmpty(contributors)" class="flex flex-wrap gap-4">
-		<div
-			v-for="contributor of contributors"
-			:key="contributor"
-			class="flex gap-2 items-center vp-main-color">
-			<a
-				:href="getGitHubLink(contributor)"
-				rel="noreferrer"
-				target="_blank"
-				class="flex items-center gap-2">
-				<img :src="getAvatarUrl(contributor)" class="w-8 h-8 rounded-full" />
-				<p class="vp-main-color">{{ contributor }}</p>
+	<p class="vp-main-color con">本文责任编辑:</p>
+	<div v-if="editor" class="flex flex-wrap gap-4">
+		<div class="flex gap-2 items-center vp-main-color">
+			<a :href="getGitHubLink(editor)" rel="noreferrer" target="_blank" class="flex items-center gap-2">
+				<img :src="getAvatarUrl(editor)" class="w-8 h-8 rounded-full" />
+				<p class="vp-main-color">{{ editor }}</p>
 			</a>
 		</div>
 	</div>
 	<div v-else class="flex gap-2 items-center">
-		<a
-			:href="getGitHubLink(defaultAuthor)"
-			rel="noreferrer"
-			target="_blank"
-			class="flex items-center gap-2">
+		<a :href="getGitHubLink(defaultAuthor)" rel="noreferrer" target="_blank" class="flex items-center gap-2">
 			<img src="/logo-brand.webp" class="w-8 h-8 rounded-full" />
 			<p class="vp-main-clolr">{{ "GlobeMC" }}</p>
 		</a>

.vitepress/theme/index.ts

@@ -8,7 +8,7 @@ import { h } from "vue"
 import LauncherBadge from "./global-components/LauncherBadge.vue"
 import ReloadPrompt from "./components/ReloadPrompt.vue"
 import Posts from "./layouts/Posts.vue"
-import Contributors from "./components/Contributors.vue"
+import ResponsibleEditor from "./components/ResponsibleEditor.vue"
 
 // Plugins
 import giscusTalk from "vitepress-plugin-comment-with-giscus"
@@ -22,7 +22,11 @@ import {
 	NolebaseEnhancedReadabilitiesScreenMenu,
 } from "@nolebase/vitepress-plugin-enhanced-readabilities/client"
 import { NolebaseInlineLinkPreviewPlugin } from "@nolebase/vitepress-plugin-inline-link-preview/client"
+import { InjectionKey as InlineLinkPreviewInjectionKey } from "@nolebase/vitepress-plugin-inline-link-preview/client"
 import "@nolebase/vitepress-plugin-inline-link-preview/client/style.css"
+import {
+	NolebaseGitChangelogPlugin
+} from "@nolebase/vitepress-plugin-git-changelog/client"
 
 // Styles
 import "./style.css"
@@ -31,10 +35,7 @@ import "vitepress-plugin-codeblocks-fold/style/index.scss"
 import "@andatoshiki/vitepress-plugin-nprogress/lib/css/index.css"
 import "viewerjs/dist/viewer.min.css"
 import "@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css"
-
-// function generateAvatarUrl(username: string) {
-// 	return `https://cdn.crashmc.com/https://github.com/${username}.png`
-// }
+import "@nolebase/vitepress-plugin-git-changelog/client/style.css"
 
 export default {
 	extends: DefaultTheme,
@@ -47,7 +48,7 @@ export default {
 			// 为较窄的屏幕（通常是小于 iPad Mini）添加阅读增强菜单
 			"nav-screen-content-after": () =>
 				h(NolebaseEnhancedReadabilitiesScreenMenu),
-			"doc-footer-before": () => h(Contributors),
+			"doc-footer-before": () => h(ResponsibleEditor),
 		})
 	},
 	enhanceApp(ctx: EnhanceAppContext) {
@@ -56,14 +57,18 @@ export default {
 			threshold: 300,
 		})
 		ctx.app.component("LauncherBadge", LauncherBadge)
-		ctx.app.component("Posts", Posts)
 		vitepressNprogress(ctx)
 		ctx.app.component("vImageViewer", vImageViewer)
 		ctx.app.use(NolebaseInlineLinkPreviewPlugin)
+		ctx.app.provide(InlineLinkPreviewInjectionKey, {
+			previewAllHostNames: true
+		})
+		ctx.app.use(NolebaseGitChangelogPlugin)
+		ctx.app.component("Posts", Posts)
 		// Why it doesn't work?
 		// const layouts = import.meta.glob("./layouts/*.vue")
 		// for (const path in layouts) {
-		// 	const layout = layouts[path].default
+		// 	const layout = layouts[path]
 		// 	ctx.app.component(layout.name, layout)
 		// }
 	},

.vitepress/theme/layouts/Posts.vue

@@ -60,7 +60,7 @@ import { data as posts } from "../../data/posts.data"
 			overflow: hidden;
 			text-overflow: ellipsis;
 
-			& ::v-deep .header-anchor {
+			& ::v-deep(.header-anchor) {
 				display: none;
 			}
 		}

docs/blog/index.md

@@ -1,5 +1,6 @@
 ---
 sidebar: false
+editor: bingling-sama
 ---
 
 # 博客板块

package.json

@@ -22,6 +22,7 @@
 		"@nolebase/vitepress-plugin-enhanced-readabilities": "2.3.0",
 		"@nolebase/vitepress-plugin-git-changelog": "2.3.0",
 		"@nolebase/vitepress-plugin-inline-link-preview": "2.3.0",
+		"@types/markdown-it": "^14.1.2",
 		"@types/pako": "^2.0.3",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@vite-pwa/assets-generator": "^0.2.4",
@@ -32,6 +33,7 @@
 		"eslint-plugin-prettier-vue": "^4.2.0",
 		"eslint-plugin-vue": "^9.27.0",
 		"husky": "^9.1.3",
+		"markdown-it": "^14.1.0",
 		"prettier": "^3.3.3",
 		"sass": "^1.77.8",
 		"tslib": "^2.6.3",