add buttons

docs/src/assets/icons/arrow-right.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9393 3.93934C13.5251 3.35355 14.4749 3.35355 15.0607 3.93934L22.0607 10.9393C22.6464 11.5251 22.6464 12.4749 22.0607 13.0607L15.0607 20.0607C14.4749 20.6464 13.5251 20.6464 12.9393 20.0607C12.3536 19.4749 12.3536 18.5251 12.9393 17.9393L17.3787 13.5H3C2.17157 13.5 1.5 12.8284 1.5 12C1.5 11.1716 2.17157 10.5 3 10.5H17.3787L12.9393 6.06066C12.3536 5.47487 12.3536 4.52513 12.9393 3.93934Z" fill="black"/>
+</svg>

docs/src/components/Btn/index.vue

@@ -0,0 +1,73 @@
+<template>
+  <component :is="tag" v-bind="props" :class="`btn btn--${type}`">
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'before'"
+    />
+    <span class="btn__text">
+      <slot />
+    </span>
+    <icon
+      class="btn__icon"
+      :name="icon"
+      v-if="icon && iconPosition === 'after'"
+    />
+  </component>
+</template>
+
+<script>
+import Icon from '~/components/Icon'
+
+export default {
+  components: {
+    Icon,
+  },
+
+  props: {
+    to: {
+      default: null,
+      type: String,
+    },
+
+    type: {
+      default: 'primary',
+      type: String,
+    },
+
+    icon: {
+      type: String,
+      default: null,
+    },
+
+    iconPosition: {
+      type: String,
+      default: 'after',
+    },
+  },
+
+  computed: {
+    tag() {
+      if (this.to) {
+        return 'g-link'
+      }
+
+      return 'button'
+    },
+
+    props() {
+      if (this.to) {
+        return {
+          to: this.to,
+        }
+      }
+
+      return {
+        type: 'button',
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" src="./style.scss"></style>

docs/src/components/Btn/style.scss

@@ -0,0 +1,58 @@
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 12px;
+  font-weight: 700;
+  margin-left: 0.75rem;
+  padding: 0.8rem 1rem;
+  font-size: 1rem;
+  text-align: center;
+  line-height: 1;
+  text-decoration: none;
+
+  white-space: nowrap;
+
+  &--primary {
+    background-color: $colorBlack;
+    color: $colorWhite;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorWhite;
+    }
+  }
+
+  &--secondary {
+    background-color: $colorWhite;
+    color: $colorBlack;
+    border: 3px solid $colorBlack;
+
+    &:hover {
+      color: $colorBlack;
+    }
+  }
+
+  &--tertiary {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &--tertiary &__icon {
+    opacity: 0.5;
+  }
+
+  &:first-child {
+    margin-left: 0;
+  }
+
+  &__icon {
+    &:first-child {
+      margin-right: 0.5rem;
+    }
+
+    &:last-child {
+      margin-left: 0.5rem;
+    }
+  }
+}

docs/src/components/Icon/style.scss

@@ -1,7 +1,7 @@
 .icon {
   display: inline-flex;
-  width: 1.2rem;
+  width: 1rem;
-  height: 1.2rem;
+  height: 1rem;
 
   &::v-deep > svg {
     width: 100%;

docs/src/pages/index.vue

@@ -8,14 +8,19 @@
         <p class="is-large">
           tiptap gives you full control about every single aspect of your text editor experience. It’s customizable, comes with a ton of extensions, is open-source, has an extensive documentation, and is simply a joy to use. Join our welcoming community and start building cool things! It’s free.
         </p>
-        <p>
+        <div>
-          <g-link to="/overview/installation">
+          <btn type="primary" icon="arrow-right" to="/overview/installation">
             Get Started
-          </g-link>
+          </btn>
-          <g-link to="https://github.com/ueberdosis/tiptap-next">
+          <btn
+            type="secondary"
+            icon="github"
+            icon-position="before"
+            to="https://github.com/ueberdosis/tiptap-next"
+          >
             View on GitHub
-          </g-link>
+          </btn>
-        </p>
+        </div>
       </div>
     </app-section>
 
@@ -32,11 +37,11 @@
           <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>
+          <div>
-            <g-link to="/guide/styling">
+            <btn type="tertiary" icon="arrow-right" to="/guide/styling">
               Styling
-            </g-link>
+            </btn>
-          </p>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -48,11 +53,11 @@
               React
             </g-link>, Svelte and others.
           </p>
-          <p>
+          <div>
-            <g-link to="/overview/installation">
+            <btn type="tertiary" icon="arrow-right" to="/overview/installation">
               Installation
-            </g-link>
+            </btn>
-          </p>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -62,11 +67,11 @@
           <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>
+          <div>
-            <g-link to="/guide/typescript">
+            <btn type="tertiary" icon="arrow-right" to="/guide/typescript">
               TypeScript
-            </g-link>
+            </btn>
-          </p>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -78,11 +83,11 @@
               Y.js
             </g-link>. Our production-grade setup requires less than 20 lines of code.
           </p>
-          <p>
+          <div>
-            <g-link to="/guide/collaborative-editing">
+            <btn type="tertiary" icon="arrow-right" to="/guide/collaborative-editing">
               Collaborative editing
-            </g-link>
+            </btn>
-          </p>
+          </div>
         </feature-item>
 
         <feature-item>
@@ -126,11 +131,11 @@
 &lt;/body&gt;
 &lt;/html&gt;</prism>
         <!-- eslint-enable -->
-        <p>
+        <div>
-          <g-link to="/overview/installation">
+          <btn type="secondary" icon="arrow-right" to="/overview/installation">
             Learn More
-          </g-link>
+          </btn>
-        </p>
+        </div>
       </div>
     </app-section>
 
@@ -186,11 +191,11 @@
             to="https://www.scrumpy.io"
           /> -->
         </logo-list>
-        <p>
+        <div>
-          <g-link to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
+          <btn type="secondary" icon="arrow-right" to="https://github.com/ueberdosis/tiptap/network/dependents?package_id=UGFja2FnZS0xMzE5OTg0ODc%3D">
             And Many More
-          </g-link>
+          </btn>
-        </p>
+        </div>
       </div>
     </app-section>
 
@@ -216,6 +221,7 @@ import FeatureItem from '@/components/FeatureItem'
 import LogoList from '@/components/LogoList'
 import LogoItem from '@/components/LogoItem'
 import Prism from '~/components/Prism'
+import Btn from '~/components/Btn'
 
 export default {
   components: {
@@ -225,6 +231,7 @@ export default {
     LogoList,
     LogoItem,
     Prism,
+    Btn,
   },
 
   metaInfo() {