Skip to content

Commit ffde89a

Browse files
mrin9mrin9
committed
Added header slot and sending request accept header
1 parent 29c9d1b commit ffde89a

14 files changed

+272
-44
lines changed

‎dist/rapidoc-min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rapidoc-min.js.gz‎

111 Bytes
Binary file not shown.

‎dist/rapidoc-min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rapidoc-min.js.map.gz‎

-1 Bytes
Binary file not shown.

‎dist/report.html‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎docs/example8.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<!doctype html>
2+
<head>
3+
<!-- Global site tag (gtag.js) - Google Analytics -->
4+
<script async src='https://www.googletagmanager.com/gtag/js?id=UA-132775238-1'></script>
5+
<script>
6+
window.dataLayer = window.dataLayer || [];
7+
function gtag(){dataLayer.push(arguments);}
8+
gtag('js', new Date());
9+
gtag('config', 'UA-132775238-1');
10+
</script>
11+
<meta charset='utf-8'>
12+
<meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes'>
13+
<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet'>
14+
<style>
15+
.btn{
16+
width: 90px;
17+
height: 32px;
18+
font-size:13px;
19+
background-color: #47AFE8;
20+
color: #fff;
21+
border: none;
22+
margin: 0 2px;
23+
border-radius: 2px;
24+
cursor:pointer;
25+
outline:none;
26+
}
27+
.txt{
28+
width: 100px;
29+
height: 30px;
30+
font-size:13px;
31+
background-color: transparent;
32+
border: 1px solid #47AFE8;
33+
color: #fff;
34+
padding:0 8px;
35+
margin: 0 2px;
36+
border-radius: 2px;
37+
outline:none;
38+
}
39+
rapi-doc{
40+
width:100%;
41+
}
42+
</style>
43+
<script type='text/javascript' src='rapidoc-min.js'></script>
44+
<script>
45+
function setApiKey(){
46+
const docEl = document.getElementById('thedoc');
47+
const keyInputEl = document.getElementById('key-val-input');
48+
49+
docEl.setAttribute('api-key-name','api_key');
50+
docEl.setAttribute('api-key-location','header');
51+
docEl.setAttribute('api-key-value',keyInputEl.value);
52+
}
53+
</script>
54+
</head>
55+
<body>
56+
<rapi-doc id='thedoc'
57+
spec-url='https://petstore.swagger.io/v2/swagger.json'
58+
allow-authentication ="false"
59+
>
60+
<div slot='header' style='display:flex; margin:0 16px;'>
61+
<input class='txt' id='key-val-input' type='text' placeholder='API Key' value='special-key' spellcheck='false' >
62+
<button class='btn' onclick='setApiKey()'>Authorize</button>
63+
</div>
64+
</rapi-doc>
65+
</body>
66+
</html>

‎docs/index.html‎

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ <h1 class="banner-title">Web Component for OpenAPI Spec Viewing</h1>
143143
</div>
144144

145145
<div id="qstart" class="qstart container">
146-
<div style="display:flex; flex-direction: column; ">
146+
<div style="display:flex; flex-direction: column; margin-bottom-24px">
147147
<h2> Quickstart (<a style="font-size:16px" href="./example2.html">DEMO</a>)</h2>
148148
Just copy the below code and save it in an html file. Then open it using a browser
149149

@@ -163,7 +163,80 @@ <h2> Quickstart (<a style="font-size:16px" href="./example2.html">DEMO</a>)</h2>
163163
</code></pre>
164164
</div>
165165

