Skip to content

Commit 48aa738

Browse files
mrin9mrin9
committed
fixed typo in documentation
1 parent ae5deae commit 48aa738

File tree

2 files changed

+332
-29
lines changed

2 files changed

+332
-29
lines changed

‎docs/welcome.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -259,8 +259,8 @@ <h2> Methods</h2>
259259
<tr>
260260
<td class="mono-bold">generatePdf(spec)</td>
261261
<td class="gray">
262-
to programmatically generate the PDF
263-
takes a single parameter that can
262+
to programmatically generate the PDF. <br/>
263+
Takes a single parameter that can be :
264264
<ul>
265265
<li> either a string containing the url of the specs</li>
266266
<li> or a JSON object representing a valid spec</li>

‎index.html‎

Lines changed: 330 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,342 @@
11
<!doctype html>
2-
<html lang="en">
32

43
<head>
4+
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
6-
<title>RapiPdf</title>
6+
<meta name="description" content="RapiPdf is Web Component based Swagger & OpenAPI Spec to PDF generator">
7+
<meta name="keywords" content="RapiPdf, RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST">
8+
9+
<link rel="shortcut icon" type="image/png" href="./images/logo.png"/>
10+
11+
<!-- Global site tag (gtag.js) - Google Analytics -->
12+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-2"></script>
13+
<script>
14+
window.dataLayer = window.dataLayer || [];
15+
function gtag(){dataLayer.push(arguments);}
16+
gtag('js', new Date());
17+
18+
gtag('config', 'UA-132775238-2');
19+
</script>
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=Varela+Round" rel="stylesheet">
24+
25+
<!-- Code Highlight -->
26+
<link rel="stylesheet" href="./highlight/styles/zenburn.css">
27+
<script src="./highlight/highlight.pack.js"></script>
28+
<script>hljs.initHighlightingOnLoad();</script>
29+
30+
<script type="text/javascript" src="rapipdf-min.js" defer></script>
31+
32+
<link rel="stylesheet" href="index.css">
33+
34+
<title>RapiPDF - Web Component based Swagger & OpenAPI PDF Generator</title>
735
</head>
836

