From d8ea099edf554de83eaa6d2b93e881828bb4e4b3 Mon Sep 17 00:00:00 2001
From: hamdy <hamdy.a.farag@gmail.com>
Date: Sun, 22 Nov 2020 12:29:01 +0200
Subject: [PATCH] automatic markdwon page creation

---
 content/page/one.md            |  7 ++++++
 gridsome.config.js             | 11 +++++++++
 src/templates/MarkdownPage.vue | 41 ++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+)
 create mode 100644 content/page/one.md
 create mode 100644 src/templates/MarkdownPage.vue

diff --git a/content/page/one.md b/content/page/one.md
new file mode 100644
index 000000000..19e0fe54f
--- /dev/null
+++ b/content/page/one.md
@@ -0,0 +1,7 @@
+---
+id: one
+title: One
+---
+
+
+# Hi
\ No newline at end of file
diff --git a/gridsome.config.js b/gridsome.config.js
index 0f8f1557a..b4e619895 100644
--- a/gridsome.config.js
+++ b/gridsome.config.js
@@ -55,6 +55,13 @@ module.exports = {
                 path: 'content/site/*.json'
             }
         },
+        {
+            use: '@gridsome/source-filesystem',
+            options: {
+                typeName: 'MarkdownPage',
+                path: './content/page/**/*.md',
+            }
+        },
         {
             use: '@gridsome/source-filesystem',
             options: {
@@ -143,5 +150,9 @@ module.exports = {
             path: '/project/:id',
             component: '~/templates/Project.vue'
         }],
+        MarkdownPage: [{
+            path: '/page/:id',
+            component: '~/templates/MarkdownPage.vue'
+        }],
     }
 }
\ No newline at end of file
diff --git a/src/templates/MarkdownPage.vue b/src/templates/MarkdownPage.vue
new file mode 100644
index 000000000..6a598e972
--- /dev/null
+++ b/src/templates/MarkdownPage.vue
@@ -0,0 +1,41 @@
+<template>
+  <Layout :hideHeader="true" :disableScroll="true">
+    <div class="container sm:pxi-0 mx-auto overflow-x-hidden">
+      
+    <vue-markdown>
+    {{ $page.markdownPage.content }}
+    </vue-markdown>
+    </div>
+  </Layout>
+</template>
+
+<page-query>
+  query($id: ID!) {
+    markdownPage(id: $id) {
+        path
+        content
+        title
+    }  
+  }
+
+</page-query>
+
+<script>
+import VueMarkdown from 'vue-markdown'
+
+export default {
+  components: {
+    VueMarkdown
+  },
+  metaInfo() {
+    return {
+      title: this.$page.markdownPage.title,
+    };
+  },
+};
+</script>
+<style scoped>
+/* h2 {
+  padding-bottom: 8rem;
+} */
+</style> >