Merge branch 'master' of github.com:Rebilly/ReDoc

2025-08-08 06:04:56 +03:00 · 2019-05-21 11:12:11 +03:00 · 2019-05-21 11:12:11 +03:00 · dd2da68e4e
commit dd2da68e4e
parent aa80c7d6e0 f29a4fe2ee
59 changed files with 4942 additions and 3021 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,104 @@
+# [2.0.0-rc.8-1](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.8...v2.0.0-rc.8-1) (2019-05-13)
+
+
+### Bug Fixes
+
+* crash with empty servers with redoc-cli ([3d52b39](https://github.com/Rebilly/ReDoc/commit/3d52b39))
+
+
+
+# [2.0.0-rc.8](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.7...v2.0.0-rc.8) (2019-05-13)
+
+
+### Bug Fixes
+
+* fix broken CLI again ([4e12b5d](https://github.com/Rebilly/ReDoc/commit/4e12b5d))
+* fix logo gutter bg ([81896d3](https://github.com/Rebilly/ReDoc/commit/81896d3))
+
+
+
+# [2.0.0-rc.7](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.6...v2.0.0-rc.7) (2019-05-13)
+
+
+### Bug Fixes
+
+* crash in node due to broken URL parsing ([8df2b97](https://github.com/Rebilly/ReDoc/commit/8df2b97))
+
+
+
+# [2.0.0-rc.6](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.5...v2.0.0-rc.6) (2019-05-13)
+
+
+### Bug Fixes
+
+* broken schema talbes with long enums ([3a74b74](https://github.com/Rebilly/ReDoc/commit/3a74b74))
+* deep linking sometimes not working when sent over messengers ([2491d97](https://github.com/Rebilly/ReDoc/commit/2491d97))
+
+
+
+# [2.0.0-rc.5](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.4...v2.0.0-rc.5) (2019-05-13)
+
+
+### Bug Fixes
+
+* change fontFamily for EndpointInfo ([#866](https://github.com/Rebilly/ReDoc/issues/866)) ([851b133](https://github.com/Rebilly/ReDoc/commit/851b133))
+* clean up field values display ([#855](https://github.com/Rebilly/ReDoc/issues/855)) ([5c91590](https://github.com/Rebilly/ReDoc/commit/5c91590))
+* discriminator and oneOf title fix ([a3d7d7a](https://github.com/Rebilly/ReDoc/commit/a3d7d7a))
+* encode x-www-form-urlencoded examples correctly ([65930ad](https://github.com/Rebilly/ReDoc/commit/65930ad)), closes [#870](https://github.com/Rebilly/ReDoc/issues/870)
+* fix redoc-cli broken dependencies ([81a7568](https://github.com/Rebilly/ReDoc/commit/81a7568))
+* IE11 add missing fetch and URL polyfills ([d2ce1bd](https://github.com/Rebilly/ReDoc/commit/d2ce1bd)), closes [#875](https://github.com/Rebilly/ReDoc/issues/875)
+* ignore empty x-tagGroups array ([#869](https://github.com/Rebilly/ReDoc/issues/869)) ([4366a0d](https://github.com/Rebilly/ReDoc/commit/4366a0d))
+* incorrect detected schema title for deeply inherited schemas ([7d7b4e3](https://github.com/Rebilly/ReDoc/commit/7d7b4e3))
+* pluralize arrray of types ([fdcac30](https://github.com/Rebilly/ReDoc/commit/fdcac30))
+* remove huge space after Authentication section ([548fae3](https://github.com/Rebilly/ReDoc/commit/548fae3)), closes [#872](https://github.com/Rebilly/ReDoc/issues/872)
+* remove query string from server URL ([#895](https://github.com/Rebilly/ReDoc/issues/895)) ([64453ff](https://github.com/Rebilly/ReDoc/commit/64453ff))
+* remove tabs top margin ([5c187f3](https://github.com/Rebilly/ReDoc/commit/5c187f3))
+* right panel code samples bg color ([de2aed2](https://github.com/Rebilly/ReDoc/commit/de2aed2))
+* tidy up non-redoc vendor extension presentation ([#847](https://github.com/Rebilly/ReDoc/issues/847)) ([b21cd3d](https://github.com/Rebilly/ReDoc/commit/b21cd3d))
+* update apiKey in to be titleize ([#902](https://github.com/Rebilly/ReDoc/issues/902)) ([35df477](https://github.com/Rebilly/ReDoc/commit/35df477))
+* **cli:** add node-libs-browser to the deps ([6c79901](https://github.com/Rebilly/ReDoc/commit/6c79901)), closes [#850](https://github.com/Rebilly/ReDoc/issues/850)
+
+
+### Features
+
+* add hideSingleRequestSampleTab option ([4550e4d](https://github.com/Rebilly/ReDoc/commit/4550e4d))
+* add lineHeight config for headings ([#894](https://github.com/Rebilly/ReDoc/issues/894)) ([5dd5d6d](https://github.com/Rebilly/ReDoc/commit/5dd5d6d))
+* basic UI labels configuration ([b0e660e](https://github.com/Rebilly/ReDoc/commit/b0e660e)). Can be used for translations later.
+* add logo gutter to the theme ([82c0cb1a](https://github.com/Rebilly/ReDoc/commit/82c0cb1a)).
+
+# [2.0.0-rc.4](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.3...v2.0.0-rc.4) (2019-03-15)
+
+
+### Bug Fixes
+
+* move swagger2openapi to deps because of missing transitive deps ([ed9b878](https://github.com/Rebilly/ReDoc/commit/ed9b878))
+
+
+### Features
+
+* display requestBody description [#833](https://github.com/Rebilly/ReDoc/issues/833) ([#838](https://github.com/Rebilly/ReDoc/issues/838)) ([56ca371](https://github.com/Rebilly/ReDoc/commit/56ca371))
+
+
+# [2.0.0-rc.3](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.2...v2.0.0-rc.3) (2019-03-15)
+
+
+### Bug Fixes
+
+* add extra deref step for anyOf/oneOf variants ([d81b631](https://github.com/Rebilly/ReDoc/commit/d81b631)), closes [#810](https://github.com/Rebilly/ReDoc/issues/810)
+* duplicate keys in request samples ([3ce5bff](https://github.com/Rebilly/ReDoc/commit/3ce5bff)), closes [#815](https://github.com/Rebilly/ReDoc/issues/815)
+* escape backslashes in string literals ([#823](https://github.com/Rebilly/ReDoc/issues/823)) ([70faca1](https://github.com/Rebilly/ReDoc/commit/70faca1)), closes [#822](https://github.com/Rebilly/ReDoc/issues/822)
+* escape quotes in string values ([0473165](https://github.com/Rebilly/ReDoc/commit/0473165)), closes [#882](https://github.com/Rebilly/ReDoc/issues/882)
+* pin lunr version in ReDoc ([178ff4c](https://github.com/Rebilly/ReDoc/commit/178ff4c)), closes [#844](https://github.com/Rebilly/ReDoc/issues/844)
+* set last section min-height ([4dd79cd](https://github.com/Rebilly/ReDoc/commit/4dd79cd)), closes [#820](https://github.com/Rebilly/ReDoc/issues/820)
+
+
+### Features
+
+* support externalValue for examples ([2cdfcd2](https://github.com/Rebilly/ReDoc/commit/2cdfcd2)), closes [#551](https://github.com/Rebilly/ReDoc/issues/551) [#840](https://github.com/Rebilly/ReDoc/issues/840)
+* **cli:** Add templateOptions param to pass additional data to custom template ([#792](https://github.com/Rebilly/ReDoc/issues/792)) ([4e8ee03](https://github.com/Rebilly/ReDoc/commit/4e8ee03))
+
+
+
 # [2.0.0-rc.2](https://github.com/Rebilly/ReDoc/compare/v2.0.0-rc.1...v2.0.0-rc.2) (2019-01-27)


--- a/README.md
+++ b/README.md
@ -165,7 +165,7 @@ Also you can pass options:
  specUrl="http://rebilly.github.io/RebillyAPI/openapi.json"
  options={{
    nativeScrollbars: true,
-    theme: { colors: { main: '#dd5522' } },
+    theme: { colors: { primary { main: '#dd5522' } } },
  }}
 />
 ```
@ -185,6 +185,8 @@ You can also specify `onLoaded` callback which will be called each time Redoc ha
 />
 ```

+[**IE11 Support Notes**](docs/usage-with-ie11.md)
+
 ## The Docker way

 ReDoc is available as pre-built Docker image in official [Docker Hub repository](https://hub.docker.com/r/redocly/redoc/). You may simply pull & run it:
--- a/cli/index.ts
+++ b/cli/index.ts
@ -25,6 +25,7 @@ interface Options {
  cdn?: boolean;
  output?: string;
  title?: string;
+  port?: number;
  templateFileName?: string;
  templateOptions?: any;
  redocOptions?: any;
@ -62,16 +63,16 @@ YargsParser.command(
    return yargs;
  },
  async argv => {
-    const config = {
-      ssr: argv.ssr,
-      watch: argv.watch,
-      templateFileName: argv.template,
+    const config: Options = {
+      ssr: argv.ssr as boolean,
+      watch: argv.watch as boolean,
+      templateFileName: argv.template as string,
      templateOptions: argv.templateOptions || {},
      redocOptions: argv.options || {},
    };

    try {
-      await serve(argv.port, argv.spec, config);
+      await serve(argv.port as number, argv.spec as string, config);
    } catch (e) {
      handleError(e);
    }
@ -108,12 +109,12 @@ YargsParser.command(
      return yargs;
    },
    async argv => {
-      const config = {
+      const config: Options = {
        ssr: true,
-        output: argv.o,
-        cdn: argv.cdn,
-        title: argv.title,
-        templateFileName: argv.template,
+        output: argv.o as string,
+        cdn: argv.cdn as boolean,
+        title: argv.title as string,
+        templateFileName: argv.template as string,
        templateOptions: argv.templateOptions || {},
        redocOptions: argv.options || {},
      };
@ -132,7 +133,8 @@ YargsParser.command(
    type: 'string',
  })
  .options('templateOptions', {
-    describe: 'Additional options that you want pass to template. Use dot notation, e.g. templateOptions.metaDescription',
+    describe:
+      'Additional options that you want pass to template. Use dot notation, e.g. templateOptions.metaDescription',
  })
  .options('options', {
    describe: 'ReDoc options, use dot notation, e.g. options.nativeScrollbars',
@ -190,7 +192,8 @@ async function serve(port: number, pathToSpec: string, options: Options = {}) {
          log('Updated successfully');
        } catch (e) {
          console.error('Error while updating: ', e.message);
-        }})
+        }
+      })
      .on('error', error => console.error(`Watcher error: ${error}`))
      .on('ready', () => log(`👀  Watching ${pathToSpecDirectory} for changes...`));
  }
--- a/cli/package.json
+++ b/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "redoc-cli",
-  "version": "0.7.1",
+  "version": "0.8.4",
  "description": "ReDoc's Command Line Interface",
  "main": "index.js",
  "bin": "index.js",
@ -13,10 +13,11 @@
    "isarray": "^2.0.4",
    "mkdirp": "^0.5.1",
    "mobx": "^4.2.0",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "redoc": "^2.0.0-rc.1",
-    "styled-components": "^4.1.1",
+    "node-libs-browser": "^2.2.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "redoc": "^2.0.0-rc.8-1",
+    "styled-components": "^4.1.3",
    "tslib": "^1.9.3",
    "yargs": "^12.0.5"
  },
--- a/cli/yarn.lock
+++ b/cli/yarn.lock
--- a/config/docker/README.md
+++ b/config/docker/README.md
@ -5,13 +5,13 @@
 Serve remote spec by URL:

    docker run -it --rm -p 80:80 \
-      -e SPEC_URL='http://localhost:8000/swagger.yaml' redoc
+      -e SPEC_URL='http://localhost:8000/swagger.yaml' redocly/redoc

 Serve local file:

    docker run -it --rm -p 80:80 \
-      -v $(PWD)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
-      -e SPEC_URL=swagger.yaml redoc
+      -v $(pwd)/demo/swagger.yaml:/usr/share/nginx/html/swagger.yaml \
+      -e SPEC_URL=swagger.yaml redocly/redoc

 ## Runtime configuration options

@ -23,4 +23,4 @@ Serve local file:

 ## Build

-    docker build -t redoc .
+    docker build -t redocly/redoc .
--- a/custom.d.ts
+++ b/custom.d.ts
@ -18,6 +18,8 @@ declare module '*.css' {
 declare var __REDOC_VERSION__: string;
 declare var __REDOC_REVISION__: string;

+declare var reactHotLoaderGlobal: any;
+
 interface Element {
  scrollIntoViewIfNeeded(centerIfNeeded?: boolean): void;
 }
--- a/demo/playground/hmr-playground.tsx
+++ b/demo/playground/hmr-playground.tsx
@ -17,9 +17,12 @@ const renderRoot = (props: RedocProps) =>
  );

 const big = window.location.search.indexOf('big') > -1;
-const swagger = window.location.search.indexOf('swagger') > -1; // compatibility mode ?
+const swagger = window.location.search.indexOf('swagger') > -1;

-const specUrl = swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml';
+const userUrl = window.location.search.match(/url=(.*)$/);
+
+const specUrl =
+  (userUrl && userUrl[1]) || (swagger ? 'swagger.yaml' : big ? 'big-openapi.json' : 'openapi.yaml');

 let store;
 const options: RedocRawOptions = { nativeScrollbars: false, parentElementSelector: '#redoc-container' };
--- a/demo/webpack.config.ts
+++ b/demo/webpack.config.ts
@ -77,6 +77,12 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =

  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.json'],
+    alias:
+      mode !== 'production'
+        ? {
+            'react-dom': '@hot-loader/react-dom',
+          }
+        : {},
  },

  node: {
@ -88,6 +94,9 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
  externals: {
    esprima: 'esprima',
    'node-fetch': 'null',
+    'node-fetch-h2': 'null',
+    yaml: 'null',
+    'safe-json-stringify': 'null',
  },

  module: {
@ -105,7 +114,6 @@ export default (env: { playground?: boolean; bench?: boolean } = {}, { mode }) =
          loader: 'css-loader',
          options: {
            sourceMap: true,
-            minimize: true,
          },
        },
      },
--- a/docs/redoc-vendor-extensions.md
+++ b/docs/redoc-vendor-extensions.md
@ -134,13 +134,6 @@ Extends OpenAPI [Tag Object](http://swagger.io/specification/#tagObject)
 | :------------- | :------: | :---------- |
 | x-traitTag     | boolean  | In Swagger two operations can have multiple tags. This property distinguishes between tags that are used to group operations (default) from tags that are used to mark operation with certain trait (`true` value) |

-#### x-displayName
-
-| Field Name     |	Type	  | Description |
-| :------------- | :------: | :---------- |
-| x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
-
-
 ###### Usage in Redoc
 Tags that have `x-traitTag` set to `true` are listed in side-menu but don't have any subitems (operations). Tag `description` is rendered as well.
 This is useful for handling out common things like Pagination, Rate-Limits, etc.
@ -161,6 +154,12 @@ description: Pagination description (can use markdown syntax)
 x-traitTag: true
 ```

+#### x-displayName
+
+| Field Name     |	Type	  | Description |
+| :------------- | :------: | :---------- |
+| x-displayName  | string   | Defines the text that is used for this tag in the menu and in section headings |
+
 ### Operation Object vendor extensions
 Extends OpenAPI [Operation Object](http://swagger.io/specification/#operationObject)
 #### x-code-samples
--- a/docs/usage-with-ie11.md
+++ b/docs/usage-with-ie11.md
@ -0,0 +1,24 @@
+# Usage With IE11
+
+
+## Standalone package
+
+IE11 is supported by default if you use ReDoc as a standalone package.
+
+## Usage as a React component
+
+If you use ReDoc as a React component you should include the following polyfills in your project:
+
+```js
+import 'core-js/es6/promise';
+import 'core-js/fn/array/find';
+import 'core-js/fn/object/assign';
+import 'core-js/fn/string/ends-with';
+import 'core-js/fn/string/starts-with';
+
+import 'core-js/es6/map';
+import 'core-js/es6/symbol';
+
+import 'unfetch/polyfill/index'; // or any other fetch polyfill
+import 'url-polyfill';
+```
--- a/e2e/e2e.html
+++ b/e2e/e2e.html
@ -0,0 +1,6 @@
+<html>
+  <body>
+    <script src="../bundles/redoc.standalone.js">{}</script>
+    <div id="redoc" />
+  </body>
+</html>;
--- a/e2e/index.html
+++ b/e2e/index.html
@ -0,0 +1,6 @@
+<html>
+  <body>
+    <script src="../bundles/redoc.standalone.js">{}</script>
+    <div id="redoc" />
+  </body>
+</html>;
--- a/e2e/integration/misc.e2e.ts
+++ b/e2e/integration/misc.e2e.ts
@ -0,0 +1,64 @@
+// tslint:disable:no-implicit-dependencies
+import * as yaml from 'yaml-js';
+
+async function loadSpec(url: string): Promise<any> {
+  const spec = await (await fetch(url)).text();
+  return yaml.load(spec);
+}
+
+function initReDoc(win, spec, options = {}) {
+  (win as any).Redoc.init(spec, options, win.document.getElementById('redoc'));
+}
+
+describe('Servers', () => {
+  beforeEach(() => {
+    cy.visit('e2e/');
+  });
+
+  it('should have valid server', () => {
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://petstore.swagger.io/v2/pet',
+      );
+
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://petstore.swagger.io/sandbox/pet',
+      );
+    });
+  });
+
+  it('should have valid server for when servers not provided', () => {
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      delete spec.servers;
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://localhost:' + win.location.port + '/e2e/pet',
+      );
+    });
+  });
+
+  it('should have valid server for when servers not provided at .html pages', () => {
+    cy.visit('e2e/e2e.html');
+    cy.window().then(async win => {
+      const spec = await loadSpec('/demo/openapi.yaml');
+      delete spec.servers;
+      initReDoc(win, spec, {});
+
+      // TODO add cy-data attributes
+      cy.get('[data-section-id="operation/addPet"]').should(
+        'contain',
+        'http://localhost:' + win.location.port + '/e2e/pet',
+      );
+    });
+  });
+});
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "redoc",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.0-rc.8-1",
  "description": "ReDoc",
  "repository": {
    "type": "git",
@ -36,7 +36,7 @@
    "cy:open": "cypress open",
    "bundle:clean": "rimraf bundles",
    "bundle:standalone": "webpack --env.standalone --mode=production",
-    "bundle:lib": "webpack --mode=production",
+    "bundle:lib": "webpack --mode=production && npm run declarations",
    "bundle": "npm run bundle:clean && npm run bundle:lib && npm run bundle:standalone",
    "declarations": "tsc --emitDeclarationOnly -p tsconfig.lib.json && cp -R src/types typings/",
    "stats": "webpack --env.standalone --json --profile --mode=production > stats.json",
@ -52,106 +52,109 @@
    "docker:build": "docker build -f config/docker/Dockerfile -t redoc ."
  },
  "devDependencies": {
-    "@babel/core": "7.1.6",
-    "@babel/plugin-syntax-decorators": "7.1.0",
-    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/plugin-syntax-jsx": "7.0.0",
-    "@babel/plugin-syntax-typescript": "7.1.5",
-    "@cypress/webpack-preprocessor": "4.0.2",
+    "@babel/core": "7.3.4",
+    "@babel/plugin-syntax-decorators": "7.2.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/plugin-syntax-jsx": "7.2.0",
+    "@babel/plugin-syntax-typescript": "7.3.3",
+    "@cypress/webpack-preprocessor": "4.0.3",
+    "@hot-loader/react-dom": "^16.8.4",
    "@types/chai": "4.1.7",
    "@types/dompurify": "^0.0.32",
-    "@types/enzyme": "^3.1.15",
-    "@types/enzyme-to-json": "^1.5.2",
-    "@types/jest": "^23.3.9",
+    "@types/enzyme": "^3.9.0",
+    "@types/enzyme-to-json": "^1.5.3",
+    "@types/jest": "^24.0.11",
    "@types/json-pointer": "^1.0.30",
-    "@types/lodash": "^4.14.118",
-    "@types/lunr": "^2.1.6",
-    "@types/mark.js": "^8.11.1",
-    "@types/marked": "^0.6.0",
-    "@types/prismjs": "^1.6.4",
-    "@types/prop-types": "^15.5.6",
-    "@types/react": "^16.7.7",
-    "@types/react-dom": "^16.0.10",
+    "@types/lodash": "^4.14.122",
+    "@types/lunr": "^2.3.2",
+    "@types/mark.js": "^8.11.3",
+    "@types/marked": "^0.6.3",
+    "@types/prismjs": "^1.9.1",
+    "@types/prop-types": "^15.7.0",
+    "@types/react": "^16.8.7",
+    "@types/react-dom": "^16.8.2",
    "@types/react-hot-loader": "^4.1.0",
-    "@types/react-tabs": "^2.3.0",
-    "@types/styled-components": "^4.1.1",
+    "@types/react-tabs": "^2.3.1",
+    "@types/styled-components": "^4.1.12",
    "@types/tapable": "1.0.4",
-    "@types/webpack": "^4.4.19",
-    "@types/webpack-env": "^1.13.0",
-    "@types/yargs": "^12.0.1",
-    "babel-loader": "8.0.4",
-    "babel-plugin-styled-components": "^1.9.0",
+    "@types/webpack": "^4.4.25",
+    "@types/webpack-env": "^1.13.9",
+    "@types/yargs": "^12.0.9",
+    "babel-loader": "8.0.5",
+    "babel-plugin-styled-components": "^1.10.0",
    "beautify-benchmark": "^0.2.4",
-    "bundlesize": "^0.17.0",
-    "conventional-changelog-cli": "^2.0.11",
-    "copy-webpack-plugin": "^4.6.0",
-    "core-js": "^2.5.7",
-    "coveralls": "^3.0.2",
-    "css-loader": "^1.0.1",
-    "cypress": "~3.1.2",
+    "bundlesize": "^0.17.1",
+    "conventional-changelog-cli": "^2.0.12",
+    "copy-webpack-plugin": "^5.0.0",
+    "core-js": "^2.6.5",
+    "coveralls": "^3.0.3",
+    "css-loader": "^2.1.1",
+    "cypress": "~3.1.5",
    "deploy-to-gh-pages": "^1.3.6",
-    "enzyme": "^3.7.0",
-    "enzyme-adapter-react-16": "^1.7.0",
-    "enzyme-to-json": "^3.3.4",
-    "fork-ts-checker-webpack-plugin": "0.5.0",
+    "enzyme": "^3.9.0",
+    "enzyme-adapter-react-16": "^1.10.0",
+    "enzyme-to-json": "^3.3.5",
+    "fork-ts-checker-webpack-plugin": "1.0.0",
    "html-webpack-plugin": "^3.1.0",
-    "jest": "^23.6.0",
-    "license-checker": "^24.0.1",
+    "jest": "^24.3.1",
+    "license-checker": "^25.0.1",
    "lodash": "^4.17.11",
    "mobx": "^4.3.1",
-    "prettier": "^1.15.2",
+    "prettier": "^1.16.4",
    "prettier-eslint": "^8.8.2",
-    "puppeteer": "^1.10.0",
+    "puppeteer": "^1.13.0",
    "raf": "^3.4.1",
-    "react": "^16.6.3",
-    "react-dom": "^16.6.3",
-    "rimraf": "^2.6.2",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "rimraf": "^2.6.3",
    "shelljs": "^0.8.3",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
-    "styled-components": "^4.1.1",
-    "swagger2openapi": "^3.2.14",
-    "ts-jest": "23.10.5",
-    "ts-loader": "5.3.1",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.11.0",
+    "styled-components": "^4.1.3",
+    "ts-jest": "24.0.0",
+    "ts-loader": "5.3.3",
+    "ts-node": "^8.0.3",
+    "tslint": "^5.13.1",
    "tslint-react": "^3.4.0",
-    "typescript": "^3.1.6",
-    "webpack": "^4.26.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.10",
+    "typescript": "^3.3.3333",
+    "unfetch": "^4.1.0",
+    "url-polyfill": "^1.1.5",
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.2.1",
    "webpack-node-externals": "^1.6.0",
    "workerize-loader": "^1.0.4",
    "yaml-js": "^0.2.3"
  },
  "peerDependencies": {
    "mobx": "^4.2.0 || ^5.0.0",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
    "styled-components": "^4.1.1"
  },
  "dependencies": {
    "classnames": "^2.2.6",
    "decko": "^1.2.0",
-    "dompurify": "^1.0.7",
+    "dompurify": "^1.0.10",
    "eventemitter3": "^3.0.0",
    "json-pointer": "^0.6.0",
-    "json-schema-ref-parser": "^6.0.1",
-    "lunr": "^2.3.2",
+    "json-schema-ref-parser": "^6.1.0",
+    "lunr": "2.3.6",
    "mark.js": "^8.11.1",
-    "marked": "^0.6.0",
-    "memoize-one": "^4.0.0",
-    "mobx-react": "^5.2.5",
+    "marked": "^0.6.1",
+    "memoize-one": "^5.0.0",
+    "mobx-react": "^5.4.3",
    "openapi-sampler": "1.0.0-beta.14",
    "perfect-scrollbar": "^1.4.0",
-    "polished": "^2.0.2",
+    "polished": "^3.0.3",
    "prismjs": "^1.15.0",
-    "prop-types": "^15.6.2",
-    "react-dropdown": "^1.6.2",
-    "react-hot-loader": "^4.3.5",
-    "react-tabs": "^2.0.0",
-    "slugify": "^1.3.1",
+    "prop-types": "^15.7.2",
+    "react-dropdown": "^1.6.4",
+    "react-hot-loader": "^4.8.0",
+    "react-tabs": "^3.0.0",
+    "slugify": "^1.3.4",
    "stickyfill": "^1.1.1",
+    "swagger2openapi": "^5.2.3",
    "tslib": "^1.9.3"
  },
  "bundlesize": [
@ -161,7 +164,9 @@
    }
  ],
  "jest": {
-    "setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.ts",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.ts"
+    ],
    "preset": "ts-jest",
    "collectCoverageFrom": [
      "src/**/*.{ts,tsx}"
--- a/src/common-elements/fields.ts
+++ b/src/common-elements/fields.ts
@ -88,6 +88,8 @@ export const ExampleValue = styled(FieldLabel)`
  ${extensionsHook('ExampleValue')};
 `;

+export const ExtensionValue = styled(ExampleValue)``;
+
 export const ConstraintItem = styled(FieldLabel)`
  border-radius: 2px;
  ${({ theme }) => `
--- a/src/common-elements/headers.ts
+++ b/src/common-elements/headers.ts
@ -7,14 +7,15 @@ const headerFontSize = {
 };

 export const headerCommonMixin = level => css`
-  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-family: ${({ theme }) => theme.typography.headings.fontFamily};
  font-weight: ${({ theme }) => theme.typography.headings.fontWeight};
  font-size: ${headerFontSize[level]};
+  line-height: ${({ theme }) => theme.typography.headings.lineHeight};
 `;

 export const H1 = styled.h1`
  ${headerCommonMixin(1)};
-  color: ${props => props.theme.colors.primary.main};
+  color: ${({ theme }) => theme.colors.primary.main};

  ${extensionsHook('H1')};
 `;
--- a/src/common-elements/panels.ts
+++ b/src/common-elements/panels.ts
@ -17,6 +17,14 @@ export const Section = styled.div.attrs(props => ({
 }))<{ underlined?: boolean }>`
  padding: ${props => props.theme.spacing.sectionVertical}px 0;

+  &:last-child {
+    min-height: calc(100vh + 1px);
+  }
+
+  & > &:last-child {
+    min-height: initial;
+  }
+
  ${media.lessThan('medium', true)`
    padding: 0;
  `}
--- a/src/common-elements/samples.tsx
+++ b/src/common-elements/samples.tsx
@ -1,4 +1,5 @@
 import styled from '../styled-components';
+import { PrismDiv } from './PrismDiv';

 export const SampleControls = styled.div`
  opacity: 0.4;
@ -21,3 +22,12 @@ export const SampleControlsWrap = styled.div`
    opacity: 1;
  }
 `;
+
+export const StyledPre = styled(PrismDiv.withComponent('pre'))`
+  font-family: ${props => props.theme.typography.code.fontFamily};
+  font-size: ${props => props.theme.typography.code.fontSize};
+  overflow-x: auto;
+  margin: 0;
+
+  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
+`;
--- a/src/common-elements/tabs.ts
+++ b/src/common-elements/tabs.ts
@ -16,14 +16,15 @@ export const Tabs = styled(ReactTabs)`
      padding: 5px 10px;
      display: inline-block;

-      background-color: ${({ theme }) => darken(0.05, theme.rightPanel.backgroundColor)};
+      background-color: ${({ theme }) => theme.codeSample.backgroundColor};
      border-bottom: 1px solid rgba(0, 0, 0, 0.5);
      cursor: pointer;
      text-align: center;
      outline: none;
      color: ${({ theme }) => darken(theme.colors.tonalOffset, theme.rightPanel.textColor)};
-      margin: 5px;
-      border: 1px solid ${({ theme }) => darken(0.1, theme.rightPanel.backgroundColor)};
+      margin: 0
+        ${({ theme }) => `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`};
+      border: 1px solid ${({ theme }) => darken(0.05, theme.codeSample.backgroundColor)};
      border-radius: 5px;
      min-width: 60px;
      font-size: 0.9em;
--- a/src/components/ApiLogo/ApiLogo.tsx
+++ b/src/components/ApiLogo/ApiLogo.tsx
@ -17,13 +17,11 @@ export class ApiLogo extends React.Component<{ info: OpenAPIInfo }> {
    // Use the english word logo if no alt text is provided
    const altText = logoInfo.altText ? logoInfo.altText : 'logo';

-    const logo = (
-      <LogoImgEl
-        src={logoInfo.url}
-        style={{ backgroundColor: logoInfo.backgroundColor }}
-        alt={altText}
-      />
+    const logo = <LogoImgEl src={logoInfo.url} alt={altText} />;
+    return (
+      <LogoWrap style={{ backgroundColor: logoInfo.backgroundColor }}>
+        {logoHref ? LinkWrap(logoHref)(logo) : logo}
+      </LogoWrap>
    );
-    return <LogoWrap>{logoHref ? LinkWrap(logoHref)(logo) : logo}</LogoWrap>;
  }
 }
--- a/src/components/ApiLogo/styled.elements.tsx
+++ b/src/components/ApiLogo/styled.elements.tsx
@ -4,6 +4,7 @@ import styled from '../../styled-components';
 export const LogoImgEl = styled.img`
  max-height: ${props => props.theme.logo.maxHeight};
  max-width: ${props => props.theme.logo.maxWidth};
+  padding: ${props => props.theme.logo.gutter};
  width: 100%;
  display: block;
 `;
--- a/src/components/Endpoint/styled.elements.ts
+++ b/src/components/Endpoint/styled.elements.ts
@ -7,7 +7,7 @@ export const OperationEndpointWrap = styled.div`
 `;

 export const ServerRelativeURL = styled.span`
-  font-family: ${props => props.theme.typography.headings.fontFamily};
+  font-family: ${props => props.theme.typography.code.fontFamily};
  margin-left: 10px;
  flex: 1;
  overflow-x: hidden;
--- a/src/components/Fields/EnumValues.tsx
+++ b/src/components/Fields/EnumValues.tsx
@ -1,6 +1,8 @@
 import * as React from 'react';
 import { ExampleValue, FieldLabel } from '../../common-elements/fields';

+import { l } from '../../services/Labels';
+
 export interface EnumValuesProps {
  values: string[];
  type: string;
@ -16,10 +18,13 @@ export class EnumValues extends React.PureComponent<EnumValuesProps> {
    return (
      <div>
        <FieldLabel>
-          {type === 'array' ? 'Items' : ''} {values.length === 1 ? 'Value' : 'Enum'}:
+          {type === 'array' ? l('enumArray') : ''}{' '}
+          {values.length === 1 ? l('enumSingleValue') : l('enum')}:
        </FieldLabel>
        {values.map((value, idx) => (
-          <ExampleValue key={idx}>{JSON.stringify(value)} </ExampleValue>
+          <React.Fragment key={idx}>
+            <ExampleValue>{JSON.stringify(value)}</ExampleValue>{' '}
+          </React.Fragment>
        ))}
      </div>
    );
--- a/src/components/Fields/Extensions.tsx
+++ b/src/components/Fields/Extensions.tsx
@ -1,4 +1,7 @@
 import * as React from 'react';
+
+import { ExtensionValue, FieldLabel } from '../../common-elements/fields';
+
 import styled from '../../styled-components';

 import { OptionsContext } from '../OptionsProvider';
@ -6,14 +9,9 @@ import { OptionsContext } from '../OptionsProvider';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';

 const Extension = styled(StyledMarkdownBlock)`
-  opacity: 0.9;
  margin: 2px 0;
 `;

-const ExtensionLable = styled.span`
-  font-style: italic;
-`;
-
 export interface ExtensionsProps {
  extensions: {
    [k: string]: any;
@ -22,15 +20,18 @@ export interface ExtensionsProps {

 export class Extensions extends React.PureComponent<ExtensionsProps> {
  render() {
+    const exts = this.props.extensions;
    return (
      <OptionsContext.Consumer>
        {options => (
          <>
            {options.showExtensions &&
-              Object.keys(this.props.extensions).map(key => (
+              Object.keys(exts).map(key => (
                <Extension key={key}>
-                  <ExtensionLable>{key}</ExtensionLable>:{' '}
-                  <code>{JSON.stringify(this.props.extensions[key])}</code>
+                  <FieldLabel> {key.substring(2)}: </FieldLabel>{' '}
+                  <ExtensionValue>
+                    {typeof exts[key] === 'string' ? exts[key] : JSON.stringify(exts[key])}
+                  </ExtensionValue>
                </Extension>
              ))}
          </>
--- a/src/components/Fields/FieldDetail.tsx
+++ b/src/components/Fields/FieldDetail.tsx
@ -14,7 +14,9 @@ export class FieldDetail extends React.PureComponent<FieldDetailProps> {
    return (
      <div>
        <FieldLabel> {this.props.label} </FieldLabel>{' '}
-        <ExampleValue> {JSON.stringify(this.props.value)} </ExampleValue>
+        <ExampleValue>
+          {JSON.stringify(this.props.value)}
+        </ExampleValue>
      </div>
    );
  }
--- a/src/components/Fields/FieldDetails.tsx
+++ b/src/components/Fields/FieldDetails.tsx
@ -19,6 +19,8 @@ import { FieldDetail } from './FieldDetail';

 import { Badge } from '../../common-elements/';

+import { l } from '../../services/Labels';
+
 export class FieldDetails extends React.PureComponent<FieldProps> {
  render() {
    const { showExamples, field, renderDiscriminatorSwitch } = this.props;
@ -40,18 +42,18 @@ export class FieldDetails extends React.PureComponent<FieldProps> {
          )}
          {schema.title && <TypeTitle> ({schema.title}) </TypeTitle>}
          <ConstraintsView constraints={schema.constraints} />
-          {schema.nullable && <NullableLabel> Nullable </NullableLabel>}
+          {schema.nullable && <NullableLabel> {l('nullable')} </NullableLabel>}
          {schema.pattern && <PatternLabel>{schema.pattern}</PatternLabel>}
-          {schema.isCircular && <RecursiveLabel> Recursive </RecursiveLabel>}
+          {schema.isCircular && <RecursiveLabel> {l('recursive')} </RecursiveLabel>}
        </div>
        {deprecated && (
          <div>
-            <Badge type="warning"> Deprecated </Badge>
+            <Badge type="warning"> {l('deprecated')} </Badge>
          </div>
        )}
-        <FieldDetail label={'Default:'} value={schema.default} />
+        <FieldDetail label={l('default') + ':'} value={schema.default} />
        {!renderDiscriminatorSwitch && <EnumValues type={schema.type} values={schema.enum} />}{' '}
-        {showExamples && <FieldDetail label={'Example:'} value={example} />}
+        {showExamples && <FieldDetail label={l('example') + ':'} value={example} />}
        {<Extensions extensions={{ ...field.extensions, ...schema.extensions }} />}
        <div>
          <Markdown compact={true} source={description} />
--- a/src/components/Parameters/Parameters.tsx
+++ b/src/components/Parameters/Parameters.tsx
@ -4,11 +4,12 @@ import { ParametersGroup } from './ParametersGroup';

 import { UnderlinedHeader } from '../../common-elements';

+import { MediaContentModel } from '../../services';
 import { FieldModel, RequestBodyModel } from '../../services/models';
 import { MediaTypesSwitch } from '../MediaTypeSwitch/MediaTypesSwitch';
 import { Schema } from '../Schema';

-import { MediaContentModel } from '../../services';
+import { Markdown } from '../Markdown/Markdown';

 function safePush(obj, prop, item) {
  if (!obj[prop]) {
@ -45,13 +46,15 @@ export class Parameters extends React.PureComponent<ParametersProps> {

    const bodyContent = body && body.content;

+    const bodyDescription = body && body.description;
+
    return (
-      <div>
+      <>
        {paramsPlaces.map(place => (
          <ParametersGroup key={place} place={place} parameters={paramsMap[place]} />
        ))}
-        {bodyContent && <BodyContent content={bodyContent} />}
-      </div>
+        {bodyContent && <BodyContent content={bodyContent} description={bodyDescription} />}
+      </>
    );
  }
 }
@ -64,12 +67,17 @@ function DropdownWithinHeader(props) {
  );
 }

-function BodyContent(props: { content: MediaContentModel }): JSX.Element {
-  const { content } = props;
+function BodyContent(props: { content: MediaContentModel; description?: string }): JSX.Element {
+  const { content, description } = props;
  return (
    <MediaTypesSwitch content={content} renderDropdown={DropdownWithinHeader}>
      {({ schema }) => {
-        return <Schema skipReadOnly={true} key="schema" schema={schema} />;
+        return (
+          <>
+            {description !== undefined && <Markdown source={description} />}
+            <Schema skipReadOnly={true} key="schema" schema={schema} />
+          </>
+        );
      }}
    </MediaTypesSwitch>
  );
--- a/src/components/PayloadSamples/Example.tsx
+++ b/src/components/PayloadSamples/Example.tsx
@ -0,0 +1,40 @@
+import * as React from 'react';
+
+import { StyledPre } from '../../common-elements/samples';
+import { ExampleModel } from '../../services/models';
+import { ExampleValue } from './ExampleValue';
+import { useExternalExample } from './exernalExampleHook';
+
+export interface ExampleProps {
+  example: ExampleModel;
+  mimeType: string;
+}
+
+export function Example({ example, mimeType }: ExampleProps) {
+  if (example.value === undefined && example.externalValueUrl) {
+    return <ExternalExample example={example} mimeType={mimeType} />;
+  } else {
+    return <ExampleValue value={example.value} mimeType={mimeType} />;
+  }
+}
+
+export function ExternalExample({ example, mimeType }: ExampleProps) {
+  const value = useExternalExample(example, mimeType);
+
+  if (value === undefined) {
+    return <span>Loading...</span>;
+  }
+
+  if (value instanceof Error) {
+    return (
+      <StyledPre>
+        Error loading external example: <br />
+        <a className={'token string'} href={example.externalValueUrl} target="_blank">
+          {example.externalValueUrl}
+        </a>
+      </StyledPre>
+    );
+  }
+
+  return <ExampleValue value={value} mimeType={mimeType} />;
+}
--- a/src/components/PayloadSamples/ExampleValue.tsx
+++ b/src/components/PayloadSamples/ExampleValue.tsx
@ -0,0 +1,22 @@
+import * as React from 'react';
+
+import { isJsonLike, langFromMime } from '../../utils/openapi';
+import { JsonViewer } from '../JsonViewer/JsonViewer';
+import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
+
+export interface ExampleValueProps {
+  value: any;
+  mimeType: string;
+}
+
+export function ExampleValue({ value, mimeType }: ExampleValueProps) {
+  if (isJsonLike(mimeType)) {
+    return <JsonViewer data={value} />;
+  } else {
+    if (typeof value === 'object') {
+      // just in case example was cached as json but used as non-json
+      value = JSON.stringify(value, null, 2);
+    }
+    return <SourceCodeWithCopy lang={langFromMime(mimeType)} source={value} />;
+  }
+}
--- a/src/components/PayloadSamples/MediaTypeSamples.tsx
+++ b/src/components/PayloadSamples/MediaTypeSamples.tsx
@ -2,11 +2,9 @@ import * as React from 'react';

 import { SmallTabs, Tab, TabList, TabPanel } from '../../common-elements';
 import { MediaTypeModel } from '../../services/models';
-import { JsonViewer } from '../JsonViewer/JsonViewer';
-import { SourceCodeWithCopy } from '../SourceCode/SourceCode';
-import { NoSampleLabel } from './styled.elements';

-import { isJsonLike, langFromMime } from '../../utils';
+import { Example } from './Example';
+import { NoSampleLabel } from './styled.elements';

 export interface PayloadSamplesProps {
  mediaType: MediaTypeModel;
@ -18,13 +16,6 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps> {
    const mimeType = this.props.mediaType.name;

    const noSample = <NoSampleLabel>No sample</NoSampleLabel>;
-    const sampleView = isJsonLike(mimeType)
-      ? sample => <JsonViewer data={sample} />
-      : sample =>
-          (sample !== undefined && (
-            <SourceCodeWithCopy lang={langFromMime(mimeType)} source={sample} />
-          )) ||
-          noSample;

    const examplesNames = Object.keys(examples);
    if (examplesNames.length === 0) {
@ -39,13 +30,19 @@ export class MediaTypeSamples extends React.Component<PayloadSamplesProps> {
            ))}
          </TabList>
          {examplesNames.map(name => (
-            <TabPanel key={name}>{sampleView(examples[name].value)}</TabPanel>
+            <TabPanel key={name}>
+              <Example example={examples[name]} mimeType={mimeType} />
+            </TabPanel>
          ))}
        </SmallTabs>
      );
    } else {
      const name = examplesNames[0];
-      return <div>{sampleView(examples[name].value)}</div>;
+      return (
+        <div>
+          <Example example={examples[name]} mimeType={mimeType} />
+        </div>
+      );
    }
  }
 }
--- a/src/components/PayloadSamples/exernalExampleHook.ts
+++ b/src/components/PayloadSamples/exernalExampleHook.ts
@ -0,0 +1,34 @@
+import { useEffect, useRef, useState } from 'react';
+import { ExampleModel } from '../../services/models/Example';
+
+export function useExternalExample(example: ExampleModel, mimeType: string) {
+  const [, setIsLoading] = useState(true); // to trigger component reload
+
+  const value = useRef<any>(undefined);
+  const prevRef = useRef<ExampleModel | undefined>(undefined);
+
+  if (prevRef.current !== example) {
+    value.current = undefined;
+  }
+
+  prevRef.current = example;
+
+  useEffect(
+    () => {
+      const load = async () => {
+        setIsLoading(true);
+        try {
+          value.current = await example.getExternalValue(mimeType);
+        } catch (e) {
+          value.current = e;
+        }
+        setIsLoading(false);
+      };
+
+      load();
+    },
+    [example, mimeType],
+  );
+
+  return value.current;
+}
--- a/src/components/RequestSamples/RequestSamples.tsx
+++ b/src/components/RequestSamples/RequestSamples.tsx
@ -1,10 +1,11 @@
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { OperationModel } from '../../services/models';
+import { OperationModel, RedocNormalizedOptions } from '../../services';
 import { PayloadSamples } from '../PayloadSamples/PayloadSamples';
 import { SourceCodeWithCopy } from '../SourceCode/SourceCode';

 import { RightPanelHeader, Tab, TabList, TabPanel, Tabs } from '../../common-elements';
+import { OptionsContext } from '../OptionsProvider';

 export interface RequestSamplesProps {
  operation: OperationModel;
@ -12,6 +13,8 @@ export interface RequestSamplesProps {

@observer
 export class RequestSamples extends React.Component<RequestSamplesProps> {
+  static contextType = OptionsContext;
+  context: RedocNormalizedOptions;
  operation: OperationModel;

  render() {
@ -21,16 +24,20 @@ export class RequestSamples extends React.Component<RequestSamplesProps> {
    const samples = operation.codeSamples;

    const hasSamples = hasBodySample || samples.length > 0;
+    const hideTabList =
+      samples.length + (hasBodySample ? 1 : 0) === 1
+        ? this.context.hideSingleRequestSampleTab
+        : false;
    return (
      (hasSamples && (
        <div>
          <RightPanelHeader> Request samples </RightPanelHeader>

          <Tabs defaultIndex={0}>
-            <TabList>
+            <TabList hidden={hideTabList}>
              {hasBodySample && <Tab key="payload"> Payload </Tab>}
              {samples.map(sample => (
-                <Tab key={sample.lang}>
+                <Tab key={sample.lang + '_' + (sample.label || '')}>
                  {sample.label !== undefined ? sample.label : sample.lang}
                </Tab>
              ))}
--- a/src/components/Schema/Schema.tsx
+++ b/src/components/Schema/Schema.tsx
@ -10,6 +10,8 @@ import { ArraySchema } from './ArraySchema';
 import { ObjectSchema } from './ObjectSchema';
 import { OneOfSchema } from './OneOfSchema';

+import { l } from '../../services/Labels';
+
 export interface SchemaOptions {
  showTitle?: boolean;
  skipReadOnly?: boolean;
@ -34,7 +36,7 @@ export class Schema extends React.Component<Partial<SchemaProps>> {
        <div>
          <TypeName>{schema.displayType}</TypeName>
          {schema.title && <TypeTitle> {schema.title} </TypeTitle>}
-          <RecursiveLabel> Recursive </RecursiveLabel>
+          <RecursiveLabel> {l('recursive')} </RecursiveLabel>
        </div>
      );
    }
--- a/src/components/SecuritySchemes/SecuritySchemes.tsx
+++ b/src/components/SecuritySchemes/SecuritySchemes.tsx
@ -4,6 +4,7 @@ import { SecuritySchemesModel } from '../../services/models';

 import { H2, MiddlePanel, Row, Section, ShareLink } from '../../common-elements';
 import { OpenAPISecurityScheme } from '../../types';
+import { titleize } from '../../utils/helpers';
 import { Markdown } from '../Markdown/Markdown';
 import { StyledMarkdownBlock } from '../Markdown/styled.elements';

@ -84,7 +85,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                  </tr>
                  {scheme.apiKey ? (
                    <tr>
-                      <th> {scheme.apiKey.in} parameter name:</th>
+                      <th> {titleize(scheme.apiKey.in || '')} parameter name:</th>
                      <td> {scheme.apiKey.name} </td>
                    </tr>
                  ) : scheme.http ? (
@ -93,8 +94,7 @@ export class SecurityDefs extends React.PureComponent<SecurityDefsProps> {
                        <th> HTTP Authorization Scheme </th>
                        <td> {scheme.http.scheme} </td>
                      </tr>,
-                      scheme.http.scheme === 'bearer' &&
-                        scheme.http.bearerFormat && (
+                      scheme.http.scheme === 'bearer' && scheme.http.bearerFormat && (
                        <tr key="bearer">
                          <th> Bearer format </th>
                          <td> "{scheme.http.bearerFormat}" </td>
--- a/src/components/SourceCode/SourceCode.tsx
+++ b/src/components/SourceCode/SourceCode.tsx
@ -1,19 +1,8 @@
 import * as React from 'react';
 import { highlight } from '../../utils';

-import { SampleControls, SampleControlsWrap } from '../../common-elements';
+import { SampleControls, SampleControlsWrap, StyledPre } from '../../common-elements';
 import { CopyButtonWrapper } from '../../common-elements/CopyButtonWrapper';
-import { PrismDiv } from '../../common-elements/PrismDiv';
-import styled from '../../styled-components';
-
-const StyledPre = styled(PrismDiv.withComponent('pre'))`
-  font-family: ${props => props.theme.typography.code.fontFamily};
-  font-size: ${props => props.theme.typography.code.fontSize};
-  overflow-x: auto;
-  margin: 0;
-
-  white-space: ${({ theme }) => (theme.typography.code.wrap ? 'pre-wrap' : 'pre')};
-`;

 export interface SourceCodeProps {
  source: string;
--- a/src/components/index.ts
+++ b/src/components/index.ts
@ -8,7 +8,6 @@ export * from './Schema/';
 export * from './SearchBox/SearchBox';
 export * from './Operation/Operation';
 export * from './Loading/Loading';
-export * from './RedocStandalone';
 export * from './JsonViewer';
 export * from './Markdown/Markdown';
 export { StyledMarkdownBlock } from './Markdown/styled.elements';
--- a/src/components/testProviders.tsx
+++ b/src/components/testProviders.tsx
@ -5,7 +5,9 @@ import defaultTheme from '../theme';
 export default class TestThemeProvider extends React.Component {
  render() {
    return (
-      <ThemeProvider theme={defaultTheme}>{React.Children.only(this.props.children)}</ThemeProvider>
+      <ThemeProvider theme={defaultTheme}>
+        {React.Children.only(this.props.children as any)}
+      </ThemeProvider>
    );
  }
 }
--- a/src/polyfills.ts
+++ b/src/polyfills.ts
@ -6,3 +6,6 @@ import 'core-js/fn/string/starts-with';

 import 'core-js/es6/map';
 import 'core-js/es6/symbol';
+
+import 'unfetch/polyfill/index';
+import 'url-polyfill';
--- a/src/services/HistoryService.ts
+++ b/src/services/HistoryService.ts
@ -13,7 +13,7 @@ export class HistoryService {
  }

  get currentId(): string {
-    return IS_BROWSER ? window.location.hash.substring(1) : '';
+    return IS_BROWSER ? decodeURIComponent(window.location.hash.substring(1)) : '';
  }

  linkForId(id: string) {
--- a/src/services/Labels.ts
+++ b/src/services/Labels.ts
@ -0,0 +1,37 @@
+export interface LabelsConfig {
+  enum: string;
+  enumSingleValue: string;
+  enumArray: string;
+  default: string;
+  deprecated: string;
+  example: string;
+  nullable: string;
+  recursive: string;
+  arrayOf: string;
+}
+
+export type LabelsConfigRaw = Partial<LabelsConfig>;
+
+const labels: LabelsConfig = {
+  enum: 'Enum',
+  enumSingleValue: 'Value',
+  enumArray: 'Items',
+  default: 'Default',
+  deprecated: 'Deprecated',
+  example: 'Example',
+  nullable: 'Nullable',
+  recursive: 'Recursive',
+  arrayOf: 'Array of ',
+};
+
+export function setRedocLabels(_labels?: LabelsConfigRaw) {
+  Object.assign(labels, _labels);
+}
+
+export function l(key: keyof LabelsConfig, idx?: number): string {
+  const label = labels[key];
+  if (idx !== undefined) {
+    return label[idx];
+  }
+  return label;
+}
--- a/src/services/MenuBuilder.ts
+++ b/src/services/MenuBuilder.ts
@ -43,7 +43,7 @@ export class MenuBuilder {
    const items: ContentItemModel[] = [];
    const tagsMap = MenuBuilder.getTagsWithOperations(spec);
    items.push(...MenuBuilder.addMarkdownItems(spec.info.description || '', options));
-    if (spec['x-tagGroups']) {
+    if (spec['x-tagGroups'] && spec['x-tagGroups'].length > 0) {
      items.push(
        ...MenuBuilder.getTagGroupsItems(parser, undefined, spec['x-tagGroups'], tagsMap, options),
      );
--- a/src/services/OpenAPIParser.ts
+++ b/src/services/OpenAPIParser.ts
@ -187,6 +187,7 @@ export class OpenAPIParser {
      ...schema,
      allOf: undefined,
      parentRefs: [],
+      title: schema.title || (isNamedDefinition($ref) ? JsonPointer.baseName($ref) : undefined),
    };

    // avoid mutating inner objects
@ -263,11 +264,6 @@ export class OpenAPIParser {
      }
    }

-    // name of definition or title on top level
-    if (schema.title === undefined && isNamedDefinition($ref)) {
-      receiver.title = JsonPointer.baseName($ref);
-    }
-
    return receiver;
  }

--- a/src/services/RedocNormalizedOptions.ts
+++ b/src/services/RedocNormalizedOptions.ts
@ -2,6 +2,7 @@ import defaultTheme, { ResolvedThemeInterface, resolveTheme, ThemeInterface } fr
 import { querySelector } from '../utils/dom';
 import { isNumeric, mergeObjects } from '../utils/helpers';

+import { LabelsConfigRaw, setRedocLabels } from './Labels';
 import { MDXComponentMeta } from './MarkdownRenderer';

 export interface RedocRawOptions {
@ -21,10 +22,13 @@ export interface RedocRawOptions {
  onlyRequiredInSamples?: boolean | string;
  showExtensions?: boolean | string | string[];
  parentElementSelector?: string;
+  hideSingleRequestSampleTab?: boolean | string;

  unstable_ignoreMimeParameters?: boolean;

  allowedMdComponents?: Dict<MDXComponentMeta>;
+
+  labels?: LabelsConfigRaw;
 }

 function argValueToBoolean(val?: string | boolean): boolean {
@ -137,7 +141,11 @@ export class RedocNormalizedOptions {
  disableSearch: boolean;
  onlyRequiredInSamples: boolean;
  showExtensions: boolean | string[];
+<<<<<<< HEAD
  parentElement: Element | null;
+=======
+  hideSingleRequestSampleTab: boolean;
+>>>>>>> f29a4fe2eee39f7ef018c125d460ee8898856ce4

  /* tslint:disable-next-line */
  unstable_ignoreMimeParameters: boolean;
@ -152,6 +160,9 @@ export class RedocNormalizedOptions {

    this.theme.extensionsHook = hook as any;

+    // do not support dynamic labels changes. Labels should be configured before
+    setRedocLabels(raw.labels);
+
    this.scrollYOffset = RedocNormalizedOptions.normalizeScrollYOffset(raw.scrollYOffset);
    this.hideHostname = RedocNormalizedOptions.normalizeHideHostname(raw.hideHostname);
    this.expandResponses = RedocNormalizedOptions.normalizeExpandResponses(raw.expandResponses);
@ -165,7 +176,11 @@ export class RedocNormalizedOptions {
    this.disableSearch = argValueToBoolean(raw.disableSearch);
    this.onlyRequiredInSamples = argValueToBoolean(raw.onlyRequiredInSamples);
    this.showExtensions = RedocNormalizedOptions.normalizeShowExtensions(raw.showExtensions);
+<<<<<<< HEAD
    this.parentElement = RedocNormalizedOptions.normalizeParentElementSelector(raw.parentElementSelector);
+=======
+    this.hideSingleRequestSampleTab = argValueToBoolean(raw.hideSingleRequestSampleTab);
+>>>>>>> f29a4fe2eee39f7ef018c125d460ee8898856ce4

    this.unstable_ignoreMimeParameters = argValueToBoolean(raw.unstable_ignoreMimeParameters);

--- a/src/services/tests/snapshots/OpenAPIParser.test.ts.snap
+++ b/src/services/tests/snapshots/OpenAPIParser.test.ts.snap
@ -21,6 +21,7 @@ Object {
              "type": "string",
            },
          },
+          "title": undefined,
        },
        Object {
          "allOf": undefined,
@ -38,6 +39,7 @@ Object {
              "type": "string",
            },
          },
+          "title": undefined,
        },
      ],
    },
@ -59,6 +61,7 @@ Object {
              "type": "string",
            },
          },
+          "title": undefined,
        },
        Object {
          "allOf": undefined,
@ -76,6 +79,7 @@ Object {
              "type": "string",
            },
          },
+          "title": undefined,
        },
      ],
    },
--- a/src/services/tests/models/Schema.test.ts
+++ b/src/services/tests/models/Schema.test.ts
@ -37,7 +37,7 @@ describe('Models', () => {
      parser = new OpenAPIParser(spec, undefined, opts);
      const schema = new SchemaModel(parser, spec.components.schemas.WithArray, '', opts);
      expect(schema.oneOf).toHaveLength(2);
-      expect(schema.displayType).toBe('(Array of string or number) or string');
+      expect(schema.displayType).toBe('(Array of strings or numbers) or string');
    });
  });
 });
--- a/src/services/models/Example.ts
+++ b/src/services/models/Example.ts
@ -1,14 +1,64 @@
-import { OpenAPIExample, Referenced } from '../../types';
+import { resolve as urlResolve } from 'url';
+
+import { OpenAPIEncoding, OpenAPIExample, Referenced } from '../../types';
+import { isFormUrlEncoded, isJsonLike, urlFormEncodePayload } from '../../utils/openapi';
 import { OpenAPIParser } from '../OpenAPIParser';

+const externalExamplesCache: { [url: string]: Promise<any> } = {};
+
 export class ExampleModel {
  value: any;
  summary?: string;
  description?: string;
-  externalValue?: string;
+  externalValueUrl?: string;

-  constructor(parser: OpenAPIParser, infoOrRef: Referenced<OpenAPIExample>) {
-    Object.assign(this, parser.deref(infoOrRef));
+  constructor(
+    parser: OpenAPIParser,
+    infoOrRef: Referenced<OpenAPIExample>,
+    public mime: string,
+    encoding?: { [field: string]: OpenAPIEncoding },
+  ) {
+    const example = parser.deref(infoOrRef);
+    this.value = example.value;
+    this.summary = example.summary;
+    this.description = example.description;
+    if (example.externalValue) {
+      this.externalValueUrl = urlResolve(parser.specUrl || '', example.externalValue);
+    }
    parser.exitRef(infoOrRef);
+
+    if (isFormUrlEncoded(mime) && this.value && typeof this.value === 'object') {
+      this.value = urlFormEncodePayload(this.value, encoding);
+    }
+  }
+
+  getExternalValue(mimeType: string): Promise<any> {
+    if (!this.externalValueUrl) {
+      return Promise.resolve(undefined);
+    }
+
+    if (externalExamplesCache[this.externalValueUrl]) {
+      return externalExamplesCache[this.externalValueUrl];
+    }
+
+    externalExamplesCache[this.externalValueUrl] = fetch(this.externalValueUrl).then(res => {
+      return res.text().then(txt => {
+        if (!res.ok) {
+          return Promise.reject(new Error(txt));
+        }
+
+        if (isJsonLike(mimeType)) {
+          try {
+            return JSON.parse(txt);
+          } catch (e) {
+            return txt;
+          }
+        } else {
+          return txt;
+        }
+      });
+    });
+
+    return externalExamplesCache[this.externalValueUrl];
  }
 }
--- a/src/services/models/MediaType.ts
+++ b/src/services/models/MediaType.ts
@ -1,6 +1,6 @@
 import * as Sampler from 'openapi-sampler';

-import { OpenAPIExample, OpenAPIMediaType } from '../../types';
+import { OpenAPIMediaType } from '../../types';
 import { RedocNormalizedOptions } from '../RedocNormalizedOptions';
 import { SchemaModel } from './Schema';

@ -9,7 +9,7 @@ import { OpenAPIParser } from '../OpenAPIParser';
 import { ExampleModel } from './Example';

 export class MediaTypeModel {
-  examples?: { [name: string]: OpenAPIExample };
+  examples?: { [name: string]: ExampleModel };
  schema?: SchemaModel;
  name: string;
  isRequestType: boolean;
@ -30,10 +30,18 @@ export class MediaTypeModel {
    this.schema = info.schema && new SchemaModel(parser, info.schema, '', options);
    this.onlyRequiredInSamples = options.onlyRequiredInSamples;
    if (info.examples !== undefined) {
-      this.examples = mapValues(info.examples, example => new ExampleModel(parser, example));
+      this.examples = mapValues(
+        info.examples,
+        example => new ExampleModel(parser, example, name, info.encoding),
+      );
    } else if (info.example !== undefined) {
      this.examples = {
-        default: new ExampleModel(parser, { value: info.example }),
+        default: new ExampleModel(
+          parser,
+          { value: parser.shalowDeref(info.example) },
+          name,
+          info.encoding,
+        ),
      };
    } else if (isJsonLike(name)) {
      this.generateExample(parser, info);
@ -49,29 +57,31 @@ export class MediaTypeModel {
    if (this.schema && this.schema.oneOf) {
      this.examples = {};
      for (const subSchema of this.schema.oneOf) {
-        const sample = Sampler.sample(
-          subSchema.rawSchema,
-          samplerOptions,
-          parser.spec,
-        );
+        const sample = Sampler.sample(subSchema.rawSchema, samplerOptions, parser.spec);

        if (this.schema.discriminatorProp && typeof sample === 'object' && sample) {
          sample[this.schema.discriminatorProp] = subSchema.title;
        }

-        this.examples[subSchema.title] = {
+        this.examples[subSchema.title] = new ExampleModel(
+          parser,
+          {
            value: sample,
-        };
+          },
+          this.name,
+          info.encoding,
+        );
      }
    } else if (this.schema) {
      this.examples = {
-        default: new ExampleModel(parser, {
-          value: Sampler.sample(
-            info.schema,
-            samplerOptions,
-            parser.spec,
+        default: new ExampleModel(
+          parser,
+          {
+            value: Sampler.sample(info.schema, samplerOptions, parser.spec),
+          },
+          this.name,
+          info.encoding,
        ),
-        }),
      };
    }
  }
--- a/src/services/models/Schema.ts
+++ b/src/services/models/Schema.ts
@ -14,10 +14,13 @@ import {
  isNamedDefinition,
  isPrimitiveType,
  JsonPointer,
+  pluralizeType,
  sortByField,
  sortByRequired,
 } from '../../utils/';

+import { l } from '../Labels';
+
 // TODO: refactor this model, maybe use getters instead of copying all the values
 export class SchemaModel {
  pointer: string;
@ -145,9 +148,9 @@ export class SchemaModel {
      this.fields = buildFields(parser, schema, this.pointer, this.options);
    } else if (this.type === 'array' && schema.items) {
      this.items = new SchemaModel(parser, schema.items, this.pointer + '/items', this.options);
-      this.displayType = this.items.displayType;
+      this.displayType = pluralizeType(this.items.displayType);
      this.displayFormat = this.items.format;
-      this.typePrefix = this.items.typePrefix + 'Array of ';
+      this.typePrefix = this.items.typePrefix + l('arrayOf');
      this.title = this.title || this.items.title;
      this.isPrimitive = this.items.isPrimitive;
      if (this.example === undefined && this.items.example !== undefined) {
@ -161,7 +164,15 @@ export class SchemaModel {

  private initOneOf(oneOf: OpenAPISchema[], parser: OpenAPIParser) {
    this.oneOf = oneOf!.map((variant, idx) => {
-      const merged = parser.mergeAllOf(variant, this.pointer + '/oneOf/' + idx);
+      const derefVariant = parser.deref(variant);
+
+      const merged = parser.mergeAllOf(derefVariant, this.pointer + '/oneOf/' + idx);
+
+      // try to infer title
+      const title =
+        isNamedDefinition(variant.$ref) && !merged.title
+          ? JsonPointer.baseName(variant.$ref)
+          : merged.title;

      const schema = new SchemaModel(
        parser,
@ -169,12 +180,14 @@ export class SchemaModel {
        {
          // variant may already have allOf so merge it to not get overwritten
          ...merged,
+          title,
          allOf: [{ ...this.schema, oneOf: undefined, anyOf: undefined }],
        } as OpenAPISchema,
        this.pointer + '/oneOf/' + idx,
        this.options,
      );

+      parser.exitRef(variant);
      // each oneOf should be independent so exiting all the parent refs
      // otherwise it will cause false-positive recursive detection
      parser.exitParents(merged);
@ -210,7 +223,7 @@ export class SchemaModel {
        if (variant.$ref === undefined) {
          continue;
        }
-        const name = JsonPointer.dirName(variant.$ref);
+        const name = JsonPointer.baseName(variant.$ref);
        derived[variant.$ref] = name;
      }
    }
--- a/src/theme.ts
+++ b/src/theme.ts
@ -105,6 +105,7 @@ const defaultTheme: ThemeInterface = {
    headings: {
      fontFamily: 'Montserrat, sans-serif',
      fontWeight: '400',
+      lineHeight: '1.6em',
    },
    code: {
      fontSize: '13px',
@ -139,6 +140,7 @@ const defaultTheme: ThemeInterface = {
  logo: {
    maxHeight: ({ menu }) => menu.width,
    maxWidth: ({ menu }) => menu.width,
+    gutter: '2px',
  },
  rightPanel: {
    backgroundColor: '#263238',
@ -166,7 +168,7 @@ export function resolveTheme(theme: ThemeInterface): ResolvedThemeInterface {
              counter++;
              if (counter > 1000) {
                throw new Error(
-                  `Theme probably contains cirucal dependency at ${currentPath}: ${val.toString()}`,
+                  `Theme probably contains circular dependency at ${currentPath}: ${val.toString()}`,
                );
              }

@ -281,6 +283,7 @@ export interface ResolvedThemeInterface {
    headings: {
      fontFamily: string;
      fontWeight: string;
+      lineHeight: string;
    };

    links: {
@ -307,6 +310,7 @@ export interface ResolvedThemeInterface {
  logo: {
    maxHeight: string;
    maxWidth: string;
+    gutter: string;
  };
  rightPanel: {
    backgroundColor: string;
--- a/src/utils/tests/helpers.test.ts
+++ b/src/utils/tests/helpers.test.ts
@ -1,5 +1,5 @@
 import slugify from 'slugify';
-import { mapWithLast, appendToMdHeading, mergeObjects, safeSlugify } from '../helpers';
+import { appendToMdHeading, mapWithLast, mergeObjects, safeSlugify, titleize } from '../helpers';

 describe('Utils', () => {
  describe('helpers', () => {
@ -68,5 +68,11 @@ describe('Utils', () => {
        expect(mergeObjects({}, obj1, obj2)).toEqual({ a: ['C'], b: ['D'] });
      });
    });
+
+    describe('titleize', () => {
+      test('should return the string with the first letter capitalized', () => {
+        expect(titleize('my title')).toEqual('My title');
+      });
+    });
  });
 });
--- a/src/utils/tests/openapi.test.ts
+++ b/src/utils/tests/openapi.test.ts
@ -7,6 +7,7 @@ import {
  isPrimitiveType,
  mergeParams,
  normalizeServers,
+  pluralizeType,
 } from '../';

 import { OpenAPIParser } from '../../services';
@ -353,4 +354,27 @@ describe('Utils', () => {
      expect(humanizeConstraints(itemConstraintSchema(1))).toContain('non-empty');
    });
  });
+
+  describe('OpenAPI pluralizeType', () => {
+    it('should pluralize all simple types', () => {
+      expect(pluralizeType('string')).toEqual('strings');
+      expect(pluralizeType('number')).toEqual('numbers');
+      expect(pluralizeType('object')).toEqual('objects');
+      expect(pluralizeType('integer')).toEqual('integers');
+      expect(pluralizeType('boolean')).toEqual('booleans');
+      expect(pluralizeType('array')).toEqual('arrays');
+    });
+
+    it('should pluralize complex dislay types', () => {
+      expect(pluralizeType('object (Pet)')).toEqual('objects (Pet)');
+      expect(pluralizeType('string <email>')).toEqual('strings <email>');
+    });
+
+    it('should pluralize oneOf-ed dislay types', () => {
+      expect(pluralizeType('object or string')).toEqual('objects or strings');
+      expect(pluralizeType('object (Pet) or number <int64>')).toEqual(
+        'objects (Pet) or numbers <int64>',
+      );
+    });
+  });
 });
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@ -147,7 +147,7 @@ export function resolveUrl(url: string, to: string) {
  let res;
  if (to.startsWith('//')) {
    const { protocol: specProtocol } = parse(url);
-    res = `${specProtocol}${to}`;
+    res = `${specProtocol || 'https:'}${to}`;
  } else if (isAbsoluteUrl(to)) {
    res = to;
  } else if (!to.startsWith('/')) {
@ -163,5 +163,34 @@ export function resolveUrl(url: string, to: string) {
 }

 export function getBasePath(serverUrl: string): string {
-  return new URL(serverUrl).pathname;
+  try {
+    return parseURL(serverUrl).pathname;
+  } catch (e) {
+    // when using with redoc-cli serverUrl can be empty resulting in crash
+    return serverUrl;
+  }
+}
+
+export function titleize(text: string) {
+  return text.charAt(0).toUpperCase() + text.slice(1);
+}
+
+export function removeQueryString(serverUrl: string): string {
+  try {
+    const url = parseURL(serverUrl);
+    url.search = '';
+    return url.toString();
+  } catch (e) {
+    // when using with redoc-cli serverUrl can be empty resulting in crash
+    return serverUrl;
+  }
+}
+
+function parseURL(url: string) {
+  if (typeof URL === 'undefined') {
+    // node
+    return new (require('url')).URL(url);
+  } else {
+    return new URL(url);
+  }
 }
--- a/src/utils/jsonToHtml.ts
+++ b/src/utils/jsonToHtml.ts
@ -21,6 +21,10 @@ function htmlEncode(t) {
    : '';
 }

+function escapeForStringLiteral(str: string) {
+  return str.replace(/([\\"])/g, '\\$1');
+}
+
 function decorateWithSpan(value, className) {
  return '<span class="' + className + '">' + htmlEncode(value) + '</span>';
 }
@ -53,11 +57,11 @@ function valueToHTML(value) {
        '<a href="' +
        value +
        '">' +
-        htmlEncode(value) +
+        htmlEncode(escapeForStringLiteral(value)) +
        '</a>' +
        decorateWithSpan('"', 'token string');
    } else {
-      output += decorateWithSpan('"' + value + '"', 'token string');
+      output += decorateWithSpan('"' + escapeForStringLiteral(value) + '"', 'token string');
    }
  } else if (valueType === 'boolean') {
    output += decorateWithSpan(value, 'token boolean');
--- a/src/utils/loadAndBundleSpec.ts
+++ b/src/utils/loadAndBundleSpec.ts
@ -19,7 +19,7 @@ export async function loadAndBundleSpec(specUrlOrObject: object | string): Promi
 export function convertSwagger2OpenAPI(spec: any): Promise<OpenAPISpec> {
  console.warn('[ReDoc Compatibility mode]: Converting OpenAPI 2.0 to OpenAPI 3.0');
  return new Promise<OpenAPISpec>((resolve, reject) =>
-    convertObj(spec, { patch: true, warnOnly: true }, (err, res) => {
+    convertObj(spec, { patch: true, warnOnly: true, text: '{}' }, (err, res) => {
      // TODO: log any warnings
      if (err) {
        return reject(err);
--- a/src/utils/openapi.ts
+++ b/src/utils/openapi.ts
@ -2,6 +2,7 @@ import { dirname } from 'path';

 import { OpenAPIParser } from '../services/OpenAPIParser';
 import {
+  OpenAPIEncoding,
  OpenAPIMediaType,
  OpenAPIOperation,
  OpenAPIParameter,
@ -10,7 +11,7 @@ import {
  Referenced,
 } from '../types';
 import { IS_BROWSER } from './dom';
-import { isNumeric, resolveUrl } from './helpers';
+import { isNumeric, removeQueryString, resolveUrl, stripTrailingSlash } from './helpers';

 function isWildcardStatusCode(statusCode: string | number): statusCode is string {
  return typeof statusCode === 'string' && /\dxx/i.test(statusCode);
@ -130,6 +131,101 @@ export function isJsonLike(contentType: string): boolean {
  return contentType.search(/json/i) !== -1;
 }

+export function isFormUrlEncoded(contentType: string): boolean {
+  return contentType === 'application/x-www-form-urlencoded';
+}
+
+function formEncodeField(fieldVal: any, fieldName: string, explode: boolean): string {
+  if (!fieldVal || !fieldVal.length) {
+    return fieldName + '=';
+  }
+
+  if (Array.isArray(fieldVal)) {
+    if (explode) {
+      return fieldVal.map(val => `${fieldName}=${val}`).join('&');
+    } else {
+      return fieldName + '=' + fieldVal.map(val => val.toString()).join(',');
+    }
+  } else if (typeof fieldVal === 'object') {
+    if (explode) {
+      return Object.keys(fieldVal)
+        .map(k => `${k}=${fieldVal[k]}`)
+        .join('&');
+    } else {
+      return (
+        fieldName +
+        '=' +
+        Object.keys(fieldVal)
+          .map(k => `${k},${fieldVal[k]}`)
+          .join(',')
+      );
+    }
+  } else {
+    return fieldName + '=' + fieldVal.toString();
+  }
+}
+
+function delimitedEncodeField(fieldVal: any, fieldName: string, delimeter: string): string {
+  if (Array.isArray(fieldVal)) {
+    return fieldVal.map(v => v.toString()).join(delimeter);
+  } else if (typeof fieldVal === 'object') {
+    return Object.keys(fieldVal)
+      .map(k => `${k}${delimeter}${fieldVal[k]}`)
+      .join(delimeter);
+  } else {
+    return fieldName + '=' + fieldVal.toString();
+  }
+}
+
+function deepObjectEncodeField(fieldVal: any, fieldName: string): string {
+  if (Array.isArray(fieldVal)) {
+    console.warn('deepObject style cannot be used with array value:' + fieldVal.toString());
+    return '';
+  } else if (typeof fieldVal === 'object') {
+    return Object.keys(fieldVal)
+      .map(k => `${fieldName}[${k}]=${fieldVal[k]}`)
+      .join('&');
+  } else {
+    console.warn('deepObject style cannot be used with non-object value:' + fieldVal.toString());
+    return '';
+  }
+}
+
+/*
+ * Should be used only for url-form-encoded body payloads
+ * To be used for parmaters should be extended with other style values
+ */
+export function urlFormEncodePayload(
+  payload: object,
+  encoding: { [field: string]: OpenAPIEncoding } = {},
+) {
+  if (Array.isArray(payload)) {
+    throw new Error('Payload must have fields: ' + payload.toString());
+  } else {
+    return Object.keys(payload)
+      .map(fieldName => {
+        const fieldVal = payload[fieldName];
+        const { style = 'form', explode = true } = encoding[fieldName] || {};
+        switch (style) {
+          case 'form':
+            return formEncodeField(fieldVal, fieldName, explode);
+            break;
+          case 'spaceDelimited':
+            return delimitedEncodeField(fieldVal, fieldName, '%20');
+          case 'pipeDelimited':
+            return delimitedEncodeField(fieldVal, fieldName, '|');
+          case 'deepObject':
+            return deepObjectEncodeField(fieldVal, fieldName);
+          default:
+            // TODO implement rest of styles for path parameters
+            console.warn('Incorrect or unsupported encoding style: ' + style);
+            return '';
+        }
+      })
+      .join('&');
+  }
+}
+
 export function langFromMime(contentType: string): string {
  if (contentType.search(/xml/i) !== -1) {
    return 'xml';
@ -271,13 +367,20 @@ export function normalizeServers(
  specUrl: string | undefined,
  servers: OpenAPIServer[],
 ): OpenAPIServer[] {
-  const baseUrl =
-    specUrl === undefined ? (IS_BROWSER ? window.location.href : '') : dirname(specUrl);
+  const getHref = () => {
+    if (!IS_BROWSER) {
+      return '';
+    }
+    const href = window.location.href;
+    return href.endsWith('.html') ? dirname(href) : href;
+  };
+
+  const baseUrl = specUrl === undefined ? removeQueryString(getHref()) : dirname(specUrl);

  if (servers.length === 0) {
    return [
      {
-        url: baseUrl,
+        url: stripTrailingSlash(baseUrl),
      },
    ];
  }
@ -338,3 +441,10 @@ export function extractExtensions(obj: object, showExtensions: string[] | true):
      return acc;
    }, {});
 }
+
+export function pluralizeType(displayType: string): string {
+  return displayType
+    .split(' or ')
+    .map(type => type.replace(/^(string|object|number|integer|array|boolean)( ?.*)/, '$1s$2'))
+    .join(' or ');
+}
--- a/typings/styled-patch.d.ts
+++ b/typings/styled-patch.d.ts
@ -18,4 +18,15 @@ declare module 'styled-components' {
      ...interpolations: SimpleInterpolation[]
    ): Keyframes;
  }
+
+  export interface BaseThemedCssFunction<T extends object> {
+    <P extends object>(
+      first:
+        | TemplateStringsArray
+        | CSSObject
+        | InterpolationFunction<ThemedStyledProps<P, T>>
+        | string[],
+      ...interpolations: Array<Interpolation<ThemedStyledProps<P, T>>>
+    ): FlattenInterpolation<ThemedStyledProps<P, T>>;
+  }
 }
--- a/webpack.config.ts
+++ b/webpack.config.ts
@ -65,13 +65,13 @@ export default (env: { standalone?: boolean } = {}, { mode }) => ({
    ? {
        esprima: 'esprima',
        'node-fetch': 'null',
+        'node-fetch-h2': 'null',
+        yaml: 'null',
+        'safe-json-stringify': 'null',
      }
    : (context, request, callback) => {
        // ignore node-fetch dep of swagger2openapi as it is not used
-        if (/node-fetch$/i.test(request)) {
-          return callback(null, 'var undefined');
-        }
-        if (/esprima$/i.test(request)) {
+        if (/esprima|node-fetch|node-fetch-h2|yaml|safe-json-stringify$/i.test(request)) {
          return callback(null, 'var undefined');
        }
        return nodeExternals(context, request, callback);
@ -134,7 +134,6 @@ export default (env: { standalone?: boolean } = {}, { mode }) => ({
          loader: 'css-loader',
          options: {
            sourceMap: false,
-            minimize: true,
          },
        },
      },
--- a/yarn.lock
+++ b/yarn.lock