From ac97e393d182ea0c23c79740ef60c47e8a0e6b1c Mon Sep 17 00:00:00 2001
From: Hans Pagel <hans.pagel@ueber.io>
Date: Thu, 4 Feb 2021 17:33:59 +0100
Subject: [PATCH] docs: update content

---
 .../demos/Examples/MultipleEditors/index.vue  | 14 ++++++--
 docs/src/demos/Examples/Tables/index.vue      | 27 +++++++++++----
 docs/src/docPages/api/extensions.md           |  4 +--
 docs/src/docPages/api/marks.md                |  3 +-
 docs/src/docPages/api/nodes.md                | 27 +++++++++++++--
 docs/src/docPages/api/utilities/html.md       |  5 ++-
 docs/src/docPages/api/utilities/suggestion.md | 12 +++----
 docs/src/docPages/examples/community.md       |  2 +-
 .../src/docPages/examples/multiple-editors.md |  2 +-
 docs/src/docPages/experiments.md              |  4 +--
 docs/src/docPages/guide/accessibility.md      |  6 ++--
 docs/src/docPages/guide/build-extensions.md   |  4 +--
 docs/src/links.yaml                           | 34 +++++++++----------
 docs/src/pages/404.vue                        |  7 ++--
 14 files changed, 96 insertions(+), 55 deletions(-)

diff --git a/docs/src/demos/Examples/MultipleEditors/index.vue b/docs/src/demos/Examples/MultipleEditors/index.vue
index 672a5a35..9458894e 100644
--- a/docs/src/demos/Examples/MultipleEditors/index.vue
+++ b/docs/src/demos/Examples/MultipleEditors/index.vue
@@ -33,6 +33,7 @@ import { EditorContent } from '@tiptap/vue'
 import Document from '@tiptap/extension-document'
 import Paragraph from '@tiptap/extension-paragraph'
 import Text from '@tiptap/extension-text'
+import Bold from '@tiptap/extension-bold'
 import TaskList from '@tiptap/extension-task-list'
 import TaskItem from '@tiptap/extension-task-item'
 import Collaboration from '@tiptap/extension-collaboration'
@@ -78,7 +79,7 @@ export default {
           field: 'title',
         }),
       ],
