improve demo component

content/posts/test.md

@@ -3,9 +3,4 @@ title: Test
 slug: test
 ---
 
-test
-
-import Preview from '../../src/components/Preview.vue'
-<!-- import CurrentTime from '../../src/components/CurrentTime.vue' -->
-
-<preview path="Time" />
+<demo name="Time" />

src/components/Ad.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    This is an ad ☠️
-  </div>
-</template>
-
-<style scoped>
-  div {
-    background-color: tomato;
-    border-radius: 5px;
-    color: white;
-    padding: 20px;
-  }
-</style>

src/components/CurrentTime.vue

@@ -1,14 +0,0 @@
-<template>
-  <div>
-    Time: {{ new Date() }}
-  </div>  
-</template>
-
-<style scoped>
-  div {
-    background-color: black;
-    border-radius: 5px;
-    color: white;
-    padding: 20px;
-  }
-</style>

src/components/Demo.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <component :is="mainFile" v-if="mainFile" />
+    <div v-for="(file, index) in files" :key="index">
+      <p>
+        {{ file.name }}
+      </p>
+      <pre :class="`language-${file.highlight}`"><code :class="`language-${file.highlight}`" v-html="$options.filters.highlight(file.content, file.highlight)"></code></pre>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+
+  data() {
+    return {
+      content: null,
+      files: [],
+      syntax: {
+        js: 'javascript',
+        vue: 'markup',
+        css: 'css',
+      },
+    }
+  },
+
+  computed: {
+    mainFile() {
+      const file = this.files.find(item => item.path.endsWith('.vue'))
+
+      if (!file) {
+        return
+      }
+
+      return require(`~/demos/${file.path}`).default
+    },
+  },
+
+  mounted() {
+    this.files = require.context(`~/demos/`, true)
+      .keys()
+      .filter(path => path.startsWith(`./${this.name}`))
+      .filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css'))
+      .map(path => path.replace('./', ''))
+      .map(path => ({
+        path,
+        name: path.replace(`${this.name}/`, ''),
+        content: require(`!!raw-loader!~/demos/${path}`).default,
+        extension: path.split('.').pop(),
+        highlight: this.syntax[path.split('.').pop()] || 'markup',
+      }))
+  }
+}
+</script>

src/components/Preview.vue

@@ -1,47 +0,0 @@
-<template>
-  <div>
-    <p>
-      Rendered Preview:
-    </p>
-    <component :is="component" v-if="component" />
-    <p>
-      Code:
-    </p>
-    <pre v-if="content" class="language-markup"><code class="language-markup" v-html="$options.filters.highlight(content, 'markup')"></code></pre>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    path: {
-      type: String,
-      required: true,
-    },
-  },
-
-  data() {
-    return {
-      component: null,
-      content: null,
-    }
-  },
-
-  mounted() {
-    const files = require.context(`~/demos/`, true)
-      .keys()
-      .filter(path => path.startsWith(`./${this.path}`))
-      .filter(path => path.endsWith('.vue') || path.endsWith('.js') || path.endsWith('.css'))
-      .map(path => path.replace('./', ''))
-      .map(path => ({
-        path: path.replace(`${this.path}/`, ''),
-        content: require(`!!raw-loader!~/demos/${path}`).default
-      }))
-
-    console.log(files)
-
-    // this.content = require(`!!raw-loader!~/components/${this.path}`).default
-    // this.component = require(`~/components/${this.path}`).default
-  }
-}
-</script>

src/demos/Time/index.vue

@@ -1,14 +1,17 @@
 <template>
   <div>
-    Time: {{ new Date() }}
+    Time: {{ time }}
   </div>  
 </template>
 
-<style scoped>
-  div {
-    background-color: black;
-    border-radius: 5px;
-    color: white;
-    padding: 20px;
-  }
-</style>s
+<script>
+export default {
+  data() {
+    return {
+      time: new Date()
+    }
+  },
+}
+</script>
+
+<style src="./style.css" scoped />

src/demos/Time/style.css

@@ -0,0 +1,6 @@
+div {
+  background-color: black;
+  border-radius: 5px;
+  color: white;
+  padding: 20px;
+}

src/main.js

@@ -1,18 +1,16 @@
 // This is the main.js file. Import global CSS and scripts here.
 // The Client API can be used here. Learn more: gridsome.org/docs/client-api
 
+import Prism from 'prismjs'
 import 'prismjs/themes/prism-okaidia.css'
 
 import DefaultLayout from '~/layouts/Default.vue'
-
-import Prism from 'prismjs'
-
+import Demo from '~/components/Demo.vue'
 
 export default function (Vue, { router, head, isClient }) {
-
+  Vue.component('Layout', DefaultLayout)
+  Vue.component('Demo', Demo)
   Vue.filter('highlight', (code, lang = 'javascript') => {
     return Prism.highlight(code, Prism.languages[lang], lang)
   })
-
-  Vue.component('Layout', DefaultLayout)
 }