refactor: deprecate `MarkdownSectionWrapper`, use SFC layout. (#424)

pull/425/head
特菈 Dustella 2024-09-19 13:58:15 +08:00 committed by GitHub
parent b0ece49278
commit eca59fa411
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 45 additions and 216 deletions

View File

@ -24,11 +24,6 @@
"import": "./dist/theme.mjs",
"require": "./dist/theme.js"
},
"./plugins/MarkdownSectionWrapper": {
"types": "./dist/plugins/MarkdownSectionWrapper.d.ts",
"import": "./dist/plugins/MarkdownSectionWrapper.mjs",
"require": "./dist/plugins/MarkdownSectionWrapper.js"
},
"./components": {
"types": "./dist/components.d.ts",
"import": "./dist/components.mjs",

View File

@ -0,0 +1,43 @@
<script lang="ts" setup>
import DefaultTheme from 'vitepress/theme'
import {
NolebaseHighlightTargetedHeading,
} from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
import {
NolebaseEnhancedReadabilitiesMenu,
NolebaseEnhancedReadabilitiesScreenMenu,
} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
import { useData } from 'vitepress'
import CopyrightInfo from './components/CopyrightInfo.vue'
import AppFooter from './components/AppFooter.vue'
import AppearanceToggle from './components/AppearanceToggle.vue'
import PageInfo from './components/PageInfo.vue'
const { Layout } = DefaultTheme
const { frontmatter } = useData()
</script>
<template>
<AppearanceToggle>
<Layout>
<template #doc-before>
<div class="vp-doc">
<h1>{{ frontmatter.title }}</h1>
<PageInfo />
<CopyrightInfo />
</div>
<NolebaseHighlightTargetedHeading />
</template>
<template #doc-after>
<AppFooter />
</template>
<template #nav-bar-content-after>
<NolebaseEnhancedReadabilitiesMenu />
</template>
<template #nav-screen-content-after>
<NolebaseEnhancedReadabilitiesScreenMenu />
</template>
</Layout>
</AppearanceToggle>
</template>

View File

@ -5,11 +5,6 @@ import { fileURLToPath } from 'node:url'
import { GitChangelog } from '@nolebase/vitepress-plugin-git-changelog/vite'
import { transformHeadMeta } from '@nolebase/vitepress-plugin-meta'
import {
MarkdownSectionWrapper,
PageHeaderTemplate,
TemplateCopyrightInfo,
} from '@project-trans/vitepress-theme-project-trans/plugins/MarkdownSectionWrapper'
import footnote from 'markdown-it-footnote'
import katex from 'markdown-it-katex'
import mdPangu from 'markdown-it-pangu'
@ -169,19 +164,6 @@ function genConfig() {
},
vite: {
plugins: [
MarkdownSectionWrapper(
[PageHeaderTemplate, TemplateCopyrightInfo],
[],
{
excludes: [],
exclude: (_, { helpers }): boolean => {
if (helpers.idEquals('index.md'))
return true
return false
},
},
),
GitChangelog({
repoURL: githubRepoLink,
}),

View File

@ -1,168 +0,0 @@
import { dirname, relative, resolve } from 'node:path'
import { fileURLToPath } from 'node:url'
import type { Plugin } from 'vite'
import {
pathEndsWith,
pathEquals,
pathStartsWith,
} from '../utils/path'
interface Context {
helpers: {
/**
* A helper function to help to determine whether the passed string parameter equals the
* current transforming module ID with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param equalsWith - String to equal with
* @returns boolean
*/
idEquals: (equalsWith: string) => boolean
/**
* A helper function to help to determine whether the passed string parameter startsWith the
* current transforming module ID with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param startsWith - String to start with
* @returns boolean
*/
idStartsWith: (startsWith: string) => boolean
/**
* A helper function to help to determine whether the passed string parameter endsWith the
* current transforming module ID with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param endsWith - String to end with
* @returns boolean
*/
idEndsWith: (endsWith: string) => boolean
/**
* A helper function to help to determine whether the passed first path parameter
* equals the second passed string with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param path - Path to be compared with
* @param equalsWith - String to equal with
* @returns boolean
*/
pathEquals: (path: string, equalsWith: string) => boolean
/**
* A helper function to help to determine whether the passed first path parameter
* startsWith the second passed string with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param path - Path to be compared with
* @param startsWith - String to start with
* @returns boolean
*/
pathStartsWith: (path: string, startsWith: string) => boolean
/**
* A helper function to help to determine whether the passed first path parameter
* endsWith the second passed string with normalization of paths capabilities and
* cross platform / OS compatibilities.
* @param path - Path to be compared with
* @param endsWith - String to end with
* @returns boolean
*/
pathEndsWith: (path: string, endsWith: string) => boolean
}
}
export interface MarkdownSectionWrapperOptions {
/**
* The list of file names to exclude from the transformation
* @default ['index.md']
*/
excludes?: string[]
/**
* The function to exclude the file from the transformation
* @param id - the current transforming module ID (comes from vite when transform hook is called)
* @param context - the context object, contains several helper functions
* @returns boolean
* @default () => false
*/
exclude?: (id: string, context: Context) => boolean
}
export function MarkdownSectionWrapper(headerTransformers: ((frontmatter: string | null, text: string, id: string) => string)[], footerTransformers: ((frontmatter: string | null, text: string, id: string) => string)[], options?: MarkdownSectionWrapperOptions): Plugin {
const {
excludes = ['index.md'],
exclude = () => false,
} = options ?? {}
let root = ''
return {
name: '@pjts/markdown-section-wrapper',
// May set to 'pre' since end user may use vitepress wrapped vite plugin to
// specify the plugins, which may cause this plugin to be executed after
// vitepress or the other markdown processing plugins.
enforce: 'pre',
configResolved(config) {
root = config.root ?? ''
},
transform(code, id) {
function idEndsWith(endsWith: string) {
return pathEndsWith(relative(root, id), endsWith)
}
function idEquals(equals: string) {
return pathEquals(relative(root, id), equals)
}
function idStartsWith(startsWith: string) {
return pathStartsWith(relative(root, id), startsWith)
}
if (!id.endsWith('.md'))
return null
if (excludes.includes(id))
return null
if (exclude(id, { helpers: { idEndsWith, idEquals, idStartsWith, pathEndsWith, pathEquals, pathStartsWith } }))
return null
const frontmatter = (code.match(/(^---$([\s\S])+?^---$)/m)?.[0] ?? null)
const text = code.replace(/(^---$([\s\S])+?^---$)/m, '')
const headers: string[] = headerTransformers.map(f => f(frontmatter, text, id))
const footers: string[] = footerTransformers.map(f => f(frontmatter, text, id))
return [frontmatter, ...headers, text, ...footers].join('')
},
}
}
export function TemplateAppSBox(_frontmatter: string | null, _text: string, _id: string): string {
return `
##
<AppSBox />
`
}
export function TemplateCopyrightInfo(_frontmatter: string | null, _text: string, _id: string): string {
return `
<CopyrightInfo />
`
}
const __dirname = dirname(fileURLToPath(import.meta.url))
const ROOT = resolve(__dirname, '../../')
export function PageHeaderTemplate(_frontmatter: string | null, _text: string, id: string): string {
if (!id.endsWith('.md'))
return ''
id = relative(ROOT, id)
if (id === 'index.md')
return ''
return `
# {{ $frontmatter.title }}
<PageInfo />
`
}

View File

@ -5,48 +5,25 @@ import { h } from 'vue'
import './custom-font.css'
import {
NolebaseEnhancedReadabilitiesMenu,
NolebaseEnhancedReadabilitiesPlugin,
NolebaseEnhancedReadabilitiesScreenMenu,
} from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
import {
NolebaseHighlightTargetedHeading,
} from '@nolebase/vitepress-plugin-highlight-targeted-heading/client'
import {
NolebaseGitChangelogPlugin,
} from '@nolebase/vitepress-plugin-git-changelog/client'
import type Options from 'vitepress-sidebar'
import AppearanceToggle from './components/AppearanceToggle.vue'
import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
import '@nolebase/vitepress-plugin-git-changelog/client/style.css'
import '@nolebase/vitepress-plugin-highlight-targeted-heading/client/style.css'
import AppFooter from './components/AppFooter.vue'
import Layout from './Layout.vue'
export type SidebarOptions = Options
export default {
extends: DefaultTheme,
Layout: () => {
return h(AppearanceToggle, null, {
default: () => h(DefaultTheme.Layout, null, {
// https://vitepress.dev/guide/extending-default-theme#layout-slots
'doc-top': () => [
h(NolebaseHighlightTargetedHeading),
],
'doc-after': () => [h(AppFooter)],
'nav-bar-content-after': () => [
h(NolebaseEnhancedReadabilitiesMenu),
],
'nav-screen-content-after': () => [
h(NolebaseEnhancedReadabilitiesScreenMenu),
],
}),
})
},
Layout,
enhanceApp({ app }) {
app.use(NolebaseEnhancedReadabilitiesPlugin, {
spotlight: {