src/lib/doc/template.nunjucks
<!DOCTYPE HTML>
<html>
<head>
<title>{{ title }} Composr API documentation</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="https://github.com/kevinrenskers/raml2html {{ config.raml2HtmlVersion }}">
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/styles/default.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.1/highlight.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jsonview/1.2.3/jquery.jsonview.min.js"></script>
<link rel="stylesheet" href="https://rawgithub.com/yesmeck/jquery-jsonview/master/dist/jquery.jsonview.css" />
<script type="text/javascript">
function formatJSONResponses(){
var items = $('.example-response');
$.each(items, function(index, item){
var domElement = $(item);
var jsonContent = JSON.parse(domElement.html());
domElement.JSONView(jsonContent, { collapsed: true });
})
}
function bindVersionSelector(){
$('.version-toggle').on('click', function(e){
e.preventDefault();
var version = $(this).attr('id');
var basePathDoc = '{{basePathDoc}}';
var baseUrl = window.location.href;
if(basePathDoc){
//Remove all that is after the basePathDoc (for ex: doc/thing/version)
baseUrl = baseUrl.substring(0, baseUrl.indexOf(basePathDoc) + basePathDoc.length);
}
window.location = baseUrl + '/' + version;
})
}
$(document).ready(function() {
$('.page-header pre code, .top-resource-description pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
$('[data-toggle]').click(function() {
var selector = $(this).data('target') + ' pre code';
$(selector).each(function(i, block) {
hljs.highlightBlock(block);
});
});
// open modal on hashes like #_action_get
$(window).bind('hashchange', function(e) {
var anchor_id = document.location.hash.substr(1); //strip #
var element = $('#' + anchor_id);
// do we have such element + is it a modal? --> show it
if (element.length && element.hasClass('modal')) {
element.modal('show');
}
});
// execute hashchange on first page load
$(window).trigger('hashchange');
// remove url fragment on modal hide
$('.modal').on('hidden.bs.modal', function() {
try {
if (history && history.replaceState) {
history.replaceState({}, '', '#');
}
} catch(e) {}
});
//Format jsons
formatJSONResponses();
//Bind version selector
bindVersionSelector();
});
</script>
<style>
.hljs {
background: transparent;
}
.parent {
color: #999;
}
.list-group-item > .badge {
float: none;
margin-right: 6px;
}
.panel-title > .methods {
float: right;
}
.badge {
border-radius: 0;
text-transform: uppercase;
width: 70px;
font-weight: normal;
color: #f3f3f6;
line-height: normal;
}
.badge_get {
background-color: #63a8e2;
}
.badge_post {
background-color: #6cbd7d;
}
.badge_put {
background-color: #22bac4;
}
.badge_delete {
background-color: #d26460;
}
.badge_patch {
background-color: #ccc444;
}
.list-group, .panel-group {
margin-bottom: 0;
}
.panel-group .panel+.panel-white {
margin-top: 0;
}
.panel-group .panel-white {
border-bottom: 1px solid #F5F5F5;
border-radius: 0;
}
.panel-white:last-child {
border-bottom-color: white;
-webkit-box-shadow: none;
box-shadow: none;
}
.panel-white .panel-heading {
background: white;
}
.tab-pane ul {
padding-left: 2em;
}
.tab-pane h2 {
font-size: 1.2em;
padding-bottom: 4px;
border-bottom: 1px solid #ddd;
}
.tab-pane h3 {
font-size: 1.1em;
}
.tab-content {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 10px;
}
#sidebar {
margin-top: 30px;
padding-right: 5px;
overflow: auto;
height: 90%;
}
.top-resource-description {
border-bottom: 1px solid #ddd;
background: #fcfcfc;
padding: 15px 15px 0 15px;
margin: -15px -15px 10px -15px;
}
.resource-description {
border-bottom: 1px solid #fcfcfc;
background: #fcfcfc;
padding: 15px 15px 0 15px;
margin: -15px -15px 10px -15px;
}
.resource-description p:last-child {
margin: 0;
}
.list-group .badge {
float: left;
}
.method_description {
margin-left: 85px;
}
.method_description p:last-child {
margin: 0;
}
.list-group-item {
cursor: pointer;
}
.list-group-item:hover {
background-color: #f5f5f5;
}
.navbar{
background: #DFF0D8;
}
</style>
</head>
<body data-spy="scroll" data-target="#sidebar">
<nav class="navbar navbar-static-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Composr API documentation</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
{% if versions %}
<ul class="nav navbar-nav navbar-left">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Versions <span class="caret"></span></a>
<ul class="dropdown-menu version-selector">
{% for version in versions %}
<li>
<a href="#" class="version-toggle" id="{{version.name}}">
<span style="margin-right: 10px">{{version.name}}</span>
<span class="label label-info">Phrases: {{version.phrases.length}}</span>
<span class="label label-info">Snippets: {{version.snippets.length}}</span>
</a>
</li>
{% endfor %}
</ul>
</li>
</ul>
{% endif %}
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-9" role="main">
<div class="page-header">
<div class="alert alert-info" role="alert">
Welcome to the Composr - dynamic endpoints - generated documentation.
<br/>
<i>You can make requests to each version sending the <code>Accept-Version</code> header in the request</i>
</div>
<h2>{{title}}</h2><span class="label label-primary">Showing version {{version}}</span>
{% for chapter in documentation %}
{% markdown %}{{ chapter.content }}{% endmarkdown %}
{% endfor %}
</div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#phrases" aria-controls="phrases" role="tab" data-toggle="tab">Phrases <span class="label label-info">{{resources.length}}</span></a></li>
<li role="presentation"><a href="#snippets" aria-controls="snippets" role="tab" data-toggle="tab">Snippets <span class="label label-info">{{snippets.length}}</span></a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="phrases">
{% for resource in resources %}
<div class="panel panel-success">
<div class="panel-heading">
<h3 id="{{ resource.uniqueId }}" class="panel-title"><strong>{% if resource.displayName %}{{ resource.displayName}}{% else %}{{ resource.relativeUri }}{% endif %}</strong></h3>
</div>
<div class="panel-body">
{% if resource.description %}
<div class="top-resource-description">
<small>{% markdown %}{{ resource.description }}{% endmarkdown %}</small>
</div>
{% endif %}
<div class="panel-group">
{% include "./resource.nunjucks" %}
</div>
</div>
</div>
{% endfor %}
</div>
<div role="tabpanel" class="tab-pane" id="snippets">
{% if snippets.length > 0 %}
{% for snippet in snippets %}
<div class="panel panel-success">
<div class="panel-heading">
<h3 id="{{ snippet.id }}" class="panel-title"><strong>{{ snippet.name}}</strong></h3>
</div>
<div class="panel-body">
<div class="top-resource-description">
<small><p>release {{ snippet.version }}</p></small>
</div>
Created at {{ snippet.date }}
</div>
</div>
{% endfor %}
{% else %}
<div class="alert alert-warning" role="alert">There are no snippets for this version</div>
{% endif %}
</div>
</div>
</div>
<div class="col-md-3">
<div id="sidebar" class="hidden-print affix" role="complementary">
<div class="panel panel-default">
<div class="panel-body">
<ul class="nav nav-pills nav-stacked">
{% for resource in resources %}
<li><a href="#{{ resource.uniqueId}}">{% if resource.displayName %}{{ resource.displayName}}{% else %}{{ resource.relativeUri }}{% endif %}</a></li>
{% endfor %}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>