rapidoc 9.1.0 → 9.1.4

package/docker/Dockerfile

@@ -1,3 +1,6 @@
+# to Build the Docker image from root folder execute 
+# docker build -t mrin9/rapidoc -f ./docker/Dockerfile . 
+
 # Run the Docker image (view a spec thats hosted on a web-server)
 # docker run -it --rm -p 80:80 -e SPEC_URL="http://petstore.swagger.io/v2/swagger.json" mrin9/rapidoc
 
@@ -30,17 +33,14 @@ RUN npm run build
 
 # production stage
 FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/dist /app
-COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 
 ENV PAGE_TITLE="RapiDoc"
 ENV PAGE_FAVICON="favicon.png"
 ENV SPEC_URL="http://petstore.swagger.io/v2/swagger.json"
 ENV PORT=80
-ENV RAPIDOC_OPTIONS=
 
 # copy files to the nginx folder
-COPY --from=0 build/dist /usr/share/nginx/html
+COPY --from=build-stage /app/dist /usr/share/nginx/html
 COPY docker/index.tpl.html /usr/share/nginx/html/index.html
 COPY logo.png /usr/share/nginx/html/favicon.png
 COPY docker/nginx.conf /etc/nginx/
@@ -48,4 +48,4 @@ COPY docker/docker-run.sh /usr/local/bin
 
 EXPOSE 80
 
-CMD ["sh", "/usr/local/bin/docker-run.sh"]
+CMD ["sh", "/usr/local/bin/docker-run.sh"]

package/docs/api.html

@@ -14,8 +14,8 @@
 
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-  <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
-  <meta name="keywords" content="RapiDoc, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI,REST, themes, dark mode, markdown, API documentation">
+  <meta name="description" content="RapiDoc is a Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
+  <meta name="keywords" content="RapiDoc, openapi viewer, openapi to html, openapi renderer, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST, themes, dark mode, markdown, API documentation">
 
   <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>
 
@@ -147,6 +147,13 @@
             </span> Request fields will be filled with example value (if provided in spec) </td>
             <td class='default-col'>true</td>
           </tr>
+
+          <tr>
+            <td class="attr-col mono bold right">persist-auth </td>
+            <td class="gray"><span class='bold dark-gray'>Allowed:<span class='blue'> true | false </span>
+            </span> Authentication will be persisted to localStorage </td>
+            <td class='default-col'>false</td>
+          </tr>
         </table>
 
         <a id="att-colors"></a>
@@ -251,28 +258,6 @@
             </td>
             <td class='default-col'></td>
           </tr>
-
-          <tr>
-            <td class=" attr-col mono bold right">nav-bg-image </td>
-            <td class="gray">
-              URL of navigation bar's background image
-              &nbsp;|&nbsp; <a href="./examples/nav-bg-image.html">Example</a>
-            </td>
-            <td class='default-col'>(empty)</td>
-          </tr>
-          <tr>
-            <td class=" attr-col mono bold right">nav-bg-image-size </td>
-            <td class="gray">navigation bar's background image size (same as css background-size property) allowed values are <br><span class='blue'>
-              auto | length | cover | contain | initial | inherit </span></td>
-            <td class='default-col'></td>
-          </tr>
-          <tr>
-            <td class=" attr-col mono bold right">nav-bg-image-repeat </td>
-            <td class="gray"> navigation bar's background image repeat (same as css background-repeat property) allowed values are <br><span class='blue'>
-              repeat | repeat-x | repeat-y | no-repeat | initial | inherit </span> </td>
-            <td class='default-col'></td>
-          </tr>
-
           <tr>
             <td class=" attr-col mono bold right">nav-text-color </td>
             <td class="gray"> Navigation bar's Text color </td>
@@ -374,7 +359,7 @@
           <tr>
             <td class="mono bold right">schema-hide-read-only </td>
             <td class="gray"> <span class='bold dark-gray'>Allowed:<span class='blue'> always | never | (combination of: post | put | patch)</span></span> -
-              read-only fileds in request schemas is <span class='blue'> always </span> hidden but are shown in response.
+              read-only fields in request schemas is <span class='blue'> always </span> hidden but are shown in response.
               <br/>
               If you do not want to hide read-only fields or hide them based on action you can configure this setting to 'never' or any combination of post | put | patch to indicate where to hide
               <br/>
@@ -386,7 +371,7 @@
           <tr>
             <td class="mono bold right">schema-hide-write-only </td>
             <td class="gray"> <span class='bold dark-gray'>Allowed:<span class='blue'> always | never</span></span> -
