diff --git a/content/posts/test.md b/content/posts/test.md
index ae16219e..addd4477 100644
--- a/content/posts/test.md
+++ b/content/posts/test.md
@@ -5,3 +5,7 @@ slug: test
 
 test
 
+import Preview from '../../src/components/Preview.vue'
+<!-- import CurrentTime from '../../src/components/CurrentTime.vue' -->
+
+<preview path="Time" />
\ No newline at end of file
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index f20a1ff4..4541cfb0 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -28,8 +28,20 @@ export default {
   },
 
   mounted() {
-    this.content = require(`!!raw-loader!~/components/${this.path}`).default
-    this.component = require(`~/components/${this.path}`).default
+    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>
diff --git a/src/demos/Time/index.vue b/src/demos/Time/index.vue
new file mode 100644
index 00000000..191b3898
--- /dev/null
+++ b/src/demos/Time/index.vue
@@ -0,0 +1,14 @@
+<template>
+  <div>
+    Time: {{ new Date() }}
+  </div>  
+</template>
+
+<style scoped>
+  div {
+    background-color: black;
+    border-radius: 5px;
+    color: white;
+    padding: 20px;
+  }
+</style>s
\ No newline at end of file
diff --git a/src/demos/Time/style.css b/src/demos/Time/style.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/templates/Post.vue b/src/templates/Post.vue
index 349938a9..3097cbe7 100644
--- a/src/templates/Post.vue
+++ b/src/templates/Post.vue
@@ -23,16 +23,16 @@ export default {
     // console.log(tiptap())
 
 
-    new Editor({
-      element: this.$refs.editor,
-      content: '<p>test <strong>strong</strong></p>',
-    })
+    // new Editor({
+    //   element: this.$refs.editor,
+    //   content: '<p>test <strong>strong</strong></p>',
+    // })
     // .setContent('<p>hey</p>')
       // .registerCommand('lol', (next) => {
       //   console.log('lol')
       //   next()
       // })
-      .focus('end')
+      // .focus('end')
       // .insertText('mega ')
       // .focus('start')
       // .command('insertText', 'giga ')