Is it possible to add vitepress-openapi to an existing Vitepress site as a menu item

What would you like?

Vitepress-openapi is beautiful. I have a doc site already, and I would like to add the vitepress-openapi docs as a menu item on my top navigation menu.

CleanShot 2024-10-06 at 17 49 51@2x

Why is this needed?

There is often a lot of material besides the openapi specification that one needs for documentation. I'd like to be able to include the openapi site within another site to keep everything together.

How could it be implemented?

I'm not knowledgeable enough to know. Right now I am embedding openapi-explorer in a simple layout: page page associated with the menu item:

---
layout: page
sidebar: false
---
<script setup>
  import 'openapi-explorer/dist/es/openapi-explorer.js';
  import { useData } from 'vitepress'
  const { isDark, theme, page, frontmatter } = useData()
</script>

<Clientonly>
  <openapi-explorer
    v-if = isDark
    spec-url = "/adm-spec.yaml"
    hide-console = true
    hide-authentication = true
    hide-server-selection = true
    hide-components = false
    nav-bg-color = #1b1b1f
    secondary-color = #F8F8F5
    nav-hover-text-color = #85bd4f
    bg-color = #1b1b1f
    text-color = "#F8F8F5"
  >
  </openapi-explorer>

  <openapi-explorer
    v-else
    spec-url = "/adm-spec.yaml"
    hide-console = true
    hide-authentication = true
    hide-server-selection = true
    hide-components = false
    nav-bg-color = #ffffff
    secondary-color = #000000
    nav-hover-text-color = #F8F8F5
  >
  </openapi-explorer>

</ClientOnly>

This seems very awkward, and it's difficult to get the styles to match Vitepress's theme. Might there be a way to extend the default theme with a layout called openapi and somehow link my spec file in the front matter?

Other information

I appreciate this work very much. Thanks for considering the suggestion.

enzonotario / vitepress-openapi