feat: create code switcher tab

components/content/ContentSwitcher.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+defineProps<{
+  items: ContentSwitcherItem[];
+}>();
+
+const selectedIndex = ref(0);
+
+function onTabChange(index: number) {
+  selectedIndex.value = index;
+}
+const route = useRoute();
+</script>
+
+<template>
+  <div>
+    <UTabs
+      :items="items"
+      :ui="{ list: { width: 'w-auto' } }"
+      @change="onTabChange"
+    />
+    <div
+      v-for="(item, index) in items"
+      v-show="selectedIndex === index"
+      :key="item.partial"
+    >
+      <ContentQuery
+        v-slot="{ data }"
+        :path="$route.path"
+        find="one"
+        :where="{ _partial: true, _path: { $icontains: item.partial } }"
+      >
+        <ContentRenderer :value="data" />
+      </ContentQuery>
+    </div>
+    <UDivider />
+  </div>
+</template>

components/content/DisplayPartial.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+defineProps<{
+  partial: string;
+}>();
+</script>
+
+<template>
+  <ContentQuery
+    v-slot="{ data }"
+    path="_partials"
+    find="one"
+    :where="{ _partial: true, title: { $icontains: partial } }"
+  >
+    <ContentRenderer :value="data" />
+  </ContentQuery>
+</template>

content/10.getting-started/1.index.md

@@ -8,6 +8,18 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h
 premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in
 minutes.
 
+::content-switcher
+---
+items: [{
+  label: 'HardHat',
+  partial: '_getting-started/_aPartial'
+}, {
+  label: 'Forge',
+  partial: '_getting-started/_anotherpartial'
+}]
+---
+::
+
 There are already many websites based on this template:
 
 - [Nuxt](https://nuxt.com) - The Nuxt website
@@ -17,6 +29,12 @@ There are already many websites based on this template:
 - [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
 - [Nuxt Studio](https://nuxt.studio) - The pro version of Nuxt Content
 
+::display-partial
+---
+partial: 'Setting up your wallet'
+---
+::
+
 ## Features
 
 - Powered by [Nuxt 3](https://nuxt.com)

content/10.getting-started/_getting-started/_aPartial.md

@@ -0,0 +1,5 @@
+---
+title: A Partial
+---
+
+This is a partial that's coming from somewhere else!

content/10.getting-started/_getting-started/_anotherPartial.md

@@ -0,0 +1,5 @@
+---
+title: Another Partial
+---
+
+This is the second partial

content/_partials/setting-up-your-wallet.md

@@ -0,0 +1,9 @@
+---
+title: Setting up your wallet
+---
+
+Here's how to setup your wallet, follow the instructions below:
+
+1. Download wallet
+2. ???
+3. Profit

types/CodeSwitcher.d.ts

@@ -0,0 +1,14 @@
+declare interface ContentSwitcherItem {
+  /**
+   * The label to display on the tab
+   */
+  label: string;
+  /**
+   * The general path to the partial that is relative to the parent markdown.
+   *
+   * Example:
+   *
+   * "_getting-started/_aPartial" => `_getting-started/_aPartial.md`
+   */
+  partial: string;
+}