docs: update theme

Author: mrholek

packages/docs/.vuepress/config.ts

@@ -4,7 +4,11 @@ import include_plugin from 'markdown-it-include'
 import { defaultTheme } from './theme-coreui'
 
 import { containerPlugin } from '@vuepress/plugin-container'
+import { registerComponentsPlugin } from '@vuepress/plugin-register-components'
 import { tocPlugin } from '@vuepress/plugin-toc'
+import { getDirname, path } from '@vuepress/utils'
+
+const __dirname = getDirname(import.meta.url)
 
 export default defineUserConfig({
   base: `/vue/docs/`,
@@ -63,6 +67,11 @@ export default defineUserConfig({
       },
     }),
     tocPlugin({}),
+    registerComponentsPlugin({
+      components: {
+        ScssDocs: path.resolve(__dirname, './theme-coreui/src/client/components/ScssDocs.vue'),
+      },
+    }),
   ],
   theme: defaultTheme({
     sidebar: [

packages/docs/.vuepress/theme-coreui/src/client/components/ScssDocs.vue

@@ -0,0 +1,51 @@
+<template>
+  <div className="highlight">
+    <pre class="prism-code language-scss" v-html="code" :style="{ 'max-height': '100%' }" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import Prism from 'prismjs'
+import 'prismjs/components/prism-jsx'
+import 'prismjs/components/prism-scss'
+export default defineComponent({
+  name: 'ScssDocs',
+  props: {
+    capture: String,
+    file: String,
+  },
+  setup(props) {
+
+    if (typeof window !== 'undefined') {
+      window.Prism = window.Prism || {};
+      window.Prism.manual = true;
+    }
+
+    const files = import.meta.glob(`../../../../../../../node_modules/@coreui/coreui/scss/**/*.scss`, {
+      as: 'raw',
+      eager: true,
+    })
+    const file = files[`../../../../../../../node_modules/@coreui/coreui/scss/${props.file}`]
+
+    const captureStart = `// scss-docs-start ${props.capture}`
+    const captureEnd = `// scss-docs-end ${props.capture}`
+    const re = new RegExp(`${captureStart}((?:.|\n)*)${captureEnd}`)
+    const captured = re.exec(file)
+    const section = captured && captured[1].trim()
+    const code = section
+      ? Prism.highlight(
+          section
+            .replaceAll('--#{$prefix}', '--cui-')
+            .replaceAll('\n  -', '\n-')
+            .replaceAll('\n  @', '\n@'),
+          Prism.languages.scss,
+          'scss',
+      )
+      : null
+    return {
+      code,
+    }
+  },
+})
+</script>

packages/docs/package.json

@@ -15,6 +15,7 @@
     "@coreui/vue-chartjs": "^2.0.1",
     "@docsearch/css": "^3.4.0",
     "@docsearch/js": "^3.4.0",
+    "@vuepress/plugin-register-components": "2.0.0-beta.62",
     "@vuepress/plugin-toc": "2.0.0-beta.62",
     "markdown-it-include": "^2.0.0",
     "vue-docgen-cli": "^4.67.0",