Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2024-11-24 01:23:43 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge commit '2ac8b3af3cf42f2b6139e7c3c0779592ec253a90' into releases

Browse Source
This commit is contained in:
RedocBot 2016-11-02 10:44:51 +00:00 committed by travis@localhost
commit aaf651a7aa
37 changed files with 767 additions and 695 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.codeclimate.yml
View File

@ -1,12 +0,0 @@
engines:
eslint:
enabled: true
scss-lint:
enabled: true
fixme:
enabled: true
ratings:
paths:
- "lib/**"
exclude_paths:
- "**.spec.js"

2
.travis.yml
View File

@ -32,7 +32,7 @@ before_script:
after_script:
- kill %1 # kill e2e server
before_deploy:
- npm run build:prod-module
- if [[ ! -z "$TRAVIS_TAG" ]]; then npm run build:prod-module; fi
deploy:
- provider: npm
skip_cleanup: true

5
README.md
View File

@ -1,7 +1,7 @@
# ReDoc
**OpenAPI/Swagger-generated API Reference Documentation**
[![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![Code Climate](https://codeclimate.com/github/Rebilly/ReDoc/badges/gpa.svg)](https://codeclimate.com/github/Rebilly/ReDoc) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc)
[![Build Status](https://travis-ci.org/Rebilly/ReDoc.svg?branch=master)](https://travis-ci.org/Rebilly/ReDoc) [![Coverage Status](https://coveralls.io/repos/Rebilly/ReDoc/badge.svg?branch=master&service=github)](https://coveralls.io/github/Rebilly/ReDoc?branch=master) [![Tested on APIs.guru](http://api.apis.guru/badges/tested_on.svg)](https://APIs.guru) [![dependencies Status](https://david-dm.org/Rebilly/ReDoc/status.svg)](https://david-dm.org/Rebilly/ReDoc) [![devDependencies Status](https://david-dm.org/Rebilly/ReDoc/dev-status.svg)](https://david-dm.org/Rebilly/ReDoc#info=devDependencies) [![Stories in Ready](https://badge.waffle.io/Rebilly/ReDoc.png?label=ready&title=Ready)](https://waffle.io/Rebilly/ReDoc)
[![npm](http://img.shields.io/npm/v/redoc.svg)](https://www.npmjs.com/package/redoc) [![Bower](http://img.shields.io/bower/v/redoc.svg)](http://bower.io/) [![License](https://img.shields.io/npm/l/redoc.svg)](https://github.com/Rebilly/ReDoc/blob/master/LICENSE)
@ -112,6 +112,7 @@ ReDoc makes use of the following [vendor extensions](http://swagger.io/specifica
* **selector**: selector of the element to be used for specifying the offset. The distance from the top of the page to the element's bottom will be used as offset;
* **function**: A getter function. Must return a number representing the offset (in pixels);
* `suppress-warnings` - if set, warnings are not rendered at the top of documentation (they still are logged to the console).
* `hide-hostname` - if set, the protocol and hostname is not shown in the method definition.
## Advanced usage
Instead of adding `spec-url` attribute to the `<redoc>` element you can initialize ReDoc via globally exposed `Redoc` object:
@ -139,3 +140,5 @@ Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
- Start the server
`npm start`
- Open `http://localhost:9000`
Alternatively, Docker can be used by just running `docker-compose up`.

7
build/webpack.dev.js
View File

@ -8,8 +8,7 @@ const IS_PRODUCTION = process.env.NODE_ENV === "production";
// TODO Refactor common parts of config
module.exports = {
context: root(),
devtool: 'source-map',
devtool: '#inline-source-map',
resolve: {
extensions: ['.ts', '.js', '.json', '.css'],
@ -51,7 +50,9 @@ module.exports = {
path: root('dist'),
filename: '[name].js',
sourceMapFilename: '[name].[id].map',
chunkFilename: '[id].chunk.js'
chunkFilename: '[id].chunk.js',
// devtoolModuleFilenameTemplate: "[resource-path]",
// devtoolFallbackModuleFilenameTemplate: "[resource-path]?[hash]",
},
module: {

1
build/webpack.prod.js
View File

@ -3,7 +3,6 @@ const webpack = require('webpack');
const VERSION = JSON.stringify(require('../package.json').version);
const root = require('./helpers').root;
const CopyWebpackPlugin = require('copy-webpack-plugin');
const BANNER =
`ReDoc - OpenAPI/Swagger-generated API Reference Documentation
-------------------------------------------------------------

13
demo/swagger.yaml
View File

@ -26,6 +26,14 @@ info:
This API features Cross-Origin Resource Sharing (CORS) implemented in compliance with [W3C spec](https://www.w3.org/TR/cors/).
And that allows cross-domain communication from the browser.
All responses have a wildcard same-origin which makes them completely public and accessible to everyone, including any code on any site.
# Authentication
Petstore offers two forms of authentication:
- API Key
- OAuth2
OAuth2 - an open protocol to allow secure authorization in a simple
and standard method from web, mobile and desktop applications.
<!-- ReDoc-Inject: <security-definitions> -->
version: 1.0.0
title: Swagger Petstore
termsOfService: 'http://swagger.io/terms/'
@ -48,6 +56,9 @@ tags:
description: Operations about user
securityDefinitions:
petstore_auth:
description: |
Get access to data while protecting your account credentials.
OAuth2 is also a safer and more secure way to give you access.
type: oauth2
authorizationUrl: 'http://petstore.swagger.io/api/oauth/dialog'
flow: implicit
@ -55,6 +66,8 @@ securityDefinitions:
'write:pets': modify pets in your account
'read:pets': read your pets
api_key:
description: |
For this sample, you can use the api key `special-key` to test the authorization filters.
type: apiKey
name: api_key
in: header

8
docker-compose.yml Normal file
View File

@ -0,0 +1,8 @@
dev:
image: node:7
command: sh -c "npm install; npm start -- --host=0.0.0.0"
ports:
- "9000:9000"
volumes:
- "./:/code"
working_dir: /code

6
lib/components/ApiInfo/api-info.html
View File

@ -1,5 +1,5 @@
<div>
<h1 class="api-info-header">{{info.title}} ({{info.version}})</h1>
<div class="api-info-wrapper">
<h1>{{info.title}} ({{info.version}})</h1>
<p>
Download OpenAPI (fka Swagger) specification:
<a class="openapi-button" target="_blank" attr.href='{{specUrl}}'> Download </a>
@ -17,5 +17,7 @@
<span *ngIf="!info.license.url"> {{info.license.name}} </span>
</span>
</p>
<span class="redoc-markdown-block">
<dynamic-ng2-viewer [html]="info['x-redoc-html-description']"></dynamic-ng2-viewer>
</span>
</div>

22
lib/components/ApiInfo/api-info.scss
View File

@ -1,28 +1,24 @@
@import '../../shared/styles/variables';
.api-info-header {
font-weight: normal;
}
:host > div {
width: 60%;
padding: 40px;
:host > .api-info-wrapper {
box-sizing: border-box;
padding: $section-spacing;
width: 60%;
@media (max-width: $right-panel-squash-breakpoint) {
width: 100%;
}
}
a.openapi-button {
padding: 3px 8px 4px 8px;
color: $primary-color;
.openapi-button {
border: 1px solid $primary-color;
margin-left: 0.5em;
color: $primary-color;
font-weight: normal;
margin-left: 0.5em;
padding: 3px 8px 4px;
}
:host /deep/ [section] {
padding-top: 60px;
margin-top: 20px;
padding-top: 2 * $section-spacing;
}

9
lib/components/ApiLogo/api-logo.scss
View File

@ -1,5 +1,14 @@
@import '../../shared/styles/variables';
:host {
display: block;
text-align: center;
@media (max-width: $side-menu-mobile-breakpoint) {
display: none;
}
}
img {
max-height: 150px;
width: auto;

147
lib/components/JsonSchema/_json-schema-common.scss
View File

@ -5,26 +5,16 @@ $cell-spacing: 25px;
$cell-padding: 10px;
$bullet-margin: 10px;
$line-border: $lines-width solid $tree-lines-color;
$line-border-erase: ($lines-width + 1px) solid #fff;
$line-border-erase: ($lines-width + 1px) solid $background-color;
$border-color: lighten($secondary-color, 50%);
$nullable-color: #3195a6;
$hint-border: 1px dotted rgba(38, 50, 56, 0.4);
$param-name-height: 20px;
$sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
.param-name {
position: relative;
border-left: $line-border;
padding: $cell-padding 0;
vertical-align: top;
line-height: $param-name-height;
white-space: nowrap;
font-size: 0.929em;
font-weight: $regular;
box-sizing: border-box;
}
.param-name-wrap {
display: inline-block;
padding-right: $cell-spacing;
@ -32,10 +22,9 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
}
.param-info {
border-bottom: 1px solid #ccc;
border-bottom: 1px solid $border-color;
padding: $cell-padding 0;
width: 75%;
line-height: 1em;
box-sizing: border-box;
}
@ -46,7 +35,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
margin-right: 6px;
margin-left: 6px;
border-radius: $border-radius;
background-color: rgba($primary-color, .1);
background-color: rgba($primary-color, 0.1);
padding: 0 4px;
color: rgba($primary-color, 0.7);
}
@ -58,7 +47,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
.param-required {
vertical-align: middle;
line-height: $param-name-height;
color: #f00;
color: $red;
font-size: 12px;
font-weight: bold;
}
@ -66,7 +55,7 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
.param-nullable {
vertical-align: middle;
line-height: $param-name-height;
color: #3195a6;
color: $nullable-color;
font-size: 12px;
font-weight: bold;
}
@ -77,43 +66,56 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
color: rgba($black, 0.4);
font-size: 0.929em;
font-weight: normal;
}
.param-type.array:before {
content: "Array of ";
&.array::before {
content: $array-text;
color: $black;
font-weight: $base-font-weight;
}
.param-type.tuple:before {
content: "Tuple";
&.tuple::before {
content: $tuple-text;
color: $black;
font-weight: $base-font-weight;
}
.param-type.with-hint {
&.with-hint {
display: inline-block;
margin-bottom: 0.4em;
border-bottom: 1px dotted rgba(38,50,56,0.4);
border-bottom: $hint-border;
padding: 0;
cursor: help;
}
.param-type-trivial {
&-trivial {
display: inline-block;
}
.param-type-file {
&-file {
font-weight: bold;
text-transform: capitalize;
}
}
/* tree */
// tree
// Bullet
.param-name > span:before {
content: "";
.param-name {
border-left: $line-border;
box-sizing: border-box;
position: relative;
padding: $cell-padding 0;
vertical-align: top;
line-height: $param-name-height;
white-space: nowrap;
font-size: 0.929em;
font-weight: $regular;
> span::before {
content: '';
display: inline-block;
width: $bullet-size;
height: $bullet-size + 6;
@ -122,17 +124,20 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
vertical-align: middle;
}
.param-name > span:after {
content: "";
> span::after {
content: '';
position: absolute;
border-top: $line-border;
width: $bullet-margin;
left: 0;
top: ($param-name-height / 2) + $cell-padding + 1;
}
}
.param:first-of-type > .param-name:before {
content: "";
.param:first-of-type {
> .param-name::before {
content: '';
display: block;
position: absolute;
left: -$lines-width;
@ -140,53 +145,85 @@ $sub-schema-offset: ($bullet-size / 2) + $bullet-margin;
border-left: $line-border-erase;
height: ($param-name-height / 2) + $cell-padding + 1;
}
}
.param:last-of-type > .param-name, .param.last > .param-name {
.param:last-of-type,
.param.last {
> .param-name {
position: relative;
&:after {
content: "";
&::after {
content: '';
display: block;
position: absolute;
left: -$lines-width - 1px;
border-left: $line-border-erase;
top: ($param-name-height / 2) + $cell-padding + $lines-width + 1;
background-color: white;
background-color: $background-color;
bottom: 0;
}
}
}
.param-wrap:last-of-type > .param-schema {
border-left-color: transparent;
}
.param-schema .param-wrap:first-of-type .param-name:before {
display: none !important;
.param-schema {
.param-wrap:first-of-type {
.param-name::before {
display: none;
}
}
}
.param-schema.last > td {
.param-schema.last {
> td {
border-left: 0;
}
}
.param-enum {
color: $text-color;
font-size: 13px;
font-size: 0.95em;
&:before {
content: 'Values: {';
&::before {
content: 'Valid values: ';
}
}
&:after {
content: '}';
.param-pattern {
color: $nullable-color;
white-space: nowrap;
&::before,
&::after {
content: '/';
margin: 0 3px;
font-size: 1.2em;
font-weight: bold;
vertical-align: bottom;
}
}
> .enum-value {
&:after {
content: ", ";
.param-default {
font-size: 0.95em;
&::before {
content: 'Default: ';
}
}
&:last-of-type:after {
content: none;
}
}
.param-enum-value,
.param-default-value {
background-color: $background-color;
border: 1px solid rgba($secondary-color, 0.2);
margin: 2px 3px;
padding: 0 5px;
border-radius: 2px;
color: $secondary-color;
display: inline-block;
min-width: 20px;
text-align: center;
}

15
lib/components/JsonSchema/json-schema.html
View File

@ -23,8 +23,9 @@
</span>
<span *ngIf="schema['x-nullable']" class="param-nullable">Nullable</span>
<div *ngIf="schema.enum" class="param-enum">
<span *ngFor="let enumItem of schema.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
<span *ngFor="let enumItem of schema.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
</div>
<span *ngIf="schema.pattern" class="param-pattern">{{schema.pattern}}</span>
</span>
</template>
<template ngSwitchCase="tuple">
@ -57,7 +58,7 @@
<span class="param-name-wrap" (click)="subSchema.toggle()">
<span class="param-name-content">
{{prop._name}}
<span class="param-enum-value" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
<span class="param-name-enumvalue" [hidden]="!prop._enumItem"> {{prop._enumItem?.val | json}} </span>
</span>
<svg *ngIf="prop._pointer" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 24 24" xml:space="preserve">
<polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "/>
@ -72,14 +73,16 @@
</span>
<span *ngIf="prop._required" class="param-required">Required</span>
<span *ngIf="prop['x-nullable']" class="param-nullable">Nullable</span>
<div *ngIf="prop.default != null">Default: {{prop.default | json}}</div>
<div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
<span *ngFor="let enumItem of prop.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
<div class="param-default" *ngIf="prop.default != null">
<span class="param-default-value">{{prop.default | json}}</span>
</div>
<div *ngIf="prop.enum && !prop.isDiscriminator" class="param-enum">
<span *ngFor="let enumItem of prop.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
</div>
<span *ngIf="prop.pattern" class="param-pattern">{{prop.pattern}}</span>
</div>
<div class="param-description" [innerHtml]="prop.description | marked"></div>
<div class="discriminator-info" *ngIf="prop.isDiscriminator">
<span>This field value determines the exact schema:</span>
<drop-down (change)="selectDescendant($event)">
<option *ngFor="let descendant of descendants; let i=index"
[value]="i" [attr.selected]="descendant.active ? '' : null" >{{descendant.name}}</option>

14
lib/components/JsonSchema/json-schema.scss
View File

@ -1,8 +1,9 @@
@import 'json-schema-common';
/* styles for array-schema for array */
// styles for array-schema for array
$array-marker-font-sz: 13px;
$array-marker-line-height: 1.5;
:host {
display: block;
}
@ -15,6 +16,7 @@ $array-marker-line-height: 1.5;
.derived-schema {
display: none;
}
.derived-schema.active {
display: block;
}
@ -156,13 +158,7 @@ table {
}
.discriminator-info {
font-weight: $regular;
margin-bottom: 10px;
> span {
font-size: 0.9em;
font-weight: $light;
}
margin-top: 5px;
}
.discriminator-wrap:not(.empty) > td {
@ -214,7 +210,7 @@ li:before {
}
}
.param-enum-value {
.param-name-enumvalue {
padding: 2px;
background-color: #e6ebf6;

4
lib/components/Method/method.html
View File

@ -13,12 +13,12 @@
<responses-list pointer="{{pointer}}/responses"> </responses-list>
</div>
<div class="method-samples">
<h5>Definition</h5>
<h4 class="method-params-subheader">Definition</h4>
<div class="method-endpoint">
<h5 class="http-method" [ngClass]="method.httpMethod">{{method.httpMethod}}</h5>
<span select-on-click><!--
--><span class="api-url">{{method.apiUrl}}</span><span class="path">{{method.path}}</span><!--
--><span class="method-api-url">{{method.apiUrl}}</span><span class="method-api-url-path">{{method.path}}</span><!--
--></span>
</div>

39
lib/components/Method/method.scss
View File

@ -12,14 +12,6 @@
border-bottom: 0;
}
h2 {
color: $secondary-color;
}
responses-list, params-list {
display: block;
}
.method-header {
margin-bottom: .9em;
}
@ -35,7 +27,7 @@ responses-list, params-list {
overflow-x: auto;
}
.method-endpoint > h5 {
.method-endpoint > .method-params-subheader {
padding-top: 1px;
padding-bottom: 0;
margin: 0;
@ -46,44 +38,43 @@ responses-list, params-list {
border-radius: $border-radius;
}
.api-url {
.method-api-url {
color: rgba(#ffffff, .6);
margin-left: 10px;
margin-top: 2px;
position: relative;
top: 1px;
font-family: $headers-font, $headers-font-family;
font-size: 0.929em!important;
}
font-size: 0.929em;
.path {
&-path {
font-family: $headers-font, $headers-font-family;
position: relative;
top: 1px;
color: #ffffff;
font-size: 0.929em!important;
}
}
.method-tags {
margin-top: 20px;
}
.method-tags a {
> a {
font-size: 16px;
color: #999;
display: inline-block;
padding: 0 0.5em;
text-decoration: none;
}
.method-tags a:before {
&:before {
content: '#';
margin-right: -0.4em;
}
.method-tags a:first-of-type {
&:first-of-type {
padding: 0;
}
}
}
.method-content, .method-samples {
display: block;
@ -93,20 +84,16 @@ responses-list, params-list {
.method-content {
width: 100% - $samples-panel-width;
padding: 40px;
padding: $section-spacing;
}
.method-samples {
color: $sample-panel-color;
width: 40%;
padding: 40px;
padding: $section-spacing;
background: $samples-panel-bg-color;
}
responses-samples {
display: block;
}
.method-samples header,
.method-samples > h5 {
color: $sample-panel-headers-color;
@ -137,6 +124,8 @@ responses-samples {
background: #ffffff;
padding: 3px 10px;
text-transform: uppercase;
display: inline-block;
margin: 0;
}
[select-on-click] {

7
lib/components/Method/method.ts
View File

@ -3,6 +3,7 @@ import { Input, Component, OnInit, ChangeDetectionStrategy } from '@angular/core
import JsonPointer from '../../utils/JsonPointer';
import { BaseComponent, SpecManager } from '../base';
import { SchemaHelper } from '../../services/schema-helper.service';
import { OptionsService } from '../../services/options.service';
@Component({
selector: 'method',
@ -16,13 +17,17 @@ export class Method extends BaseComponent implements OnInit {
method:any;
constructor(specMgr:SpecManager) {
constructor(specMgr:SpecManager, private optionsService: OptionsService) {
super(specMgr);
}
init() {
this.method = {};
if (this.optionsService.options.hideHostname) {
this.method.apiUrl = this.specMgr.basePath;
} else {
this.method.apiUrl = this.specMgr.apiUrl;
}
this.method.httpMethod = JsonPointer.baseName(this.pointer);
this.method.path = JsonPointer.baseName(this.pointer, 2);
this.method.info = this.componentSchema;

6
lib/components/MethodsList/methods-list.scss
View File

@ -1,7 +1,11 @@
@import '../../shared/styles/variables';
:host {
display: block;
overflow: hidden;
}
.tag-info {
padding: 40px;
padding: $section-spacing;
box-sizing: border-box;
background-color: white;
width: 60%;

9
lib/components/ParamsList/params-list.html
View File

@ -16,10 +16,13 @@
title="{{param._displayTypeHint}}"> {{param._displayType}} {{param._displayFormat}}</span>
<span class="param-range" *ngIf="param._range"> {{param._range}} </span>
<span *ngIf="param.required" class="param-required">Required</span>
<div class="default" *ngIf="param.default != null">Default: {{param.default | json}}</div>
<div *ngIf="param.enum" class="param-enum">
<span *ngFor="let enumItem of param.enum" class="enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
<div class="param-default" *ngIf="param.default != null">
<span class="param-default-value">{{param.default | json}}</span>
</div>
<div *ngIf="param.enum" class="param-enum">
<span *ngFor="let enumItem of param.enum" class="param-enum-value {{enumItem.type}}"> {{enumItem.val | json}} </span>
</div>
<span *ngIf="param.pattern" class="param-pattern">{{param.pattern}}</span>
</div>
<div class="param-description" [innerHtml]="param.description | marked"></div>
</div>

2
lib/components/Redoc/redoc.html
View File

@ -7,7 +7,7 @@
<api-logo> </api-logo>
<side-menu> </side-menu>
</div>
<div id="api-content">
<div class="api-content">
<warnings></warnings>
<api-info></api-info>
<methods-list> </methods-list>

71
lib/components/Redoc/redoc.scss
View File

@ -36,30 +36,6 @@
color: $text-color;
}
side-menu {
display: block;
box-sizing: border-box;
}
methods-list {
display: block;
overflow: hidden;
}
api-info, .side-bar {
display: block;
padding: 10px 0;
}
api-logo {
display: block;
text-align: center;
@media (max-width: $side-menu-mobile-breakpoint) {
display: none;
}
}
[sticky-sidebar] {
width: $side-bar-width;
background-color: $side-bar-bg-color;
@ -73,7 +49,7 @@ api-logo {
}
}
#api-content {
.api-content {
margin-left: $side-bar-width;
position: relative;
@media (max-width: $side-menu-mobile-breakpoint) {
@ -82,7 +58,7 @@ api-logo {
}
}
#api-content:before {
.api-content:before {
content: "";
background: $samples-panel-bg-color;
height: 100%;
@ -91,28 +67,43 @@ api-logo {
right: 0;
position: absolute;
z-index: -1;
}
@media (max-width: $right-panel-squash-breakpoint) {
#api-content:before {
display: none;
}
}
.redoc-error {
padding: 20px;
text-align: center;
color: $red;
> h2 {
color: $red;
font-size: 40px;
}
}
.redoc-error-details {
max-width: 750px;
margin: 0 auto;
font-size: 18px;
}
/* global redoc styles */
@for $index from 1 through 5 {
:host /deep/ h#{$index}{
margin-top: 0;
font-family: $headers-font, $headers-font-family;
color: $headers-color;
color: $secondary-color;
font-weight: $headers-font-weight;
line-height: 1.4em;
}
}
:host /deep/ {
h1 { font-size: $h1; }
h1 { font-size: $h1; color: $headers-color; }
h2 { font-size: $h2; }
h3 { font-size: $h3; }
h4 { font-size: $h4; }
@ -153,7 +144,7 @@ api-logo {
footer {
position: relative;
text-align: right;
padding: 10px 40px;
padding: 10px $section-spacing;
font-size: 15px;
margin-top: -35px;
color: white;
@ -256,19 +247,3 @@ footer {
font-weight: bold;
}
}
.redoc-error {
padding: 20px;
text-align: center;
color: #cc0000;
> h2 {
color: #cc0000;
font-size: 40px;
}
}
.redoc-error-details {
max-width: 750px;
margin: 0 auto;
font-size: 18px;
}

3
lib/components/RequestSamples/request-samples.scss
View File

@ -2,6 +2,7 @@
:host {
overflow: hidden;
display: block;
}
.action-buttons {
@ -70,7 +71,7 @@ header {
padding-top: 10px;
}
pre {
.code-sample pre {
overflow-x: auto;
word-break: break-all;
word-wrap: break-word;

18
lib/components/RequestSamples/request-samples.ts
View File

@ -1,14 +1,14 @@
'use strict';
import { Component, ViewChildren, QueryList, Input,
ChangeDetectionStrategy, OnInit, HostBinding } from '@angular/core';
ChangeDetectionStrategy, OnInit, HostBinding, ElementRef, NgZone } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BaseComponent, SpecManager } from '../base';
import JsonPointer from '../../utils/JsonPointer';
import { Tabs } from '../../shared/components/index';
import { AppStateService } from '../../services/index';
import { AppStateService, ScrollService } from '../../services/index';
@Component({
selector: 'request-samples',
@ -26,14 +26,26 @@ export class RequestSamples extends BaseComponent implements OnInit {
selectedLang: Subject<any>;
samples: Array<any>;
constructor(specMgr:SpecManager, public appState:AppStateService) {
constructor(
specMgr:SpecManager,
public appState:AppStateService,
private scrollService: ScrollService,
private el: ElementRef,
private zone: NgZone
) {
super(specMgr);
this.selectedLang = this.appState.samplesLanguage;
}
changeLangNotify(lang) {
let relativeScrollPos = this.scrollService.relativeScrollPos(this.el.nativeElement);
this.selectedLang.next(lang);
// do scroll in the end of VM turn to have it seamless
let subscription = this.zone.onMicrotaskEmpty.subscribe(() => {
this.scrollService.scrollTo(this.el.nativeElement, relativeScrollPos);
subscription.unsubscribe();
});
}
init() {

12
lib/components/ResponsesList/responses-list.scss
View File

@ -1,9 +1,13 @@
@import '../../shared/styles/variables';
:host {
display: block;
}
.responses-list-header {
font-size: 18px;
padding: 0.2em 0;
margin: 3em 0 1.1em 0;
margin: 3em 0 1.1em;
color: #253137;
font-weight: normal;
}
@ -45,13 +49,13 @@ header {
margin-right: 6px;
margin-left: 6px;
border-radius: $border-radius;
background-color: rgba($primary-color, .1);
background-color: rgba($primary-color, 0.1);
padding: 0 4px;
color: rgba($primary-color, 0.7);
}
.header-type.array:before {
content: "Array of ";
.header-type.array::before {
content: $array-text;
color: $black;
font-weight: $base-font-weight;
}

7
lib/components/ResponsesSamples/responses-samples.scss
View File

@ -2,13 +2,6 @@
:host {
overflow: hidden;
}
tab, tabs {
display: block;
}
schema-sample {
display: block;
}

4
lib/components/SchemaSample/schema-sample.scss
View File

@ -1,5 +1,9 @@
@import '../../shared/styles/variables';
:host {
display: block;
}
pre {
background-color: transparent;
padding: 0;

6
lib/components/SecurityDefinitions/security-definitions.html
View File

@ -2,8 +2,7 @@
<h2 class="sharable-header" attr.section="section/Authentication/{{def.name}}">
<a class="share-link" href="#section/Authentication/{{def.name}}"></a>{{def.name}}</h2>
<div [innerHTML]="def.details.description | marked"></div>
<div class="redoc-markdown-block"> <!-- apply md styles to table -->
<table class="details">
<table class="security-details">
<tr>
<th> Security scheme type: </th>
<td> {{def.details._displayType}} </td>
@ -29,7 +28,7 @@
</table>
<template [ngIf]="def.details.type === 'oauth2'">
<h3> OAuth2 Scopes </h3>
<table class="scopes">
<table class="security-scopes-details">
<tr *ngFor="let scopeName of def.details.scopes | keys">
<th> {{scopeName}} </th>
<td> {{def.details.scopes[scopeName]}} </td>
@ -37,4 +36,3 @@
</table>
</template>
</div>
</div>

12
lib/components/SecurityDefinitions/security-definitions.scss
View File

@ -1,16 +1,16 @@
@import '../../shared/styles/variables';
:host {
display: block;
}
.security-definition:not(:last-of-type) {
border-bottom: 1px solid rgba($text-color, .3);
padding-bottom: 20px;
}
h2, h3 {
color: $secondary-color;
}
:host h2 {
padding-top: 40px;
padding-top: $section-spacing;
}
h3 {
@ -18,7 +18,7 @@ h3 {
font-size: 1em;
}
:host .redoc-markdown-block table {
:host .security-scopes-details, :host .security-details {
margin-top: 20px;
}

5
lib/components/SideMenu/side-menu.scss
View File

@ -1,6 +1,11 @@
@import '../../shared/styles/variables';
$mobile-menu-compact-breakpoint: 550px;
:host {
display: block;
box-sizing: border-box;
}
.menu-header {
text-transform: uppercase;
color: $headers-color;

3
lib/services/content-projector.service.ts
View File

@ -27,11 +27,14 @@ export class ContentProjector {
}
let parentCompRef = parentView.createComponent(componentFactory, null, contextInjector, [projectedNodes]);
// using private property to get AppElement instance
let appElement = (<any>parentView)._element;
appElement.nestedViews = appElement.nestedViews || [];
for (let i=0; i < componentRefs.length; i++) {
let compRef = componentRefs[i];
appElement.nestedViews.push((<any>compRef.hostView).internalView);
// attach appElement to parentView change detector
(<any>compRef.hostView).internalView.addToContentChildren(appElement);
}
return parentCompRef;

3
lib/services/options.service.ts
View File

@ -8,7 +8,7 @@ const defaults = {
disableLazySchemas: false
};
const OPTION_NAMES = new Set(['scrollYOffset', 'disableLazySchemas', 'specUrl', 'suppressWarnings']);
const OPTION_NAMES = new Set(['scrollYOffset', 'disableLazySchemas', 'specUrl', 'suppressWarnings', 'hideHostname']);
@Injectable()
export class OptionsService {
@ -69,5 +69,6 @@ export class OptionsService {
if (isString(this._options.disableLazySchemas)) this._options.disableLazySchemas = true;
if (isString(this._options.suppressWarnings)) this._options.suppressWarnings = true;
if (isString(this._options.hideHostname)) this._options.hideHostname = true;
}
}

13
lib/services/scroll.service.ts
View File

@ -42,17 +42,22 @@ export class ScrollService {
return INVIEW_POSITION.INVIEW;
}
scrollTo($el) {
scrollTo($el, offset:number = 0) {
// TODO: rewrite this to use offsetTop as more reliable solution
let subjRect = $el.getBoundingClientRect();
let offset = this.scrollY() + subjRect.top - this.scrollYOffset() + 1;
let posY = this.scrollY() + subjRect.top - this.scrollYOffset() + offset + 1;
if (this.$scrollParent.scrollTo) {
this.$scrollParent.scrollTo(0, offset);
this.$scrollParent.scrollTo(0, posY);
} else {
this.$scrollParent.scrollTop = offset;
this.$scrollParent.scrollTop = posY;
}
}
relativeScrollPos($el) {
let subjRect = $el.getBoundingClientRect();
return - subjRect.top + this.scrollYOffset() - 1;
}
scrollHandler(evt) {
let isScrolledDown = (this.scrollY() - this.prevOffsetY > 0);
this.prevOffsetY = this.scrollY();

7
lib/shared/components/Tabs/tabs.scss
View File

@ -1,5 +1,9 @@
@import '../../styles/variables';
:host {
display: block;
}
ul {
display: block;
margin: 0;
@ -12,9 +16,6 @@ li {
cursor: pointer;
}
li.active {
}
.tab-success, .tab-error, .tab-redirect, .tab-info {
&:before {
content: "";

6
lib/shared/components/Zippy/zippy.scss
View File

@ -50,6 +50,12 @@ $zippy-redirect-bg-color: rgba($zippy-redirect-color, .08);
.zippy-indicator svg {
height: 1.2em;
vertical-align: middle;
transition: all 0.3s ease;
transform: rotateZ(-180deg);
}
.zippy-hidden > .zippy-title svg {
transform: rotateZ(0);
}

14
lib/shared/styles/_variables.scss
View File

@ -6,6 +6,7 @@ $black : #263238;
$green: #00aa13;
$yellow: #f1c400;
$red: #e53935;
$background-color: #fff;
$em-size: 14px;
@ -37,12 +38,15 @@ $h3: 1.2857142857142858em;
$h4: 1.1428571428571428em;
$h5: 0.929em;
// spacings
$section-spacing: 40px;
// Side Bar
// ---------------------------
$side-bar-width: 260px;
$side-bar-bg-color: #FAFAFA;
$side-bar-bg-color: #fafafa;
$side-menu-item-color: #384248;
$side-menu-even-bg-color: #F0F0F0;
$side-menu-even-bg-color: #f0f0f0;
$side-menu-active-bg-color: #f0f0f0;
$side-menu-item-hpadding: 20px;
$side-menu-item-vpadding: 5px;
@ -54,7 +58,7 @@ $samples-panel-width: 40%;
$sample-panel-headers-color: lighten($black, 50%);
$sample-panel-color: lighten($black, 80%);
$tree-lines-color: rgba($primary-color, .5);
$tree-lines-color: rgba($primary-color, 0.5);
$side-menu-mobile-breakpoint: 1000px;
$right-panel-squash-breakpoint: 1100px;
@ -62,3 +66,7 @@ $right-panel-squash-breakpoint: 1100px;
// Border Radius
// ---------------------------
$border-radius: 2px;
// texts
$array-text: 'Array of ';
$tuple-text: 'Tuple ';

5
lib/utils/spec-manager.ts
View File

@ -10,6 +10,7 @@ import { MdRenderer } from './md-renderer';
export class SpecManager {
public _schema: any = {};
public apiUrl: string;
public basePath: string;
public spec = new BehaviorSubject<any|null>(null);
private _instance: any;
@ -65,8 +66,8 @@ export class SpecManager {
}
let host = this._schema.host || urlParts.host;
let basePath = this._schema.basePath || '/';
this.apiUrl = protocol + '://' + host + basePath;
this.basePath = this._schema.basePath || '/';
this.apiUrl = protocol + '://' + host + this.basePath;
if (this.apiUrl.endsWith('/')) {
this.apiUrl = this.apiUrl.substr(0, this.apiUrl.length - 1);
}

10
package.json
View File

@ -1,7 +1,7 @@
{
"name": "redoc",
"description": "Swagger-generated API Reference Documentation",
"version": "1.5.0",
"version": "1.5.1",
"repository": {
"type": "git",
"url": "git://github.com/Rebilly/ReDoc"
@ -61,10 +61,9 @@
"branch-release": "^1.0.3",
"chalk": "^1.1.3",
"codelyzer": "^1.0.0-beta.3",
"copy-webpack-plugin": "^3.0.1",
"core-js": "^2.4.1",
"coveralls": "^2.11.9",
"css-loader": "^0.24.0",
"css-loader": "^0.25.0",
"deploy-to-gh-pages": "^1.1.2",
"http-server": "^0.9.0",
"istanbul-instrumenter-loader": "^0.2.0",
@ -96,16 +95,15 @@
"style-loader": "^0.13.1",
"ts-helpers": "^1.1.1",
"tslint": "^3.15.1",
"tslint-stylish": "^2.1.0-beta",
"typescript": "^2.0.3",
"webpack": "^2.1.0-beta.25",
"webpack-dev-server": "^2.1.0-beta.6",
"webpack-dev-server": "^2.1.0-beta.10",
"zone.js": "^0.6.25"
},
"dependencies": {
"dropkickjs": "^2.1.10",
"hint.css": "^2.3.2",
"json-pointer": "^0.5.0",
"json-pointer": "^0.6.0",
"json-schema-ref-parser": "^3.1.2",
"openapi-sampler": "^0.3.2",
"prismjs": "^1.5.1",

1
tests/e2e/redoc.e2e.js
View File

@ -106,6 +106,7 @@ if (process.env.JOB === 'e2e-guru') {
delete apisGuruList['clarify.io']; // non-string references
//delete apisGuruList['pushpay.com']; // https://github.com/Rebilly/ReDoc/issues/30
delete apisGuruList['bbci.co.uk']; // too big
delete apisGuruList['bbc.com']; // too big
// run quick version of e2e test on all builds except releases
if (process.env.TRAVIS && !process.env.TRAVIS_TAG) {