From 4ed66462947f622d35b59f06249f648c2f696c85 Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Tue, 11 Aug 2020 17:26:10 +0200
Subject: [PATCH] add a few basics

---
 docs/src/demos/BasicConfiguration/index.vue   | 52 +++++++++++++++++++
 docs/src/demos/GettingStarted/index.vue       | 33 ++++++++++++
 .../{VueSetup => GettingStarted}/style.scss   |  0
 ...{basic-example.md => basic-vue-example.md} |  8 +--
 docs/src/docPages/configuration.md            |  7 +++
 docs/src/docPages/getting-started.md          | 24 +++++++++
 docs/src/docPages/installation.md             | 41 +++++++--------
 docs/src/links.yaml                           | 22 ++++----
 8 files changed, 151 insertions(+), 36 deletions(-)
 create mode 100644 docs/src/demos/BasicConfiguration/index.vue
 create mode 100644 docs/src/demos/GettingStarted/index.vue
 rename docs/src/demos/{VueSetup => GettingStarted}/style.scss (100%)
 rename docs/src/docPages/{basic-example.md => basic-vue-example.md} (73%)
 create mode 100644 docs/src/docPages/configuration.md
 create mode 100644 docs/src/docPages/getting-started.md

diff --git a/docs/src/demos/BasicConfiguration/index.vue b/docs/src/demos/BasicConfiguration/index.vue
new file mode 100644
index 00000000..00d03478
--- /dev/null
+++ b/docs/src/demos/BasicConfiguration/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="editor">
+    <editor-menu-bar :editor="editor" v-slot="{ commands, isActive }">
+        <div class="menubar">
+
+          <button
+            class="menubar__button"
+            :class="{ 'is-active': isActive.bold() }"
+            @click="commands.bold"
+          >
+            <icon name="bold" />
+          </button>
+
+        </div>
+      </editor-menu-bar>
+
+    <editor-content :editor="editor" />
+  </div>
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent, Renderer, EditorMenuBar } from '@tiptap/vue'
+import extensions, { Bold } from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+    EditorMenuBar,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
+      extensions: extensions([
+        new Bold,
+      ]),
+      renderer: Renderer,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
\ No newline at end of file
diff --git a/docs/src/demos/GettingStarted/index.vue b/docs/src/demos/GettingStarted/index.vue
new file mode 100644
index 00000000..04d9546e
--- /dev/null
+++ b/docs/src/demos/GettingStarted/index.vue
@@ -0,0 +1,33 @@
+<template>
+  <editor-content :editor="editor" />
+</template>
+
+<script>
+import { Editor } from '@tiptap/core'
+import { EditorContent, Renderer } from '@tiptap/vue'
+import extensions from '@tiptap/starter-kit'
+
+export default {
+  components: {
+    EditorContent,
+  },
+
+  data() {
+    return {
+      editor: null,
+    }
+  },
+
+  mounted() {
+    this.editor = new Editor({
+      content: '<p>I’m running tiptap with Vue.js. This demo is interactive, try to edit the text.</p>',
+      extensions: extensions(),
+      renderer: Renderer,
+    })
+  },
+
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+}
+</script>
\ No newline at end of file
diff --git a/docs/src/demos/VueSetup/style.scss b/docs/src/demos/GettingStarted/style.scss
similarity index 100%
rename from docs/src/demos/VueSetup/style.scss
rename to docs/src/demos/GettingStarted/style.scss
diff --git a/docs/src/docPages/basic-example.md b/docs/src/docPages/basic-vue-example.md
similarity index 73%
rename from docs/src/docPages/basic-example.md
rename to docs/src/docPages/basic-vue-example.md
index 90f046cd..57c56584 100644
--- a/docs/src/docPages/basic-example.md
+++ b/docs/src/docPages/basic-vue-example.md
@@ -3,11 +3,11 @@
 tiptap is framework-agnostic and works with plain JavaScript, Vue.js and React. To use tiptap with Vue.js or one of the tools that are based on Vue.js like Nuxt.js or Gridsome, you’ll need the tiptap Vue.js adapter. Install it as an dependency in your project:
 
 ```bash
-# Install Vue.js adapter with npm
-npm install @tiptap/vue
+# Install tiptap & Vue.js adapter with npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
 
-# Install Vue.js adapter with Yarn
-yarn add @tiptap/vue
+# Install tiptap & Vue.js adapter with Yarn
+yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue
 ```
 
 Create a new Vue component (e. g. `<Tiptap />`) and add the following content. That’s the shortest way to get tiptap up and running with Vue.js. No worries, you’ll be able to add more functionality soon.