-      content: '<p>No matter what you do, this’ll be a single paragraph.',
+      content: '<p>No matter what you do, this will be a single paragraph.',
     })
 
     this.tasks = new Editor({
@@ -107,12 +108,16 @@ export default {
         Document,
         Paragraph,
         Text,
+        Bold,
         Collaboration.configure({
           document: this.ydoc,
           field: 'description',
         }),
       ],
       content: `
+        <p>
+          <strong>Lengthy text</strong>
+        </p>
         <p>
           This can be lengthy text.
         </p>
@@ -174,9 +179,14 @@ export default {
   padding: 0.75rem 1rem;
   border-radius: 5px;
   border: 1px solid #e9ecef;
+  transition: .1s all ease-in-out;
+
+  &:hover {
+    border-color: #68CEF8;
+  }
 
   &--title {
-    font-size: 1.6rem;
+    font-size: 1.5rem;
   }
 
   &--json {
diff --git a/docs/src/demos/Examples/Tables/index.vue b/docs/src/demos/Examples/Tables/index.vue
index e0209314..5d049b85 100644
--- a/docs/src/demos/Examples/Tables/index.vue
+++ b/docs/src/demos/Examples/Tables/index.vue
@@ -94,15 +94,17 @@ export default {
         TableCell,
       ],
       content: `
-        <p>
+        <h3>
           Have you seen our tables? They are amazing!
-        </p>
+        </h3>
         <ul>
-          <li>tables with rows, headers and cells</li>
-          <li>Support for <code>colgroup</code> and <code>rowspan</code></li>
-          <li>Resizable columns</li>
-        </ul>
+          <li>tables with rows, cells and headers (optional)</li>
+          <li>support for <code>colgroup</code> and <code>rowspan</code></li>
+          <li>and even resizable columns (optional)</li>
         </ul>
+        <p>
+          Here is an example:
+        </p>
         <table>
           <tbody>
             <tr>
@@ -115,6 +117,17 @@ export default {
               <td>songwriter</td>
               <td>actress</td>
             </tr>
+            <tr>
+              <td>Philipp Kühn</td>
+              <td>designer</td>
+              <td>developer</td>
+              <td>maker</td>
+            </tr>
+            <tr>
+              <td>Hans Pagel</td>
+              <td>wrote this</td>
+              <td colspan="2">that’s it</td>
+            </tr>
           </tbody>
         </table>
       `,
@@ -130,6 +143,8 @@ export default {
 <style lang="scss">
 /* Basic editor styles */
 .ProseMirror {
+  margin: 1rem 0;
+
   > * + * {
     margin-top: 0.75em;
   }
diff --git a/docs/src/docPages/api/extensions.md b/docs/src/docPages/api/extensions.md
index 22f854a4..d008ac0a 100644
--- a/docs/src/docPages/api/extensions.md
+++ b/docs/src/docPages/api/extensions.md
@@ -3,7 +3,7 @@
 ## toc
 
 ## Introduction
-Extensions are the way to add functionality to tiptap. By default tiptap comes bare, without any of them, but we have a long list of extensions that are ready to be used with tiptap.
+Extensions add new capabilities to tiptap. [Nodes](/api/nodes) and [marks](/api/marks) are rendered in HTML. Extensions can’t add to the schema, but can add functionality or change the behaviour of the editor.
 
 ## List of provided extensions
 | Title                                                       | Default Extension | Source Code                                                                                            |
@@ -19,7 +19,7 @@ Extensions are the way to add functionality to tiptap. By default tiptap comes b
 | [TextAlign](/api/extensions/text-align)                     | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text-align/)           |
 | [Typography](/api/extensions/typography)                    | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-typography/)           |
 
-You don’t have to use it, but we prepared a `@tiptap/vue-starter-kit` which includes the most common extensions. Learn [how you can use the `defaultExtensions()`](/examples/default).
+You don’t have to use it, but we prepared a `@tiptap/starter-kit` which includes the most common extensions. See an example on [how to use `defaultExtensions()`](/examples/default).
 
 ## How extensions work
 Although tiptap tries to hide most of the complexity of ProseMirror, it’s built on top of its APIs and we recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/) for advanced usage. You’ll have a better understanding of how everything works under the hood and get more familiar with many terms and jargon used by tiptap.
diff --git a/docs/src/docPages/api/marks.md b/docs/src/docPages/api/marks.md
index 969f983f..840e9c13 100644
--- a/docs/src/docPages/api/marks.md
+++ b/docs/src/docPages/api/marks.md
@@ -3,8 +3,7 @@
 ## toc
 
 ## Introduction
-
-TODO
+Marks add new capabilities to tiptap. Marks are like different types of inline styling, for example bold, italic or highlights.
 
 ## List of supported marks
 | Title                              | Default Extension | Source Code                                                                                  |
diff --git a/docs/src/docPages/api/nodes.md b/docs/src/docPages/api/nodes.md
index 2a6728d0..928b5fa2 100644
--- a/docs/src/docPages/api/nodes.md
+++ b/docs/src/docPages/api/nodes.md
@@ -3,8 +3,7 @@
 ## toc
 
 ## Introduction
-
-TODO
+Nodes add new capabilities to tiptap.  Nodes are like block types, for example a paragraph, heading, or code block.
 
 ## List of supported nodes
 | Title                                        | Default Extension | Source Code                                                                                       |
@@ -29,3 +28,27 @@ TODO
 | [TaskList](/api/nodes/task-list)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-list/)       |
 | [TaskItem](/api/nodes/task-item)             | –                 | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-task-item/)       |
 | [Text](/api/nodes/text)                      | Yes               | [GitHub](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-text/)            |
+
+## Create a new node
+You’re free to create your own nodes for tiptap. Here is the boilerplate code that’s need to create and register your own node:
+
+```js
+import { Node } from '@tiptap/core'
+
+const CustomNode = Node.create({
+  // Your code here
+})
+
+const editor = new Editor({
+  extensions: [
+    // Register your custom node with the editor.
+    CustomNode,
+    // … and don’t forget all other extensions.
+    Document,
+    Paragraph,
+    Text,
+    // …
+  ],
+```
+
+Learn [more about custom extensions in our guide](/guide/build-extensions).
diff --git a/docs/src/docPages/api/utilities/html.md b/docs/src/docPages/api/utilities/html.md
index b869a4c2..886f41a4 100644
--- a/docs/src/docPages/api/utilities/html.md
+++ b/docs/src/docPages/api/utilities/html.md
@@ -1,5 +1,8 @@
 # HTML
-TODO
+[![Version](https://img.shields.io/npm/v/@tiptap/html.svg?label=version)](https://www.npmjs.com/package/@tiptap/html)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/html.svg)](https://npmcharts.com/compare/@tiptap/html?minimal=true)
+
+The utility helps rendering JSON content as HTML without an editor instance, for example on the server side. All it needs is a JSON and an array of extensions.
 
 ## Source code
 [packages/html/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/html/)
diff --git a/docs/src/docPages/api/utilities/suggestion.md b/docs/src/docPages/api/utilities/suggestion.md
index 8a6fd4fd..76ee8648 100644
--- a/docs/src/docPages/api/utilities/suggestion.md
+++ b/docs/src/docPages/api/utilities/suggestion.md
@@ -1,5 +1,8 @@
 # Suggestion
-TODO
+[![Version](https://img.shields.io/npm/v/@tiptap/suggestion.svg?label=version)](https://www.npmjs.com/package/@tiptap/suggestion)
+[![Downloads](https://img.shields.io/npm/dm/@tiptap/suggestion.svg)](https://npmcharts.com/compare/@tiptap/suggestion?minimal=true)
+
+This utility helps with all kinds of suggestions in the editor. Have a look at the [`Mention`](/api/nodes/mention), [`Hashtag`](/api/nodes/hashtag) or [`Emoji`](/api/nodes/emoji) node to see it in action.
 
 ## Settings
 | Option          | Type       | Default        | Description                                                 |
@@ -13,13 +16,6 @@ TODO
 | items           | `Function` | `() => {}`     | Pass an array of filtered suggestions, can be async.        |
 | render          | `Function` | `() => ({})`   | A render function for the autocomplete popup.               |
 
-## Render
-TODO
-
 ## Source code
 [packages/suggestion/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/suggestion/)
 
-## Usage
-* [`Emoji`](/api/nodes/emoji)
-* [`Hashtag`](/api/nodes/hashtag)
-* [`Mention`](/api/nodes/mention)
diff --git a/docs/src/docPages/examples/community.md b/docs/src/docPages/examples/community.md
index 20ad6492..3b0233ae 100644
--- a/docs/src/docPages/examples/community.md
+++ b/docs/src/docPages/examples/community.md
@@ -1,3 +1,3 @@
-# Community
+# Suggestions
 
 <demo name="Examples/Community" />
diff --git a/docs/src/docPages/examples/multiple-editors.md b/docs/src/docPages/examples/multiple-editors.md
index da61e913..5e5c0336 100644
--- a/docs/src/docPages/examples/multiple-editors.md
+++ b/docs/src/docPages/examples/multiple-editors.md
@@ -1,5 +1,5 @@
 # Multiple editors
 
-The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced with other users.
+The following example has three different instances of tiptap. The first is configured to have a single paragraph of text, the second to have a task list and the third to have text. All of them are stored in a single Y.js document, which can be synced in real-time with other users.
 
 <demo name="Examples/MultipleEditors" />
diff --git a/docs/src/docPages/experiments.md b/docs/src/docPages/experiments.md
index 615e04f6..a5fc0286 100644
--- a/docs/src/docPages/experiments.md
+++ b/docs/src/docPages/experiments.md
@@ -1,5 +1,5 @@
 # Experiments
-Congratulations! You’ve found our secret playground with a list of experiments. Be aware, that nothing here is ready to use. Feel free to play around, but please, don’t open an issue for a bug you’ve found here or send pull requests. :-)
+Congratulations! You’ve found our playground with a list of experiments. Be aware that nothing here is ready to use. Feel free to play around, but please, don’t open an issue for a bug you’ve found here or send pull requests. :-)
 
 ## New
 * [Linter](/experiments/linter)
@@ -10,4 +10,4 @@ Congratulations! You’ve found our secret playground with a list of experiments
 * [Embeds](/experiments/embeds)
 
 ## Waiting for approval
-* [Placeholder](/experiments/placeholder)
+* [@tiptap/extension-placeholder](/experiments/placeholder)
diff --git a/docs/src/docPages/guide/accessibility.md b/docs/src/docPages/guide/accessibility.md
index a4206766..d8df89d6 100644
--- a/docs/src/docPages/guide/accessibility.md
+++ b/docs/src/docPages/guide/accessibility.md
@@ -9,15 +9,15 @@ We need your support to maintain, update, support and develop tiptap 2. If you
 ## Introduction
 We strive to make tiptap accessible to everyone, but to be honest, there’s not much work done now. From our current understanding, that’s what needs to be done:
 
-### Interface
+## Interface
 An interface needs to have well-defined contrasts, big enough click areas, semantic markup, must be keyboard accessible and well documented. Currently, we don’t even provide an interface, so for now that’s totally up to you.
 
 But no worries, we’ll provide an interface soon and take accessibility into account early on.
 
-### Editor
+## Editor
 The editor needs to produce semantic markup, must be keyboard accessible and well documented. The tiptap content is well structured so that’s a good foundation already. That said, we can add support and encourage the usage of additional attributes, for example the Alt-attribute for images.
 
-### Writing assistance (optional)
+## Writing assistance (optional)
 An optional writing assitance could help people writing content semanticly correct, for example pointing out an incorrect usage of heading levels. With that kind of assistance provided by the core developers, we could help to improve the content of a lot of applications.
 
 ## Resources
diff --git a/docs/src/docPages/guide/build-extensions.md b/docs/src/docPages/guide/build-extensions.md
index 47bdb873..c6e1253d 100644
--- a/docs/src/docPages/guide/build-extensions.md
+++ b/docs/src/docPages/guide/build-extensions.md
@@ -3,9 +3,9 @@
 ## toc
 
 ## Introduction
-You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Pass an option with your code and configuration.
+You can build your own extensions from scratch with the `Node`, `Mark`, and `Extension` classes. Just pass an object with your configuration and custom code. Read the guide on [extending the functionality](/guide/extend-extensions) to learn more about all the things you can control.
 
-And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap-next/issues/new/choose).
+And if everything is working fine, don’t forget to [share it with the community](https://github.com/ueberdosis/tiptap/issues/819).
 
 ### Create a node
 ```js
diff --git a/docs/src/links.yaml b/docs/src/links.yaml
index 7ce44c61..281b8af3 100644
--- a/docs/src/links.yaml
+++ b/docs/src/links.yaml
@@ -21,28 +21,25 @@
       type: pro
     - title: Markdown shortcuts
       link: /examples/markdown-shortcuts
-    - title: Formatting
-      link: /examples/formatting
-    - title: Todo app
-      link: /examples/todo-app
-    - title: Write a book
-      link: /examples/book
-    - title: Minimal
-      link: /examples/minimal
-    - title: Draw on a canvas
-      link: /examples/drawing
-    - title: Multiple editors
-      link: /examples/multiple-editors
-      type: draft
-    - title: Community
-      link: /examples/community
-      type: draft
     - title: Tables
       link: /examples/tables
       type: pro
     - title: Images
       link: /examples/images
-      type: draft
+    - title: Formatting
+      link: /examples/formatting
+    - title: Task lists
+      link: /examples/todo-app
+    - title: Lengthy texts
+      link: /examples/book
+    - title: Draw on a canvas
+      link: /examples/drawing
+    - title: Suggestions
+      link: /examples/community
+    - title: Minimal setup
+      link: /examples/minimal
+    - title: Multiple editors
+      link: /examples/multiple-editors
 
 - title: Guide
   items:
@@ -217,7 +214,6 @@
       items:
         - title: HTML
           link: /api/utilities/html
-          type: draft
         - title: Suggestion
           link: /api/utilities/suggestion
           type: new
@@ -232,6 +228,8 @@
   items:
     - title: 'Follow on Twitter'
       link: https://twitter.com/tiptap_editor
+    - title: Experiments
+      link: /experiments
     - title: Documentation for tiptap 1.x
       link: https://v1.tiptap.dev
 
diff --git a/docs/src/pages/404.vue b/docs/src/pages/404.vue
index 9784d8f9..c7f262ea 100644
--- a/docs/src/pages/404.vue
+++ b/docs/src/pages/404.vue
@@ -17,13 +17,10 @@
   justify-content: center;
   align-items: center;
   min-height: 100vh;
-
-  // margin: 5rem 1rem;
-  text-align: center;
-  color: rgba($colorWhite, 0.4);
+  color: rgba($colorBlack, 0.4);
 
   a {
-    color: $colorWhite;
+    color: $colorBlack;
   }
 }
 </style>