webmock
Version:
Mock AJAX/HTTP/SSR - Automatically generate documentation
288 lines (285 loc) • 8.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>API Document (Create by webmock)</title>
</head>
<body class="markdown-body">
<link rel="stylesheet" href="https://unpkg.com/github-markdown-css@2.10.0/github-markdown.css" />
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/jquery@1.12.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/vue-json-tree-view@2.1.4/dist/vue-json-tree-view.min.js"></script>
<script src="https://unpkg.com/react@16.5.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.5.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-json-view@1.19.1/dist/main.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/mockjs@1.0.1-beta3/dist/mock-min.js"></script>
<script src="https://unpkg.com/marked@0.5.1/lib/marked.js"></script>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<style>
body {
margin: 0;
}
.el-tabs--border-card {
box-shadow: none;
-webkit-box-shadow:none;
}
.doc {
padding-left: 18em;
padding-right: 1em;
height: 100%;
}
.doc:after {
content: ' ';
display: block;
clear: both;
}
.doc-content {
float: right;
width: 100%;
}
.face-one-sidebar {
float: left;
position: fixed;
position: sticky;
top: 0;
margin-left: -19em;
width: 18em;
padding-left: 1em;
line-height: 1.6;
z-index: 10;
}
.face-one-sidebar:before {
content: ' ';
display: inline-block;
width: 17em;
height: 999em;
background-color: white;
border-right:1px solid #e6e9f0;
z-index: -1;
position: fixed;
}
.face-one-sidebar h2 {
padding-left: .5em;
margin-bottom: .5em;
}
html .face-one-sidebar > ul {
display: block;
padding: 0;
margin: 0;
}
html .face-one-sidebar > ul > li {
display: block;
margin-top: 0;
}
.face-one-sidebar > ul > li > a {
border-right: 1px solid transparent;
display: block;
padding-left: 1em;
text-decoration: none;
color: #495057;
font-size: .8em;
margin-left: -1px;
}
.face-one-sidebar .markdown-sidebar-link--on,
.face-one-sidebar > ul > li > a:hover {
color: #1890ff;
border-right: 1px solid #1890ff;
text-decoration: none;
}
.face-one-sidebar .markdown-sidebar-link-title {
color:gray;
}
@media screen and (max-width: 750px) {
.doc {
padding: 1em;
}
.face-one-sidebar {
position: static;
width: 100%;
margin-left: 0;
}
.face-one-sidebar:before {
display: none;
}
}
@media screen and (min-width: 750px) {
.face-one-sidebar{
height:100vh;
overflow:auto;
}
}
.array-key {
display: none;
}
.array-key~span {
display: none ;
}
.node-ellipsis {
color: gray ;
font-weight: lighter;
font-size: .8em ;
}
.collapsed-icon,
.expanded-icon,
.copy-icon{
opacity: .1;
}
.tip {
color:#ccc;
font-size: .8em;
margin-left: .2em;
}
.url-form {
display: inline;
padding: 0;
margin: 0;
padding: 0;
background-color: transparent;
border:none;
color:#409EFF;
font-size: 1em;
font-weight: inherit;
}
.url-form:hover {
cursor: pointer;
}
</style>
<div id="app" class="doc" style="display:none;" >
<div class="face-one-sidebar">
<h2>
Webmock
<a class="github-button" href="https://github.com/onface/webmock" data-show-count="true" aria-label="Star onface/webmock on GitHub">Star</a>
</h2>
<ul>
<li v-for="item in data" >
<a class="markdown-sidebar-link" :href="'#' + item.type + ':' + item.url" >
{{item.url}} <span class="markdown-sidebar-link-title">{{item.title}}</span>
</a>
</li>
</ul>
</div>
<div class="doc-content">
<div v-for="item in data">
<h2 :id="item.type + ':'+item.url" >
<form :action="item.url" :method="item.type" target="_blank" style="display:inline-block;">
<button type="submit" class="url-form" >
{{item.title || item.url}}
</button>
</form>
<span class="tip">{{item.view? 'render': ''}}</span>
</h2>
<div style="margin-bottom:1em;" v-if="item.view">
<code>template</code>
{{item.view}}
</div>
<div style="margin-bottom:1em;">
<code>{{item.type}}</code>
<form :action="item.url" :method="item.type" target="_blank" style="display:inline-block;">
<button type="submit" class="url-form" >
{{item.url}}
</button>
</form>
</div>
<div v-html="marked(item.notes)"></div>
<strong>Request</strong>
<span class="tip">{{item.reqType}}</span>
<pre class="js-json-view" data-name="JSON schema">{{item.req}}</pre>
<strong>Response</strong>
<el-tabs type="border-card">
<el-tab-pane v-for="(value, key) in item.data" v-if="key[0] !== '$'" :label="key" >
<form :action="item.url" :method="item.type" target="_blank" style="margin-bottom:.5em;" >
<input type="hidden" name="_" :value="key">
<input type="text" v-if="!item.view" name="$" value="url">
<el-button native-type="submit" size="mini" >
<i class="el-icon-view"></i> Preview
</el-button>
</form>
<pre class="js-json-view" data-collapsed="3" >{{mock(value)}}</pre>
<el-collapse>
<el-collapse-item v-if="item.data[key]" title="Mock template">
<pre class="js-json-view" >{{value}}</pre>
</el-collapse-item>
<el-collapse-item v-if="item.data['$'+key]" title="JSON schema">
<pre class="js-json-view" >{{item.data['$' + key]['check']}}</pre>
</el-collapse-item>
<el-collapse-item v-if="item.commonData && item.commonData[key]" title="commonData">
<pre class="js-json-view" >{{item.commonData[key]}}</pre>
</el-collapse-item>
</el-collapse>
</el-tab-pane>
</el-tabs>
</div>
</div>
</div>
<script>
var data = <%- data%>
Vue.use(TreeView)
document.getElementById("app").style.display = 'block'
new Vue({
el: '#app',
methods: {
json: function (data) {
return JSON.stringify(data, null ,4)
},
mock: function (data) {
return Mock.mock(data)
},
marked: function (content) {
if (!content) {
return ''
}
return marked(content)
}
},
data: function () {
return {
data: data
}
}
})
Array.from(document.querySelectorAll('.js-json-view')).forEach(function (node){
if (!node.innerHTML) {
return
}
var data = JSON.parse(node.innerHTML)
var props = {
src: data,
// iconStyle: 'square',
displayObjectSize: false,
name: false,
displayDataTypes: false,
collapsed: 1000
}
if (node.getAttribute('data-collapsed')) {
props.collapsed = parseInt(node.getAttribute('data-collapsed'))
}
if (node.getAttribute('data-name')) {
props.name = node.getAttribute('data-name')
}
ReactDOM.render(
React.createElement(reactJsonView.default, props),
node
)
})
var intersectionObserver = new IntersectionObserver(function (entries) {
if (!entries[0].isIntersecting) {
return
}
$('.markdown-sidebar-link--on').removeClass('markdown-sidebar-link--on')
$('.markdown-sidebar-link[href="#' + entries[0].target.id + '"]').addClass('markdown-sidebar-link--on')
})
$('.markdown-sidebar-link').on('click', function () {
$('.markdown-sidebar-link--on').removeClass('markdown-sidebar-link--on')
$(this).addClass('markdown-sidebar-link--on')
})
$('#app h2').each(function () {
intersectionObserver.observe(this)
})
</script>
</body>
</html>