fix(cz-git): without scope calc maxSubjectLength error (#230)

Author: Zhengqbbb

docs/.vitepress/components.d.ts

@@ -10,6 +10,9 @@ declare module 'vue' {
     AdsASide: typeof import('./theme/components/AdsASide.vue')['default']
     Badge: typeof import('./theme/components/Badge.vue')['default']
     CodeGroupItem: typeof import('./theme/components/CodeGroupItem.vue')['default']
+    copy: typeof import('./theme/components/StepFlow copy.vue')['default']
     HomePage: typeof import('./theme/components/HomePage.vue')['default']
+    StepFlow: typeof import('./theme/components/StepFlow.vue')['default']
+    StepFlowItem: typeof import('./theme/components/StepFlowItem.vue')['default']
   }
 }

docs/.vitepress/config/markdown/container.ts

@@ -0,0 +1,75 @@
+import type MarkdownIt from 'markdown-it'
+import type { RenderRule } from 'markdown-it/lib/renderer'
+import container from 'markdown-it-container'
+
+export async function containerPlugin(md: MarkdownIt) {
+    md
+        .use(...createComptContainer(
+            'code-group',
+            () => '<CodeGroup>\n',
+            () => '</CodeGroup>\n',
+        ),
+        )
+        .use(...createComptContainer(
+            'code-group-item',
+            (info: string) => `<CodeGroupItem title="${info}">\n`,
+            () => '</CodeGroupItem>\n',
+        ),
+        )
+        .use(...createComptContainer(
+            'ul',
+            () => '<StepFlow type="ul">\n',
+            () => '</StepFlow>\n',
+        ),
+        )
+        .use(...createComptContainer(
+            'ol',
+            () => '<StepFlow type="ol">\n',
+            () => '</StepFlow>\n',
+        ),
+        )
+        .use(...createComptContainer(
+            'li',
+            (info: string) => {
+                return `
+<StepFlowItem>
+<template #title>
+${md.renderInline(info)}
+</template>
+`
+            },
+            () => '</StepFlowItem>\n',
+        ),
+        )
+}
+
+type ContainerArgs = [typeof container, string, { render: RenderRule }]
+type RenderPlaceFunction = (info: string) => string
+
+function createComptContainer(
+    name: string,
+    before: RenderPlaceFunction,
+    after: RenderPlaceFunction,
+): ContainerArgs {
+    return [
+        container,
+        name,
+        {
+            render(tokens, idx) {
+                const infoStack: string[] = []
+                const token = tokens[idx]
+                if (token.nesting === 1) {
+                    const info = token.info.trim().slice(name.length).trim()
+                    infoStack.push(info)
+                    return before(info)
+                }
+                else {
+                    const info = infoStack.pop() || ''
+                    return after(info)
+                }
+            },
+        },
+    ]
+}
+
+export default containerPlugin

docs/.vitepress/theme/components/markdown/plugins/image.ts renamed to docs/.vitepress/config/markdown/image.ts

@@ -0,0 +1,2 @@
+export * from './container'
+export * from './image'

docs/.vitepress/config/markdown/index.ts

@@ -2,7 +2,7 @@ import process from 'node:process'
 import { defineConfig } from 'vitepress'
 import { generateSitemap } from '../build'
 import { github, keywords, name, ogTitle } from '../meta'
-import { ImagePlugin, useCodeGroup, useCodeGroupItem } from '../theme/components/markdown'
+import { ImagePlugin, containerPlugin } from './markdown'
 
 export const shareConfig = defineConfig({
     title: name,
@@ -35,10 +35,7 @@ export const shareConfig = defineConfig({
         config: (md) => {
             // eslint-disable-next-line ts/no-require-imports
             md.use(require('markdown-it-mark'))
-            md.use(useCodeGroup.container, useCodeGroup.type, { render: useCodeGroup.render })
-            md.use(useCodeGroupItem.container, useCodeGroupItem.type, {
-                render: useCodeGroupItem.render,
-            })
+            md.use(containerPlugin)
             md.use(ImagePlugin)
         },
     },

docs/.vitepress/theme/components/markdown/plugins/markdown-it-container.d.ts renamed to docs/.vitepress/config/markdown/markdown-it-container.d.ts

@@ -1,7 +1,7 @@
 import { defineComponent, h, ref } from 'vue'
-import type { Component, ComponentOptions, VNode } from 'vue'
+import type { Component, VNode } from 'vue'
 
-export const CodeGroup: ComponentOptions = defineComponent({
+export default defineComponent({
     name: 'CodeGroup',
 
     setup(_, { slots }) {

docs/.vitepress/config/share.ts

@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useData } from 'vitepress'
 import { VPTeamMembers } from 'vitepress/theme'
-import { useEmojiItem, useMediumZoom } from './composables'
+import { useEmojiItem, useMediumZoom } from '../composables'
 
 const emoji = useEmojiItem()
 const { frontmatter } = useData()

docs/.vitepress/theme/components/CodeGroup.ts

@@ -0,0 +1,29 @@
+import { defineComponent, h } from 'vue'
+import type { Component, PropType } from 'vue'
+
+export default defineComponent({
+    name: 'StepFlow',
+    props: {
+        type: String as PropType<'ul' | 'ol'>,
+    },
+
+    setup(props, { slots }) {
+        return () => {
+            const items = (slots.default?.() ?? [])
+                .filter(vnode => (vnode.type as Component).name === 'StepFlowItem')
+                .map((vnode) => {
+                    vnode.props = vnode.props ?? {}
+                    return vnode
+                })
+            const Tag = props.type === 'ol' ? 'ol' : 'ul'
+
+            return h(Tag, { class: 'step-flow' }, items.map((item, index) => {
+                return h(
+                    'li',
+                    { 'class': 'step-flow-item', 'data-step': index + 1 },
+                    item,
+                )
+            }))
+        }
+    },
+})

docs/.vitepress/theme/components/HomePage.vue

@@ -0,0 +1,22 @@
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+    name: 'StepFlowItem',
+})
+</script>
+
+<script setup lang="ts">
+defineProps<{ title: string }>()
+</script>
+
+<template>
+    <div class="w-full">
+        <div class="step-flow-title">
+            <slot name="title" />
+        </div>
+        <div class="step-flow-content">
+            <slot />
+        </div>
+    </div>
+</template>