From c223f18887e26dfeba8a14ea275ca68bc780162d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= <kontakt@philipp-kuehn.com>
Date: Tue, 2 Feb 2021 23:11:52 +0100
Subject: [PATCH] add some styling

---
 docs/src/components/Demo/index.vue        |   3 +-
 docs/src/components/FeatureItem/index.vue |  22 ++++
 docs/src/components/FeatureList/index.vue |  19 ++++
 docs/src/components/Prism/index.vue       |   7 +-
 docs/src/pages/index.vue                  | 130 ++++++++++++++++------
 5 files changed, 142 insertions(+), 39 deletions(-)
 create mode 100644 docs/src/components/FeatureItem/index.vue
 create mode 100644 docs/src/components/FeatureList/index.vue

diff --git a/docs/src/components/Demo/index.vue b/docs/src/components/Demo/index.vue
index b43c3df1..4377655b 100644
--- a/docs/src/components/Demo/index.vue
+++ b/docs/src/components/Demo/index.vue
@@ -16,7 +16,8 @@
           </button>
         </div>
         <div class="demo__code" v-if="activeFile" :key="activeFile.path">
-          <prism :code="activeFile.content" :language="activeFile.highlight" :highlight="highlight" />
+          <!-- eslint-disable-next-line -->
+          <prism :language="activeFile.highlight" :highlight="highlight">{{ activeFile.content }}</prism>
         </div>
       </div>
       <div class="demo__meta">
diff --git a/docs/src/components/FeatureItem/index.vue b/docs/src/components/FeatureItem/index.vue
new file mode 100644
index 00000000..debe7fa3
--- /dev/null
+++ b/docs/src/components/FeatureItem/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="feature-item text">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feature-item {
+  break-inside: avoid-column;
+  background-color: rgba($colorBlack, 0.03);
+  border-radius: 0.75rem;
+  padding: 1.5rem;
+  margin-bottom: 1rem;
+}
+</style>
diff --git a/docs/src/components/FeatureList/index.vue b/docs/src/components/FeatureList/index.vue
new file mode 100644
index 00000000..b19950f2
--- /dev/null
+++ b/docs/src/components/FeatureList/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div class="feature-list">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.feature-list {
+  column-count: 2;
+  column-gap: 1rem;
+}
+</style>
diff --git a/docs/src/components/Prism/index.vue b/docs/src/components/Prism/index.vue
index 8c336bbc..581ced2d 100644
--- a/docs/src/components/Prism/index.vue
+++ b/docs/src/components/Prism/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <pre :class="`language-${language}`" :data-line="highlight"><code :class="`language-${language}`">{{ code }}</code></pre>
+  <pre :class="`language-${language}`" :data-line="highlight"><code :class="`language-${language}`"><slot /></code></pre>
 </template>
 
 <script>
@@ -14,11 +14,6 @@ export default {
       type: String,
     },
 
