Add fetures to replace logo and add external content

Author: mrin9

README.md

@@ -14,14 +14,33 @@
 Custom Eelement for Open-API spec viewing
 
 ## Features
-- Supports Swagger V2.0 and OpenAPI 3.0
-- Allows Personalization, Branding 
-- Dark and Light Theme
-- Easy to use. No build or framework needed
-- Lightweight and Fast (under 125 KB gzipped)
-- Works with React, Angular and Vue
+- Supports Swagger 2.0 and OpenAPI 3.0 
+- Works with any framework or with no framework
+- Allows to make API calls
+- Better Usability, 
+  - all Models and Examples are expanded by default, eliminates the need to click and reveal.
+  - Request fields are pre-populated with sample data
+  - Takes only one click to make an API call
+  - Request and response can be placed side-by-side for easy comparision
+- Branding and Personalization features makes it easy to follow any style guide
+  - Comes with 2 Themes (Dark and Light)
+  - Replace default logo with yours
+  - Typography, allows changing fonts
+  - Allows changing text-color, button-color, header-color and color of other UI elements
+- Plenty of customization options 
+  - Add external contents at the top and bottom of the document,  you may add images, link, text, forms etc
+  - Allows disabling API calling feature
+  - Hide the header so the user cant load any other OpenAPI Spec
+  - Hide Authentication and provide your own pre-generated api-key 
+  - Embed it inside another HTML document
+  - Use it inside another framework (react, vue, angular, lit-element)
+  - Use JavaScript to change its attributes, and it will react to those changes
+  - Style the element with standard css (change padding, position, border, margin )
+- Lightweight and fast (under 125 KB gzipped)
+- Load local json spec from the disk
 - Supported on Chrome, FireFox and Safari. (Not yet tested on Edge)
 
