From ff8f9582a083bf23a4c7ba073dfdae4bc53dfa5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Sun, 27 Mar 2022 22:24:06 +0200 Subject: [PATCH] swagger: polishing #226 - print support - use thems styles for swagger - docs --- exampleSite/content/basics/migration/_index.en.md | 2 +- exampleSite/content/shortcodes/swagger.en.md | 6 +++++- layouts/shortcodes/swagger.html | 6 ++---- static/css/print.css | 6 ++++++ static/css/theme.css | 5 ++++- static/js/theme.js | 13 +++++++++++-- 6 files changed, 29 insertions(+), 9 deletions(-) diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 604f29a1437..c827fa82863 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -18,7 +18,7 @@ This document shows you what's new in the latest release. For a detailed list of - **New**: Introduction of new CSS variables to set the font. The theme distinguishs between `--MAIN-font` for all content text and `--CODE-font` for inline or block code. There are additional overrides for all headings. See the [theme variant generator]({{%relref "basics/generator" %}}) of the exampleSite for all available variables. -- **New**: The new shortcode `swagger` is available to include a UI for REST OpenAPI Specifications. See the [`documentation`]({{% relref "shortcodes/swagger" %}}) for available features. +- **New**: The new shortcode `swagger` is available to include a UI for REST OpenAPI Specifications. See the [`documentation`]({{% relref "shortcodes/swagger" %}}) for available features. This feature will not work with Internet Explorer 11. --- diff --git a/exampleSite/content/shortcodes/swagger.en.md b/exampleSite/content/shortcodes/swagger.en.md index e1e3f1e81a7..735d69d6876 100644 --- a/exampleSite/content/shortcodes/swagger.en.md +++ b/exampleSite/content/shortcodes/swagger.en.md @@ -5,13 +5,17 @@ title: "Swagger" This shortcode uses the [RapiDoc](https://mrin9.github.io/RapiDoc) library to display your OpenAPI Specifications. +{{% notice note %}} +This only works in modern browsers. +{{% /notice %}} + ## Configuration Swagger is configured with default settings. You can customize Swagger's default settings for all of your files thru a JSON object in your `config.toml` or override these settings per page thru your pages frontmatter. The JSON object of your `config.toml` / frontmatter is forwarded into Swagger's initialization. At the moment, only the `theme` setting is supported. -The `theme` setting can also be set by your used color variant. This will be the sitewide default and can - again - be overridden by your settings in `config.toml`, or frontmatter. +The `theme` setting can also be set by your used color variant. This will be the sitewide default and can - again - be overridden by your settings in `config.toml` or frontmatter. ### Example diff --git a/layouts/shortcodes/swagger.html b/layouts/shortcodes/swagger.html index 48ce9843480..f6959c4ae88 100644 --- a/layouts/shortcodes/swagger.html +++ b/layouts/shortcodes/swagger.html @@ -1,17 +1,15 @@ {{- $original := .Get "src" }} {{- .Page.Store.Set "hasSwagger" true }} \ No newline at end of file diff --git a/static/css/print.css b/static/css/print.css index 7231fcd35f1..e664f9a0965 100644 --- a/static/css/print.css +++ b/static/css/print.css @@ -133,6 +133,12 @@ div.box { div.box > .box-content { background-color: white; } +rapi-doc{ + /* adjust rapi-doc internals to fill out available space */ + font-size: 4pt; + margin-left: -12px; + width: calc( 100% + 12px + 8px ); +} .btn-default, #body .tab-nav-button { color: black !important; diff --git a/static/css/theme.css b/static/css/theme.css index 07d4b2ff409..4fa052d8b16 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -1452,7 +1452,10 @@ h6 a { margin-top: 1rem; } -.select-container { +rapi-doc { + /* adjust rapi-doc internals to fill out available space */ + margin-left: calc( -8px - 24px ); + width: calc( 100% + 8px + 24px + 8px ); } .select-container i { diff --git a/static/js/theme.js b/static/js/theme.js index a97b9a7b5d7..25191f5ab14 100644 --- a/static/js/theme.js +++ b/static/js/theme.js @@ -160,9 +160,18 @@ function initSwagger( update ){ if( typeof variants == 'undefined' ){ return; } - var theme = variants.getColorValue( 'SWAGGER-theme' ); + var attrs = [ + [ 'bg-color', variants.getColorValue( 'MAIN-BG-color' ) ], + [ 'mono-font', variants.getColorValue( 'CODE-font' ) ], + [ 'primary-color', variants.getColorValue( 'TAG-BG-color' ) ], + [ 'regular-font', variants.getColorValue( 'MAIN-font' ) ], + [ 'text-color', variants.getColorValue( 'MAIN-TEXT-color' ) ], + [ 'theme', variants.getColorValue( 'SWAGGER-theme' ) ], + ]; document.querySelectorAll( 'rapi-doc' ).forEach( function( e ){ - e.setAttribute( 'theme', theme ); + attrs.forEach( function( attr ){ + e.setAttribute( attr[0], attr[1] ); + }); }); }