bootstrap-vue-next · VividLemon · Aug 26, 2024 · Aug 19, 2024 · Aug 20, 2024 · Aug 21, 2024
diff --git a/apps/docs/.vitepress/config.mts b/apps/docs/.vitepress/config.mts
@@ -1,6 +1,9 @@
 import {defineConfig} from 'vitepress'
 import Icons from 'unplugin-icons/vite'
-import markdonnwItClass from '@toycode/markdown-it-class'
+import markdownItClass from '@toycode/markdown-it-class'
+import {demoContainer} from './plugins/demo-container'
+import Components from 'unplugin-vue-components/vite'
+import {BootstrapVueNextResolver} from 'bootstrap-vue-next'
 
 const title = 'BootstrapVueNext'
 const description = 'Quickly and Easily Integrate Bootstrap V5 Components With Vue 3'
@@ -23,7 +26,16 @@ export default defineConfig({
     ['meta', {property: 'twitter:description', name: 'twitter:description', content: description}],
   ],
   vite: {
-    plugins: [Icons()],
+    plugins: [
+      Icons(),
+      Components({
+        dirs: ['components', 'docs/components/demo'],
+        extensions: ['vue'],
+        dts: true,
+        include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
+        resolvers: [BootstrapVueNextResolver()],
+      }),
+    ],
   },
   locales: {
     root: {
@@ -42,7 +54,8 @@ export default defineConfig({
   },
   markdown: {
     config: (md) => {
-      md.use(markdonnwItClass, {table: ['table', 'table-striped']})
+      md.use(markdownItClass, {table: ['table', 'table-striped']})
+      md.use(demoContainer, 'src')
     },
   },
 })
diff --git a/apps/docs/.vitepress/markdown-it-class.d.ts b/apps/docs/.vitepress/markdown-it-class.d.ts
@@ -0,0 +1,5 @@
+declare module '@toycode/markdown-it-class' {
+  import {PluginSimple} from 'markdown-it'
+  const markdownItClass: PluginSimple
+  export default markdownItClass
+}
diff --git a/apps/docs/.vitepress/plugins/demo-container.ts b/apps/docs/.vitepress/plugins/demo-container.ts
@@ -0,0 +1,83 @@
+import type {MarkdownEnv, MarkdownRenderer} from 'vitepress'
+import type {RuleBlock} from 'markdown-it/lib/parser_block.mjs'
+import path from 'path'
+
+// This plugin is inspired by vitepress' snippet plugin and must run before it to work
+//  It accepts all of the same syntax as the snippet plugin, but will render the demo
+//  _and_ display the example code inside of a HighlightCard component
+
+export const demoContainer = (md: MarkdownRenderer, srcDir: string) => {
+  const blockParser: RuleBlock = (state, startLine, endLine, silent) => {
+    const sentinal = '<<< DEMO '
+    const pos = state.bMarks[startLine] + state.tShift[startLine]
+    const max = state.eMarks[startLine]
+
+    // if it's indented more than 3 spaces, it should be a code block
+    if (state.sCount[startLine] - state.blkIndent >= 4) {
+      return false
+    }
+
+    if (state.src.slice(pos, pos + sentinal.length) !== sentinal) {
+      return false
+    }
+
+    if (silent) {
+      return true
+    }
+
+    const start = pos + sentinal.length
+    const end = state.skipSpacesBack(max, pos)
+
+    const rawPath = state.src.slice(start, end).trim().replace(/^@/, srcDir).trim()
+
+    const {filepath, extension, region, lines, lang, title} = rawPathToToken(rawPath)
+    const component = title.substring(0, title.indexOf('.'))
+
+    state.line += 1
+
+    const prefixToken = state.push('html_block', '', 0)
+    prefixToken.content = `<HighlightCard><${component}/><template #html>`
+
+    const codeToken = state.push('fence', 'code', 0)
+    codeToken.info = `${lang || extension}${lines ? `{${lines}}` : ''}${title ? `[${title}]` : ''}`
+
+    const {realPath, path: _path} = state.env as MarkdownEnv
+    const resolvedPath = path.resolve(path.dirname(realPath ?? _path), filepath)
+
+    // @ts-ignore
+    codeToken.src = [resolvedPath, region.slice(1)]
+    codeToken.markup = '```'
+    codeToken.map = [startLine, startLine + 1]
+
+    const postfixToken = state.push('html_block', '', 0)
+    postfixToken.content = `</template></HighlightCard>`
+
+    return true
+  }
+
+  md.block.ruler.before('snippet', 'demo', blockParser)
+}
+
+/**
+ * raw path format: "/path/to/file.extension#region {meta} [title]"
+ *    where #region, {meta} and [title] are optional
+ *    meta can be like '1,2,4-6 lang', 'lang' or '1,2,4-6'
+ *    lang can contain special characters like C++, C#, F#, etc.
+ *    path can be relative to the current file or absolute
+ *    file extension is optional
+ *    path can contain spaces and dots
+ *
+ * captures: ['/path/to/file.extension', 'extension', '#region', '{meta}', '[title]']
+ */
+const rawPathRegexp =
+  /^(.+?(?:(?:\.([a-z0-9]+))?))(?:(#[\w-]+))?(?: ?(?:{(\d+(?:[,-]\d+)*)? ?(\S+)?}))? ?(?:\[(.+)\])?$/
+
+function rawPathToToken(rawPath: string) {
+  const [filepath = '', extension = '', region = '', lines = '', lang = '', rawTitle = ''] = (
+    rawPathRegexp.exec(rawPath) || []
+  ).slice(1)
+
+  const title = rawTitle || filepath.split('/').pop() || ''
+
+  return {filepath, extension, region, lines, lang, title}
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -31,6 +31,7 @@
     "prettier": "^3.2.5",
     "typescript": "^5.4.5",
     "unplugin-icons": "^0.19.0",
+    "unplugin-vue-components": "^0.27.0",
     "vitepress": "1.1.4",
     "vue": "^3.4.27"
   },

diff --git a/apps/docs/src/docs/components/breadcrumb.md b/apps/docs/src/docs/components/breadcrumb.md
@@ -14,26 +14,7 @@ Indicate the current page’s location within a navigational hierarchy that auto
 
 ## Overview
 
-<HighlightCard>
-  <BBreadcrumb :items="breadcrumbItems" />
-  <template #html>
-
-```vue
-<BBreadcrumb :items="breadcrumbItems" />
-
-<script setup lang="ts">
-import type {BreadcrumbItem} from 'bootstrap-vue-next'
-
-const breadcrumbItems = ref<BreadcrumbItem[]>([
-  {text: 'Admin', href: 'https://getbootstrap.com/'},
-  {text: 'Manage', href: '#'},
-  {text: 'Library'},
-])
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbOverview.vue
 
 ## Breadcrumb items
 
@@ -43,55 +24,15 @@ The active state of last element is automatically set if it is `undefined`.
 
 ### Breadcrumb items as array of strings
 
-<HighlightCard>
-  <BBreadcrumb :items="breadcrumbStringArray" />
-  <template #html>
-
-```vue
-<BBreadcrumb :items="breadcrumbStringArray" />
-
-<script setup lang="ts">
-const breadcrumbStringArray = ['Admin', 'Manage', 'Library']
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbAsArray.vue
 
 ## Manually placed items
 
 You may also manually place individual `BBreadcrumbItem` child components in the default slot of
 the `BBreadcrumb` component, as an alternative to using the `items` prop, for greater control
 over the content of each item:
 
-<HighlightCard>
-  <BBreadcrumb>
-    <BBreadcrumbItem href="#home">
-      Home
-    </BBreadcrumbItem>
-    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-    <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
-    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-  </BBreadcrumb>
-  <template #html>
-
-```vue
-<BBreadcrumb>
-  <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
-  <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-  <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
-  <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-</BBreadcrumb>
-
-<script setup lang="ts">
-const alertEvent = (event: PointerEvent) => {
-  alert(`Event ${event.target}`)
-}
-</script>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbManual.vue
 
 Remember to set the `active` prop on the last item.
 
@@ -103,52 +44,10 @@ Remember to set the `active` prop on the last item.
 Two slots are provided to put additional content before and after the breadcrumb.
 Use slot `prepend` to put content before the breadcrumb. Use slot `append` to put content after the breadcrumb.
 
-<HighlightCard>
-  <BBreadcrumb>
-    <BBreadcrumbItem href="#home">
-      Home
-    </BBreadcrumbItem>
-    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-    <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
-    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-    <template v-slot:prepend><span class="mx-2">prepend text</span></template>
-    <template v-slot:append><span class="mx-2">append text</span></template>
-  </BBreadcrumb>
-  <template #html>
-
-```vue-html
-<BBreadcrumb>
-  <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
-  <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
-  <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
-  <BBreadcrumbItem active>Baz</BBreadcrumbItem>
-  <template v-slot:prepend><span class="mx-2">prepend text</span></template>
-  <template v-slot:append><span class="mx-2">append text</span></template>
-</BBreadcrumb>
-```
-
-  </template>
-</HighlightCard>
+<<< DEMO ./demo/BreadcrumbSlots.vue#template{vue-html}
 
 <ComponentReference :data="data" />
 
 <script setup lang="ts">
 import {data} from '../../data/components/breadcrumb.data'
-import {ref} from 'vue';
-import {BBreadcrumbItem, BBreadcrumb} from 'bootstrap-vue-next'
-import ComponentReference from '../../components/ComponentReference.vue'
-import ComponentSidebar from '../../components/ComponentSidebar.vue'
-import HighlightCard from '../../components/HighlightCard.vue'
-
-const breadcrumbItems = ref<BreadcrumbItem[]>([
-  { text: 'Admin', href:'https://getbootstrap.com/'},
-  { text: 'Manage', href:'#'},
-  { text: 'Library'},
-]);
-
-const breadcrumbStringArray = ['Admin', 'Manage', 'Library'];
-
-const alertEvent = (event: PointerEvent) => {
-  alert(`Event ${event.target}`);
-}
 </script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbAsArray.vue b/apps/docs/src/docs/components/demo/BreadcrumbAsArray.vue
@@ -0,0 +1,7 @@
+<template>
+  <BBreadcrumb :items="breadcrumbStringArray" />
+</template>
+
+<script setup lang="ts">
+const breadcrumbStringArray = ['Admin', 'Manage', 'Library']
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbManual.vue b/apps/docs/src/docs/components/demo/BreadcrumbManual.vue
@@ -0,0 +1,15 @@
+<template>
+  <BBreadcrumb>
+    <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
+    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
+    <BBreadcrumbItem href="#bar" @click="alertEvent">Bar</BBreadcrumbItem>
+    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
+  </BBreadcrumb>
+</template>
+
+<script setup lang="ts">
+const alertEvent = (event: PointerEvent) => {
+  // eslint-disable-next-line no-alert
+  alert(`Event ${event.target}`)
+}
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbOverview.vue b/apps/docs/src/docs/components/demo/BreadcrumbOverview.vue
@@ -0,0 +1,14 @@
+<template>
+  <BBreadcrumb :items="breadcrumbItems" />
+</template>
+
+<script setup lang="ts">
+import {type BreadcrumbItem} from 'bootstrap-vue-next'
+import {ref} from 'vue'
+
+const breadcrumbItems = ref<BreadcrumbItem[]>([
+  {text: 'Admin', href: 'https://getbootstrap.com/'},
+  {text: 'Manage', href: '#'},
+  {text: 'Library'},
+])
+</script>
diff --git a/apps/docs/src/docs/components/demo/BreadcrumbSlots.vue b/apps/docs/src/docs/components/demo/BreadcrumbSlots.vue
@@ -0,0 +1,12 @@
+<template>
+  <!-- #region template -->
+  <BBreadcrumb>
+    <BBreadcrumbItem href="#home"> Home </BBreadcrumbItem>
+    <BBreadcrumbItem href="#foo">Foo</BBreadcrumbItem>
+    <BBreadcrumbItem href="#bar">Bar</BBreadcrumbItem>
+    <BBreadcrumbItem active>Baz</BBreadcrumbItem>
+    <template #prepend><span class="mx-2">prepend text</span></template>
+    <template #append><span class="mx-2">append text</span></template>
+  </BBreadcrumb>
+  <!-- #endregion template -->
+</template>