refactoring

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>