-              write-only fileds in response schemas is <span class='blue'> always </span> hidden but are shown in request.
+              write-only fields in response schemas is <span class='blue'> always </span> hidden but are shown in request.
               <br/>
               If you do not want to hide write-only fields then set to 'never'
               <br/>
@@ -445,8 +430,7 @@
               show/hide the components section both in document and menu
               (available only in focused render-style)
               <br/>
-              Will show the components section along with schemas, responses, examples, requestBodies, headers, securitySchemes, links and callbacks
-              Also will be shown in the menu on the left (in read mode)
+              Will show the components section containing schemas, responses, examples, requestBodies, headers, securitySchemes, links and callbacks
             </td>
             <td>false</td>
           </tr>
@@ -481,6 +465,13 @@
             </td>
             <td>true</td>
           </tr>
+          <tr>
+            <td class="mono bold right">allow-spec-file-download</td>
+            <td class="gray">
+              If set to 'true', it provide buttons in the overview section to download the spec or open it in a new tab.
+            </td>
+            <td>false</td>
+          </tr>
           <tr>
             <td class="mono bold right">allow-search</td>
             <td class="gray">
@@ -632,12 +623,22 @@
               To programmatically provide username and password.  <span class='mono blue'>securitySchemeId</span> should be a valid securityScheme which you have defined in the spec
             </td>
           </tr>
+          <tr>
+            <td class="mono bold right" style="text-align: left;">setApiKey(<br/>
+              &nbsp;&nbsp;securitySchemeId, token<br/>
+            ) 
+            </td>
+            <td class="gray" colspan="2">
+              To programmatically provide api-key. <span class='mono blue'>securitySchemeId</span> should be a valid securityScheme which you have defined in the spec
+            </td>
+          </tr>
           <tr>
             <td class="mono bold right">setApiServer(apiServerUrl) </td>
             <td class="gray" colspan="2">
               To programmatically set API Server.  <span class='mono blue'>apiServerUrl</span> should be a valid server url which you have defined in the spec
             </td>
           </tr>
+
           <tr>
             <td class="mono bold right">scrollTo(path) </td>
             <td class="gray" colspan="2">
@@ -729,7 +730,7 @@
         <div style="width:710px">
           <span class="mono bold">slots</span> 
           <span>
-            are placeholders inside a web component that you can fill with your own markup.
+            are predefined placeholders inside a RapiDoc component. You can use these slots to place your custom html in certain desired locations inside RapiDoc.
             Below is an example on how to inject HTML/CSS/JS at various locations in RapiDoc 
           </span>
           <pre class="shadow1 code-block" style="max-width: calc(100% - 8px)">
@@ -737,13 +738,13 @@
               &lt;html&gt;
                 ...
                 &lt;rapi-doc spec-url = "https://petstore.swagger.io/v2/swagger.json"&gt;
-                  &lt;slot&gt; &lt;!-- This is a default slot --&gt;
+                  &lt;div&gt; &lt;!-- HTML Elements without slot attribute goes into default location--&gt;
                     &lt;h1&gt; My HTML Heading  &lt;/h1&gt;
-                  &lt;/slot&gt;
+                  &lt;/div&gt;
 
-                  &lt;slot name="nav-logo"&gt; &lt;!-- This is a named slot --&gt;
-                    &lt;img src="https://via.placeholder.com/100" style="width:50px; height:50px"/&gt;
-                  &lt;/slot&gt;
+                  &lt;!-- provide slot attribute to place an element at desired location --&gt;
+                  &lt;img slot="nav-logo" src="https://via.placeholder.com/100" style="width:50px; height:50px"/&gt;
+                 
                 &lt;/rapi-doc&gt;
                 ...
               &lt;/html&gt;
@@ -762,7 +763,7 @@
             </tr>
             <tr>
               <td class="mono bold right">logo</td>
-              <td class="gray">use this slot to replace the logo </td>
+              <td class="gray">use this slot to replace the logo on the header </td>
             </tr>
             <tr>
               <td class="mono bold right">header</td>
@@ -774,20 +775,27 @@
             </tr>
             <tr>
               <td class="mono bold right">nav-logo</td>
-              <td class="gray"> contents appear at Side navigation bar (only available in read-mode)</td>
+              <td class="gray"> contents appear at the top of Side navigation bar usually used for logo. (only available in read-mode)</td>
             </tr>
 
             <tr>
               <td class="mono bold right">overview</td>
