Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

open-api docs support #4133

Open
4 tasks done
AdamBD opened this issue Aug 13, 2024 · 4 comments
Open
4 tasks done

open-api docs support #4133

AdamBD opened this issue Aug 13, 2024 · 4 comments

Comments

@AdamBD
Copy link

AdamBD commented Aug 13, 2024

Is your feature request related to a problem? Please describe.

It would be great if vitepress can support an interface for open API docs. This is a standard in most modern documentation tools these days

Describe the solution you'd like

https://github.com/PaloAltoNetworks/docusaurus-openapi-docs

above is a reference of palaltonetworks plugin for docosaurus

Describe alternatives you've considered

No response

Additional context

No response

Validations

@vm-001
Copy link

vm-001 commented Aug 27, 2024

vote!

@scott97
Copy link

scott97 commented Aug 30, 2024

I agree this would be a great plugin to have. Starlight also has a similar plugin https://github.com/HiDeoo/starlight-openapi and docusaurus also has the @scalar/docusaurus plugin.

This is what I use to achieve a similar result with vitepress. It is not perfect, as it does not integrate with the sidebar, instead, replacing it entirely, and also light and dark mode toggles and search are duplicated. But it is a good enough for me.

api-docs.md

---
layout: page
sidebar: false
---

<script setup lang="ts">
import { ApiReference } from '@scalar/api-reference'
import '@scalar/api-reference/style.css'
import swagger from './swagger.json?url'
import Container from '../../components/Container.vue'
</script>


<Container>
<ApiReference
:configuration="{
    spec: {
    url: swagger,
    },
    defaultHttpClient: { targetKey:'http', clientKey:'http1.1'},
    theme: 'purple',
}" />
</Container>

components/Container.vue

template>
    <div class="page">
        <main class="content">
            <slot />
        </main>
    </div>
</template>

<style scoped>
.page {
    width: 100%;
    min-height: 100%;
    display: flex;
    justify-content: center
}
.content {
    width: 100%;
    max-width: 1440px
}
</style>

@enzonotario
Copy link
Contributor

I'm working in a Theme for this. There's still a lot to improve, and I'm eager to learn and make it better: https://github.com/enzonotario/vitepress-theme-openapi

@scott97
Copy link

scott97 commented Sep 1, 2024

This is really nice! Great work 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants