wll8 / redoc-try Goto Github PK
View Code? Open in Web Editor NEWAdd `Try it out` function like swagger on redoc.
Home Page: https://wll8.github.io/redoc-try
Add `Try it out` function like swagger on redoc.
Home Page: https://wll8.github.io/redoc-try
Hi there,
I'm using your modifications with great success and really like the integration :)
The problem is, I've now added an authorization requirement to the API which means you need to provide an Authorization: Bearer xxx
header.
In the default Swagger UI, it shows the following:
And when you click on it:
After you have done this, the try out now
will add the correct headers.
Would you have any suggestions on how to get this working in your solution as well?
Thanks in advance,
Gerard.
hi,
i am using https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js and i tried using the one given in readme but its giving me the error
utils.js:50 Fetch finished loading: GET "https://crada.dev/doc/crada-doc.yaml".
(anonymous) @ utils.js:50
(anonymous) @ utils.js:8
r @ utils.js:4
t.readFileFromUrl @ utils.js:42
(anonymous) @ resolve.js:94
(anonymous) @ resolve.js:8
r @ resolve.js:4
loadExternalRef @ resolve.js:91
(anonymous) @ resolve.js:132
(anonymous) @ resolve.js:8
r @ resolve.js:4
resolveDocument @ resolve.js:126
(anonymous) @ bundle.js:31
(anonymous) @ bundle.js:8
r @ bundle.js:4
t.bundle @ bundle.js:26
(anonymous) @ loadAndBundleSpec.ts:33
(anonymous) @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
u @ tslib.es6.js:72
l @ redoc.standalone.js:37
(anonymous) @ StoreBuilder.ts:86
(anonymous) @ tslib.es6.js:102
(anonymous) @ tslib.es6.js:83
(anonymous) @ tslib.es6.js:76
u @ tslib.es6.js:72
t.load @ redoc.standalone.js:100
t.componentDidMount @ StoreBuilder.ts:67
is @ react-dom.production.min.js:212
dl @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
qo @ react-dom.production.min.js:122
fl @ react-dom.production.min.js:248
Zs @ react-dom.production.min.js:239
Qs @ react-dom.production.min.js:230
Dl @ react-dom.production.min.js:281
(anonymous) @ react-dom.production.min.js:284
tl @ react-dom.production.min.js:240
Bl @ react-dom.production.min.js:284
t.render @ react-dom.production.min.js:290
xf @ standalone.tsx:53
(anonymous) @ standalone.tsx:86
(anonymous) @ standalone.tsx:90
n @ bootstrap:19
(anonymous) @ redoc.standalone.js:56
n @ bootstrap:19
(anonymous) @ bootstrap:83
(anonymous) @ redoc.standalone.js:7
(anonymous) @ universalModuleDefinition:9
(anonymous) @ universalModuleDefinition:1
Show 21 more frames
try.js:formatted:153 Something went wrong.
(anonymous) @ try.js:formatted:153
Promise.catch (async)
initTry @ try.js:formatted:152
(anonymous) @ api:27
DevTools failed to load source map: Could not load content for https://crada.dev/6d3017e92bb2b2c03e6b.worker.js.map: Fetch through target failed: Target not supported; Fallback: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE
<body>
<redoc spec-url='{{ asset('doc/crada-doc.yaml') }}'></redoc>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
<script src="{{ asset('js/try.js') }}"></script>
<script>
initTry("{{ asset('doc/crada-doc.yaml') }}")
</script>
</body>
when you open the try it out window first time after the page load and execute the API, and click on clear,
the header section from other endpoint shows up
Please refer the screen shot
https://drive.google.com/file/d/1Rtb61Kcd1q5LJemr7eqnGUslzcAHuf7F/view?usp=sharing
it only happens first time
This feature is exactly what I am looking for but I am having trouble figuring out how to use it. I cloned the repot and opened index.html
but the page doesn't load. Does this need to be passed through the redoc-cli tool? Can you please help me with what I am missing?
To reproduce:
<a href="#operation/placeOrder">test anchor placeOrder</a>
(for example, where it says "This is a sample (...)")Actual result: you scroll to the right endpoint ("Place an order for a pet"), but the menu item highlighted on the left is wrong ("Returns pet inventories by status", ie: the menu item for the route just above the expected one). Manually scrolling down a tiny bit highlights the expected menu item.
Expected result: you scroll to the right endpoint ("Place an order for a pet"), and the menu item highlighted on the left is correct ("Place an order for a pet").
Please can you give a easy way or example to use in the react component.
Hi, I am facing this error in the console when I click in any Try button
My template file is config like this
<body>
<div id="redoc-container"></div>
<script src="https://cdn.jsdelivr.net/npm/redoc@next/bundles/redoc.standalone.js"> </script>
<script src="//cdn.jsdelivr.net/gh/wll8/[email protected]/dist/try.js"></script>
<script>
initTry({
openApi: `./openapi.yaml`,
redocOptions: {
"untrustedSpec": true,
"theme": {
"menu": {
"backgroundColor": "rgb(195, 241, 211)",
"textColor": "rgba(0, 0, 0, 1)",
},
}
}
})
</script>
</body>
Hello,
I'm currently using python's library FastAPI to make the endpoints and generate its Redoc documentation, is there any way to integrate your project using FastApi library?
Hi,
I think it is better to have a modal to have a full-width swagger box. and scrolling wouldn't affect document's scroll position.
When trying an API, normally, the rest of the page is useless.
https://drive.google.com/file/d/1pT75UC7SBQL5lgA98cOnyclGOMU5T_6B/view?usp=sharing
Please find the above link for the screen video reference.
I am testing this on my own API When I hit Execute
and then I get the follow error. Any ideas what might be going on or could you provide any further debugging steps?
Failed to fetch.
Possible Reasons:CORSNetwork
FailureURL scheme must be "http" or "https" for CORS request.
Hello!
Thanks for creating this project!
I was curious if we are able to extend the openApi
param to support a relative file system url and not only a url.
Example:
openApi: `./swagger.json`
Does this tool supports both openAPI 3
and swagger 2.0
json specifications?
Try it out does not work with Redoc v 2.0-rc.33 or above. The current Redoc version is rc-48. Any possibility you could make it compatible with the latest version?
Hi!
When I click on "Try" button on my endpoint A, the operation block is displayed and I can test the endpoint that returns a response.
Then I don't close the block and when I click on the "Try" button, on my endpoint B, it displays the operation block but the content is the result of my previous test on endpoint A and block is not well sized.
To restore the block I have to close the block and reopen it with "Try" button.
Another thing I've noticed, is that my operations blocks aren't displayed on the right like in your demo (links on your Readme), but in the main part instead. It's not a problem, but I'd rather tell you about it in case it is related.
Thx!
Expected Results: Try it out window remains open
Actual Result: Try it out the window is closed and have to click twice to open it again.
I get multiple try it out buttons instead of one. When clicked, receive the following error.
try.js?v=1:251 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
at HTMLButtonElement. (try.js?v=1:251)
at HTMLButtonElement.dispatch (VM12181 jquery.min.js:3)
at HTMLButtonElement.q.handle (VM12181 jquery.min.js:3)
Please add licensing information. Is it OK to be used in a commercial documentation site? Thanks.
I am using your library and recently upgraded my file to OpenAPI 3.1. After that I started getting a warning:
Unable to render this definition
The provided definition does not specify a valid version field.
Please indicate a valid Swagger or OpenAPI version field. Supported version fields are swagger: "2.0" and those that match openapi: 3.0.n (for example, openapi: 3.0.0).
Can you tell me if it is possible to enable/add support for version 3.1?
So glad I found your project, I especially like your license model.
However, the examples seem to be broken. Is this something you could fix, or is it broken inside swagger-ui also?
My spec is using external examples, which my unit tests also use to validate them automatically:
/yaya:
post:
summary: Non-blocking
requestBody:
content:
application/json; charset=UTF-8:
schema:
$ref: '#/components/schemas/CoreRequest'
examples:
blik1:
summary: BLIK1
description: 'yaya1 '
externalValue: ../blik1.json
blik2:
summary: BLIK2
description: 'yaya2 '
externalValue: ../blik2.json
Hello,
I want to readthe json file from a static file not from url
I used this :
openApi: ./api-docs.json
but it did not work
This happened if there is no comment under the endpoint name title <h2>
, and there is no Request samples <h3>
under the reqBox,
Can we add a check for Response samples <h3>
, if we could not find the Request?
Like this to avoid the bug,
if($(requestSel).length && ($(requestSel).text().includes("Request") || $(requestSel).text().includes("Response")))
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.