🎉 feat: add nolebase component

Author: SaltyAom

bun.lock

@@ -7,10 +7,13 @@ import tailwindcss from '@tailwindcss/vite'
 
 import llmstxt from 'vitepress-plugin-llms'
 
+import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
 import {
 	GitChangelog,
 	GitChangelogMarkdownSection
 } from '@nolebase/vitepress-plugin-git-changelog/vite'
+import { InlineLinkPreviewElementTransform } from '@nolebase/vitepress-plugin-inline-link-preview/markdown-it'
+import { ThumbnailHashImages } from '@nolebase/vitepress-plugin-thumbnail-hash/vite'
 
 const description =
 	'Ergonomic Framework for Humans. TypeScript framework supercharged by Bun with End - to - End Type Safety, unified type system and outstanding developer experience'
@@ -32,7 +35,20 @@ export default defineConfig({
 					dir: './docs/.vitepress/cache/twoslash'
 				})
 			})
-		]
+		],
+		config: (md) => {
+			md.use(InlineLinkPreviewElementTransform)
+			md.use(UnlazyImages(), {
+				imgElementTag: 'NolebaseUnlazyImg'
+			})
+		}
+	},
+	vue: {
+		template: {
+			transformAssetUrls: {
+				NolebaseUnlazyImg: ['src']
+			}
+		}
 	},
 
 	// ![INFO] uncomment for support hot reload on WSL - https://github.com/vitejs/vite/issues/1153#issuecomment-785467271
@@ -78,8 +94,18 @@ export default defineConfig({
 					}
 				]
 			}),
-			GitChangelogMarkdownSection()
-		]
+			GitChangelogMarkdownSection(),
+			ThumbnailHashImages()
+		],
+		optimizeDeps: {
+			exclude: ['@nolebase/vitepress-plugin-inline-link-preview/client']
+		},
+		ssr: {
+			noExternal: [
+				'@nolebase/vitepress-plugin-inline-link-preview',
+				'@unlazy/vue/components'
+			]
+		}
 	},
 	head: [
 		[

docs/.vitepress/config.ts

@@ -12,8 +12,18 @@ import '@shikijs/vitepress-twoslash/style.css'
 import {
   NolebaseGitChangelogPlugin
 } from '@nolebase/vitepress-plugin-git-changelog/client'
-
 import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
+
+import {
+  NolebaseInlineLinkPreviewPlugin,
+} from '@nolebase/vitepress-plugin-inline-link-preview/client'
+import '@nolebase/vitepress-plugin-inline-link-preview/client/style.css'
+
+import {
+  NolebaseUnlazyImg,
+} from '@nolebase/vitepress-plugin-thumbnail-hash/client'
+import '@nolebase/vitepress-plugin-thumbnail-hash/client/style.css'
+
 import '../../tailwind.css'
 
 export default {
@@ -22,5 +32,7 @@ export default {
     enhanceApp({ app }: EnhanceAppContext) {
         app.use(TwoslashFloatingVue)
         app.use(NolebaseGitChangelogPlugin)
+        app.use(NolebaseInlineLinkPreviewPlugin)
+        app.component('NolebaseUnlazyImg', NolebaseUnlazyImg)
     }
 } satisfies Theme

docs/.vitepress/theme/index.ts

@@ -7,8 +7,8 @@
 				@click="activeTab = index"
 				class="px-5 py-2.5 border-b border-solid rounded-t-lg font-medium transition-colors ease-out duration-150 translate-y-[1px]"
 				:class="{
-					'text-pink-400 bg-pink-50 dark:bg-pink-200 border-pink-300': index === activeTab,
-					'text-gray-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-700 border-transparent border-b-slate-200 dark:border-b-slate-600 hover:bg-pink-50/75 dark:hover:bg-pink-200/60 dark:focus:bg-pink-200/60 hover:text-pink-400/80 dark:hover:text-pink-600 dark:focus:text-pink-600 focus:bg-pink-50/75 hover:border-pink-300/75 focus:text-pink-400/80 focus:border-pink-400/80 dark:focus:text-pink-400/80 dark:focus:border-pink-400/80': index !== activeTab
+					'text-pink-400 bg-pink-50 dark:bg-pink-500/25 border-pink-300': index === activeTab,
+					'text-gray-500 dark:text-slate-400 bg-slate-50 dark:bg-slate-800 border-transparent border-b-slate-200 dark:border-b-slate-600 hover:bg-pink-50 dark:hover:bg-pink-500/25 dark:focus:bg-pink-500/25 hover:text-pink-400/80 dark:hover:text-pink-60 focus:bg-pink-50/75 hover:border-pink-300/75 focus:text-pink-400/80 focus:border-pink-400/80 dark:focus:text-pink-400/80 dark:focus:border-pink-400/80': index !== activeTab
 				}"
 			>
 				{{ name }}

docs/components/fern/tab.vue

@@ -81,6 +81,7 @@ pre.vp-code > code,
 
 :root {
 	--vp-c-brand-1: #f06292;
+	--vp-c-brand-2: #f06292;
 	--vp-c-brand-light: #ff94c2;
 	--vp-c-brand-dark: #ba2d65;
 	--vp-c-border: var(--color-gray-100);
@@ -461,3 +462,21 @@ button.copy::after {
 .vp-nolebase-git-changelog-history {
 	@apply max-w-2xl w-full mx-auto my-4;
 }
+
+.vp-nolebase-git-changelog-contributors-list {
+	@apply gap-2 mb-8;
+
+	& > a,
+	& > div {
+		font-size: 0;
+		gap: 0;
+
+		& > img {
+			@apply w-10 h-10;
+		}
+	}
+}
+
+.vp-nolebase-git-changelog-history-list {
+	@apply bg-slate-50 dark:bg-slate-800;
+}

docs/tailwind.css

@@ -36,7 +36,10 @@
 		"@elysiajs/server-timing": "^1.2.1",
 		"@elysiajs/static": "^1.2.0",
 		"@elysiajs/swagger": "^1.2.0",
+		"@nolebase/markdown-it-unlazy-img": "^2.15.1",
 		"@nolebase/vitepress-plugin-git-changelog": "^2.15.1",
+		"@nolebase/vitepress-plugin-inline-link-preview": "^2.15.1",
+		"@nolebase/vitepress-plugin-thumbnail-hash": "^2.15.1",
 		"@rollup/plugin-node-resolve": "^16.0.0",
 		"@tailwindcss/postcss": "^4.0.6",
 		"@types/bun": "^1.2.2",