refactoring

docs/gridsome.config.js

@@ -17,18 +17,11 @@ module.exports = {
     {
       use: '@gridsome/vue-remark',
       options: {
-        typeName: 'Post',
+        typeName: 'DocPage',
         baseDir: './src/data/posts',
-        route: '/:slug',
-        template: './src/templates/Post.vue',
+        template: './src/templates/DocPage.vue',
         plugins: [
           '@gridsome/remark-prismjs',
-          [
-            '@noxify/gridsome-plugin-remark-embed',
-            {
-              'enabledProviders' : ['Youtube', 'Twitter', 'Gist'],
-            },
-          ],
         ],
       },
     },

docs/package.json

@@ -12,7 +12,6 @@
     "@gridsome/transformer-json": "^0.2.1",
     "@gridsome/vue-remark": "^0.1.10",
     "@mvasilkov/outdent": "^1.0.4",
-    "@noxify/gridsome-plugin-remark-embed": "^1.1.5",
     "globby": "^11.0.0",
     "gridsome": "0.7.12",
     "raw-loader": "^4.0.0",

docs/src/data/links.yaml

@@ -7,4 +7,17 @@
     - title: Advanced Example
       link: /advanced-example/
     - title: React
-      link: /react/
+      link: /react/
+
+- title: Core Concepts
+  items:
+    - title: Renderless
+      link: /renderless/
+    - title: Editor
+      link: /editor/
+    - title: Extensions
+      link: /extensions/
+    - title: Commands
+      link: /commands/
+    - title: Events
+      link: /events/

docs/src/data/posts/advanced-example.md

@@ -1,7 +1,4 @@
----
-title: Advanced Example
-slug: advanced-example
----
+# Advanced Example
 
 Use a custom list of extensions.
 

docs/src/data/posts/basic-example.md

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

docs/src/data/posts/install.md

@@ -1,7 +1,4 @@
----
-title: Install
-slug: install
----
+# Install
 
 ```bash
 # Using npm
@@ -9,4 +6,17 @@ npm install @tiptap/core
 
 # Using Yarn
 yarn add @tiptap/core
+```
+
+## Quick Start
+
+```js
+import { Editor } from '@tiptap/core'
+import extensions from '@tiptap/starter-kit'
+
+new Editor({
+  element: document.getElementsByClassName('element'),
+  extensions: extensions(),
+  content: '<p>Hey there.</p>',
+})
 ```

docs/src/data/posts/react.md

@@ -1,7 +1,4 @@
----
-title: React
-slug: react
----
+# React
 
 This is a basic example of tiptap.
 

docs/src/layouts/App/style.scss

@@ -14,7 +14,7 @@
   
   &__link-group-title {
     font-weight: 700;
-    letter-spacing: 0.05rem;
+    letter-spacing: 0.025rem;
     font-size: 0.75rem;
     text-transform: uppercase;
     color: rgba($colorBlack, 0.4);

docs/src/templates/DocPage.vue

@@ -0,0 +1,5 @@
+<template>
+  <Layout>
+    <VueRemarkContent />
+  </Layout>
+</template>

docs/src/templates/Post.vue

@@ -1,14 +0,0 @@
-<template>
-  <Layout>
-    <h1>{{ $page.post.title }}</h1>
-    <VueRemarkContent />
-  </Layout>
-</template>
-
-<page-query>
-query Post ($id: ID!) {
-  post(id: $id) {
-    title
-  }
-}
-</page-query>