Authress-Engineering / openapi-explorer

OpenAPI Web component to generate a UI from the spec.
Apache License 2.0
316 stars 42 forks source link

[Nextra] Markdown link to the documentation of a route #198

Closed addshore closed 1 year ago

addshore commented 1 year ago

I have an authentication slot defined

  return <openapi-explorer>
    <div slot="authentication">
      <OApiAuthentication handleAuthTokenChange={handleAuthTokenChange}/>
    </div>
    </openapi-explorer>

Which points to a mdx file with a line such as this

Authorization for API currently uses Bearer tokens generated from the `/users/login` endpoint.

I want to link to the reference to the endpoint, to the documentation for the endpoint.

I have tried the following markdown

Authorization for API currently uses Bearer tokens generated from the [`/users/login`](#?route=post-/users/login) endpoint.

Which appears to correctly switch the browser URL to http://localhost:8093/api-v1#?route=post-/users/login However the page itself does not update, and I stay on the authentication page.

I guess my expectation here would the that openapi-explorer detects the link click or url change and takes me to the right place It could again be that this is an issue with the way I am embedding the component within a nextja / nextra site, however I don't see any documentation on this behavior working or examples in authress or other examples

wparad commented 1 year ago

This looks like it works directly when using an href, which means that it looks like nextra might not be doing the right thing. I'm guessing that it isn't actually causing the navigation to happen.

<openapi-explorer spec-url="mocks/index-schema.json" schema-expand-level="1">
    <div slot="nav-section">Section 1</div>
    <div slot="nav-section">Section 2</div>

    <div slot="custom-section">
      <h1>1. A custom section rendered when selected.</h1>
    </div>
    <div slot="authentication">
      <h1>Authentication</h1>
      <div>Replaces the authentication section</div>
      <a href="#?route=section--1">Jump to the first section</a>
    </div>
</openapi-explorer>

auth-peek

If you aren't able to fix the problem so that nextra correctly handles hash changes firing updates, you can instead directly set the reactive attribute of the component called explorer-location.

The vanilla js way to update the attribute would be: document.getElementsByTagName("openapi-explorer")[0].setAttribute('explorer-location', 'post-/users/login')

Or you can use the built in for your framework.

addshore commented 1 year ago

Many thanks for the hand holding

wparad commented 1 year ago

No problem at all, I was also curious if there was actually a problem here because I definitely hadn't personally tested this one.