add swagger API implementation

_css/plugin-swagger-ui.css

@@ -0,0 +1,200 @@
+.swagger-ui {
+  --swagger-colorfx-mix: 95%
+}
+
+/*
+Text
+  Font
+  Color
+  size
+*/
+
+.swagger-ui p,
+.opblock-summary-path,
+.opblock-summary-description,
+.swagger-ui .opblock .opblock-summary-path__deprecated,
+h2.title,
+.opblock-tag-section h3:first-child,
+span.schemes-title,
+.swagger-ui .dialog-ux .modal-ux-header h3,
+.swagger-ui .dialog-ux .modal-ux-content h4,
+.swagger-ui label,
+.swagger-ui .btn,
+.markdown-section h2:first-child,
+.swagger-ui input,
+.swagger-ui select,
+.swagger-ui section.models h4,
+.swagger-ui .model-title,
+.swagger-ui .model,
+.swagger-ui .opblock .opblock-section-header h4,
+.swagger-ui table thead tr th,
+.swagger-ui table thead tr td,
+.swagger-ui .parameter__name,
+.swagger-ui .errors-wrapper,
+.swagger-ui textarea,
+.swagger-ui .tab li,
+.swagger-ui .response-col_status,
+.swagger-ui .responses-inner h5,
+.swagger-ui .responses-inner h4
+{
+  color: var(--base-color) !important;
+}
+
+pre.base-url {
+  margin: var(--code-inline-margin);
+  padding: var(--code-inline-padding);
+  border-radius: var(--code-inline-border-radius);
+  background: var(--code-inline-background);
+  color: var(--code-inline-color) !important;
+  font-family: var(--code-font-family) !important;
+  font-size: var(--code-font-size) !important;
+}
+
+.swagger-ui .info p,
+.swagger-ui .scopes h2,
+.swagger-ui .info a,
+.swagger-ui .info a:hover,
+.swagger-ui .scopes h2 a,
+.swagger-ui .dialog-ux .modal-ux-content p
+{
+  font-size: var(--base-font-size);
+}
+
+/* 
+Links
+  Color
+*/
+
+.swagger-ui .info a,
+.swagger-ui .info a:hover,
+.swagger-ui .scopes h2 a
+{
+  color: var(--link-color);
+}
+
+/*
+Scheme- & Auth block
+  Color
+*/
+
+.swagger-ui .opblock .opblock-section-header,
+.swagger-ui .scheme-container {
+  background: var(--sidebar-background);
+}
+
+.swagger-ui .btn.authorize,
+.swagger-ui .btn.authorize svg
+{
+  border-color: var(--notice-tip-color);
+  color: var(--notice-tip-color);
+  fill: var(--notice-tip-color);
+}
+
+.swagger-ui .btn.cancel {
+  border-color: var(--notice-attention-color);
+}
+
+/*
+Version Tag
+  color
+*/
+
+.swagger-ui .info .title small.version-stamp {
+  background: var(--notice-tip-color);
+}
+
+/*
+SVGs
+  color
+*/
+
+.swagger-ui button {
+  fill: var(--base-color);
+}
+
+/*
+Auth Modal
+  colors
+*/
+
+.swagger-ui .dialog-ux .modal-ux {
+  background: var(--base-background-color);
+  border: unset;
+}
+
+.swagger-ui .auth-container input[type="text"],
+.swagger-ui .checkbox input[type="checkbox"] + label > .item,
+.swagger-ui input[disabled],
+.swagger-ui input[type="text"]:not(.invalid),
+.swagger-ui textarea {
+  background-color: var(--sidebar-background) !important;
+  border: unset;
+  box-shadow: unset;
+}
+
+.swagger-ui input[type="text"].invalid {
+  background-color: color-mix(in srgb, var(--notice-attention-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+}
+
+.swagger-ui select {
+  background: var(--sidebar-background) !important;
+  appearance: button;
+}
+
+.swagger-ui .dialog-ux .modal-ux-header,
+.swagger-ui .auth-container {
+  border-color: var(--base-color);
+}
+
+.swagger-ui .btn.execute {
+  color: white !important;
+  border: unset;
+  background-color: var(--notice-note-color);
+}
+
+.swagger-ui .errors-wrapper {
+  background: color-mix(in srgb, var(--notice-attention-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+  border-color: var(--notice-attention-color);
+}
+
+/*
+API endpoints
+  colors
+*/
+
+.swagger-ui .opblock.opblock-get .opblock-summary-method { background: var(--notice-note-color); }
+.swagger-ui .opblock.opblock-get {
+  background: color-mix(in srgb, var(--notice-note-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+  border-color: var(--notice-note-color);
+}
+
+.swagger-ui .opblock.opblock-post .opblock-summary-method { background: var(--notice-tip-color); }
+.swagger-ui .opblock.opblock-post {
+  background: color-mix(in srgb, var(--notice-tip-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+  border-color: var(--notice-tip-color);
+}
+
+.swagger-ui .opblock.opblock-delete .opblock-summary-method { background: var(--notice-attention-color); }
+.swagger-ui .opblock.opblock-delete {
+  background: color-mix(in srgb, var(--notice-attention-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+  border-color: var(--notice-attention-color);
+}
+
+.swagger-ui .opblock.opblock-put .opblock-summary-method { background: var(--notice-warning-color); }
+.swagger-ui .opblock.opblock-put {
+  background: color-mix(in srgb, var(--notice-warning-color), var(--sidebar-background) var(--swagger-colorfx-mix));
+  border-color: var(--notice-warning-color);
+}
+
+/*
+Models
+  Color
+*/
+
+.swagger-ui section.models .model-container {
+  background: var(--table-row-even-background);
+}
+
+.swagger-ui section.models .model-container:hover {
+  background: var(--sidebar-background);
+}

_js/plugin-swagger-ui.js

@@ -0,0 +1,44 @@
+// code inspiration from https://github.com/swagger-api/swagger-ui/blob/HEAD/docs/usage/installation.md#unpkg
+function swaggerUiPlugin(hook, vm) {
+  hook.doneEach(() => {
+    // get dom
+    const html = document.querySelector('main section article');
+    const link = document.querySelector('p a');
+    // test if link is a swagger link
+    if (link.textContent !== 'swagger') return;
+
+    // create swagger script tag
+    const swaggerScript = document.createElement('script');
+    swaggerScript.src = 'https://unpkg.com/[email protected]/swagger-ui-bundle.js';
+    // add css - top link has priority
+    const cssLinks = [
+      '/_css/plugin-swagger-ui.css',
+      'https://unpkg.com/[email protected]/swagger-ui.css'
+    ]
+    cssLinks.forEach((cssLink) => {
+      const swaggerCss = document.createElement('link');
+      swaggerCss.rel = 'stylesheet';
+      swaggerCss.href = cssLink;
+      document.head.prepend(swaggerCss);
+    })
+
+    // create place for swagger to populate and delete link
+    const swaggerContentDiv = document.createElement('div');
+    swaggerContentDiv.id = 'swagger-ui';
+    html.appendChild(swaggerContentDiv);
+    link.remove();
+
+    // create hook and wait for script load 
+    swaggerScript.onload = () => {
+      document = SwaggerUIBundle({
+        url: link.href,
+        dom_id: '#swagger-ui',
+      });
+    };
+    // load swagger-ui script
+    document.body.appendChild(swaggerScript);
+  });
+}
+// Add plugin to docsify's plugin array
+window.$docsify = window.$docsify || {};
+$docsify.plugins = [swaggerUiPlugin, ...($docsify.plugins || [])];

_sidebar.md

@@ -13,6 +13,7 @@
   - [Node (JavaScript)](/programm-your-bot/node.md)
   - [Python](/programm-your-bot/python/README.md)
     - [Advanced](/programm-your-bot/python/advanced.md) -->
+- [Swagger API Test](/test.md)
 - **Appliance**
   - [Aruba HP Switch](/APPLIANCE/Aruba%20HP%20Switch.md)
 - **Operating Systems**

index.html

@@ -43,5 +43,6 @@
   <script src="_js/plugin-site-wrapper.js"></script>
   <script src="_js/plugin-image-caption.js"></script>
   <script src="_js/plugin-fixSVGColoring.js"></script>
+  <script src="_js/plugin-swagger-ui.js"></script>
 </body>
 </html>

test.md

@@ -0,0 +1 @@
+[swagger](http://petstore.swagger.io/v2/swagger.json)