Added chapter labels

Author: DariuszDepta

.vitepress/theme/components/ChapterLabel.vue

@@ -0,0 +1,25 @@
+<script setup>
+defineProps({
+  label: {
+    type: String
+  }
+})
+</script>
+
+<template>
+  <span class="chapter-label">{{ label }}</span>
+</template>
+
+<style scoped>
+.chapter-label {
+  display: inline-block;
+  color: white;
+  background-color: #7954FF;
+  border: none;
+  padding: 0 10px 2px 8px;
+  border-radius: 12px;
+  user-select: none;
+  margin-bottom: 20px;
+  font-size: 0.9em;
+}
+</style>

.vitepress/theme/index.ts

@@ -1,7 +1,11 @@
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
+import ChapterLabel from './components/ChapterLabel.vue'
 import './style.css'
 
 export default {
     extends: DefaultTheme,
+    enhanceApp({ app }) {
+        app.component('ChapterLabel', ChapterLabel)
+    }
 } satisfies Theme

pages/guide/cosmwasm-core/introduction.md

@@ -1,3 +1,5 @@
+<ChapterLabel label="core"></ChapterLabel>
+
 # Introduction
 
 This chapter will give you an overview over CosmWasm from a contract developer perspective, its