From 4db990856dd9a56499ca230537e15d65509df01f Mon Sep 17 00:00:00 2001 From: Hans Pagel Date: Wed, 12 Aug 2020 12:00:02 +0200 Subject: [PATCH] add content --- docs/src/docPages/getting-started.md | 14 +++++++++----- docs/src/layouts/App/base.scss | 5 +++++ 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/docs/src/docPages/getting-started.md b/docs/src/docPages/getting-started.md index 67fc6484..f00bb78d 100644 --- a/docs/src/docPages/getting-started.md +++ b/docs/src/docPages/getting-started.md @@ -1,6 +1,10 @@ # Getting started -tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages. To use tiptap with Vue.js (or Nuxt.js), you’ll need the tiptap Vue.js adapter. You can install it as an dependency in your project: +tiptap is framework-agnostic and works with Vue.js and React. It even works with plain JavaScript, if that’s your thing. To keep everything as small as possible, we put the code to use tiptap with those frameworks in different packages. + +## Use tiptap with Vue.js + +We assume you already have a Vue.js (or Nuxt.js) project. To use tiptap in that project, you are going to need the tiptap Vue.js adapter. You can install tiptap and the adapter as a dependency in your project: ```bash # Install Vue.js adapter with npm @@ -10,17 +14,17 @@ npm install @tiptap/core @tiptap/starter-kit @tiptap/vue yarn add @tiptap/core @tiptap/starter-kit @tiptap/vue ``` -Now you have got everything in place to add tiptap to your Vue.js project. +Cool, you have got everything in place to setup tiptap! 🙌 ## Create a new component -Create a new Vue component (e. g. ``) and add the following content. That is the shortest way to get tiptap up and running with Vue.js. It’s a pretty basic version of tiptap but no worries, you will be able to add more functionality soon. +Create a new Vue component (e. g. ``) and add the following content. That is the fastest way to get tiptap up and running with Vue.js. This will give you a very basic version of tiptap, without any buttons. No worries, you will be able to add more functionality soon. -Does that work for you? There are a few common pitfalls here, depending on your setup. If you have trouble getting started, try to read the related links down here. +> **Doesn’t work for you?** There are a few common pitfalls here, depending on your setup. If you have trouble getting started, try to read the related links down here. -Otherwise: Congrats! You’ve got it! Let’s start with the confiuration in the next step. +Congrats! You’ve got it! 🎉 Let’s start with the configuration in the next step. ### Related links diff --git a/docs/src/layouts/App/base.scss b/docs/src/layouts/App/base.scss index f9e508ab..c4c5dbab 100644 --- a/docs/src/layouts/App/base.scss +++ b/docs/src/layouts/App/base.scss @@ -85,6 +85,11 @@ code { font-size: 0.9rem; } +blockquote { + padding-left: 1rem; + border-left: 3px solid rgba($colorBlack, 0.1); +} + .is-active { background: black; color: white;