Merge pull request #187 from enzonotario/feature/update-vitepress-openapi

Update vitepress-openapi && Bruno code samples

Author: justserdar

bun.lockb

@@ -39,7 +39,7 @@ const props = defineProps<{
 // Generate service tabs from compose configuration
 const serviceTabs = computed(() => {
   if (!props.compose?.services) return []
-  
+
   return Object.entries(props.compose.services).map(([serviceName, config]) => ({
     title: `${serviceName} Configuration`,
     content: {
@@ -81,8 +81,8 @@ const setActiveTab = (index: number) => {
 
 type Direction = 'next' | 'prev'
 const navigateTab = (direction: Direction) => {
-  const newIndex = direction === 'next' 
-    ? (currentIndex.value + 1) % allTabs.value.length 
+  const newIndex = direction === 'next'
+    ? (currentIndex.value + 1) % allTabs.value.length
     : (currentIndex.value - 1 + allTabs.value.length) % allTabs.value.length
   setActiveTab(newIndex)
 }
@@ -97,7 +97,7 @@ const isLastTab = computed(() => currentIndex.value === allTabs.value.length - 1
 <template>
   <div class="tabs-container">
     <div class="tabs-navigation">
-      <button 
+      <button
         class="group nav-arrow"
         @click="navigateTab('prev')"
         aria-label="Previous tab"
@@ -117,7 +117,7 @@ const isLastTab = computed(() => currentIndex.value === allTabs.value.length - 1
         </button>
       </div>
 
-      <button 
+      <button
         class="group nav-arrow"
         @click="navigateTab('next')"
         aria-label="Next tab"
@@ -138,12 +138,12 @@ const isLastTab = computed(() => currentIndex.value === allTabs.value.length - 1
               <h3 class="text-lg font-medium">{{ tab.content.service.name }}</h3>
               <code class="text-sm block mt-2">Image: {{ tab.content.service.image }}</code>
             </div>
-            
+
             <div class="env-vars">
               <h4 class="font-medium mb-3">Environment Variables</h4>
               <ul class="env-list space-y-2">
-                <li v-for="env in tab.content.service.envVars" 
-                    :key="env.name" 
+                <li v-for="env in tab.content.service.envVars"
+                    :key="env.name"
                     class="env-var flex items-start gap-2">
                   <code class="text-sm px-2 py-1 bg-[var(--vp-c-bg-soft)] rounded shrink-0 text-[var(--vp-c-text-2)]">{{ env.name }}</code>
                   <span v-if="env.value" class="text-sm text-[var(--vp-c-text-2)]">
@@ -161,12 +161,12 @@ const isLastTab = computed(() => currentIndex.value === allTabs.value.length - 1
             <h4 v-if="tab.content.subtitle" class="font-medium text-lg">{{ tab.content.subtitle }}</h4>
 
             <ul v-if="tab.content.items" class="space-y-2">
-              <li v-for="(item, itemIndex) in tab.content.items" 
+              <li v-for="(item, itemIndex) in tab.content.items"
                   :key="itemIndex"
                   class="flex items-center gap-2">
                 <template v-if="item.icon && item.label">
                   <span class="text-lg">{{ item.icon }}</span>
-                  <span class="font-mono font-medium">{{ item.label }}:</span> 
+                  <span class="font-mono font-medium">{{ item.label }}:</span>
                   <span>{{ item.value }}</span>
                 </template>
                 <template v-else-if="item.code">
@@ -192,7 +192,7 @@ const isLastTab = computed(() => currentIndex.value === allTabs.value.length - 1
     </div>
   </div>
 </template>
-<style>
+<style scoped>
 .tabs-container {
   @apply my-6;
 }

docs/.vitepress/theme/components/TabBlock.vue

@@ -3,7 +3,7 @@
 import type { Theme } from "vitepress";
 
 // Import OpenAPI components
-import { theme, useOpenapi } from "vitepress-openapi";
+import { theme, useOpenapi } from "vitepress-openapi/client";
 
 // Import default theme
 import DefaultTheme from "vitepress/theme";

docs/.vitepress/theme/index.ts

@@ -7,56 +7,56 @@ toc: false
 
 <script setup lang="ts">
 import { useData } from 'vitepress'
-import { useTheme, generateCodeSample } from 'vitepress-openapi'
+import { useTheme, generateCodeSample } from 'vitepress-openapi/client'
 
-const { params, isDark } = useData()
+const { params } = useData()
 const operation = params.value.operation
 
 const themeConfig = {
     codeSamples: {
         langs: [
-            // 'bruno',
+            'bruno',
             ...useTheme().getCodeSamplesLangs(),
         ],
         availableLanguages: [
-            // {
-            //     lang: 'bruno',
-            //     label: 'Bruno',
-            //     highlighter: 'plaintext',
-            // },
+            {
+                lang: 'bruno',
+                label: 'Bruno',
+                highlighter: 'plaintext',
+            },
             ...useTheme().getCodeSamplesAvailableLanguages(),
         ],
-        defaultLang: 'curl',
-        generator: (lang, request) => {
-            // if (lang === 'bruno') {
-            //     return generateBrunoRequest(request) || ''
-            // }
+        defaultLang: 'bruno',
+        generator: async (lang, request) => {
+            if (lang === 'bruno') {
+                return generateBrunoRequest(request) || ''
+            }
             return generateCodeSample(lang, request) || ''
         },
     }
 }
 
-// function generateBrunoRequest(request) {
-//     if (!request) return ''
-//     const { method, url, headers, body } = request
-//     let brunoScript = `${method} ${url}\n`
+function generateBrunoRequest(request) {
+    if (!request) return ''
+    const { method, url, headers, body } = request
+    let brunoScript = `${method} ${url}\n`
 
-//     if (headers && Object.keys(headers).length) {
-//         brunoScript += '\nHeaders\n'
-//         for (const [key, value] of Object.entries(headers)) {
-//             brunoScript += `${key}: ${value}\n`
-//         }
-//     }
+    if (headers && Object.keys(headers).length) {
+        brunoScript += '\nHeaders\n'
+        for (const [key, value] of Object.entries(headers)) {
+            brunoScript += `${key}: ${value}\n`
+        }
+    }
 
-//     if (body) {
-//         brunoScript += '\nBody\n'
-//         brunoScript += typeof body === 'string' ? body : JSON.stringify(body, null, 2)
-//     }
+    if (body) {
+        brunoScript += '\nBody\n'
+        brunoScript += typeof body === 'string' ? body : JSON.stringify(body, null, 2)
+    }
 
-//     return brunoScript
-// }
+    return brunoScript
+}
 
 useTheme(themeConfig)
 </script>
 
-<OAOperation :operationId="operation" :isDark="isDark" />
+<OAOperation :operationId="operation" />

docs/api-reference/api/operations/[operation].md

@@ -34,6 +34,6 @@
   "dependencies": {
     "@vueuse/core": "12.5.0",
     "globe.gl": "2.39.7",
-    "vitepress-openapi": "0.0.3-alpha.55"
+    "vitepress-openapi": "0.0.3-alpha.62"
   }
-}
+}