Skip to content
Snippets Groups Projects
Commit 44070107 authored by Christopher Guindon's avatar Christopher Guindon
Browse files

adding eclipse look and feel


Signed-off-by: Christopher Guindon's avatarChristopher Guindon <chris.guindon@eclipse-foundation.org>
parent 719c407d
No related branches found
No related tags found
No related merge requests found
/node_modules/
/npm-debug.log
/bower_components/
......@@ -6,9 +6,12 @@ module.exports = function (grunt) {
'all': {
'files': { 'docs/index.html': ['src/index.apib'] },
'options': {
'theme': 'slate',
'theme': 'default',
'separator': '\\n',
'includePath': 'src'
'includePath': 'src',
'themeTemplate': 'templates/index.jade',
//'themeFullWidth': true,
'themeStyle': 'styles/styles.less'
}
}
},
......@@ -17,7 +20,9 @@ module.exports = function (grunt) {
'files': [
'src/**/*.apib',
'src/**/*.md',
'src/**/*.json'
'src/**/*.json',
'templates/*',
'styles/*'
],
'tasks': ['aglio'],
'options': { 'livereload': '<%= connect.options.livereload %>' }
......
{
"name": "eclipse_api_documentation",
"description": "api-blueprint based API documentation for eclipse_api_documentation",
"main": "gruntfile.js",
"authors": [
"Christopher Guindon chris.guindon@eclipse-foundation.org"
],
"license": "EPL",
"keywords": [
"Eclipse",
"API",
"Eclipse",
"Foundation",
"REST"
],
"homepage": "https://github.com/chrisguindon/eclipse_api",
"private": true,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"solstice": "https://github.com/EclipseFdn/solstice-assets.git"
}
}
This diff is collapsed.
......@@ -10,7 +10,7 @@ This API currently limits users to 1000 authenticated requests and 1000 anonymou
### Pagination
Information about pagination is provided in the Link header of an API call. For example, let’s make
a curl request to the eclipse_profile API, to find out how many org_eclipse_oomph records exist for the user:
```curl -I "https://api.eclipse.org/api/blob/KJBNCEW08231nkJKCEW32898239?page=1&pagesize=2"```
The -I parameter indicates that we only care about the headers, not the content.
......
......@@ -46,7 +46,7 @@ Retrieve a list of all the blobs for a user. Requires the `uss_retrieve` scope.
X-Rate-Limit-Remaining: 964
X-Rate-Limit-Reset: 3553
Content-Type: application/json
+ Body
[{"application_token":"MZ04RMOpksKN5GpxKXafq2MSjSP","etag":"9f76b4dde4cb5146daa5686a7f4376084dbe41bf9c9d4a12b722fe1062eb48eb","changed":"1497030093","key":"mpc_favorites","url":"https://api.eclipse.org/account/profile/1/blob/MZ04RMOpksKN5GpxKXafq2MSjSP/mpc_favorites"}]
......
@import url("../bower_components/solstice/stylesheets/_core/barebone/styles.less");
header.thin-header{
border-bottom:none;
}
<header role="banner" class="thin-header margin-top-10" id="header-wrapper">
<div class="container-fluid">
<div class="row" id="header-row">
<div class="col-sm-6 col-md-6 col-lg-5 padding-left-0" id="header-left">
<div class="wrapper-logo-default padding-top-10"><a href="https://www.eclipse.org/"><img class="logo-eclipse-default img-responsive hidden-xs" alt="logo" src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-426x100.png"/></a></div>
</div>
<div class="col-sm-18 col-md-18 col-lg-19" id="main-menu-wrapper">
<div class="navbar yamm navbar-right" id="main-menu">
<div id="navbar-collapse-1" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="visible-thin"><a href="https://www.eclipse.org/downloads/" target="_self">Download</a></li>
<li><a href="https://www.eclipse.org/users/" target="_self">Getting Started</a></li>
<li><a href="https://www.eclipse.org/membership/" target="_self">Members</a></li>
<li><a href="https://www.eclipse.org/projects/" target="_self">Projects</a></li>
<li class="dropdown visible-xs">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Community <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://marketplace.eclipse.org">Marketplace</a></li>
<li><a href="http://events.eclipse.org">Events</a></li>
<li><a href="http://www.planeteclipse.org/">Planet Eclipse</a></li>
<li><a href="https://www.eclipse.org/community/eclipse_newsletter/">Newsletter</a></li>
<li><a href="https://www.youtube.com/user/EclipseFdn">Videos</a></li>
</ul>
</li>
<li class="dropdown visible-xs">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Participate <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="https://bugs.eclipse.org/bugs/">Report a Bug</a></li>
<li><a href="https://www.eclipse.org/forums/">Forums</a></li>
<li><a href="https://www.eclipse.org/mail/">Mailing Lists</a></li>
<li><a href="https://wiki.eclipse.org/">Wiki</a></li>
<li><a href="https://wiki.eclipse.org/IRC">IRC</a></li>
<li><a href="https://www.eclipse.org/contribute/">How to Contribute</a></li>
</ul>
</li>
<li class="dropdown visible-xs">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Working Groups <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="http://iot.eclipse.org">Internet of Things</a></li>
<li><a href="http://locationtech.org">LocationTech</a></li>
<li><a href="http://lts.eclipse.org">Long-Term Support</a></li>
<li><a href="http://polarsys.org">PolarSys</a></li>
<li><a href="http://science.eclipse.org">Science</a></li>
<li><a href="http://www.openmdm.org">OpenMDM</a></li>
</ul>
</li>
<!-- More -->
<li class="dropdown eclipse-more hidden-xs">
<a data-toggle="dropdown" class="dropdown-toggle">More<b class="caret"></b></a>
<ul class="dropdown-menu">
<li>
<!-- Content container to add padding -->
<div class="yamm-content">
<div class="row">
<ul class="col-sm-8 list-unstyled">
<li>
<p><strong>Community</strong></p>
</li>
<li><a href="http://marketplace.eclipse.org">Marketplace</a></li>
<li><a href="http://events.eclipse.org">Events</a></li>
<li><a href="http://www.planeteclipse.org/">Planet Eclipse</a></li>
<li><a href="https://www.eclipse.org/community/eclipse_newsletter/">Newsletter</a></li>
<li><a href="https://www.youtube.com/user/EclipseFdn">Videos</a></li>
</ul>
<ul class="col-sm-8 list-unstyled">
<li>
<p><strong>Participate</strong></p>
</li>
<li><a href="https://bugs.eclipse.org/bugs/">Report a Bug</a></li>
<li><a href="https://www.eclipse.org/forums/">Forums</a></li>
<li><a href="https://www.eclipse.org/mail/">Mailing Lists</a></li>
<li><a href="https://wiki.eclipse.org/">Wiki</a></li>
<li><a href="https://wiki.eclipse.org/IRC">IRC</a></li>
<li><a href="https://www.eclipse.org/contribute/">How to Contribute</a></li>
</ul>
<ul class="col-sm-8 list-unstyled">
<li>
<p><strong>Working Groups</strong></p>
</li>
<li><a href="http://iot.eclipse.org">Internet of Things</a></li>
<li><a href="http://locationtech.org">LocationTech</a></li>
<li><a href="http://lts.eclipse.org">Long-Term Support</a></li>
<li><a href="http://polarsys.org">PolarSys</a></li>
<li><a href="http://science.eclipse.org">Science</a></li>
<li><a href="http://www.openmdm.org">OpenMDM</a></li>
</ul>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="wrapper-logo-mobile"><a class="navbar-brand visible-xs" href="https://www.eclipse.org/"><img class="logo-eclipse-default-mobile img-responsive" alt="logo" src="//www.eclipse.org/eclipse.org-common/themes/solstice/public/images/logo/eclipse-800x188.png"/></a></div>
</div>
</div>
</div>
</div>
</div>
</header>
\ No newline at end of file
doctype
include mixins.jade
html
head
meta(charset="utf-8")
title= self.api.name || 'API Documentation'
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css")
script(src="//eclipse.org/eclipse.org-common/themes/solstice/public/javascript/main.min.js")
style!= self.css
body.preload.solstice-footer-min#body_solstice
a.text-muted.back-to-top(href='#top')
i.fa.fa-toggle-up
| &nbsp;Back to top
div(class=self.fullWidth ? 'container-fluid' : 'container')
.row
block nav
+Nav(false)
.content
block content
include header.html
+Content('primary', false)
p.text-muted(style="text-align: center;")
| Copyright &copy;
| #{self.date().format('YYYY') }
| The Eclipse Foundation. All Rights Reserved.
p.text-muted(style="text-align: center;")
| Generated by&nbsp;
a.aglio(href="https://github.com/danielgtaylor/aglio") aglio
| &nbsp;on #{self.date().format('DD MMM YYYY') }
script: include scripts.js
if self.livePreview
script(src="/socket.io/socket.io.js")
script.
var socket = io();
socket.on('refresh', refresh);
socket.on('reconnect', function () {
socket.emit('request-refresh');
});
mixin Badge(method)
//- Draw a badge for a given HTTP method
case method
when 'GET'
span.badge.get: i.fa.fa-arrow-down
when 'HEAD'
span.badge.head: i.fa.fa-info-circle
when 'OPTIONS'
span.badge.options: i.fa.fa-dot-circle-o
when 'POST'
span.badge.post: i.fa.fa-plus
when 'PUT'
span.badge.put: i.fa.fa-pencil
when 'PATCH'
span.badge.patch: i.fa.fa-pencil
when 'DELETE'
span.badge.delete: i.fa.fa-times
default
span.badge: i.fa.fa-dot-circle-o
mixin Nav()
//- Draw a navigation bar, which includes links to individual
//- resources and actions.
nav
if self.api.navItems && self.api.navItems.length
.resource-group
.heading
.chevron
i.open.fa.fa-angle-down
a(href='#top') Overview
.collapse-content
ul: each item in self.api.navItems
li
a(href=item[1])!= item[0]
each resourceGroup in self.api.resourceGroups || []
.resource-group
.heading
.chevron
i.open.fa.fa-angle-down
a(href=resourceGroup.elementLink)!= resourceGroup.name || 'Resource Group'
.collapse-content
ul
each item in resourceGroup.navItems || []
li
a(href=item[1])!= item[0]
each resource in resourceGroup.resources || []
li
if !self.condenseNav || (resource.actions.length != 1)
a(href=resource.elementLink)!= resource.name || 'Resource'
ul: each action in resource.actions || []
li: a(href=action.elementLink)
+Badge(action.method)
!= action.name || action.method + ' ' + (action.attributes && action.attributes.uriTemplate || resource.uriTemplate)
else
- var action = resource.actions[0]
a(href=action.elementLink)
+Badge(action.method)
!= action.name || resource.name || action.method + ' ' + (action.attributes && action.attributes.uriTemplate || resource.uriTemplate)
//- Link to the API hostname, e.g. api.yourcompany.com
each meta in self.api.metadata || {}
if meta.name == 'HOST'
p(style="text-align: center; word-wrap: break-word;")
a(href=meta.value)= meta.value
mixin Parameters(params)
//- Draw a definition list of parameter names, types, defaults,
//- examples and descriptions.
.title
strong URI Parameters
.collapse-button.show
span.close Hide
span.open Show
.collapse-content
dl.inner: each param in params || []
dt= self.urldec(param.name)
dd
code= param.type || 'string'
| &nbsp;
if param.required
span.required (required)
else
span (optional)
| &nbsp;
if param.default
span.text-info.default
strong Default:&nbsp;
span= param.default
| &nbsp;
if param.example
span.text-muted.example
strong Example:&nbsp;
span= param.example
!= self.markdown(param.description)
if param.values.length
p.choices
strong Choices:&nbsp;
each value in param.values
code= self.urldec(value.value)
= ' '
mixin RequestResponse(title, request, collapse)
.title
strong
= title
if request.name
| &nbsp;&nbsp;
code= request.name
if collapse && request.hasContent
.collapse-button
span.close Hide
span.open Show
+RequestResponseBody(request, collapse)
mixin RequestResponseBody(request, collapse, showBlank)
if request.hasContent || showBlank
div(class=collapse ? 'collapse-content' : ''): .inner
if request.description
.description!= self.markdown(request.description)
if Object.keys(request.headers).length
h5 Headers
pre: code
each item, index in request.headers
!= self.highlight(item.name + ': ' + item.value, 'http')
if index < request.headers.length - 1
br
div(style="height: 1px;")
if request.body
h5 Body
pre: code
!= self.highlight(request.body, null, ['json', 'yaml', 'xml', 'javascript'])
div(style="height: 1px;")
if request.schema
h5 Schema
pre: code
!= self.highlight(request.schema, null, ['json', 'yaml', 'xml'])
div(style="height: 1px;")
if !request.hasContent
.description.text-muted This response has no content.
div(style="height: 1px;")
mixin Examples(resourceGroup, resource, action)
each example in action.examples
each request in example.requests
+RequestResponse('Request', request, true)
each response in example.responses
+RequestResponse('Response', response, true)
mixin Content()
//- Page header and API description
header
h1#top!= self.api.name || 'API Documentation'
if self.api.descriptionHtml
!= self.api.descriptionHtml
//- Loop through and display information about all the resource
//- groups, resources, and actions.
each resourceGroup in self.api.resourceGroups || []
section.resource-group(id=resourceGroup.elementId)
h2.group-heading
!= resourceGroup.name || 'Resource Group'
= " "
a.permalink(href=resourceGroup.elementLink) &para;
if resourceGroup.descriptionHtml
!= resourceGroup.descriptionHtml
each resource in resourceGroup.resources || []
.resource(id=resource.elementId)
h3.resource-heading
!= resource.name || ((resource.actions[0] != null) && resource.actions[0].name) || 'Resource'
= " "
a.permalink(href=resource.elementLink) &nbsp;&para;
if resource.description
!= self.markdown(resource.description)
each action in resource.actions || []
.action(class=action.methodLower, id=action.elementId)
h4.action-heading
.name!= action.name
a.method(class=action.methodLower, href=action.elementLink)
= action.method
code.uri= self.urldec(action.uriTemplate)
if action.description
!= self.markdown(action.description)
h4 Example URI
.definition
span.method(class=action.methodLower)= action.method
| &nbsp;
span.uri
span.hostname= self.api.host
!= action.colorizedUriTemplate
//- A list of sub-sections for parameters, requests
//- and responses.
if action.parameters.length
+Parameters(action.parameters)
if action.examples
+Examples(resourceGroup, resource, action)
mixin ContentTriple()
.middle
//- Page header and API description
header
h1#top!= self.api.name || 'API Documentation'
.right
h5 API Endpoint
a(href=self.api.host)= self.api.host
.middle
if self.api.descriptionHtml
!= self.api.descriptionHtml
//- Loop through and display information about all the resource
//- groups, resources, and actions.
each resourceGroup in self.api.resourceGroups || []
.middle
section.resource-group(id=resourceGroup.elementId)
h2.group-heading
!= resourceGroup.name || 'Resource Group'
= " "
a.permalink(href=resourceGroup.elementLink) &para;
if resourceGroup.descriptionHtml
!= resourceGroup.descriptionHtml
each resource in resourceGroup.resources || []
.middle
.resource(id=resource.elementId)
h3.resource-heading
!= resource.name || ((resource.actions[0] != null) && resource.actions[0].name) || 'Resource'
= " "
a.permalink(href=resource.elementLink) &para;
if resource.description
!= self.markdown(resource.description)
each action in resource.actions || []
if action.examples
.right
.definition
span.method(class=action.methodLower)= action.method
| &nbsp;
span.uri
span.hostname= self.api.host
!= action.colorizedUriTemplate
.tabs
if action.hasRequest
.example-names
span Requests
- var requestCount = 0
each example in action.examples
each request in example.requests
- requestCount++
span.tab-button= request.name || 'example ' + requestCount
each example in action.examples
each request in example.requests
.tab
+RequestResponseBody(request, false, true)
.tabs
.example-names
span Responses
each response in example.responses
span.tab-button= response.name
each response in example.responses
.tab
+RequestResponseBody(response, false, true)
else
each example in action.examples
.tabs
.example-names
span Responses
each response in example.responses
span.tab-button= response.name
each response in example.responses
.tab
+RequestResponseBody(response, false, true)
.middle
.action(class=action.methodLower, id=action.elementId)
h4.action-heading
.name!= action.name
a.method(class=action.methodLower, href=action.elementLink)
= action.method
code.uri= self.urldec(action.uriTemplate)
if action.description
!= self.markdown(action.description)
//- A list of sub-sections for parameters, requests
//- and responses.
if action.parameters.length
+Parameters(action.parameters)
hr.split
/* eslint-env browser */
/* eslint quotes: [2, "single"] */
'use strict';
/*
Determine if a string ends with another string.
*/
function endsWith(str, suffix) {
return str.indexOf(suffix, str.length - suffix.length) !== -1;
}
/*
Get a list of direct child elements by class name.
*/
function childrenByClass(element, name) {
var filtered = [];
for (var i = 0; i < element.children.length; i++) {
var child = element.children[i];
var classNames = child.className.split(' ');
if (classNames.indexOf(name) !== -1) {
filtered.push(child);
}
}
return filtered;
}
/*
Get an array [width, height] of the window.
*/
function getWindowDimensions() {
var w = window,
d = document,
e = d.documentElement,
g = d.body,
x = w.innerWidth || e.clientWidth || g.clientWidth,
y = w.innerHeight || e.clientHeight || g.clientHeight;
return [x, y];
}
/*
Collapse or show a request/response example.
*/
function toggleCollapseButton(event) {
var button = event.target.parentNode;
var content = button.parentNode.nextSibling;
var inner = content.children[0];
if (button.className.indexOf('collapse-button') === -1) {
// Clicked without hitting the right element?
return;
}
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
// Currently showing, so let's hide it
button.className = 'collapse-button';
content.style.maxHeight = '0px';
} else {
// Currently hidden, so let's show it
button.className = 'collapse-button show';
content.style.maxHeight = inner.offsetHeight + 12 + 'px';
}
}
function toggleTabButton(event) {
var i, index;
var button = event.target;
// Get index of the current button.
var buttons = childrenByClass(button.parentNode, 'tab-button');
for (i = 0; i < buttons.length; i++) {
if (buttons[i] === button) {
index = i;
button.className = 'tab-button active';
} else {
buttons[i].className = 'tab-button';
}
}
// Hide other tabs and show this one.
var tabs = childrenByClass(button.parentNode.parentNode, 'tab');
for (i = 0; i < tabs.length; i++) {
if (i === index) {
tabs[i].style.display = 'block';
} else {
tabs[i].style.display = 'none';
}
}
}
/*
Collapse or show a navigation menu. It will not be hidden unless it
is currently selected or `force` has been passed.
*/
function toggleCollapseNav(event, force) {
var heading = event.target.parentNode;
var content = heading.nextSibling;
var inner = content.children[0];
if (heading.className.indexOf('heading') === -1) {
// Clicked without hitting the right element?
return;
}
if (content.style.maxHeight && content.style.maxHeight !== '0px') {
// Currently showing, so let's hide it, but only if this nav item
// is already selected. This prevents newly selected items from
// collapsing in an annoying fashion.
if (force || window.location.hash && endsWith(event.target.href, window.location.hash)) {
content.style.maxHeight = '0px';
}
} else {
// Currently hidden, so let's show it
content.style.maxHeight = inner.offsetHeight + 12 + 'px';
}
}
/*
Refresh the page after a live update from the server. This only
works in live preview mode (using the `--server` parameter).
*/
function refresh(body) {
document.querySelector('body').className = 'preload';
document.body.innerHTML = body;
// Re-initialize the page
init();
autoCollapse();
document.querySelector('body').classList.remove("preload");
}
/*
Determine which navigation items should be auto-collapsed to show as many
as possible on the screen, based on the current window height. This also
collapses them.
*/
function autoCollapse() {
var windowHeight = getWindowDimensions()[1];
var itemsHeight = 64; /* Account for some padding */
var itemsArray = Array.prototype.slice.call(
document.querySelectorAll('nav .resource-group .heading'));
// Get the total height of the navigation items
itemsArray.forEach(function (item) {
itemsHeight += item.parentNode.offsetHeight;
});
var sortedItems = itemsArray;
while (sortedItems.length) {
for (var i = 1; i < sortedItems.length+1; i++) {
// Will collapsing this item help?
var itemHeight = sortedItems[i].nextSibling.offsetHeight;
itemsHeight -= itemHeight;
toggleCollapseNav({target: sortedItems[i].children[0]}, true);
sortedItems.splice(i, 1);
break;
}
}
}
/*
Initialize the interactive functionality of the page.
*/
function init() {
var i, j;
// Make collapse buttons clickable
var buttons = document.querySelectorAll('.collapse-button');
for (i = 0; i < buttons.length; i++) {
buttons[i].onclick = toggleCollapseButton;
// Show by default? Then toggle now.
if (buttons[i].className.indexOf('show') !== -1) {
toggleCollapseButton({target: buttons[i].children[0]});
}
}
var responseCodes = document.querySelectorAll('.example-names');
for (i = 0; i < responseCodes.length; i++) {
var tabButtons = childrenByClass(responseCodes[i], 'tab-button');
for (j = 0; j < tabButtons.length; j++) {
tabButtons[j].onclick = toggleTabButton;
// Show by default?
if (j === 0) {
toggleTabButton({target: tabButtons[j]});
}
}
}
// Make nav items clickable to collapse/expand their content.
var navItems = document.querySelectorAll('nav .resource-group .heading');
for (i = 0; i < navItems.length; i++) {
navItems[i].onclick = toggleCollapseNav;
// Show all by default
toggleCollapseNav({target: navItems[i].children[0]});
}
}
// Initial call to set up buttons
init();
window.onload = function () {
autoCollapse();
// Remove the `preload` class to enable animations
document.querySelector('body').classList.remove("preload");
};
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment