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

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/config/markdown/index.ts

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

docs/.vitepress/config/share.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/CodeGroup.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/theme/components/HomePage.vue

@@ -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/StepFlow.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/StepFlowItem.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>

docs/.vitepress/theme/index.ts

@@ -2,14 +2,17 @@ import { h, watchEffect } from 'vue'
 import Theme from 'vitepress/theme'
 import { inBrowser, useData } from 'vitepress'
 import type { EnhanceAppContext } from 'vitepress'
-import './style/main.css'
-import './style/vars.css'
-import 'uno.css'
-import { createMediumZoomProvider } from './components/composables'
+import { createMediumZoomProvider } from './composables'
 import Badge from './components/Badge.vue'
 import HomePage from './components/HomePage.vue'
+import CodeGroup from './components/CodeGroup'
 import CodeGroupItem from './components/CodeGroupItem.vue'
-import { CodeGroup } from './components/CodeGroup'
+import StepFlow from './components/StepFlow'
+import StepFlowItem from './components/StepFlowItem.vue'
+
+import './style/main.css'
+import './style/vars.css'
+import 'uno.css'
 
 if (inBrowser)
     import('./pwa')
@@ -25,6 +28,8 @@ export default {
         app.component('Badge', Badge)
         app.component('CodeGroup', CodeGroup)
         app.component('CodeGroupItem', CodeGroupItem)
+        app.component('StepFlow', StepFlow)
+        app.component('StepFlowItem', StepFlowItem)
         createMediumZoomProvider(app, router)
     },
     setup() {

docs/.vitepress/theme/style/main.css

@@ -20,6 +20,10 @@ kbd {
   box-shadow: var(--vp-c-kbd-box-outside-shadow);
 }
 
+u {
+    text-underline-offset: 6px;
+}
+
 .VPNavBar .VPNavBarTitle .title:hover {
   opacity: .6;
 }
@@ -397,3 +401,78 @@ img.error::after {
 .VPDoc .aside {
   max-width: var(--vp-sidebar-width);
 }
+
+/**
+ * Step Flow
+ * -------------------------------------------------------------------------- */
+.vp-doc ul.step-flow,
+.vp-doc ol.step-flow {
+    list-style: none;
+    padding-left: 0;
+}
+
+.vp-doc .step-flow .step-flow-title {
+    font-size: 1.1rem;
+    font-weight: 500;
+    line-height: 1.6em;
+    color: var(--vp-c-text-1);
+}
+
+.vp-doc .step-flow .step-flow-item {
+    position: relative;
+    padding-left: 40px;
+}
+
+.vp-doc ul.step-flow .step-flow-item::before {
+  content: "";
+  display: flex;
+  position: absolute;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  border: 1px solid var(--vp-c-border);
+  width: 0.75rem;
+  height: 1.5rem;
+  margin-left: 0.125rem;
+  --at-apply: i-carbon:circle-solid;
+}
+
+.vp-doc ul.step-flow .step-flow-item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 1.5rem;
+  bottom: -0.5rem;
+  z-index: 1;
+  width: 2px;
+  background-color: var(--vp-c-border);
+  transform: translateX(0.42rem);
+}
+
+.vp-doc ol.step-flow .step-flow-item::before {
+  content: attr(data-step);
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-border);
+  border-radius: 9999px;
+  width: clamp(1.8rem, 5vw, 1.8rem);
+  height: clamp(1.8rem, 5vw, 1.8rem);
+}
+
+.vp-doc ol.step-flow .step-flow-item::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 2.25rem;
+  bottom: 0.25rem;
+  z-index: 1;
+  width: 2px;
+  background-color: var(--vp-c-border);
+  transform: translateX(0.86rem);
+}

docs/.vitepress/theme/style/vars.css

@@ -85,7 +85,7 @@
   --vp-term-block-bg: hsl(0, 1%, 5%);
   --vp-c-gutter: rgba(84, 84, 84, .48);
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
-  --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);
+  --vp-code-copy-code-hover-bg: rgba(0, 0, 0);
   --vp-code-copy-code-active-text: var(--vp-c-text-dark-2);
   --vp-c-bg-mute: #2d2d2d;
   --vp-c-kbd-box-outside-shadow: -1px -1px 1px #505050, 1px 1px 6px #000;