Skip to content

Commit dfa5b80

Browse files
feat: added new vitepress-plugin-thumbnail-hash and markdown-it-unlazy-img plugin (#149)
* feat(enhanced-img): added new enhanced-img plugin Signed-off-by: Neko Ayaka <neko@ayaka.moe> * fix(enhanced-img): switched to markdown-it implementation Signed-off-by: Neko Ayaka <neko@ayaka.moe> * refactor(enhanced-img): finalized Signed-off-by: Neko Ayaka <neko@ayaka.moe> * docs(enhanced-img): refactored preview img Signed-off-by: Neko Ayaka <neko@ayaka.moe> * feat(enhanced-img): added transition Signed-off-by: Neko Ayaka <neko@ayaka.moe> * feat(enhanced-img): configure vue transformAssetUrls Signed-off-by: Neko Ayaka <neko@ayaka.moe> * feat(thumbnail-hash|unlazy-img): naming finalized Signed-off-by: Neko Ayaka <neko@ayaka.moe> --------- Signed-off-by: Neko Ayaka <neko@ayaka.moe> Co-authored-by: LittleSound <rizumu@ayaka.moe>
1 parent cd40288 commit dfa5b80

39 files changed

Lines changed: 2073 additions & 253 deletions

File tree

.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
.idea
77
.nuxt
88
.temp
9+
.vite-inspect
910
*.local
1011
*.log
1112
components.d.ts

.vscode/settings.json

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,24 +3,34 @@
33
"antfu",
44
"Astro",
55
"Attributify",
6+
"blurhash",
7+
"cijiugechu",
68
"colorette",
79
"datetime",
810
"easytag",
911
"emittypes",
12+
"evanw",
1013
"frontmatter",
1114
"graymatter",
1215
"iconify",
1316
"Logseq",
1417
"mkdist",
18+
"napi",
1519
"Nisekoi5",
1620
"nolebase",
1721
"Nólëbase",
1822
"quotepath",
1923
"Rehype",
2024
"resvg",
25+
"shikijs",
26+
"thumbhash",
2127
"Twoslash",
2228
"unconfig",
23-
"uncrypto"
29+
"uncrypto",
30+
"unlazy",
31+
"ElMassimo",
32+
"nodir",
33+
"thumbhashes"
2434
],
2535
"editor.formatOnSave": false,
2636
"editor.codeActionsOnSave": {

docs/.vitepress/config.ts

Lines changed: 51 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
import { cwd, env } from 'node:process'
2+
23
import { type DefaultTheme, defineConfig } from 'vitepress'
34
import MarkdownItFootnote from 'markdown-it-footnote'
45

56
import { transformerTwoslash } from '@shikijs/vitepress-twoslash'
7+
68
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
7-
import type { Options as ElementTransformOptions } from '@nolebase/markdown-it-element-transform'
89
import { ElementTransform } from '@nolebase/markdown-it-element-transform'
910
import { buildEndGenerateOpenGraphImages } from '@nolebase/vitepress-plugin-og-image'
11+
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
1012

1113
export const sidebars: Record<string, DefaultTheme.Sidebar> = {
1214
'en': {
@@ -37,17 +39,12 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
3739
{ text: 'Overview', link: '/pages/en/integrations/' },
3840
],
3941
},
40-
{
41-
text: 'Obsidian Plugins',
42-
items: [
43-
{ text: 'UnoCSS', link: '/pages/en/integrations/obsidian-plugin-unocss/' },
44-
],
45-
},
4642
{
4743
text: 'Markdown It Plugins',
4844
items: [
4945
{ text: 'Bi-directional links', link: '/pages/en/integrations/markdown-it-bi-directional-links/' },
5046
{ text: 'Elements Transformation', link: '/pages/en/integrations/markdown-it-element-transform/' },
47+
{ text: 'Lazy loading blurred thumbnails', link: '/pages/en/integrations/markdown-it-unlazy-img/' },
5148
],
5249
},
5350
{
@@ -59,7 +56,20 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
5956
{ text: 'Changelog & File history', link: '/pages/en/integrations/vitepress-plugin-git-changelog/' },
6057
{ text: 'Page properties', link: '/pages/en/integrations/vitepress-plugin-page-properties/' },
6158
{ text: 'Previewing image (social media card) generation', link: '/pages/en/integrations/vitepress-plugin-og-image/' },
62-
{ text: 'Enhanced &lt;mark&gt; elements', link: '/pages/en/integrations/vitepress-plugin-enhanced-mark/' },
59+
{ text: 'Enhanced mark elements', link: '/pages/en/integrations/vitepress-plugin-enhanced-mark/' },
60+
{
61+
text: 'Thumbnail hashing for images',
62+
items: [
63+
{ text: 'Usage', link: '/pages/en/integrations/vitepress-plugin-thumbnail-hash/' },
64+
{ text: 'Try ThumbHash', link: '/pages/en/integrations/vitepress-plugin-thumbnail-hash/thumbhash' },
65+
],
66+
},
67+
],
68+
},
69+
{
70+
text: 'Obsidian Plugins',
71+
items: [
72+
{ text: 'UnoCSS', link: '/pages/en/integrations/obsidian-plugin-unocss/' },
6373
],
6474
},
6575
],
@@ -119,17 +129,12 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
119129
{ text: '概览', link: '/pages/zh-CN/integrations/' },
120130
],
121131
},
122-
{
123-
text: 'Obsidian 插件',
124-
items: [
125-
{ text: 'UnoCSS', link: '/pages/zh-CN/integrations/obsidian-plugin-unocss/' },
126-
],
127-
},
128132
{
129133
text: 'Markdown It 插件',
130134
items: [
131135
{ text: '双向链接', link: '/pages/zh-CN/integrations/markdown-it-bi-directional-links/' },
132136
{ text: '元素转换', link: '/pages/zh-CN/integrations/markdown-it-element-transform/' },
137+
{ text: '懒加载模糊缩略图', link: '/pages/zh-CN/integrations/markdown-it-unlazy-img/' },
133138
],
134139
},
135140
{
@@ -141,7 +146,20 @@ export const sidebars: Record<string, DefaultTheme.Sidebar> = {
141146
{ text: '变更日志 及 文件历史', link: '/pages/zh-CN/integrations/vitepress-plugin-git-changelog/' },
142147
{ text: '页面属性', link: '/pages/zh-CN/integrations/vitepress-plugin-page-properties/' },
143148
{ text: '预览图片(社交媒体卡片)生成', link: '/pages/zh-CN/integrations/vitepress-plugin-og-image/' },
144-
{ text: '&lt;mark&gt; 元素增强', link: '/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/' },
149+
{ text: 'mark 元素增强', link: '/pages/zh-CN/integrations/vitepress-plugin-enhanced-mark/' },
150+
{
151+
text: '缩略图模糊哈希生成',
152+
items: [
153+
{ text: '用法', link: '/pages/zh-CN/integrations/vitepress-plugin-thumbnail-hash/' },
154+
{ text: '尝试 ThumbHash', link: '/pages/zh-CN/integrations/vitepress-plugin-thumbnail-hash/thumbhash' },
155+
],
156+
},
157+
],
158+
},
159+
{
160+
text: 'Obsidian 插件',
161+
items: [
162+
{ text: 'UnoCSS', link: '/pages/zh-CN/integrations/obsidian-plugin-unocss/' },
145163
],
146164
},
147165
],
@@ -191,6 +209,13 @@ export default defineConfig({
191209
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: getVueProdHydrationMismatchDetailsFlag(),
192210
},
193211
},
212+
vue: {
213+
template: {
214+
transformAssetUrls: {
215+
NolebaseUnlazyImg: ['src'],
216+
},
217+
},
218+
},
194219
lastUpdated: true,
195220
themeConfig: {
196221
outline: 'deep',
@@ -260,12 +285,16 @@ export default defineConfig({
260285
errorRendering: 'hover',
261286
}),
262287
],
263-
config(md) {
264-
md.use(MarkdownItFootnote)
288+
preConfig(md) {
265289
md.use(BiDirectionalLinks({
266290
dir: cwd(),
267291
}))
268-
292+
md.use(UnlazyImages(), {
293+
imgElementTag: 'NolebaseUnlazyImg',
294+
})
295+
},
296+
config(md) {
297+
md.use(MarkdownItFootnote)
269298
md.use(ElementTransform, (() => {
270299
let transformNextLinkCloseToken = false
271300

@@ -287,7 +316,7 @@ export default defineConfig({
287316
break
288317
}
289318
},
290-
} as ElementTransformOptions
319+
}
291320
})())
292321
},
293322
},
@@ -299,15 +328,17 @@ export default defineConfig({
299328
{ prefix: '/pages/en/integrations/markdown-it', text: 'Markdown It Plugins' },
300329
{ prefix: '/pages/en/integrations/obsidian-plugin', text: 'Obsidian Plugins' },
301330
{ prefix: '/pages/en/integrations/vitepress-plugin', text: 'VitePress Plugins' },
331+
{ prefix: '/pages/en/integrations/vitepress-plugin/vitepress-plugin-thumbnail-hash', text: 'VitePress Plugin: Thumbnail hashing for images' },
302332
{ prefix: '/pages/en/integrations/', text: 'Integrations' },
303333
{ prefix: '/pages/en/guide/', text: 'Guide' },
304334
{ prefix: '/pages/en/ui/', text: 'UI Components' },
305335
{ prefix: '/pages/en/', text: 'Documentations' },
306336
{ prefix: '/pages/zh-CN/integrations/markdown-it', text: 'Markdown It 插件' },
307337
{ prefix: '/pages/zh-CN/integrations/obsidian-plugin', text: 'Obsidian 插件' },
308338
{ prefix: '/pages/zh-CN/integrations/vitepress-plugin', text: 'VitePress 插件' },
309-
{ prefix: '/pages/zh-CN/guide/', text: '指南' },
339+
{ prefix: '/pages/zh-CN/integrations/vitepress-plugin/vitepress-plugin-thumbnail-hash', text: 'VitePress 插件:缩略图模糊哈希生成' },
310340
{ prefix: '/pages/zh-CN/integrations/', text: '集成' },
341+
{ prefix: '/pages/zh-CN/guide/', text: '指南' },
311342
{ prefix: '/pages/zh-CN/ui/', text: 'UI 组件' },
312343
{ prefix: '/pages/zh-CN/', text: '文档' },
313344
],

docs/.vitepress/theme/components/IntegrationCard.vue

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ import { useData } from 'vitepress'
33
import VitePressLogo from '../assets/vitepress-logo-large.webp'
44
import ObsidianLogo from '../assets/obsidian-logo.svg'
55
6-
const props = defineProps<{
6+
const props = withDefaults(defineProps<{
77
type: IntegrationType
88
title: string
99
package: string
10-
}>()
10+
}>(), {
11+
title: '',
12+
})
1113
1214
enum IntegrationType {
1315
markdownIt = 'markdown-it',
@@ -28,11 +30,25 @@ const data = useData()
2830
class="text-$vp-c-text-1!"
2931
>
3032
<span v-if="props.type === IntegrationType.markdownIt || props.type === IntegrationType.vitepress" flex="~ col 1" gap-2>
31-
<span>{{ props.title }} <slot name="badge" /></span>
33+
<span>
34+
<template v-if="$slots.title">
35+
<slot name="title" />
36+
</template>
37+
<template v-else>
38+
{{ props.title }}
39+
</template>
40+
<slot name="badge" /></span>
3241
<span text="sm zinc-400 dark:zinc-600">@nolebase/{{ props.package }}</span>
3342
</span>
3443
<span v-if="props.type === IntegrationType.obsidian" flex="~ col 1" gap-2>
35-
<span>{{ props.title }} <slot name="badge" /></span>
44+
<span>
45+
<template v-if="$slots.title">
46+
<slot name="title" />
47+
</template>
48+
<template v-else>
49+
{{ props.title }}
50+
</template>
51+
<slot name="badge" /></span>
3652
<span text="sm zinc-400 dark:zinc-600">{{ props.package }}</span>
3753
</span>
3854
<template v-if="props.type === IntegrationType.markdownIt">

0 commit comments

Comments
 (0)