Merge branch 'main' of github.com:8aka-Team/NitWikit-VitePress

.vitepress/config.mts

@@ -3,6 +3,12 @@ import themeConfig from "./theme.config";
 import { resolve } from "path";
 import { withMermaid } from "vitepress-plugin-mermaid";
 
+const markdownRegExp = {
+  image: /!\[(?<name>.*)\]\((?<url>(.*))\)/g,
+  url: /\[(?<name>.*)\]\((?<url>(.*))\)/g,
+  bilitv: /\[(?<name>.*)\]\((?<url>https:\/\/www.bilibili.com\/video\/(?<id>(.*))\/(.*))\)/g,
+};
+
 // https://vitepress.dev/reference/site-config
 export default withMermaid({
   title: "NitWikit",
@@ -29,6 +35,28 @@ export default withMermaid({
           }
         },
       },
+      {
+        name: "nitwikit-assets-transformer",
+        enforce: "pre",
+        transform(code, id) {
+          if (id.endsWith(".md")) {
+            if (code.match(markdownRegExp.image)) {
+              return code + `\n<nw-image-viewer />`;
+            }
+          }
+        },
+      },
+      {
+        name: "nitwikit-bilitv-transformer",
+        enforce: "pre",
+        transform(code, id) {
+          if (id.endsWith(".md")) {
+            return code.replace(markdownRegExp.bilitv, (_match, name, url, bvId) => {
+              return `<bili-player title="${name}" src="${url}" bv-id="${bvId}" />`;
+            });
+          }
+        },
+      },
     ],
     css: {
       preprocessorOptions: {
@@ -38,8 +66,8 @@ export default withMermaid({
       },
     },
     optimizeDeps: {
-      include: ['@braintree/sanitize-url', 'dayjs', 'debug', 'cytoscape-cose-bilkent', 'cytoscape']
-    }
+      include: ["@braintree/sanitize-url", "dayjs", "debug", "cytoscape-cose-bilkent", "cytoscape"],
+    },
   },
   themeConfig: {
     nav: [
@@ -54,13 +82,19 @@ export default withMermaid({
     },
     ...themeConfig,
   },
+  markdown: {
+    languageAlias: {
+      gradle: "groovy",
+      maven: "xml",
+    },
+  },
   rewrites: {
     "nitwikit/docs/(.*)": "(.*)",
     "nitwikit/docs-java/(.*)": "Java/(.*)",
     "nitwikit/docs-bedrock/(.*)": "Bedrock/(.*)",
     "nitwikit/:pkg/(.*)": ":pkg/(.*)",
   },
-  // transformHtml: (code) => {
-  //   return code.replace(/import ([\s\S]+) from &#39;(@theme\/[\s\S]+)&#39;(;)/g, "");
-  // },
+  transformHtml: (code) => {
+    return code + "\n<nw-image-viewer />";
+  },
 });

.vitepress/theme.config.ts

@@ -1,10 +1,10 @@
-import { DefaultTheme } from "vitepress";
+import { DefaultTheme, PageData } from "vitepress";
 
 export default {
   logo: "/book.png",
 
   editLink: {
-    pattern: "https://github.com/postyizhan/NitWikit/edit/main/:path",
+    pattern: (payload: PageData) => `https://github.com/8aka-Team/NitWikit/edit/main/${payload.filePath.replace(/^nitwikit\//, "")}`,
     text: "为此页提供修改建议",
   },
   darkModeSwitchLabel: "外观",

.vitepress/theme/components/nitwikit-ui/index.ts

@@ -2,11 +2,17 @@ import { App } from "vue";
 
 import { Tabs, TabItem } from "./packages/tabs";
 import { DocCardList } from "./packages/doc-card-list";
+import { NwImage } from "./packages/image";
+import { NwImageViewer } from "./packages/image-viewer";
+import { BiliPlayer } from "./packages/bili-player";
 
 export default {
   install: async function (app: App) {
     app.component("Tabs", Tabs);
     app.component("TabItem", TabItem);
     app.component("DocCardList", DocCardList);
+    app.component("NwImage", NwImage);
+    app.component("NwImageViewer", NwImageViewer);
+    app.component("BiliPlayer", BiliPlayer);
   },
 };

.vitepress/theme/components/nitwikit-ui/packages/bili-player/bili-player.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="bili-player">
+    <iframe class="bili-player__inner" :src="iframeSrc" scrolling="no" border="0" frameborder="no" framespacing="0"
+      allowfullscreen="true"></iframe>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+
+const props = withDefaults(defineProps<NwImageProps>(), {
+});
+
+const iframeSrc = computed(() => `//player.bilibili.com/player.html?isOutside=true&bvid=${props.bvId}&autoPlay=false`);
+</script>
+
+<script lang="ts">
+interface NwImageProps {
+  title: string;
+  src: string;
+  bvId: string;
+}
+</script>
+
+<style lang="scss" scoped>
+.bili-player {
+  width: 100%;
+  height: 400px;
+
+  &__inner {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

.vitepress/theme/components/nitwikit-ui/packages/bili-player/index.ts

@@ -0,0 +1,3 @@
+import $BiliPlayer from "./bili-player.vue";
+
+export const BiliPlayer = $BiliPlayer;

.vitepress/theme/components/nitwikit-ui/packages/doc-card-list/doc-card-list.vue

@@ -39,6 +39,7 @@ const onDocCardClickHandler = (item: DefaultTheme.SidebarItem) => {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 30px;
+  margin: 20px 0;
 
   .doc-card {
     border-radius: 10px;

.vitepress/theme/components/nitwikit-ui/packages/image-viewer/image-viewer.vue

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import { onActivated, onMounted, onBeforeUnmount, ref } from 'vue'
+
+import Viewer from 'viewerjs';
+import 'viewerjs/dist/viewer.css'
+
+const instance = ref()
+
+onMounted(() => {
+  instance.value = new Viewer(document.querySelector('.vp-doc'));
+})
+
+onBeforeUnmount(() => {
+  instance.value?.destroy()
+})
+</script>

.vitepress/theme/components/nitwikit-ui/packages/image-viewer/index.ts

@@ -0,0 +1,3 @@
+import $NwImageViewer from "./image-viewer.vue";
+
+export const NwImageViewer = $NwImageViewer;

.vitepress/theme/components/nitwikit-ui/packages/image/image.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="nw-image">
+    <img class="nw-image__inner" ref="nwImageRef" :src="props.src" :alt="props.alt" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from 'vue'
+import { withBase } from 'vitepress'
+
+import Viewer from 'viewerjs';
+import 'viewerjs/dist/viewer.css'
+
+const props = withDefaults(defineProps<NwImageProps>(), {
+});
+
+const nwImageRef = ref<HTMLImageElement | null>(null);
+
+onMounted(() => {
+  const viewer = new Viewer(nwImageRef.value);
+})
+</script>
+
+<script lang="ts">
+interface NwImageProps {
+  src: string;
+  alt: string;
+}
+</script>
+
+<style lang="scss"></style>

.vitepress/theme/components/nitwikit-ui/packages/image/index.ts

@@ -0,0 +1,3 @@
+import $NwImage from "./image.vue";
+
+export const NwImage = $NwImage;