swagger: polishing #226

- print support
- use thems styles for swagger
- docs

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.
 
 ---
 

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
 

layouts/shortcodes/swagger.html

@@ -1,17 +1,15 @@
 {{- $original := .Get "src" }}
 <rapi-doc
   allow-spec-file-download="true"
-  d-bg-color=""
   default-schema-tab="example"
+  font-size="largest"
   layout="column"
-  d-primary-color=""
+  load-fonts="false"
   render-style="view"
   schema-description-expanded="true"
   schema-style="table"
   show-header="false"
   spec-url = "{{ $original | relURL }}"
   sort-tags="true"
-  d-text-color=""
-  theme="light"
 ></rapi-doc>
 {{- .Page.Store.Set "hasSwagger" true }}

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;

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 {

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] );
+        });
     });
 }