+
 ## Documentation
 [Check out the usage and examples](https://mrin9.github.io/RapiDoc/)
 

dist/index.html

@@ -70,8 +70,12 @@
   <rapi-doc spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json" 
     theme="light"
     show-info="false"
-    show-header="false"
-  ></rapi-doc>
+  >
+  <img slot="logo" src="https://img.icons8.com/color/48/000000/picture.png">
+  <p slot="top">Hey this content is added from outside</p>
+  <p slot="bottom">Hey this content is added from outside</p>
+
+</rapi-doc>
 <script type="text/javascript" src="rapidoc-min.js"></script></body>
 
 </html>

dist/index.html.gz

@@ -1,7 +1,33 @@
-## Easy Usage
-No Build steps!, No Frameworks!, Just copy the below script in an html, and open it in a browser !!!
-
-### Use from CDN
+## OpenAPI Spec Viewer
+
+### Features
+- Supports swagger 2.0 and OpenAPI 3.0 
+- Works with any framework
+- Allows to make API calls
+- Better Usability, 
+  - all Models and Examples are expanded by default, eliminates the need to click and reveal.
+  - Request fields are pre-populated with sample data
+  - Takes only one click to make an API call
+  - Request and response can be placed side-by-side for easy comparison
+- Branding and Personalization features makes it easy to follow any style guide
+  - Comes with 2 Themes (Dark and Light)
+  - Replace default logo with yours
+  - Typography, allows changing fonts
+  - Allows changing text-color, button-color, header-color and color of other UI elements
+- Plenty of customization options 
+  - Add external contents at the top and bottom of the document, you may add tables, images, link, text, forms etc
+  - Allows disabling API calling feature
+  - Hide the header so the user cant load any other OpenAPI Spec
+  - Hide Authentication and provide your own pre-generated api-key 
+  - Embed it inside another HTML document
+  - Use it inside another framework (react, vue, angular, lit-element)
+  - Programmatically control the element using JavaScript - change its attributes, and it will react to those changes
+  - Style the element with standard css (change padding, position, border, margin )
+- Lightweight and fast (under 125 KB gzipped)
+- Load local json spec from the disk
+
+### Quickstart (Use from CDN)
+Just copy the below script in an html, and open it in a browser !!!
 ```html
 <html>
   <head>
@@ -16,6 +42,94 @@ No Build steps!, No Frameworks!, Just copy the below script in an html, and open
 </html>
 ```
 
+### Demo & Examples
+
+- [Basic Example](example1.html)
+```html
+  <rapi-doc 
+    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
+  > </rapi-doc>
+```
+
+- [Dark Theme](example2.html)
+```html
+  <rapi-doc 
+    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
+    theme="dark"
+  > </rapi-doc>
+```
+
+- [Change Header Color with Dark Theme](example3.html)
+```html
+  <rapi-doc 
+    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
+    header-color="#2d87e2"
+    theme="dark"
+  > </rapi-doc>
+```
+
+- [Integrate with any HTML document (Request/Response one below the other)](example4.html)
+```html
+  <rapi-doc 
+    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
+    theme='dark' 
+    show-header='false'
+    show-info='false'
+    show-authentication='false'
+    theme='dark' 
+    layout="column"
+  > </rapi-doc>
+```
+
+- [Change Font (you may use local fonts or define your own font)](example5.html)
+```html
+  <head>
+    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
+  </head>
+  <body>  
+    <rapi-doc 
+      spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
+      regular-font="'Varela Round', 'Arial Rounded MT Bold', 'Helvetica Rounded' "
+    > </rapi-doc>
+  </body>  
+```
+
+- [Change Logo](example6.html)
+```html
+  <body>  
+    <rapi-doc spec-url="https://api.apis.guru/v2/specs/googleapis.com/youtube/v3/swagger.json"> 
+      <img slot="logo" src="https://img.icons8.com/color/48/000000/youtube-play.png">
+    </rapi-doc>
+  </body>  
+```
+
+- [Add HTML content inside the spec](example7.html)
+```html
+  <body>  
+    <rapi-doc spec-url="https://api.apis.guru/v2/specs/googleapis.com/youtube/v3/swagger.json"> 
+
+      <!-- content at the top -->
+      <p>This is an example to add external html content </li>
+      <p>Ypu may add </li>
+      <ul>
+        <li> Table </li>
+        <li> Text </li>
+        <li> Images </li>
+        <li> Links </li>
+        <li> any HTML content </li>
+      </ul>  
+
+      <!-- content at the bottom -->
+      <p slot="footer"> This content will apear at the bottom </p>
+    </rapi-doc>
+  </body>  
+```
+
+
+
+- [Change Attributes using JavaScript](example100.html)
+use javascript `Element.setAttribute()` to change the elements attributes and see it reacts to those changes
+
 ### Use in a HTML/JS based project 
 
 - In your project folder, install rapidoc from npm.
@@ -51,10 +165,6 @@ npm install http-server -g
 
 - in your browser visit ```http://localhost:9000/index.html```
 
-
-## Branding, Styling and Personalization
-Style the element using standard `css`. Apply borders, padding, width, height etc in accordance to your brand requierment. You can also use many attributes to effect the interface.
-
 ## Attributes
 <table>
     <tr><th>Attribute</th> <th>Description </th> <th>Default</th></tr>
@@ -104,57 +214,10 @@ Style the element using standard `css`. Apply borders, padding, width, height et
     <tr><td>layout       </td> <td>request/response placement (row, column)</td> <td>row</td></tr>
 </table>
 
-## Examples
-
-- [Basic Example](example1.html)
-```html
-  <rapi-doc 
-    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
-  > </rapi-doc>
-```
-
-- [Dark Theme](example2.html)
-```html
-  <rapi-doc 
-    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
-    theme="dark"
-  > </rapi-doc>
-```
-
-- [Change Header Color with Dark Theme](example3.html)
-```html
-  <rapi-doc 
-    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
-    header-color="#2d87e2"
-    theme="dark"
-  > </rapi-doc>
-```
-
-- [Integrate with any HTML document (Request/Response one below the other)](example4.html)
-```html
-  <rapi-doc 
-    spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
-    theme='dark' 
-    show-header='false'
-    show-info='false'
-    show-authentication='false'
-    theme='dark' 
-    layout="column"
-  > </rapi-doc>
-```
-
-- [Change Font (you may use local fonts or define your own font)](example5.html)
-```html
-  <head>
-    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
-  </head>
-  <body>  
-    <rapi-doc 
-      spec-url="https://api.apis.guru/v2/specs/bitbucket.org/2.0/swagger.json"
-      regular-font="'Varela Round', 'Arial Rounded MT Bold', 'Helvetica Rounded' "
-    > </rapi-doc>
-  </body>  
-```
-
-- [Change Attributes using JavaScript](example6.html)
-
+## Slots
+<table>
+  <tr><th>Slot Name</th> <th>Description </th></tr>
+  <tr><td>(default)</td> <td>any content placed inside `<rapi-doc>` will be shown under the header </td> </tr>
+  <tr><td>logo</td> <td>use this slot to replace the logo </td> </tr>
+  <tr><td>footer</td> <td> The conents of this slot will appear at the bottom of the spec</td> </tr>
+</table>  

dist/rapidoc-min.js

@@ -1,4 +1,4 @@
 theme: jekyll-theme-cayman
 markdown: kramdown
-title: RapiDoc Custom Element
+title: <rapi-doc/>
 google_analytics: UA-132775238-1