move everything around

docs/src/docPages/api/extensions/bold.md

@@ -21,4 +21,4 @@ The extension will generate the corresponding `<strong>` HTML tags when reading
 [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
 
 ## Usage
-<Demo name="Extensions/Bold" highlight="3-5,17,36" />
+<demo name="Extensions/Bold" highlight="3-5,17,36" />

docs/src/docPages/api/extensions/italic.md

@@ -21,4 +21,4 @@ The extension will generate the corresponding `<em>` HTML tags when reading cont
 [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
 
 ## Usage
-<Demo name="Extensions/Italic" highlight="3-5,17,36" />
+<demo name="Extensions/Italic" highlight="3-5,17,36" />

docs/src/docPages/basic-vue-example.md

@@ -1,15 +0,0 @@
-# Use tiptap with Vue.js
-
-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 tiptap & Vue.js adapter with npm
-npm install @tiptap/core @tiptap/starter-kit @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.
-
-<demo name="VueSetup" />

docs/src/docPages/general/installation.md

@@ -41,7 +41,7 @@ yarn add @tiptap/vue @tiptap/vue-starter-kit
 
 We even prepared a Vue.js starter kit for you. That should give you a good headstart. Create a new component and add the following content to get a basic version of tiptap:
 
-<demo name="VueSetup" />
+<demo name="General/Installation" />
 
 ## CodeSandbox
 

docs/src/docPages/guide/build-your-editor.md

@@ -22,7 +22,7 @@ You are free to choose which parts of tiptap you want to use. Tiptap has support
 
 Note that `Document`, `Paragraph` and `Text` are required. Otherwise you won’t be able to add any plain text.
 
-<demo name="ExtensionConfiguration" highlight="10-13,30-33" />
+<demo name="Guide/BuildYourEditor" highlight="10-13,30-33" />
 
 That’s also the place where you can register custom extensions, which you or someone else built for tiptap.
 

docs/src/docPages/guide/getting-started.md

@@ -20,7 +20,7 @@ The `@tiptap/vue-starter-kit` includes a few basics you would probably need anyw
 
 Create a new Vue component (you can call it `<Tiptap />`) and add the following content. This is the fastest way to get tiptap up and running with Vue.js. It will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon.
 
-<demo name="GettingStarted" />
+<demo name="Guide/GettingStarted" />
 
 ::: warning Using with Nuxt.js
 If you are using Nuxt.js, note that tiptap needs to run in the client, not on the server. It’s required to wrap the editor in a `<client-only>` tag.

docs/src/docPages/introduction.md

@@ -1,9 +1,11 @@
 # Introduction
-
 tiptap is a <g-link to="/renderless">renderless</g-link> wrapper around [ProseMirror](https://ProseMirror.net) – a toolkit for building rich-text editors that are already in use at many well-known companies such as *New York Times*, *The Guardian* or *Atlassian*.
 
 Although tiptap tries to hide most of the complexity of ProseMirror, it’s 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.
 
+## Renderless
+The implementation of a text editor can be very specific for each use case. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You’ll have full control over markup and styling.
+
 ## Who is using tiptap?
 - [GitLab](https://gitlab.com)
 - [Statamic CMS](https://statamic.com)

docs/src/docPages/renderless.md

@@ -1,3 +0,0 @@
-# Renderless
-
-The implementation of a text editor can be very specific for each use case. We don’t want to tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is renderless and comes without any CSS. You’ll have full control over markup and styling.

docs/src/layouts/App/index.vue

@@ -69,6 +69,9 @@
             <span>Edit this page on GitHub</span>
           </a>
         </p>
+        <p>
+          Made with 🖤 by <a href="https://twitter.com/_ueberdosis">überdosis</a>
+        </p>
         <page-navigation />
       </main>
     </div>

docs/src/links.yaml

@@ -1,28 +1,28 @@
-- title: Getting Started
+- title: General
   items:
     - title: Introduction
-      link: /getting-started/introduction/
+      link: /
     - title: Installation
-      link: /getting-started/installation/
+      link: /general/installation
     - title: Upgrade Guide
-      link: /getting-started/upgrade-guide/
+      link: /general/upgrade-guide
 
 - title: Guide
   items:
     - title: Getting started
-      link: /guide/getting-started/
+      link: /guide/getting-started
     - title: Configuration
-      link: /guide/configuration/
+      link: /guide/configuration
     - title: Build your editor
-      link: /guide/build-your-editor/
+      link: /guide/build-your-editor
     - title: Custom styling
-      link: /guide/custom-styling/
+      link: /guide/custom-styling
     - title: Get content
-      link: /guide/get-content/
+      link: /guide/get-content
     - title: Custom extensions
-      link: /guide/custom-extensions/
+      link: /guide/custom-extensions
     - title: Use Vue Components
-      link: /guide/use-vue-components/
+      link: /guide/use-vue-components
 
 - title: Examples
   items:

docs/src/pages/Index.vue

@@ -1,5 +0,0 @@
-<template>
-  <Layout>
-    Hi there! 👋
-  </Layout>
-</template>

docs/src/templates/DocPage/style.scss

@@ -58,7 +58,7 @@
 
       > * + * {
         margin-top: 0.5rem;
-      } 
+      }
 
       li {
         position: relative;
@@ -80,7 +80,7 @@
 
       > * + * {
         margin-top: 0.5rem;
-      } 
+      }
 
       li {
         position: relative;
@@ -146,7 +146,7 @@
       padding: 1rem;
       border: 2px solid rgba($colorBlack, 0.1);
       border-radius: 0.25rem;
-    
+
       &.warning {
         border-color:#ffd8a8;
         background-color: #fff4e6;