27
27
</ head >
28
28
29
29
< body >
30
- < div class ="banner container " id ="banner ">
30
+ < div class ="banner container " id ="banner " style =" padding:20px 32px " >
31
31
< div class ="header ">
32
32
< img class ="logo " src ="../images/logo.png " style ="width:48px;height:48px;margin-right:10px; " />
33
33
< div class ="product-name "> <rapi-doc></ div >
38
38
< a class ="menu-item " data-action ="url " href ="https://mrin9.github.io/RapiPdf/ "> RapiPDF </ a >
39
39
</ nav >
40
40
</ div >
41
-
42
41
< div >
43
- < div class =" banner-content " >
42
+ < div >
44
43
< h1 class ="banner-title "> Web Component for OpenAPI Spec Viewing</ h1 >
45
- < div class ="banner-content-inner ">
46
- < p style ="font-size:18px "> List of all examples</ p >
47
- </ div >
48
44
</ div >
49
45
</ div >
50
46
</ div >
@@ -55,59 +51,71 @@ <h1 class="banner-title">Web Component for OpenAPI Spec Viewing</h1>
55
51
< div class ="table-block ">
56
52
< table class ="m-table ">
57
53
< tr >
58
- < th style ="text-align:left "> Link</ th >
59
- < th style ="text-align:left "> Description </ th >
54
+ < th style ="text-align:left "> List of Examples</ th >
60
55
</ tr >
61
56
< tr >
62
- < td class ="mono-bold "> < a href ="./example100.html "> Playground </ a > </ td >
63
- < td class ="gray "> Shows various things that can be controlled using script </ td >
57
+ < td class ="mono-bold ">
58
+ < a href ="./example100.html "> Playground </ a >
59
+ < span class ="gray descr "> Shows various things that can be controlled using script </ span >
60
+ </ td >
64
61
</ tr >
65
62
< tr >
66
- < td class ="mono-bold "> < a href ="./example1.html "> Example 1 </ a > </ td >
67
- < td class ="gray "> Basic usage </ td >
63
+ < td class ="mono-bold ">
64
+ < a href ="./example1.html "> Basic Usage </ a > </ td >
65
+ </ td >
68
66
</ tr >
69
67
< tr >
70
- < td class ="mono-bold "> < a href ="./example2.html "> Example 2 </ a > </ td >
71
- < td class ="gray "> Apply a dark theme </ td >
68
+ < td class ="mono-bold ">
69
+ < a href ="./example2.html "> Dark Theme </ a >
70
+ </ td >
72
71
</ tr >
73
72
< tr >
74
- < td class ="mono-bold "> < a href ="./example3.html "> Example 3 </ a > </ td >
75
- < td class ="gray "> Change header color and primary color on a dark theme </ td >
73
+ < td class ="mono-bold ">
74
+ < a href ="./example3.html "> Change Header Color </ a >
75
+ </ td >
76
76
</ tr >
77
77
< tr >
78
- < td class ="mono-bold "> < a href ="./example4.html "> Example 4 </ a > </ td >
79
- < td class ="gray "> Embed it in another html </ td >
78
+ < td class ="mono-bold ">
79
+ < a href ="./example4.html "> Embeded </ a >
80
+ < span class ="gray descr "> Shows how rapi-doc element can be embeded into a different html document </ span >
81
+ </ td >
80
82
</ tr >
81
83
< tr >
82
- < td class ="mono-bold "> < a href ="./example5.html "> Example 5 </ a > </ td >
83
- < td class ="gray "> Change the font </ td >
84
+ < td class ="mono-bold ">
85
+ < a href ="./example5.html "> Apply Custom Font </ a >
86
+ </ td >
84
87
</ tr >
85
88
< tr >
86
- < td class ="mono-bold "> < a href ="./example6.html "> Example 6 </ a > </ td >
87
- < td class ="gray "> Change the logo </ td >
89
+ < td class ="mono-bold ">
90
+ < a href ="./example6.html "> Change Logo </ a >
91
+ </ td >
88
92
</ tr >
89
93
< tr >
90
- < td class ="mono-bold "> < a href ="./example7.html "> Example 7 </ a > </ td >
91
- < td class ="gray "> Add your own html in various sections (slots) </ td >
94
+ < td class ="mono-bold ">
95
+ < a href ="./example7.html "> Add your own HTML</ a >
96
+ < div class ="gray descr "> Show how to add custom HTML elements such as paragraphs, buttons textboxes etc in various sections (slots) </ div >
97
+ </ td >
92
98
</ tr >
93
99
< tr >
94
- < td class ="mono-bold "> < a href ="./example8.html "> Example 8 </ a > </ td >
95
- < td class ="gray "> Add custom html and functionality (like Authentication) < br />
96
- The example shows a text-box and a blue button is added on the header. Clicking on the button
97
- will read authentication-token provided by the user in the text-box and apply it to rapi-doc web component
98
- </ td >
100
+ < td class ="mono-bold ">
101
+ < a href ="./example8.html "> Add custom functionality </ a >
102
+ < div class ="gray descr ">
103
+ The example shows a text-box and a blue button is added on the header. Clicking on the button
104
+ will read authentication-token provided by the user in the text-box and apply it to rapi-doc web component
105
+ </ div >
106
+ </ td >
99
107
</ tr >
100
108
< tr >
101
- < td class ="mono-bold "> < a href ="./example9.html "> Example 9 </ a > </ td >
102
- < td class ="gray "> Instead of passing a spec-url, you can even pass a valid json object</ td >
109
+ < td class ="mono-bold ">
110
+ < a href ="./example9.html "> JSON Object as OpenAPI-spec </ a >
111
+ </ td >
103
112
</ tr >
104
113
< tr >
105
114
< td class ="mono-bold ">
106
- < a href ="./oneof.html "> one-of </ a >
107
- < a href ="./anyof.html "> any-of </ a >
115
+ < a href ="./oneof.html "> one-of </ a > ,
116
+ < a href ="./anyof.html "> any-of </ a > and
108
117
< a href ="./allof.html "> all-of </ a >
109
118
</ td >
110
- < td class ="gray "> Shows open-api spec contating model composition using all-off, one-of and any-of</ td >
111
119
</ tr >
112
120
</ table >
113
121
</ div >
0 commit comments