Fix badge click, unify implementation

Author: chgeo

.vitepress/theme/components/Alpha.vue

@@ -1,8 +1,7 @@
 <template>
-  <Badge
+  <StatusBadge
     type="danger"
     text="Alpha"
     title="Alpha features are experimental. They may never be generally available. If released subsequently, the APIs and behavior might change."
-    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Beta.vue

@@ -1,8 +1,7 @@
 <template>
-  <Badge
+  <StatusBadge
     type="warning"
     text="Beta"
     title="Beta features are planned to be generally available in subsequent releases, however, APIs and their behavior are not final and may change in the general release."
-    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Concept.vue

@@ -1,8 +1,7 @@
 <template>
-  <Badge
+  <StatusBadge
     type="info"
     text="Concept"
     title="Concept features are ideas for potential future enhancements and an opportunity for you to give feedback. This is not a commitment to implement the feature though."
-    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Gamma.vue

@@ -1,8 +1,7 @@
 <template>
-  <Badge
+  <StatusBadge
     type="tip"
     text="Gamma"
     title="Gamma features are finalized and ready to use, stable, and supported long term. Yet, as they have a broad scope and range, you should ensure to test them thoroughly."
-    onclick="location = '../get-started/learning-sources#feature-status-badges'" style="cursor: pointer"
   />
 </template>

.vitepress/theme/components/Since.vue

@@ -1,8 +1,8 @@
 <template>
-  <Badge 
-    type="tip" 
-    :text="`Since ${of} ${version}`" 
-    :title="`This feature is only available as of ${of} version ${version} or higher.`" 
+  <StatusBadge
+    type="tip"
+    :text="`Since ${of} ${version}`"
+    :title="`This feature is only available as of ${of} version ${version} or higher.`"
   />
 </template>
 

.vitepress/theme/components/StatusBadge.vue

@@ -0,0 +1,17 @@
+<template>
+  <Badge
+    :type="type"
+    :text="text"
+    :title="title"
+    @click="click" style="cursor: pointer"
+  />
+</template>
+
+<script setup lang="ts">
+defineProps<{ type: string, text:string, title:string  }>()
+
+import { withBase } from 'vitepress'
+function click() {
+  location.href = withBase('../get-started/learning-sources#feature-status-badges')
+}
+</script>

.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { EnhanceAppContext } from 'vitepress';
 import Layout from './Layout.vue';
 import IndexList from './components/IndexList.vue';
 import ImplVariantsHint from './components/implvariants/ImpVariantsHint.vue';
+import StatusBadge from './components/StatusBadge.vue';
 import Alpha from './components/Alpha.vue';
 import Beta from './components/Beta.vue';
 import Gamma from './components/Gamma.vue';
@@ -26,6 +27,7 @@ export default {
     ctx.app.component('Config', CfgInspect)
     ctx.app.component('IndexList', IndexList)
     ctx.app.component('ImplVariantsHint', ImplVariantsHint)
+    ctx.app.component('StatusBadge', StatusBadge)
     ctx.app.component('Alpha', Alpha)
     ctx.app.component('Beta', Beta)
     ctx.app.component('Gamma', Gamma)