69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import type { Markdown } from 'vuepress/markdown'
|
|
import { resolveAttrs } from '.././utils/resolveAttrs.js'
|
|
import { createContainerPlugin } from './createContainer.js'
|
|
|
|
interface CardAttrs {
|
|
title?: string
|
|
icon?: string
|
|
}
|
|
|
|
interface CardMasonryAttrs {
|
|
cols?: number
|
|
gap?: number
|
|
}
|
|
|
|
export function cardPlugin(md: Markdown) {
|
|
/**
|
|
* ::: card title="xxx" icon="xxx"
|
|
* xxx
|
|
* :::
|
|
*/
|
|
createContainerPlugin(md, 'card', {
|
|
before(info) {
|
|
const { attrs } = resolveAttrs<CardAttrs>(info)
|
|
const { title, icon } = attrs
|
|
return `<VPCard${title ? ` title="${title}"` : ''}${icon ? ` icon="${icon}"` : ''}>`
|
|
},
|
|
after: () => '</VPCard>',
|
|
})
|
|
|
|
/**
|
|
* :::: card-grid
|
|
* ::: card
|
|
* xxx
|
|
* :::
|
|
* ::: card
|
|
* xxx
|
|
* :::
|
|
* ::::
|
|
*/
|
|
createContainerPlugin(md, 'card-grid', {
|
|
before: () => '<VPCardGrid>',
|
|
after: () => '</VPCardGrid>',
|
|
})
|
|
|
|
/**
|
|
* ::: card-masonry cols="2" gap="10"
|
|
* ::: card
|
|
* xxx
|
|
* :::
|
|
* ::: card
|
|
* xxx
|
|
* :::
|
|
* ::::
|
|
*/
|
|
createContainerPlugin(md, 'card-masonry', {
|
|
before: (info) => {
|
|
const { attrs } = resolveAttrs<CardMasonryAttrs>(info)
|
|
let cols!: string | number
|
|
if (attrs.cols) {
|
|
cols = attrs.cols[0] === '{' ? attrs.cols : Number.parseInt(`${attrs.cols}`)
|
|
}
|
|
const gap = Number.parseInt(`${attrs.gap}`)
|
|
|
|
return `<VPCardMasonry${cols ? ` :cols="${cols}"` : ''}${gap >= 0 ? ` :gap="${gap}"` : ''}>`
|
|
},
|
|
after: () => '</VPCardMasonry>',
|
|
})
|
|
}
|