166-
</div>
166+
167+
<div style="display:flex; flex-direction: column; ">
168+
<h2> Mix your own HTML (<a style="font-size:16px" href="./example8.html">DEMO</a>)</h2>
169+
The below example adds a single click authorization functionality to swagger's petstore spec
170+
<pre class="shadow code-block"><code class="html" style="border-radius:4px">
171+
&lt;!doctype html&gt;
172+
&lt;html&gt;
173+
&lt;head&gt;
174+
&lt;meta charset="utf-8"&gt;
175+
176+
&lt;style&gt;
177+
.btn{
178+
width: 90px;
179+
height: 32px;
180+
font-size:13px;
181+
background-color: #47AFE8;
182+
color: #fff;
183+
border: none;
184+
margin: 0 2px;
185+
border-radius: 2px;
186+
cursor:pointer;
187+
outline:none;
188+
}
189+
.txt{
190+
width: 100px;
191+
height: 30px;
192+
font-size:13px;
193+
background-color: transparent;
194+
border: 1px solid #47AFE8;
195+
color: #fff;
196+
padding:0 8px;
197+
margin: 0 2px;
198+
border-radius: 2px;
199+
outline:none;
200+
}
201+
rapi-doc{
202+
width:100%;
203+
}
204+
&lt;/style&gt;
205+
206+
&lt;script src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
207+
&lt;script&gt;
208+
function setApiKey(){
209+
const docEl = document.getElementById('thedoc');
210+
const keyInputEl = document.getElementById('key-val-input');
211+
docEl.setAttribute('api-key-name','api_key');
212+
docEl.setAttribute('api-key-location','header');
213+
docEl.setAttribute('api-key-value',keyInputEl.value);
214+
}
215+
&lt;/script&gt;
216+
&lt;/head&gt;
217+
&lt;body&gt;
218+
219+
&lt;rapi-doc
220+
spec-url="https://petstore.swagger.io/v2/swagger.json"
221+
allow-authentication ="false"
222+
&gt;
223+
&lt;!--
224+
below html is custom html that adds an input field and a button in header
225+
on clicking the button the 'api-key-value' is set to the value in input box
226+
--&gt;
227+
&lt;div slot='header' style='display:flex; margin:0 16px;'&gt;
228+
&lt;input class='txt' id='key' type='text' &gt;
229+
&lt;button class='btn' onclick='setApiKey()' &gt; Login &lt;/button &gt;
230+
&lt;/div>
231+
&lt;/rapi-doc&gt;
232+
233+
&lt;/body&gt;
234+
&lt;/html&gt;
235+
</code></pre>
236+
</div>
237+
238+
239+
</div>
167240

168241
<!-- Start of API -->
169242
<div class="api container" id="api">
@@ -208,13 +281,13 @@ <h2> Attributes</h2>
208281
<tr>
209282
<td class="mono-bold">api-key-name</td>
210283
<td class="gray">Name of the API key that will be send while trying out the APIs</td>
211-
<td>(empty)</td>
284+
<td>Authorization</td>
212285
</tr>
213286

214287
<tr>
215288
<td class="mono-bold">api-key-value</td>
216289
<td class="gray">Value of the API key that will be send while trying out the APIs</td>
217-
<td>Authorization</td>
290+
<td>(empty)</td>
218291
</tr>
219292

220293
<tr>
@@ -341,6 +414,10 @@ <h2> Slots</h2>
341414
<td class="mono-bold">logo</td>
342415
<td class="gray">use this slot to replace the logo </td>
343416
</tr>
417+
<tr>
418+
<td class="mono-bold">header</td>
419+
<td class="gray"> The conents of this slot will appear at the header after the spec-url input</td>
420+
</tr>
344421
<tr>
345422
<td class="mono-bold">footer</td>
346423
<td class="gray"> The conents of this slot will appear at the bottom of the spec</td>
@@ -470,7 +547,6 @@ <h2> Examples & Demos</h2>
470547

471548

472549
<script>
473-
474550
function goToSection(e){
475551
if (e.target.dataset.action==='url'){
476552
return;
@@ -482,9 +558,6 @@ <h2> Examples & Demos</h2>
482558
gotoEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
483559
}
484560
}
485-
486-
487-
488561
</script>
489562
</body>
490563

‎docs/rapidoc-min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/welcome.html‎

Lines changed: 81 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ <h1 class="banner-title">Web Component for OpenAPI Spec Viewing</h1>
143143
</div>
144144

145145
<div id="qstart" class="qstart container">
146-
<div style="display:flex; flex-direction: column; ">
146+
<div style="display:flex; flex-direction: column; margin-bottom-24px">
147147
<h2> Quickstart (<a style="font-size:16px" href="./example2.html">DEMO</a>)</h2>
148148
Just copy the below code and save it in an html file. Then open it using a browser
149149

@@ -163,7 +163,80 @@ <h2> Quickstart (<a style="font-size:16px" href="./example2.html">DEMO</a>)</h2>
163163
</code></pre>
164164
</div>
165165