937
<body>
10-
<!--
11-
Some sample spec to try
12-
http://10.21.83.83:8080/api/swagger.json
13-
https://api.apis.guru/v2/specs/stripe.com/2019-02-19/swagger.json
14-
https://api.apis.guru/v2/specs/github.com/v3/swagger.json
15-
https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json
16-
https://petstore.swagger.io/v2/swagger.json
17-
https://assets.zuora.com/zuora-documentation/swagger.yaml <<< Large spec with lot of markdown
18-
-->
19-
20-
<rapi-pdf id='rapipdf' style="width:750px; height:40px; font-size:18px"
21-
spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
22-
pdf-title="New API Reference"
23-
>
24-
</rapi-pdf>
25-
26-
27-
<button onclick="changeSpec()">Change Spec</button>
28-
<script type="text/javascript">
29-
function changeSpec(){
30-
let el = document.getElementById("rapipdf");
31-
//el.specUrl = 'abcd'
32-
el.setAttribute('spec-url', 'set new attrib');
33-
}
34-
</script>
38+
<div class="banner container" id="banner">
39+
<div class="header">
40+
<img class="logo" src="./images/logo.png" style="width:48px;height:48px;margin-right:10px;" />
41+
<div class="product-name">&lt;rapi-pdf&gt;</div>
42+
<div class="menu" style="flex:1"></div>
43+
<nav class="menu" onclick="goToSection(event)">
44+
<a class="menu-item" href="#features"> Features </a>
45+
<a class="menu-item" href="#qstart"> Quick Start </a>
46+
<a class="menu-item" href="#api"> API </a>
47+
<a class="menu-item" data-action="url" href="https://mrin9.github.io/RapiDoc/"> RapiDoc </a>
48+
<a class="menu-item" data-action="git" href="https://github.com/mrin9/RapiPdf"> GitHub </a>
49+
</nav>
50+
</div>
51+
<div>
52+
<div class="banner-content">
53+
<h1 class="banner-title">Web Component to generate PDF from OpenAPI Spec</h1>
54+
<div class="banner-content-inner">
55+
<p style="font-size:18px">Create beautiful, customizable API documentation in PDF format from your OpenAPI Specification</p>
56+
</div>
57+
</div>
58+
</div>
59+
<div style="display:flex; justify-content: center;">
60+
<div style="display:block">
61+
<img class="screenshot shadow3" src="./images/pdf_sample1.png" />
62+
</div>
63+
</div>
64+
</div>
65+
<div class="features container" id="features">
66+
67+
<div class="feature">
68+
<object type="image/svg+xml" data="./images/webcomponent.svg" style="width:64px; height:64px;"> </object>
69+
<div class="feature-info">
70+
<div class="feature-title"> Web Component Standard</div>
71+
<div class="feature-descr">
72+
Free of any frameworks, setups, configs, build steps or packaging.
73+
Can be used with any framework or just with vanilla javascript
74+
</div>
75+
</div>
76+
</div>
77+
78+
<div class="feature">
79+
<object type="image/svg+xml" data="./images/easy.svg" style="width:64px; height:64px;"> </object>
80+
<div class="feature-info">
81+
<div class="feature-title"> Easy Usage</div>
82+
<div class="feature-descr">
83+
Use It just like any other HTML Tag, use its various attributes to customize the generation of your PDF.
84+
Basic knowledge of HTML is all that's required
85+
</div>
86+
</div>
87+
</div>
88+
89+
<div class="feature">
90+
<object type="image/svg+xml" data="./images/mask.svg" style="width:64px; height:64px;"> </object>
91+
<div class="feature-info">
92+
<div class="feature-title">Customizable</div>
93+
<div class="feature-descr">
94+
Change font colors to match your brand colors.
95+
Pick and choose the sections from the API Spec that you want to include in the PDF.
96+
</div>
97+
</div>
98+
</div>
99+
100+
<div class="feature">
101+
<object type="image/svg+xml" data="./images/gears.svg" style="width:64px; height:64px;"> </object>
102+
<div class="feature-info">
103+
<div class="feature-title"> Seamlessly interoperable</div>
104+
<div class="feature-descr">
105+
Loved by tech writers, designers, dev-ops, testers and developers alike,
106+
due to its simplicity, interoperability and powerful features.
107+
</div>
108+
</div>
109+
</div>
110+
111+
</div>
112+
113+
<div id="qstart" class="qstart container">
114+
<div style="display:flex; flex-direction: column; ">
115+
<h2> Quickstart & Demo</h2>
116+
Just copy the below code and save it in an html file. Then open it using a browser
117+
118+
<pre class="shadow code-block"><code class="html" style="border-radius:4px">
119+
&lt;!doctype html&gt;
120+
&lt;html&gt;
121+
&lt;head&gt;
122+
&lt;script src="https://unpkg.com/rapipdf/dist/rapipdf-min.js"&gt;&lt;/script&gt;
123+
&lt;/head&gt;
124+
&lt;body&gt;
125+
&lt;rapi-pdf
126+
style = "width:700px; height:40px; font-size:18px;"
127+
spec-url = "https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
128+
button-bg = "#b44646"
129+
&gt; &lt;/rapi-pdf&gt;
130+
&lt;/body&gt;
131+
&lt;/html&gt;
132+
</code></pre>
133+
134+
<rapi-pdf id='rapipdf' style="width:730px; height:40px; font-size:18px;"
135+
spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
136+
button-bg="#b44646"
137+
pdf-title="My API Reference"
138+
> </rapi-pdf>
139+
</div>
140+
</div>
141+
142+
<!-- Start of API -->
143+
<div class="api container" id="api">
144+
<div style="display:flex; flex-direction: column; ">
145+
<h2> Attributes</h2>
146+
<div class="table-block">
147+
<table class="m-table">
148+
<tr>
149+
<th class="attr-col">Attribute</th>
150+
<th style="text-align:left">Description </th>
151+
<th class="default-col">Default</th>
152+
</tr>
153+
154+
<tr>
155+
<td class="mono-bold">spec-url </td>
156+
<td class="gray">url of the OpenAPI spec to view </td>
157+
<td>(empty)</td>
158+
</tr>
159+
160+
<tr>
161+
<td class="mono-bold">button-label</td>
162+
<td class="gray"> Label on the Button</td>
163+
<td>GENERATE PDF</td>
164+
</tr>
165+
166+
<tr>
167+
<td class="mono-bold">button-bg</td>
168+
<td class="gray">Background color for the button</td>
169+
<td>#0078d7</td>
170+
</tr>
171+
172+
<tr>
173+
<td class="mono-bold">button-color</td>
174+
<td class="gray">Text color on the button</td>
175+
<td>white</td>
176+
</tr>
177+
178+
<tr>
179+
<td class="mono-bold">input-bg</td>
180+
<td class="gray">Background color for text input</td>
181+
<td>white</td>
182+
</tr>
183+
184+
<tr>
185+
<td class="mono-bold">input-color</td>
186+
<td class="gray">Text color of the input box</td>
187+
<td>#333</td>
188+
</tr>
189+
190+
<tr>
191+
<td class="mono-bold">hide-input</td>
192+
<td class="gray"> true to hide input Text box </td>
193+
<td>false</td>
194+
</tr>
195+
196+
<tr>
197+
<td class="mono-bold">pdf-primary-color</td>
198+
<td class="gray">Color used for headings of main sections in PDF</td>
199+
<td>#b44646</td>
200+
</tr>
201+
202+
<tr>
203+
<td class="mono-bold">pdf-alternate-color</td>
204+
<td class="gray">Color used for sub headings</td>
205+
<td>#005b96</td>
206+
</tr>
207+
208+
<tr>
209+
<td class="mono-bold">pdf-title</td>
210+
<td class="gray">Title of the generated PDF</td>
211+
<td>API Reference</td>
212+
</tr>
213+
214+
<tr>
215+
<td class="mono-bold">pdf-footer-text</td>
216+
<td class="gray">Text to be printed at the bottom of every page</td>
217+
<td>(empty)</td>
218+
</tr>
219+
220+
<tr>
221+
<td class="mono-bold">include-info</td>
222+
<td class="gray"> true to include info section in the generated PDF</td>
223+
<td>true</td>
224+
</tr>
225+
226+
<tr>
227+
<td class="mono-bold">include-toc</td>
228+
<td class="gray">true to include table-of-contents in the generated PDF</td>
229+
<td>true</td>
230+
</tr>
231+
232+
<tr>
233+
<td class="mono-bold">include-security</td>
234+
<td class="gray">true to include security section in the generated PDF</td>
235+
<td>true</td>
236+
</tr>
237+
238+
<tr>
239+
<td class="mono-bold">include-api-details</td>
240+
<td class="gray">true to include all the API details in the generated PDF</td>
241+
<td>true</td>
242+
</tr>
243+
244+
<tr>
245+
<td class="mono-bold">include-api-list </td>
246+
<td class="gray">true to include list of all the APIs and their summary at the end in the generated PDF </td>
247+
<td>false</td>
248+
</tr>
249+
</table>
250+
</div>
251+
252+
<h2> Methods</h2>
253+
<div class="table-block">
254+
<table class="m-table">
255+
<tr>
256+
<th > Name</th>
257+
<th >Description </th>
258+
</tr>
259+
<tr>
260+
<td class="mono-bold">generatePdf(spec)</td>
261+
<td class="gray">
262+
to programmatically generate the PDF. <br/>
263+
Takes a single parameter that can be :
264+
<ul>
265+
<li> either a string containing the url of the specs</li>
266+
<li> or a JSON object representing a valid spec</li>
267+
</ul>
268+
<a href="https://github.com/mrin9/RapiPdf/blob/master/docs/examples/example1.html"> Example </a>
269+
</td>
270+
</tr>
271+
<tr>
272+
<td class="mono-bold">setAttribute(attr-name, value)</td>
273+
<td class="gray">All HTML elements contains setAttribute() method, You may use this method to programmatically update/change any of its properties</td>
274+
</tr>
275+
</table>
276+
</div>
277+
278+
<h2> Localization</h2>
279+
<div class="mono-bold" style="text-align: center;">create a &lt;template&gt; inside &lt;rapi-pdf&gt; element and provide the translations</div>
280+
<pre class="shadow code-block"><code class="html" style="border-radius:4px">
281+
&lt;rapi-pdf spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"&gt;
282+
&lt;template&gt;
283+
{
284+
"index" : "INDEX",
285+
"api" : "API",
286+
"apiList" : "API List",
287+
"apiReference" : "API Reference",
288+
"apiVersion" : "API Version",
289+
"contact" : "CONTACT",
290+
"name" : "NAME",
291+
"email" : "EMAIL",
292+
"url" : "URL",
293+
"termsOfService" : "Terms of service",
294+
"securitySchemes": "SECURITY SCHEMES",
295+
"type" : "TYPE",
296+
"description" : "DESCRIPTION",
297+
"request" : "REQUEST",
298+
"requestBody" : "REQUEST BODY",
299+
"response" : "RESPONSE",
300+
"responseModel" : "RESPONSE MODEL",
301+
"statusCode" : "STATUS CODE",
302+
"deprecated" : "DEPRECATED",
303+
"allowed" : "allowed",
304+
"pattern" : "pattern",
305+
"parameters" : "Parameters",
306+
"method" : "METHOD",
307+
"securityAndAuthentication" : "Security and Authentication",
308+
"noRequestParameters" : "No request parameters",
309+
}
310+
&lt;/template&gt;
311+
&lt;/rapi-pdf&gt;
312+
</code>
313+
</pre>
314+
315+
</div>
316+
</div>
317+
<!-- End of API -->
318+
319+
<div id="footer" class="footer container">
320+
<div class="footer-item"> MIT Licence</div>
321+
<div class="footer-item"> <a href="https://github.com/mrin9/RapiPdf"> GitHub</a></div>
322+
<div class="footer-item"> <a href="https://www.npmjs.com/package/rapipdf"> npm</a></div>
323+
</div>
324+
35325

326+
<script>
327+
328+
function goToSection(e){
329+
if (e.target.dataset.action==='git' || e.target.dataset.action==='url' ){
330+
return;
331+
}
36332

333+
e.preventDefault();
334+
var gotoEl = document.getElementById(e.target.getAttribute('href').substring(1));
335+
if (gotoEl){
336+
gotoEl.scrollIntoView({ block: 'start', behavior: 'smooth' });
337+
}
338+
}
339+
</script>
37340
</body>
38341

39342
</html>

0 commit comments

Comments
 (0)