docs: add BannerMessage component

docs/src/components/BannerMessage/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <g-link :class="`banner-message banner-message--${color}`" :to="to">
+    <slot />
+  </g-link>
+</template>
+
+<script>
+export default {
+  props: {
+    to: {
+      type: String,
+      required: true,
+    },
+
+    color: {
+      type: String,
+      default: 'black',
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.banner-message {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+  padding: 0.65rem 1rem;
+  font-size: 0.85rem;
+  font-weight: 500;
+
+  &--black {
+    background-color: $colorBlack;
+    color: $colorWhite;
+  }
+
+  &--yellow {
+    background-color: $colorYellow;
+    color: $colorBlack;
+  }
+}
+</style>

docs/src/layouts/App/index.vue

@@ -1,6 +1,14 @@
 <template>
   <div class="app">
     <div class="app__navigation">
+      <banner-message
+        to="https://www.tiptap.dev/"
+        v-if="$route.name === 'home'"
+        color="black"
+      >
+        You’re browsing the documentation for v2.x. Click here for v1.x documentation →
+      </banner-message>
+
       <div class="app__top-bar">
         <g-link class="app__logo" to="/">
           <img src="~@/assets/images/logo.svg">
@@ -124,6 +132,7 @@ query {
 import linkGroups from '@/links.yaml'
 import Icon from '@/components/Icon'
 import PageFooter from '@/components/PageFooter'
+import BannerMessage from '@/components/BannerMessage'
 // import GithubButton from 'vue-github-button'
 
 export default {
@@ -137,6 +146,7 @@ export default {
   components: {
     Icon,
     PageFooter,
+    BannerMessage,
     // GithubButton,
   },