diff --git a/docs/src/docPages/configuration.md b/docs/src/docPages/configuration.md
new file mode 100644
index 00000000..9c85d8b7
--- /dev/null
+++ b/docs/src/docPages/configuration.md
@@ -0,0 +1,7 @@
+# Configure tiptap
+
+In its basic version tiptap comes very raw. There is no menu, no buttons, no styling. That’s intended. See tiptap as your building blocks to build exactly the editor you’d like to have.
+
+Let’s start to add a few basic things to the configuration.
+
+<demo name="BasicConfiguration" />
\ No newline at end of file
diff --git a/docs/src/docPages/getting-started.md b/docs/src/docPages/getting-started.md
new file mode 100644
index 00000000..38195401
--- /dev/null
+++ b/docs/src/docPages/getting-started.md
@@ -0,0 +1,24 @@
+# First steps with tiptap
+
+tiptap is framework-agnostic and works with plain JavaScript, Vue.js and React. To use tiptap with Vue.js or one of the tools that are based on Vue.js like Nuxt.js or Gridsome, you’ll need the tiptap Vue.js adapter. Install it as an dependency in your project:
+
+```bash
+# Install Vue.js adapter with npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
+
+# Install Vue.js adapter with Yarn
+yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue
+```
+
+Create a new Vue component (e. g. `<Tiptap />`) and add the following content. That’s the shortest way to get tiptap up and running with Vue.js. No worries, you’ll be able to add more functionality soon.
+
+<demo name="GettingStarted" />
+
+Does that work for you? There are a few common pitfalls here, if you have trouble getting started, try to read more here:
+
+* [tiptap doesn’t have a default styling](#)
+* [Use tiptap with Nuxt.js](#)
+
+Most people would expect a text editor to have buttons to make the text bold or add links. tiptap has all of that, but it is very modular. You are free to decided what you use and how you use it. Use it as a more powerful textarea or build a full-blown editor. tiptap is ready for both.
+
+But let’s try to add a menu in the next step.
\ No newline at end of file
diff --git a/docs/src/docPages/installation.md b/docs/src/docPages/installation.md
index 1d486f2a..f5220205 100644
--- a/docs/src/docPages/installation.md
+++ b/docs/src/docPages/installation.md
@@ -25,36 +25,35 @@ new Editor({
 })
 ```
 
-→ codesandbox
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
 
 ## Vue.js
 
-```js
-import { Editor } from '@tiptap/core'
-import extensions from '@tiptap/starter-kit'
+To use tiptap with Vue.js and tools that are based on Vue.js install the Vue.js adapter in your project:
 
-new Editor({
-  element: document.getElementsByClassName('element'),
-  extensions: extensions(),
-  content: '<p>Hey there.</p>',
-})
+```bash
+# Using npm
+npm install @tiptap/core @tiptap/starter-kit @tiptap/vue
+
+# Using Yarn
+yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue
 ```
 
-→ codesandbox
+Create a new component and add the following content to get a basic version of tiptap:
 
-## react
+<demo name="VueSetup" />
+
+* Read more about [Using tiptap with Vue.js](/basic-vue-example/)
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
+
+## React
 
 ```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>',
-})
+// TODO
 ```
 
-→ codesandbox
+* Play with tiptap on [CodeSandbox](https://codesandbox.io/s/vue-issue-template-h0g28)
 
-## cdn?
\ No newline at end of file
+## CDN
+
+// TODO
\ No newline at end of file
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 16b3b3c0..4d2aa28b 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -1,29 +1,29 @@
 - title: Getting Started
   items:
-    - title: Introduction
+    - title: Introduction 🚧
       link: /introduction/
-    - title: Installation
+    - title: Installation 🚧
       link: /installation/
 
 - title: Guide
   items:
-    - title: First Steps
-      link: /first-steps/
-    - title: Configuration
+    - title: Getting started 🚧
+      link: /getting-started/
+    - title: Configuration 🚧
       link: /configuration/
-    - title: Build your editor
+    - title: Build your editor ❌
       link: /build-your-editor/
-    - title: Custom styling
+    - title: Custom styling ❌
       link: /custom-styling/
-    - title: Get content
+    - title: Get content ❌
       link: /get-content/
-    - title: "Advanced nodes"
+    - title: Advanced nodes ❌
       link: /advanced-notes/
 
 - title: Vue
   items:
-    - title: Use tiptap with Vue.js
-      link: /basic-example/
+    - title: Use tiptap with Vue.js 🚧
+      link: /basic-vue-example/
     - title: Advanced Example
       link: /advanced-vue-example/
     - title: Render Vue Components