-    code: {
-      default: null,
-      type: String,
-    },
-
     highlight: {
       type: String,
       default: null,
diff --git a/docs/src/pages/index.vue b/docs/src/pages/index.vue
index 0492e9fe..5fa8a608 100644
--- a/docs/src/pages/index.vue
+++ b/docs/src/pages/index.vue
@@ -18,45 +18,101 @@
       <demo name="Examples/CollaborativeEditing" inline />
     </app-section>
 
+    <app-section>
+      <feature-list>
+        <feature-item>
+          <h3 class="is-h2">
+            Headless
+          </h3>
+          <p>
+            We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
+          </p>
+          <p>
+            <g-link to="/guide/styling">
+              Styling
+            </g-link>
+          </p>
+        </feature-item>
+
+        <feature-item>
+          <h3 class="is-h2">
+            Framework-agnostic
+          </h3>
+          <p>
+            No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in <g-link to="/guide/getting-started/react">
+              React
+            </g-link>, Svelte and others.
+          </p>
+          <p>
+            <g-link to="/overview/installation">
+              Installation
+            </g-link>
+          </p>
+        </feature-item>
+
+        <feature-item>
+          <h3 class="is-h2">
+            TypeScript
+          </h3>
+          <p>
+            tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
+          </p>
+          <p>
+            <g-link to="/guide/typescript">
+              TypeScript
+            </g-link>
+          </p>
+        </feature-item>
+
+        <feature-item>
+          <h3 class="is-h2">
+            Collaborative
+          </h3>
+          <p>
+            Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of <g-link to="https://github.com/yjs/yjs">
+              Y.js
+            </g-link>. Our production-grade setup requires less than 20 lines of code.
+          </p>
+          <p>
+            <g-link to="/guide/collaborative-editing">
+              Collaborative editing
+            </g-link>
+          </p>
+        </feature-item>
+
+        <feature-item>
+          <h3 class="is-h2">
+            Community
+          </h3>
+          <p>
+            Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
+          </p>
+        </feature-item>
+      </feature-list>
+    </app-section>
+
     <app-section>
       <div class="text">
         <h2 class="is-h1">
-          Features
+          Quickstart
         </h2>
-
-        <h3>
-          Headless
-        </h3>
         <p>
-          We don’t tell you what a menu should look like or where it should be rendered in the DOM. That’s why tiptap is headless and comes without any CSS. You are in full control over markup, styling and behaviour.
+          To pull in tiptap for quick demos or giving it just a spin, grab the latest build via CDN. We use two different provides:
         </p>
+<!-- eslint-disable -->
+<prism>import { Editor } from '@tiptap/core'
+import { defaultExtensions } from '@tiptap/starter-kit'
 
-        <h3>
-          Framework-agnostic
-        </h3>
+new Editor({
+  element: document.querySelector('.element'),
+  extensions: defaultExtensions(),
+  content: '&lt;p&gt;Your content.&lt;/p&gt;',
+})</prism>
+        <!-- eslint-enable -->
         <p>
-          No matter what framework you use, you’ll enjoy tiptap. Out of the box, it works with plain JavaScript and Vue.js, but it’s also possible to use it in [React](/guide/getting-started/react), Svelte and others.
-        </p>
-
-        <h3>
-          TypeScript
-        </h3>
-        <p>
-          tiptap 2 is written in TypeScript. That helps us to find bugs early and gives you a nice autocomplete for the API (if your IDE supports that) on top of the extensive human written documentation.
-        </p>
-
-        <h3>
-          Collaborative
-        </h3>
-        <p>
-          Real-time collaboration, syncing between different devices and working offline used to be hard. We provide everything you need to keep everything in sync, conflict-free with the power of [Y.js](https://github.com/yjs/yjs). Our production-grade setup requires less than 20 lines of code.
-        </p>
-
-        <h3>
-          Community
-        </h3>
-        <p>
-          Over the years, a lovely community has grown around tiptap. There’s so much content shared, so many people helping out in issues and a ton of community extensions, you’ll be surprised how much that can help.
+          <g-link to="/overview/installation">
+            Learn more
+          </g-link>
         </p>
       </div>
     </app-section>
@@ -87,7 +143,11 @@
           License
         </h2>
         <p>
-          tiptap is licensed under [MIT](https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md), so you’re free to do whatever you want. If you’re using it in production, do the right thing and [become one of our wonderful sponsors](/sponsor) to fund the development, maintenance and support of tiptap and the whole ecosystem.
+          tiptap is licensed under <g-link to="https://github.com/ueberdosis/tiptap-next/blob/main/LICENSE.md">
+            MIT
+          </g-link>, so you’re free to do whatever you want. If you’re using it in production, do the right thing and <g-link to="/sponsor">
+            become one of our wonderful sponsors
+          </g-link>(/sponsor) to fund the development, maintenance and support of tiptap and the whole ecosystem.
         </p>
       </div>
     </app-section>
@@ -96,10 +156,16 @@
 
 <script>
 import AppSection from '@/components/AppSection'
+import FeatureList from '@/components/FeatureList'
+import FeatureItem from '@/components/FeatureItem'
+import Prism from '~/components/Prism'
 
 export default {
   components: {
     AppSection,
+    FeatureList,
+    FeatureItem,
+    Prism,
   },
 }
 </script>