-              <td class="gray"> contents appear at overview section</td>
+              <td class="gray"> contents appear at overview section - top of the document. You can link to this section using <span class="mono blue"> #overview </span>
+              </td> </td>
             </tr>
             <tr>
               <td class="mono bold right">servers</td>
-              <td class="gray"> contents appear at server section</td>
+              <td class="gray"> contents appear at server section which is under the overview slot. You can link to this section using <span class="mono blue"> #servers </span> </td>
             </tr>
             <tr>
               <td class="mono bold right">auth</td>
-              <td class="gray"> contents appear at authentication section</td>
+              <td class="gray"> contents appear at authentication section which is under the overview > servers slot. You can link to this section using <span class="mono blue"> #auth </span></td>
+            </tr>
+            <tr>
+              <td class="mono bold right">operations-top</td>
+              <td class="gray"> contents appear at the top of all the operations but below overview > servers > auth section. 
+                Use this section to provide content that applies to all the operations. You can link this section using <span class="mono blue"> #operations-top </span>
+              </td>
             </tr>
             <tr>
               <td class="mono bold right">tag--{tag-name}</td>
@@ -796,7 +804,7 @@
             <tr>
               <td class="mono bold right">{method}-{path}</td>
               <td class="gray"> each path is identified by an id. which is in the format of {method}-{path},
-                and certain invalid charecters such as {, }, #, space is replaced by hyphen (-).
+                and certain invalid characters such as {, }, #, space is replaced by hyphen (-).
                 Use this slot to insert HTML content into a specifi tag
               </td>
             </tr>

package/docs/examples/auth-test1.html

