move everything around

This commit is contained in:
Hans Pagel
2020-08-28 13:20:49 +02:00
parent 19d89a2ee9
commit 20237f353b
16 changed files with 26 additions and 43 deletions

View File

@@ -21,6 +21,7 @@ module.exports = {
typeName: 'DocPage', typeName: 'DocPage',
baseDir: './src/docPages', baseDir: './src/docPages',
template: './src/templates/DocPage', template: './src/templates/DocPage',
index: './getting-started/introduction',
plugins: [ plugins: [
'@gridsome/remark-prismjs', '@gridsome/remark-prismjs',
'remark-container', 'remark-container',

View File

@@ -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/) [packages/extension-bold/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-bold/)
## Usage ## Usage
<Demo name="Extensions/Bold" highlight="3-5,17,36" /> <demo name="Extensions/Bold" highlight="3-5,17,36" />

View File

@@ -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/) [packages/extension-italic/](https://github.com/ueberdosis/tiptap-next/blob/main/packages/extension-italic/)
## Usage ## Usage
<Demo name="Extensions/Italic" highlight="3-5,17,36" /> <demo name="Extensions/Italic" highlight="3-5,17,36" />

View File

@@ -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, youll 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. Thats the shortest way to get tiptap up and running with Vue.js. No worries, youll be able to add more functionality soon.
<demo name="VueSetup" />

View File

@@ -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: 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 ## CodeSandbox

View File

@@ -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 wont be able to add any plain text. Note that `Document`, `Paragraph` and `Text` are required. Otherwise you wont be able to add any plain text.
<demo name="ExtensionConfiguration" highlight="10-13,30-33" /> <demo name="Guide/BuildYourEditor" highlight="10-13,30-33" />
Thats also the place where you can register custom extensions, which you or someone else built for tiptap. Thats also the place where you can register custom extensions, which you or someone else built for tiptap.

View File

@@ -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. 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 ::: warning Using with Nuxt.js
If you are using Nuxt.js, note that tiptap needs to run in the client, not on the server. Its required to wrap the editor in a `<client-only>` tag. If you are using Nuxt.js, note that tiptap needs to run in the client, not on the server. Its required to wrap the editor in a `<client-only>` tag.

View File

@@ -1,9 +1,11 @@
# Introduction # 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*. 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, its is built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). Youll have a better understanding of how everything works under the hood and get familiar with many terms and jargon used by tiptap. Although tiptap tries to hide most of the complexity of ProseMirror, its is built on top of its APIs and we strongly recommend you to read through the [ProseMirror Guide](https://ProseMirror.net/docs/guide/). Youll 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 dont want to tell you what a menu should look like or where it should be rendered in the DOM. Thats why tiptap is renderless and comes without any CSS. Youll have full control over markup and styling.
## Who is using tiptap? ## Who is using tiptap?
- [GitLab](https://gitlab.com) - [GitLab](https://gitlab.com)
- [Statamic CMS](https://statamic.com) - [Statamic CMS](https://statamic.com)

View File

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

View File

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

View File

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

View File

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