improve nav

docs/gridsome.config.js

@@ -18,8 +18,8 @@ module.exports = {
       use: '@gridsome/vue-remark',
       options: {
         typeName: 'Post',
-        baseDir: './src/data',
-        route: '/posts/:slug',
+        baseDir: './src/data/posts',
+        route: '/:slug',
         template: './src/templates/Post.vue',
         plugins: [
           '@gridsome/remark-prismjs',

docs/src/data/links.yaml

@@ -0,0 +1,10 @@
+- title: Getting Started
+  items:
+    - title: Install
+      link: /install/
+    - title: Basic Example
+      link: /basic-example/
+    - title: Advanced Example
+      link: /advanced-example/
+    - title: React
+      link: /react/

docs/src/data/posts/advanced.md

@@ -1,6 +1,6 @@
 ---
-title: Handle Extensions
-slug: handle-extensions
+title: Advanced Example
+slug: advanced-example
 ---
 
 Use a custom list of extensions.

docs/src/data/posts/basic.md

@@ -1,6 +1,6 @@
 ---
 title: Basic Example
-slug: basic
+slug: basic-example
 ---
 
 This is a basic example of tiptap.

docs/src/data/posts/react.md

@@ -1,5 +1,5 @@
 ---
-title: React Test
+title: React
 slug: react
 ---
 

docs/src/demos/Basic/style.scss

@@ -1,3 +1,3 @@
-.bla {
+.this-is-a-test {
   color: black;
 }

docs/src/layouts/App/index.vue

@@ -10,15 +10,20 @@
     <div class="app__content">
       <div class="app__inner">
         <div class="app__content-inner">
-          <aside class="app__sidebar">
+          <nav class="app__sidebar">
+            <div class="app__link-group" v-for="(linkGroup, i) in linkGroups" :key="i">
+              <div class="app__link-group-title">
+                {{ linkGroup.title }}
+              </div>
               <ul>
-              <li v-for="edge in $static.allPost.edges" :key="edge.node.id">
-                <g-link class="app__link" :to="edge.node.path">
-                  {{ edge.node.title }}
+                <li v-for="(item, j) in linkGroup.items" :key="j">
+                  <g-link class="app__link" :to="item.link">
+                    {{ item.title }}
                   </g-link>
                 </li>
               </ul>
-          </aside>
+            </div>
+          </nav>
           <main class="app__main">
             <slot/>
           </main>
@@ -33,19 +38,22 @@ query {
   metadata {
     siteName
   }
-  allPost {
-    edges {
-      node {
-        id
-        title
-        path
-      }
-    }
-  }
 }
 </static-query>
 
+<script>
+import linkGroups from '@/data/links.yaml'
+
+export default {
+  data() {
+    return {
+      linkGroups
+    }
+  }
+}
+</script>
+
 <style lang="scss" src="./fonts.scss"></style>
-<style lang="scss" src="./base.scss" />
+<style lang="scss" src="./base.scss"></style>
 <style lang="scss" src="./prism.scss"></style>
-<style lang="scss" src="./style.scss" scoped />
+<style lang="scss" src="./style.scss" scoped></style>

docs/src/layouts/App/style.scss

@@ -8,6 +8,19 @@
     font-size: 1.4rem;
   }
 
+  &__link-group {
+    margin-bottom: 2rem;
+  }
+  
+  &__link-group-title {
+    font-weight: 700;
+    letter-spacing: 0.05rem;
+    font-size: 0.75rem;
+    text-transform: uppercase;
+    color: rgba($colorBlack, 0.4);
+    margin-bottom: 0.5rem;
+  }
+
   &__link {
     display: block;
     padding: 0.1rem 0.5rem;

docs/src/templates/Post.vue

@@ -2,8 +2,6 @@
   <Layout>
     <h1>{{ $page.post.title }}</h1>
     <VueRemarkContent />
-
-    <div ref="editor"></div>
   </Layout>
 </template>
 
@@ -14,52 +12,3 @@ query Post ($id: ID!) {
   }
 }
 </page-query>
-
-<script>
-import Editor from '@tiptap/core'
-
-export default {
-  mounted() {
-    // console.log(tiptap())
-
-
-    // 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')
-      // .insertText('mega ')
-      // .focus('start')
-      // .command('insertText', 'giga ')
-      // .lol()
-
-      // .registerCommand('insertHTML', (next, editor, html) => {
-      //   console.log(html)
-      //   next()
-      // })
-      // .registerCommand('insertHello', async (next, editor) => {
-      //   await editor.insertHTML('<strong>HELLO</strong>')
-      //   next()
-      // })
-      // .registerCommand('insertHello', (next, editor) => {
-      //   editor
-      //     .focus('start')
-      //     .insertHTML('<strong>HELLO</strong>')
-      //   next()
-      // })
-      // .focus('start')
-      // .insertHello()
-      // .insertText('eins')
-      // .insertText('zwei')
-      // .insertText('drei')
-      // .insertHello()
-      // .focus('end')
-      // .insertHTML('<p>end</p>')
-  }
-}
-</script>