@@ -0,0 +1,113 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'UA-132775238-1');
+    </script>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <script type="module" src="../rapidoc-min.js"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <style>
+      .size { width: 100px; height: 30px;  font-size:13px; margin: 0 2px; padding: 0 8px; border-radius: 2px; outline:none; color: #fff;}
+      .btn { background-color: #2069e0; cursor:pointer; border: 1px solid transparent;}
+      .txt {background-color: #2e2e2e; border: 1px solid #2069e0;}
+      .table{ border:1px solid #444; border-collapse: collapse;}
+      .table td{ font-size:12px; font-family: 'Roboto Mono'; border: 1px solid #444; padding:8px;}
+      .table th{ font-size:11px; font-family: 'Open Sans'; border: 1px solid #444; padding:8px; background: #222;}
+      datalist {
+        background-color: #222;
+        border: 1px solid #2069e0;
+      }
+      rapi-doc{
+        width:100%;
+      }
+    </style>
+  </head>
+  <body>
+    <rapi-doc id="thedoc"
+    spec-url="../specs/auth-test1.yaml"
+    show-info = "true"
+    theme = "dark"
+    render-style="read" 
+    show-header="false" 
+    >
+      <div slot='operations-top'>
+        <div style="font-size:14px; border:0; background-color: #282828; border-radius:4px; padding:16px; margin:16px 75px">
+          <table>
+            <tr>
+              <td> HTTP Basic</td>
+              <td> 
+                <input class='size txt' id='http-security-scheme-id' value="http-basic" type='text' placeholder='Security Scheme ID' spellcheck='false' style="width:120px"> 
+                <input class='size txt' id='http-username' type='text' value="new-username"  placeholder='User name' spellcheck='false' > 
+                <input class='size txt' id='http-password' type='text' value="new-pwd"  placeholder='Password' spellcheck='false' > 
+                <button class='size btn' onclick='setSecurity(event, "http")'>Apply</button>
+              </td>
+            </tr>
+            <tr>
+              <td> API Key</td>
+              <td>
+                <input class='size txt' id='api-security-scheme-id' value="api_key1" type='text' placeholder='Security Scheme ID' spellcheck='false' style="width:120px"> 
+                <input class='size txt' id='api-key-value' type='text' value="new-token"  placeholder='API Key Value' spellcheck='false' > 
+                <button class='size btn' onclick='setSecurity(event, "apikey")'>Apply</button>
+              </td>
+            </tr>
+            <tr>
+              <td colspan="2"><button class='size btn' style="width:200px" onclick='clearSecurityKeys(event)'>Clear all Keys</button></td>
+            </tr>  
+          </table>
+        </div>
+      </div>  
+    </rapi-doc>
+    <script>
+      function setApiServer(ev) {
+        const docEl = document.getElementById('thedoc');
+        const trEl = ev.target.closest('tr');
+        const serverUrl = trEl.querySelector('#server-url').value;
+        result = docEl.setApiServer(serverUrl);
+        ev.target.innerText = result ? 'Applied !' : 'Failed';
+        ev.target.style.backgroundColor = result ? 'green' : 'orangered';
+        window.setTimeout(function(){
+          ev.target.innerText = 'Apply';
+          ev.target.style.backgroundColor = '#2069e0';
+        }, 5000)
+
+      }
+
+      function clearSecurityKeys(ev) {
+        const docEl = document.getElementById('thedoc');
+        docEl.removeAllSecurityKeys();
+      }
+
+      function setSecurity(ev, securityType) {
+        const docEl = document.getElementById('thedoc');
+        const trEl = ev.target.closest('tr');
+        let result;
+        if (securityType === 'http') {
+          const securitySchemeId = trEl.querySelector('#http-security-scheme-id').value;
+          const username = trEl.querySelector('#http-username').value;
+          const password = trEl.querySelector('#http-password').value;
+          result = docEl.setHttpUserNameAndPassword(securitySchemeId, username, password);
+        } else if (securityType === 'apikey') {
+          const securitySchemeId = trEl.querySelector('#api-security-scheme-id').value;
+          const newApiToken = trEl.querySelector('#api-key-value').value;
+          result = docEl.setApiKey(securitySchemeId, newApiToken);
+        }
+        ev.target.innerText = result ? 'Applied !' : 'Failed';
+        ev.target.style.backgroundColor = result ? 'green' : 'orangered';
+        window.setTimeout(function(){
+          ev.target.innerText = 'Apply';
+          ev.target.style.backgroundColor = '#2069e0';
+        }, 5000)
+      }
+    </script>
+
+  </body>
+</html>

package/docs/examples/auth.html

@@ -16,11 +16,16 @@
     <script type="module" src="../rapidoc-min.js"></script>
     <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
     <style>
-      .size { width: 80px; height: 30px;  font-size:13px; margin: 0 2px; padding: 0 8px; border-radius: 2px; outline:none; color: #fff;}
+      .size { width: 100px; height: 30px;  font-size:13px; margin: 0 2px; padding: 0 8px; border-radius: 2px; outline:none; color: #fff;}
       .btn { background-color: #2069e0; cursor:pointer; border: 1px solid transparent;}
       .txt {background-color: #2e2e2e; border: 1px solid #2069e0;}
       .table{ border:1px solid #444; border-collapse: collapse;}
       .table td{ font-size:12px; font-family: 'Roboto Mono'; border: 1px solid #444; padding:8px;}
+      .table th{ font-size:11px; font-family: 'Open Sans'; border: 1px solid #444; padding:8px; background: #222;}
+      datalist {
+        background-color: #222;
+        border: 1px solid #2069e0;
+      }
       rapi-doc{
         width:100%;
       }
@@ -41,29 +46,30 @@
             *This section is not RapiDoc generated. It is user injected HTML/JS into a <span style="font-family:'Roboto Mono'"> &lt;slot&gt;</span> element to demonstrate how to programatically apply security keys
           </div>
 
-          <div style="margin-top:16px">
-            RapiDoc provides you with two helper methods which you can use to supply security keys programatically. 
-            <ol>
-              <li> <span style="font-family:'Roboto Mono'">setHttpUserNameAndPassword()</span></li>
-              <li> <span style="font-family:'Roboto Mono'">setApiKey()</span></li>
-            </ol>
+          <div style="margin:24px 0 8px 0">
+            RapiDoc provides you with two helper methods which you can use to supply security keys programatically. You can use one of these method based on the security scheme type
           </div>
-          <p>
+          <table class="table" style="border:1px solid #444; font-family:'Roboto Mono'">
+            <tr><th>SCHEME-TYPE</th><th>METHOD USED TO UPDATE</th></tr>
+            <tr> <td>basic</td><td>setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
+            <tr> <td>other than basic</td><td style="border-bottom: 1px dashed #383838;" rowspan="3">setApiKey('api_key1', 'newApiToken')</td></tr>
+          </table>
+
+          <div style="margin:24px 0 8px 0">
             The table below list all the scurity schemes included in this spec. Check the corrosponding method that can be used to supply an access-token
-            <table class="table" style="border:1px solid #444; font-family:'Roboto Mono'">
-              <tr><th>TYPE</th><th>SECURITY SCHEME ID</th><th>METHOD USED TO UPDATE</th></tr>
-              <tr> <td>http</td><td>http-basic</td> <td rowspan="2">RapiDocEl.setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
-              <tr> <td>http</td><td>http-bearer</td></tr>
-              <tr> <td>oauth2</td><td>ms-oauth</td><td style="border-bottom: 1px dashed #383838;" rowspan="3">RapiDocEl.setApiKey('api_key1', 'newApiToken')</td></tr>
-              <tr> <td>apiKey</td><td>api_key1</td></tr>
-              <tr> <td>apiKey</td><td>api_key2</td></tr>
-              <tr> <td>apiKey</td><td>api_key_cookie</td><td>
-                <span style="font-family:'Open Sans'; color:#777">
-                  If the apiKey needs to send using a cookie, then it wont be set as RapiDoc do not support creation or reading of cookies
-                </span>
-              </td></tr>
-            </table>
-          </p>
+          </div>
+          <table class="table" style="border:1px solid #444; font-family:'Roboto Mono'">
+            <tr><th>SECURITY SCHEME</th><th>SCHEME TYPE</th><th>METHOD USED TO UPDATE</th></tr>
+            <tr> <td>http-basic</td><td>basic</td> <td>setHttpUserNameAndPassword('http-basic', 'newUserName', 'newPassword')</td></tr>
+            <tr> <td>http-bearer</td><td>bearer</td> <td>setApiKey('http-bearer', 'newToken')</td></tr>
+            <tr> <td>api_key1</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('api_key1', 'newToken')</td></tr>
+            <tr> <td>api_key2</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('api_key2', 'newToken')</td></tr>
+            <tr> <td>ms-oauth</td><td> <span style="color:#777"> (not-specified)</span></td> <td>setApiKey('ms-oauth', 'newToken')</td></tr>
+            <tr> <td>api_key_cookie</td><td> <span style="color:#777"> (not-specified)</span></td> 
+              <td> <span style="color:#777"> (wont work as this scheme sends api-key in a cookie, and rapidoc dont create/read cookies)</span></td>
+            </tr>
+          </table>
+
           <div style="margin:32px 0 16px 0; color:#777; font-weight:bold">
             Below form is used for taking user input and apply the security key using javascipt 
           </div>
@@ -79,20 +85,19 @@
             </tr>
             <tr>
               <td> API Key</td>
-              <td> 
-                <input class='size txt' id='api-security-scheme-id' value="api_key1" type='text' placeholder='Security Scheme ID' spellcheck='false' style="width:120px"> 
+              <td>
+                <select class='size txt' style="width:138px" id='api-security-scheme-id' placeholder='Security Scheme ID'>
+                  <option value="api_key1">api_key1</option>
+                  <option value="api_key2">api_key2</option>
+                  <option value="http-bearer">http-bearer</option>
+                  <option value="ms-oauth">ms-oauth</option>
+                  <option value="invalid-key">invalid-key</option>
+                </select>
+
                 <input class='size txt' id='api-key-value' type='text' value="new-token"  placeholder='API Key Value' spellcheck='false' > 
                 <button class='size btn' onclick='setSecurity(event, "apikey")'>Apply</button>
               </td>
             </tr>
-            <tr>
-              <td>OAuth</td>
-              <td> 
-                <input class='size txt' id='oauth-security-scheme-id' value="ms-oauth" type='text' placeholder='Security Scheme ID' spellcheck='false' style="width:120px"> 
-                <input class='size txt' id='oauth-key-value' type='text' value="new-token"  placeholder='Access Token' spellcheck='false' > 
-                <button class='size btn' onclick='setSecurity(event, "oauth2")'>Apply</button>
-              </td>
-            </tr>
             <tr>
               <td colspan="2"><button class='size btn' style="width:200px" onclick='clearSecurityKeys(event)'>Clear all Keys</button></td>
             </tr>  
@@ -110,8 +115,6 @@
               <td colspan="2"><button class='size btn' style="width:110px" onclick='setApiServer(event)'>Set API Server</button></td>
             </tr>  
           </table>
-
-
         </div>
       </div>  
     </rapi-doc>

package/docs/examples/badges.html

@@ -19,7 +19,7 @@
       theme = "light"
       show-info = "true"
       show-header = "false"
-      render-style = "view"
+      render-style = "read"
       allow-try = "false"
     >
     </rapi-doc>

package/docs/examples/dynamic-query-params.html

@@ -29,6 +29,7 @@
       show-header = "false"
       regular-font = 'Open Sans'
       mono-font = "Roboto Mono"
+      default-schema-tab = "example"
     > </rapi-doc>
   </body>
 </html>

package/docs/examples/mongo.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-132775238-1');
+    </script>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+    <script type="module" src="../rapidoc-min.js"></script>
+  </head>
+  <body>
+    <!--
+    <rapi-doc id="thedoc"
+      spec-url = "../specs/mongo.yaml" 
+      allow-authentication = "false"
+      show-header="false"
+      show-info="false"
+      allow-server-selection="false"
+      render-style = "focused"
+      sort-tags = "true"
+      primary-color="#f54c47"
+      show-components = "true"
+    > </rapi-doc>
+    -->  
+    <json-schema-viewer id="thedoc" spec-url = "../specs/mongo.yaml"  ></json-schema-viewer>
+  </body>
+</html>

package/docs/examples/readwrite.html

@@ -0,0 +1,40 @@
+<!doctype html>
+<html>
+  <head>
+    <!-- Global site tag (gtag.js) - Google Analytics -->
+    <script async src='https://www.googletagmanager.com/gtag/js?id=UA-132775238-1'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'UA-132775238-1');
+    </script>
+    <meta charset='utf-8'>
+    <meta name='viewport' content='width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes'>
+    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">
+    <link href='../index.css' rel='stylesheet'>
+    <script type='module' src='../rapidoc-min.js'></script>
+  </head>
+  <body>
+    <rapi-doc spec-url="../specs/readwrite.yaml"
+      id = "thedoc"
+      allow-authentication = "false" 
+      allow-search = "false"
+      show-info = "false"
+      show-header = "false"
+      render-style = "read"
+      allow-try = "false" 
+      regular-font = 'Open Sans'
+      mono-font = "Roboto Mono"
+      theme = "dark"
+      schema-style='tree'
+    > 
+      <div slot="nav-logo" style="width:100%; display: flex; flex-direction:column;">
+        <div style="display: flex;justify-content: center; margin: 2px 0">
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'tree')" >Tree</button>
+          <button class='btn medium' onclick="document.getElementById('thedoc').setAttribute('schema-style', 'table')" >Table</button>
+        </div>
+      </div>
+  </rapi-doc>
+  </body>
+</html>

package/docs/examples/slots.html

@@ -68,6 +68,13 @@
         </div>
       </span>
 
+      <span slot="operations-top" >
+        <p style="margin-top:10px; padding:16px 36px; background-color:#a5522e; color:#fff; text-align:center;" > 
+          <b> overview</b> slot | <span style="font-size:12px"> Good for contents that applies to all operations/api</span>
+        </p>
+      </span>
+
+
       <p slot="tag--user" style="margin-top:10px; padding:16px 36px; background-color:#ac7339; color:#fff; text-align:center;" > 
         <b> tag--user</b> slot
       </p>

package/docs/examples.html

@@ -77,7 +77,7 @@
         <!doctype html> <!-- Important: must specify -->
         <html>
           <head>
-            <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
+            <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 characters -->
             <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
           </head>
           <body>
@@ -188,7 +188,8 @@
         <img 
           slot="nav-logo" 
           src="https://img.icons8.com/color/48/000000/youtube-play.png"
-        /> 
+        />
+      />  
       </rapi-doc>
     </code>
   </pre>

package/docs/index.html

@@ -15,7 +15,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
   <meta name="description" content="RapiDoc is Web Component for viewing Swagger & OpenAPI Spec. Supports themes, styling and various rendering styles">
-  <meta name="keywords" content="API, RapiDoc, ReDoc, stoplight, readme, Swagger, SwaggerUI, Custom Element, async-api, Web Component, web-hooks, OpenAPI, REST, themes, dark mode, markdown, API documentation, open api console, API mock, rest documentation">
+  <meta name="keywords" content="RapiDoc, openapi viewer, openapi to html, openapi renderer, ReDoc, Swagger, SwaggerUI, Custom Element, Web Component, OpenAPI, REST, themes, dark mode, markdown, API documentation, API mock">
 
   <link rel="shortcut icon" type="image/png" href="./images/logo.png"/>
 
@@ -267,7 +267,7 @@
         &lt;!doctype html&gt; &lt;!-- Important: must specify --&gt;
         &lt;html&gt;
         &lt;head&gt;
-          &lt;meta charset="utf-8"&gt; &lt;!-- Important: rapi-doc uses utf8 charecters --&gt;
+          &lt;meta charset="utf-8"&gt; &lt;!-- Important: rapi-doc uses utf8 characters --&gt;
           &lt;script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"&gt;&lt;/script&gt;
         &lt;/head&gt;
         &lt;body&gt;