feat: initial openapi page with imported api spec

docs/.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { fileURLToPath, URL } from 'node:url'
+import yaml from 'vite-plugin-yaml'
 import { defineConfig } from 'vitepress'
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -344,6 +345,8 @@ export default defineConfig({
   rewrites: {},
 
   vite: {
+    plugins: [yaml as any],
+    assetsInclude: ['**/*.yml'],
     resolve: {
       alias: [
         {

docs/.vitepress/theme/components/Landing/Globe.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="globeContainer" class="absolute -top-20 w-full h-[500px] pointer-events-none"></div>
+  <div ref="globeContainer" class="absolute -top-32 w-full h-[500px] pointer-events-none"></div>
 </template>
 
 <script setup lang="ts">

docs/.vitepress/theme/components/Landing/Referral.vue

@@ -1,8 +1,5 @@
 <template>
-    <div class="relative flex flex-col gap-4 max-w-md">
-        <div class="flex flex-row gap-2 z-10">
-            <VPBadge text="For Coolify Cloud and Self Host" />
-        </div>
+    <div class="relative flex flex-col gap-4 max-w-lg">
         <div class="flex flex-row gap-2 z-10">
             <h3 class="text-2xl font-bold tracking-wide">{{ referralTitle }}</h3>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 181.42 22.24" class="w-auto size-3 my-auto mr-0 ml-auto">
@@ -98,7 +95,7 @@
                 <path fill="#77B255" d="M31.999 13L36 7.999L33 6z" />
             </svg>
             <span :class="{ 'ml-2': isCopied }" class="my-auto">
-                {{ !isCopied ? referralDescription : 'Copied to clipboard!' }}
+                {{ !isCopied ? '' : 'Copied to clipboard!' }}
             </span>
         </p>
         <ClientOnly>

docs/.vitepress/theme/index.ts

@@ -1,37 +1,47 @@
 // https://vitepress.dev/guide/custom-theme
-import { h } from 'vue'
-import type { Theme } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import './style.css'
-import './tailwind.postcss'
-import Card from './components/Card.vue'
-import CardGroup from './components/CardGroup.vue'
-import Landing from './layouts/Landing.vue'
-import Sections from './components/Landing/Sections.vue'
-import Features from './components/Landing/Features.vue'
-import Installer from './components/Landing/Installer.vue'
-import Referral from './components/Landing/Referral.vue'
-import Callout from './components/Callout.vue'
-import TabBlock from './components/TabBlock.vue'
-import ZoomableImage from './components/ZoomableImage.vue'
-import Globe from './components/Landing/Globe.vue'
-import Browser from './components/Landing/Browser.vue'
+import type { Theme } from "vitepress";
+import { theme, useOpenapi } from "vitepress-openapi";
+import DefaultTheme from "vitepress/theme";
+import "./style.css";
+import "./tailwind.postcss";
+import "vitepress-openapi/dist/style.css";
+import Card from "./components/Card.vue";
+import CardGroup from "./components/CardGroup.vue";
+import Landing from "./layouts/Landing.vue";
+import Sections from "./components/Landing/Sections.vue";
+import Features from "./components/Landing/Features.vue";
+import Installer from "./components/Landing/Installer.vue";
+import Referral from "./components/Landing/Referral.vue";
+import Callout from "./components/Callout.vue";
+import TabBlock from "./components/TabBlock.vue";
+import ZoomableImage from "./components/ZoomableImage.vue";
+import Globe from "./components/Landing/Globe.vue";
+import Browser from "./components/Landing/Browser.vue";
+import { load } from 'js-yaml'
+import rawSpec from '/openapi.yml?raw'
 
 export default {
   extends: DefaultTheme,
   Layout: Landing,
   enhanceApp({ app, router, siteData }) {
-    // register your custom global components
-    app.component('Card', Card)
-    app.component('CardGroup', CardGroup)
-    app.component('LandingSection', Sections)
-    app.component('LandingFeatures', Features)
-    app.component('Referral', Referral)
-    app.component('Quickstart', Installer)
-    app.component('Callout', Callout)
-    app.component('TabBlock', TabBlock)
-    app.component('ZoomableImage', ZoomableImage)
-    app.component('Globe', Globe)
-    app.component('Browser', Browser)
-  }
-} satisfies Theme
+    const spec = load(rawSpec)
+    const openapi = useOpenapi({
+      spec,
+      base: "/docs/api-reference/api/overview/",
+      label: "API",
+    });
+    // Use theme.enhanceApp with both app and openapi
+    theme.enhanceApp({ app, openapi });
+    app.component("Card", Card);
+    app.component("CardGroup", CardGroup);
+    app.component("LandingSection", Sections);
+    app.component("LandingFeatures", Features);
+    app.component("Referral", Referral);
+    app.component("Quickstart", Installer);
+    app.component("Callout", Callout);
+    app.component("TabBlock", TabBlock);
+    app.component("ZoomableImage", ZoomableImage);
+    app.component("Globe", Globe);
+    app.component("Browser", Browser);
+  },
+} satisfies Theme;

docs/api-reference/api/overview.md

@@ -1,6 +1,99 @@
 ---
-title: "API"
+aside: false
+outline: false
+title: API
+toc: false
 ---
 
-# API Overiew
+<script setup lang="ts">
+import { useData } from 'vitepress'
+import { useTheme, generateCodeSample } from 'vitepress-openapi'
+
+const { isDark } = useData()
+
+useTheme({
+    codeSamples: {
+        // List of languages to show in Code Samples section.
+        langs: [
+            'bruno',
+            ...useTheme().getCodeSamplesLangs(),
+        ],
+        // List of available languages to select from.
+        availableLanguages: [
+            {
+                lang: 'bruno',
+                label: 'Bruno',
+                highlighter: 'plaintext',
+            },
+            ...useTheme().getCodeSamplesAvailableLanguages(),
+        ],
+        defaultLang: 'bruno',
+        generator: (lang, request) => {
+            if (lang === 'bruno') {
+                return generateBruRequest(request)
+            }
+
+            return generateCodeSample(lang, request)
+        },
+    },
+})
+
+function generateBruRequest(request) {
+  const { url, method, headers, body, query } = request;
+
+  const methodLower = method.toLowerCase();
+
+  const queryString = query && Object.keys(query).length
+    ? `${url}?${new URLSearchParams(query).toString()}`
+    : url;
+
+  const headersSection = headers && Object.keys(headers).length
+    ? `headers {\n${Object.entries(headers)
+        .map(([key, value]) => `  ${key}: ${value}`)
+        .join('\n')}\n}`
+    : '';
+
+  const bodySection = body
+    ? `body {\n  ${JSON.stringify(body, null, 2).replace(/\n/g, '\n  ')}\n}`
+    : '';
+
+  const bruRequest = `${methodLower} {
+  url: ${queryString}
+}
+
+${headersSection}
+
+${bodySection}
+`;
+
+  return bruRequest
+        .trim()
+        .replace(/\n{2,}/g, '\n\n') // Remove extra newlines
+}
+</script>
+
+<style>
+:deep(.vp-doc a),
+:deep([openapi] a),
+:deep(a.grid) {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+
+:deep(.vp-doc a:hover),
+:deep([openapi] a:hover),
+:deep(a.grid:hover) {
+  color: var(--vp-c-brand-1);
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+
+/* Additional specific override for grid links */
+:deep(a.grid.items-center) {
+  border-bottom: none !important;
+  text-decoration: none !important;
+}
+</style>
+
+<OASpec :isDark="isDark" />
 

env.d.ts

@@ -0,0 +1,14 @@
+declare module "*.yml" {
+  const content: any;
+  export default content;
+}
+
+declare module "*?url" {
+  const content: string;
+  export default content;
+}
+
+declare module '*?raw' {
+  const content: string
+  export default content
+}

package.json

@@ -10,6 +10,7 @@
     "postcss": "^8.4.20",
     "tailwindcss": "^3.2.4",
     "tsx": "^4.19.2",
+    "vite-plugin-yaml": "^1.0.5",
     "vitepress": "^1.5.0",
     "vue": "^3.5.13"
   },
@@ -28,6 +29,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^12.2.0",
-    "globe.gl": "^2.34.6"
+    "globe.gl": "^2.34.6",
+    "vitepress-openapi": "0.0.3-alpha.55"
   }
 }