166-
</div>
166+
167+
<div style="display:flex; flex-direction: column; ">
168+
<h2> Mix your own HTML (<a style="font-size:16px" href="./example8.html">DEMO</a>)</h2>
169+
The below example adds a single click authorization functionality to swagger's petstore spec
170+
<pre class="shadow code-block"><code class="html" style="border-radius:4px">
171+
&lt;!doctype html&gt;
172+
&lt;html&gt;
173+
&lt;head&gt;
174+
&lt;meta charset="utf-8"&gt;
175+
176+
&lt;style&gt;
177+
.btn{
178+
width: 90px;
179+
height: 32px;
180+
font-size:13px;
181+
background-color: #47AFE8;
182+
color: #fff;
183+
border: none;
184+
margin: 0 2px;
185+
border-radius: 2px;
186+
cursor:pointer;
187+
outline:none;
188+
}
189+
.txt{
190+
width: 100px;
191+
height: 30px;
192+
font-size:13px;
193+
background-color: transparent;
194+
border: 1px solid #47AFE8;
195+
color: #fff;
196+
padding:0 8px;
197+
margin: 0 2px;
198+
border-radius: 2px;
199+
outline:none;
200+
}
201+
rapi-doc{
202+
width:100%;
203+
}
204+
&lt;/style&gt;
205+
206+
&lt;script src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
207+
&lt;script&gt;
208+
function setApiKey(){
209+
const docEl = document.getElementById('thedoc');
210+
const keyInputEl = document.getElementById('key-val-input');
211+
docEl.setAttribute('api-key-name','api_key');
212+
docEl.setAttribute('api-key-location','header');
213+
docEl.setAttribute('api-key-value',keyInputEl.value);
214+
}
215+
&lt;/script&gt;
216+
&lt;/head&gt;
217+
&lt;body&gt;
218+
219+
&lt;rapi-doc
220+
spec-url="https://petstore.swagger.io/v2/swagger.json"
221+
allow-authentication ="false"
222+
&gt;
223+
&lt;!--
224+
below html is custom html that adds an input field and a button in header
225+
on clicking the button the 'api-key-value' is set to the value in input box
226+
--&gt;
227+
&lt;div slot='header' style='display:flex; margin:0 16px;'&gt;
228+
&lt;input class='txt' id='key' type='text' &gt;
229+
&lt;button class='btn' onclick='setApiKey()' &gt; Login &lt;/button &gt;
230+
&lt;/div>
231+
&lt;/rapi-doc&gt;
232+
233+
&lt;/body&gt;
234+
&lt;/html&gt;
235+
</code></pre>
236+
</div>
237+
238+
239+
</div>
167240

168241
<!-- Start of API -->
169242
<div class="api container" id="api">
@@ -208,13 +281,13 @@ <h2> Attributes</h2>
208281
<tr>
209282
<td class="mono-bold">api-key-name</td>
210283
<td class="gray">Name of the API key that will be send while trying out the APIs</td>
211-
<td>(empty)</td>
284+
<td>Authorization</td>
212285
</tr>
213286

214287
<tr>
215288
<td class="mono-bold">api-key-value</td>
216289
<td class="gray">Value of the API key that will be send while trying out the APIs</td>
217-
<td>Authorization</td>
290+
<td>(empty)</td>
218291
</tr>
219292

220293
<tr>
@@ -341,6 +414,10 @@ <h2> Slots</h2>
341414
<td class="mono-bold">logo</td>
342415
<td class="gray">use this slot to replace the logo </td>
343416
</tr>
417+
<tr>
418+
<td class="mono-bold">header</td>
419+
<td class="gray"> The conents of this slot will appear at the header after the spec-url input</td>
420+
</tr>
344421
<tr>
345422
<td class="mono-bold">footer</td>
346423
<td class="gray"> The conents of this slot will appear at the bottom of the spec</td>
@@ -470,7 +547,6 @@ <h2> Examples & Demos</h2>
470547

471548

472549
<script>
473-
474550
function goToSection(e){
475551
if (e.target.dataset.action==='url'){
476552
return;
@@ -482,9 +558,6 @@ <h2> Examples & Demos</h2>
482558
gotoEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
483559
}
484560
}
485-
486-
487-
488561
</script>
489562
</body>
490563

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "rapidoc",
3-
"version": "4.2.11",
3+
"version": "4.3.0",
44
"description": "RapiDoc - Open API spec viewer with built in console",
55
"author": "Mrinmoy Majumdar <[email protected]>",
66
"repository": {

0 commit comments

Comments
 (0)