Skip to content

Commit 0fc4045

Browse files
mrin9mrin9
committed
added new documentation and screenshots
1 parent 8057012 commit 0fc4045

14 files changed

+742
-487
lines changed

‎docs/api.html‎

Lines changed: 321 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,321 @@
1+
<!doctype html>
2+
3+
<head>
4+
<!-- Global site tag (gtag.js) - Google Analytics -->
5+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
6+
<script>
7+
window.dataLayer = window.dataLayer || [];
8+
function gtag(){dataLayer.push(arguments);}
9+
gtag('js', new Date());
10+
11+
gtag('config', 'UA-132775238-1');
12+
</script>
13+
14+
<meta charset="utf-8">
15+
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
16+
<meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Alternate for SwaggerUI or Redoc. It is fast, small and made with lit-element">
17+
<meta name="keywords" content="RapiDoc,ReDoc,Swagger,SwaggerUI,Custom Element,Web Component,OpenAPI,REST">
18+
19+
<link rel="shortcut icon" type="image/png" href="./images/logo.png"/>
20+
21+
<!-- Fonts -->
22+
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
23+
<link href="https://fonts.googleapis.com/css?family=Lato:300,400&display=swap" rel="stylesheet">
24+
25+
26+
<!-- Code Highlight -->
27+
<link rel="stylesheet" href="./highlight/styles/zenburn.css">
28+
<script src="./highlight/highlight.pack.js"></script>
29+
<script>hljs.initHighlightingOnLoad();</script>
30+
31+
<link rel="stylesheet" href="index.css">
32+
33+
<title>RapiDoc - Web Component based Swagger & OpenAPI Spec Viewer</title>
34+
</head>
35+
36+
<body>
37+
<div class='topbar'>
38+
<div class="header">
39+
<a class="menu-item" data-action="url" href="./index.html">
40+
<img class="logo" src="./images/logo.png" style="width:36px;height:36px;margin-right:10px;" href="./index.html"/>
41+
</a>
42+
<div class="product-name">RapiDoc - API Reference</div>
43+
<div class="menu" style="flex:1"></div>
44+
<nav class="menu" onclick="goToSection(event)">
45+
<a class="menu-item" data-action="url" href="./index.html"> Home </a>
46+
<a class="menu-item" data-action="url" href="./examples.html"> Examples </a>
47+
<a class="menu-item" data-action="url" href="https://mrin9.github.io/RapiPdf/"> RapiPDF </a>
48+
<a class="menu-item" data-action="url" href="https://github.com/mrin9/RapiDoc"> GitHub </a>
49+
</nav>
50+
</div>
51+
</div>
52+
<div class="banner container" id="banner" style="max-height:255px; overflow:hidden">
53+
<div style="display:flex; justify-content: center; margin-top:20px">
54+
<div style="display:block">
55+
<img class="screenshot shadow3" src="./images/light_ss.png" />
56+
</div>
57+
</div>
58+
</div>
59+
60+
61+
<!-- Start of API -->
62+
<div class="api container" id="api">
63+
<div style="display:flex; flex-direction: column; ">
64+
<h2> Attributes</h2>
65+
<div class="table-block">
66+
<table class="m-table">
67+
<tr>
68+
<th class="attr-col">Attribute</th>
69+
<th style="text-align:left">Description </th>
70+
<th class="default-col">Default</th>
71+
</tr>
72+
73+
<tr>
74+
<td class="mono-bold right">spec-url </td>
75+
<td class="gray">url of the OpenAPI spec to view </td>
76+
<td>(empty)</td>
77+
</tr>
78+
79+
<tr>
80+
<td class="mono-bold right">server-url</td>
81+
<td class="gray">
82+
OpenAPI spec has a provision for providing the server url. The UI will list all the server URLs provided in the spec.
83+
The user can then select one URL to which he or she intends to send API calls while trying out the apis.
84+
However, if you want to provide an API server of your own which is not listed in the spec, you can use this property to provide one.
85+
It is helpful in the cases where the same spec is shared between multiple environment say Dev and Test and each have their own API server.
86+
</td>
87+
<td>(empty)</td>
88+
</tr>
89+
90+
<tr>
91+
<td class="mono-bold right">api-list-style</td>
92+
<td class="gray">
93+
can be either <code>group-by-tag</code> or <code> group-by-path </code>. This controls how the API litings are grouped.
94+
this can be changed from the UI too
95+
</td>
96+
<td>group-by-tag</td>
97+
</tr>
98+
99+
<tr>
100+
<td class="mono-bold right">allow-authentication</td>
101+
<td class="gray">
102+
Authentication feature, allows the user to select one of the authentication mechanism thats available in the spec.
103+
It can be http-basic, http-bearer or api-key.
104+
If you dont want your users to go through the authentication process, instead want them to use a pre-generated api-key
105+
then you may hide authentication section by setting this attribute to false
106+
and provide the api-key details using various api-key-???? attributes.</td>
107+
<td>true</td>
108+
</tr>
109+
110+
<tr>
111+
<td class="mono-bold right">api-key-name</td>
112+
<td class="gray">Name of the API key that will be send while trying out the APIs</td>
113+
<td>Authorization</td>
114+
</tr>
115+
116+
<tr>
117+
<td class="mono-bold right">api-key-value</td>
118+
<td class="gray">Value of the API key that will be send while trying out the APIs</td>
119+
<td>(empty)</td>
120+
</tr>
121+
122+
<tr>
123+
<td class="mono-bold right">api-key-location</td>
124+
<td class="gray">
125+
determines how you want to send the api-key.
126+
allowed values are <code>header</code> or <code> query </code>
127+
</td>
128+
<td>header</td>
129+
</tr>
130+
131+
<tr>
132+
<td class="mono-bold right">allow-spec-url-load</td>
133+
<td class="gray">
134+
If set to 'false', user will not be able to load any spec url from the UI.
135+
</td>
136+
<td>true</td>
137+
</tr>
138+
139+
<tr>
140+
<td class="mono-bold right">allow-spec-file-load</td>
141+
<td class="gray">
142+
If set to 'false', user will not be able to load any spec file from the local drive.
143+
This attribute is applicable only when the device width is more than 768px, else this feature is not available
144+
</td>
145+
<td>true</td>
146+
</tr>
147+
148+
<tr>
149+
<td class="mono-bold right">allow-search</td>
150+
<td class="gray">
151+
If set to 'false', user will not be able to search APIs.
152+
</td>
153+
<td>true</td>
154+
</tr>
155+
156+
<tr>
157+
<td class="mono-bold right">allow-try</td>
158+
<td class="gray">
159+
'TRY' feature allows you to make REST calls to the API server.
160+
To disable this feature set it to false
161+
</td>
162+
<td>true</td>
163+
</tr>
164+
165+
<tr>
166+
<td class="mono-bold right">allow-server-selection</td>
167+
<td class="gray">
168+
If set to 'false', user will not be able to select API server.
169+
The URL specified in the server-url attribute will be used if set, else the first server in the API specification file will be used.
170+
</td>
171+
<td>true</td>
172+
</tr>
173+
174+
<tr>
175+
<td class="mono-bold right">allow-api-list-style-selection</td>
176+
<td class="gray">
177+
If set to 'false', user will not be able to change api list style
178+
</td>
179+
<td>true</td>
180+
</tr>
181+
182+
<tr>
183+
<td class="mono-bold right">show-info</td>
184+
<td class="gray">
185+
show/hide the documents info section<br/>
186+
Info section contains information about the spec, such as the title and description of the spec, the version, terms of services etc.
187+
In certain situation you may not need to show this section. For instance you are embedding this element inside a another help document.
188+
Chances are, the help doc may already have this info, in that case you may want to hide this section.
189+
</td>
190+
<td>true</td>
191+
</tr>
192+
193+
<tr>
194+
<td class="mono-bold right">show-header </td>
195+
<td class="gray">show/hide the header.<br/>
196+
If you dont want your user to open any other api spec, other than the current one, then set this attribute to false</td>
197+
<td>true</td>
198+
</tr>
199+
200+
<tr>
201+
<td class="mono-bold right">heading-text </td>
202+
<td class="gray">Heading Text on top-left corner </td>
203+
<td>(empty)</td>
204+
</tr>
205+
206+
<tr>
207+
<td class="mono-bold right">header-color </td>
208+
<td class="gray">Hex color code for the header's background</td>
209+
<td>#444444</td>
210+
</tr>
211+
212+
<tr>
213+
<td class="mono-bold right">primary-color</td>
214+
<td class="gray">Hex color code on various controls such as buttons, tabs </td>
215+
<td>#FF791A</td>
216+
</tr>
217+
218+
<tr>
219+
<td class="mono-bold right">regular-font </td>
220+
<td class="gray">Font Name(s) to be used for regular text </td>
221+
<td>rapidoc, Helvetica, Arial</td>
222+
</tr>
223+
224+
<tr>
225+
<td class="mono-bold right">mono-font </td>
226+
<td class="gray">Font Name(s) to be used for monospaced text </td>
227+
<td>Monaco, 'Andale Mono', 'Roboto Mono'</td>
228+
</tr>
229+
230+
<tr>
231+
<td class="mono-bold right">theme </td>
232+
<td class="gray">light, dark </td>
233+
<td>light</td>
234+
</tr>
235+
236+
<tr>
237+
<td class="mono-bold right"> layout </td>
238+
<td class="gray">layout helps in placement of your request/response sections. The allowed values are 'row' or 'column'.
239+
In column layout, request & response sections are placed one below the other,
240+
In row layout request & response sections are placed side by side.
241+
This attribute is applicable only when the device width is more than 768px.
242+
</td>
243+
<td>row</td>
244+
</tr>
245+
</table>
246+
</div>
247+
248+
<h2> Methods </h2>
249+
<div class="table-block">
250+
<table class="m-table">
251+
<tr>
252+
<th class="attr-col">Method</th>
253+
<th style="text-align:left">Description </th>
254+
<th class="default-col"></th>
255+
</tr>
256+
<tr>
257+
<td class="mono-bold right">loadSpec() </td>
258+
<td class="gray">To programatically load spec. The method takes
259+
<ul>
260+
<li> either a string containing the url of the specs</li>
261+
<li> or a JSON object representing a valid spec</li>
262+
</ul>
263+
</td>
264+
<td> <a href="https://github.com/mrin9/RapiDoc/blob/master/docs/examples/example9.html"> Example </a></td>
265+
</tr>
266+
</table>
267+
</div>
268+
269+
<h2> Slots</h2>
270+
<div class="table-block">
271+
<table class="m-table">
272+
<tr>
273+
<th >Slot Name</th>
274+
<th >Description </th>
275+
</tr>
276+
<tr>
277+
<td class="mono-bold right">(default)</td>
278+
<td class="gray">any content placed inside <code>&lt;rapi-doc&gt;</code> tag, will be shown immidiately under the header and above the info section </td>
279+
</tr>
280+
<tr>
281+
<td class="mono-bold right">logo</td>
282+
<td class="gray">use this slot to replace the logo </td>
283+
</tr>
284+
<tr>
285+
<td class="mono-bold right">header</td>
286+
<td class="gray"> The conents of this slot will appear at the header after the spec-url input</td>
287+
</tr>
288+
<tr>
289+
<td class="mono-bold right">footer</td>
290+
<td class="gray"> The conents of this slot will appear at the bottom of the spec</td>
291+
</tr>
292+
</table>
293+
</div>
294+
</div>
295+
</div>
296+
<!-- End of API -->
297+
298+
<div id="footer" class="footer container">
299+
<div class="footer-item"> MIT Licence</div>
300+
<div class="footer-item"> <a href="https://github.com/mrin9/RapiDoc"> GitHub</a></div>
301+
<div class="footer-item"> <a href="https://mrin9.github.io/RapiPdf/"> RapiPDF</a></div>
302+
<div class="footer-item"> <a href="https://www.npmjs.com/package/rapidoc"> npm</a></div>
303+
</div>
304+
305+
306+
<script>
307+
function goToSection(e){
308+
if (e.target.dataset.action==='url'){
309+
return;
310+
}
311+
312+
e.preventDefault();
313+
var gotoEl = document.getElementById(e.target.getAttribute('href').substring(1));
314+
if (gotoEl){
315+
gotoEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
316+
}
317+
}
318+
</script>
319+
</body>
320+
321+
</html>

0 commit comments

Comments
 (0)