feat(docs): add template source to examples

Author: MichaelGitArt

docs/package.json

@@ -15,7 +15,9 @@
     "vitepress": "^0.16.1"
   },
   "dependencies": {
+    "@vueuse/core": "^6.0.0",
     "gitart-vue-dialog": "^0.2.0-alpha.3",
+    "prismjs": "^1.24.1",
     "sass": "^1.38.0"
   }
 }

docs/src/.vitepress/components/Components/Example.vue

@@ -3,9 +3,9 @@ import { GDialog } from 'gitart-vue-dialog/dist/server'
 import 'gitart-vue-dialog/dist/style.css'
 import './custom.css'
 
-import BaseBtn from '@/.vitepress/components/Components/BaseBtn.vue'
-import BtnWrapper from '@/.vitepress/components/Components/BtnWrapper.vue'
-import Example from '@/.vitepress/components/Components/Example.vue'
+import BaseBtn from '@/components/Components/BaseBtn.vue'
+import BtnWrapper from '@/components/Components/BtnWrapper.vue'
+import Example from '@/components/Components/Example.vue'
 
 export default {
   ...DefaultTheme,

docs/src/.vitepress/theme/index.js

@@ -0,0 +1,57 @@
+<template>
+  <div class="code-example">
+    <div v-if="pen && pen.template">
+      <Markup
+        :code="pen.template"
+        language="html"
+      />
+    </div>
+
+    <div class="code-example__component">
+      <VueFile :file="file" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { usePen } from '../../composable/pen'
+import VueFile from './VueFile.vue'
+import Markup from './Markup.vue'
+
+export default defineComponent({
+  name: 'Example',
+  components: {
+    VueFile,
+    Markup,
+  },
+
+  props: {
+    file: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const pen = usePen(props.file)
+
+    return {
+      pen,
+    }
+  },
+})
+</script>
+
+<style lang="scss">
+.code-example {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  border-radius: 6px;
+  overflow: hidden;
+
+  &__component {
+    padding: 20px;
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+  }
+}
+</style>

…epress/components/Components/BaseBtn.vue …cs/src/components/Components/BaseBtn.vuedocs/src/.vitepress/components/Components/BaseBtn.vue renamed to docs/src/components/Components/BaseBtn.vue docs/src/.vitepress/components/Components/BaseBtn.vue renamed to docs/src/components/Components/BaseBtn.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="app-code">
+    <Prism
+      ref="code"
+      :code="code"
+      :language="language"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import Prism from './Prism.vue'
+
+export default {
+  name: 'Markup',
+
+  components: {
+    Prism,
+  },
+
+  props: {
+    code: {
+      type: String,
+      default: '',
+    },
+    language: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style lang="scss">
+.app-code {
+  background-color: var(--code-bg-color);
+  padding: 12px 50px 12px 16px;
+}
+</style>

…ess/components/Components/BtnWrapper.vue …src/components/Components/BtnWrapper.vuedocs/src/.vitepress/components/Components/BtnWrapper.vue renamed to docs/src/components/Components/BtnWrapper.vue docs/src/.vitepress/components/Components/BtnWrapper.vue renamed to docs/src/components/Components/BtnWrapper.vue

@@ -0,0 +1,42 @@
+<script lang="ts">
+import { h, defineComponent, toRefs } from 'vue'
+import Prism from 'prismjs'
+
+export default defineComponent({
+  props: {
+    code: {
+      type: String,
+      required: true,
+    },
+
+    language: {
+      type: String,
+      default: 'markup',
+    },
+  },
+  setup(props, { attrs }) {
+    const { language, code } = toRefs(props)
+
+    const prismLanguage = Prism.languages[language.value]
+    const className = `language-${language.value}`
+
+    if (!prismLanguage) {
+      console.warn(`Prism component for language "${language.value}" was not found, did you forget to register it?`)
+    }
+    return () => h(
+      'pre',
+      {
+        ...attrs,
+        class: [attrs.class, className],
+      },
+      [
+        h('code', {
+          ...attrs,
+          class: [attrs.class, className],
+          innerHTML: Prism.highlight(code.value, prismLanguage),
+        }),
+      ],
+    )
+  },
+})
+</script>

docs/src/components/Components/Example.vue

@@ -0,0 +1,33 @@
+<template>
+  <Component
+    :is="component"
+    v-if="component"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, Component } from 'vue'
+import { useAsyncState } from '@vueuse/core'
+
+export default defineComponent({
+  name: 'VueFile',
+
+  props: {
+    file: {
+      type: String,
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const { state: component } = useAsyncState(async () => {
+      const res = await import(`../Examples/${props.file}.vue`)
+      return res.default as Component
+    }, null)
+
+    return {
+      component,
+    }
+  },
+})
+</script>