From 7064728c21b7c36ecc86178aac2012d3dd4b853a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtjs.com>
Date: Tue, 12 Oct 2021 14:11:34 +0200
Subject: [PATCH] chore(docs): add soon badges

---
 docs/components/organisms/SectionContentItem.vue | 7 ++++++-
 docs/content/index.md                            | 2 ++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/docs/components/organisms/SectionContentItem.vue b/docs/components/organisms/SectionContentItem.vue
index 38edd541bc..1f0517e3c4 100644
--- a/docs/components/organisms/SectionContentItem.vue
+++ b/docs/components/organisms/SectionContentItem.vue
@@ -13,8 +13,9 @@
     >
       <img loading="lazy" :src="image" :alt="`A ${title} image`">
     </InjectComponent>
-    <h3 class="mb-1 text-center text-body-lg lg:text-body-xl font-bold">
+    <h3 class="relative inline-flex mb-1 text-center text-body-lg items-center lg:text-body-xl font-bold">
       {{ title }}
+      <span v-if="soon" class="absolute -right-48px inline-flex items-center mt-1px px-1.5 py-0.5 rounded text-xs font-medium font-mono bg-cloud-surface dark:bg-sky-dark dark:text-white">soon</span>
     </h3>
     <p class="text-center text-sm lg:text-base mb-4">
       {{ description }}
@@ -35,6 +36,10 @@ export default defineComponent({
       type: String,
       default: ''
     },
+    soon: {
+      type: Boolean,
+      default: false
+    },
     hoverClass: {
       type: String,
       default: ''
diff --git a/docs/content/index.md b/docs/content/index.md
index 7ad9d00610..b5bc9cc2eb 100644
--- a/docs/content/index.md
+++ b/docs/content/index.md
@@ -53,6 +53,7 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
   ::
   ::section-content-item
   ---
+  soon: true
   title: Hybrid
   description: 'Incremental Static Generation and other advanced modes are now possible.'
   image: IconHybrid
@@ -85,6 +86,7 @@ Nuxt 3 has been re-architected with a smaller core and optimized for faster perf
   ::
   ::section-content-item
   ---
+  soon: true
   title: Nuxt Devtools
   description: 'Work faster with info and quick fixes right in the browser.'
   image: IconDevtools