From 6027748eb0fca691a8d013c21f1e948713521c86 Mon Sep 17 00:00:00 2001 From: Phil Date: Mon, 7 Oct 2024 01:29:24 +0200 Subject: [PATCH] add swagger API implementation --- _css/plugin-swagger-ui.css | 200 +++++++++++++++++++++++++++++++++++++ _js/plugin-swagger-ui.js | 44 ++++++++ _sidebar.md | 1 + index.html | 1 + test.md | 1 + 5 files changed, 247 insertions(+) create mode 100644 _css/plugin-swagger-ui.css create mode 100644 _js/plugin-swagger-ui.js create mode 100644 test.md diff --git a/_css/plugin-swagger-ui.css b/_css/plugin-swagger-ui.css new file mode 100644 index 0000000..3dc80ab --- /dev/null +++ b/_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); +} diff --git a/_js/plugin-swagger-ui.js b/_js/plugin-swagger-ui.js new file mode 100644 index 0000000..ae53c05 --- /dev/null +++ b/_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/swagger-ui-dist@5.11.0/swagger-ui-bundle.js'; + // add css - top link has priority + const cssLinks = [ + '/_css/plugin-swagger-ui.css', + 'https://unpkg.com/swagger-ui-dist@5.11.0/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 || [])]; diff --git a/_sidebar.md b/_sidebar.md index cc3752c..dfff8ea 100644 --- a/_sidebar.md +++ b/_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** diff --git a/index.html b/index.html index ad452b6..ce74b05 100644 --- a/index.html +++ b/index.html @@ -43,5 +43,6 @@ + diff --git a/test.md b/test.md new file mode 100644 index 0000000..73d39b2 --- /dev/null +++ b/test.md @@ -0,0 +1 @@ +[swagger](http://petstore.swagger.io/v2/swagger.json)