move some pages

docs/src/data/links.yaml

@@ -1,13 +1,7 @@
 - title: Getting Started
   items:
-    - title: Install
-      link: /install/
-    - title: Basic Example
-      link: /basic-example/
-    - title: Advanced Example
-      link: /advanced-example/
-    - title: React
-      link: /react/
+    - title: Installation
+      link: /installation/
 
 - title: Core Concepts
   items:
@@ -21,3 +15,15 @@
       link: /commands/
     - title: Events
       link: /events/
+
+- title: Vue
+  items:
+    - title: Basic Example
+      link: /basic-example/
+    - title: Advanced Example
+      link: /advanced-example/
+
+- title: React
+  items:
+    - title: React
+      link: /react/

docs/src/data/posts/commands.md

@@ -0,0 +1 @@
+# Commands

docs/src/data/posts/editor.md

@@ -0,0 +1,5 @@
+# Editor
+
+This class is a central building block of tiptap. It does most of the heavy lifting of creating a working  [ProseMirror](https://ProseMirror.net/) editor such as creating the [`EditorView`](https://ProseMirror.net/docs/ref/#view.EditorView), setting the initial [`EditorState`](https://ProseMirror.net/docs/ref/#state.Editor_State) and so on.
+
+Although tiptap tries to hide most of the complexity of [ProseMirror](https://ProseMirror.net/docs/), tiptap is built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). You'll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap.

docs/src/data/posts/events.md

@@ -0,0 +1 @@
+# Events

docs/src/data/posts/extensions.md

@@ -0,0 +1 @@
+# Extensions

docs/src/data/posts/installation.md

@@ -1,4 +1,4 @@
-# Install
+# Installation
 
 ```bash
 # Using npm

docs/src/data/posts/renderless.md

@@ -0,0 +1,3 @@
+# Renderless
+
+tiptap comes without any CSS.

docs/src/layouts/App/base.scss

@@ -72,6 +72,14 @@ a {
   text-decoration: none;
 }
 
+code {
+  font-family: 'JetBrainsMono', monospace;
+  background-color: rgba($colorBlack, 0.05);
+  padding: 0.1rem 0.5rem;
+  border-radius: 0.25rem;
+  color: rgba($colorBlack, 0.7);
+}
+
 .is-active {
   background: black;
   color: white;

docs/src/layouts/App/prism.scss

@@ -23,6 +23,7 @@ code[class*="language-"], pre[class*="language-"] {
   font-size: 1em;
   line-height: 1.8;
   tab-size: 2;
+  padding: 0;
 }
 
 code[class*="language-"]::-moz-selection, pre[class*="language-"]::-moz-selection,

docs/src/templates/DocPage/style.scss

@@ -1,7 +1,10 @@
 .doc-page {
   &__markdown ::v-deep {
 
-    h1,
+    h1 {
+      font-weight: 400;
+    }
+
     h2,
     h3,
     h4,