Skip to content

Commit

Permalink
Fix a panel overflow issue, reorganize template code into common mixi…
Browse files Browse the repository at this point in the history
…ns and layout, add a new theme called flatly and bump version to 1.3.0
  • Loading branch information
danielgtaylor committed Nov 17, 2013
1 parent 49e4349 commit bdf0b00
Show file tree
Hide file tree
Showing 11 changed files with 569 additions and 484 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Example Output
Example output is generated from the [example API Blueprint](https://raw.github.com/danielgtaylor/aglio/master/example.md).

* [Default theme](http://htmlpreview.github.io/?https://github.com/danielgtaylor/aglio/blob/master/examples/default.html)
* [Flatly theme](http://htmlpreview.github.io/?https://github.com/danielgtaylor/aglio/blob/master/examples/flatly.html)
* [Slate theme](http://htmlpreview.github.io/?https://github.com/danielgtaylor/aglio/blob/master/examples/slate.html)

Installation & Usage
Expand Down Expand Up @@ -136,7 +137,7 @@ grunt coverage

Custom Themes
-------------
Themes are written using Jade, with support for Coffeescript and Stylus via filters. The output of aglio is a single HTML file, but custom themes can make use of Jade's extend and include directives, which allow you to split a theme among multiple files. The locals available to themes look like the following:
Themes are written using Jade, with support for Coffeescript and Stylus via filters. The output of aglio is a single HTML file, but custom themes can make use of Jade's extend and include directives, which allow you to split a theme among multiple files (the built-in themes do this). The locals available to themes look like the following:

| Name | Description |
| --------- | -------------------------------------------------------- |
Expand Down
28 changes: 16 additions & 12 deletions examples/default.html

Large diffs are not rendered by default.

155 changes: 155 additions & 0 deletions examples/flatly.html

Large diffs are not rendered by default.

28 changes: 16 additions & 12 deletions examples/slate.html

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "aglio",
"version": "1.2.0",
"version": "1.3.0",
"description": "An API Blueprint renderer with theme support",
"main": "lib/main.js",
"bin": {
Expand Down
5 changes: 4 additions & 1 deletion src/main.coffee
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ exports.getTemplates = (done) ->
fs.readdir path.join(root, 'templates'), (err, files) ->
if err then return done(err)

done null, files.map (item) -> item.replace /\.jade$/, ''
# Return template names without the extension, and exclude items
# that start with an underscore, which allows component reuse
# among built-in templates.
done null, (f for f in files when f[0] isnt '_').map (item) -> item.replace /\.jade$/, ''

# Render an API Blueprint string using a given template
exports.render = (input, template, done) ->
Expand Down
123 changes: 123 additions & 0 deletions templates/_bootstrap-layout.jade
Original file line number Diff line number Diff line change
@@ -0,0 +1,123 @@
!!!

include _bootstrap-mixins.jade

html
head
meta(charset="utf-8")
block bootstrap-theme
link(rel="stylesheet", href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css")
link(rel="stylesheet", href="http://netdna.bootstrapcdn.com/font-awesome/4.0.2/css/font-awesome.min.css")
block styles
link(rel="stylesheet", href="http://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata|Raleway Dots")
style.
/* Highlight.js Theme */
.tomorrow-comment,pre .comment,pre .title{color:#8e908c}.tomorrow-red,pre .attribute,pre .css .class,pre .css .id,pre .css .pseudo,pre .html .doctype,pre .regexp,pre .ruby .constant,pre .tag,pre .variable,pre .xml .doctype,pre .xml .pi,pre .xml .tag .title{color:#c82829}.tomorrow-orange,pre .built_in,pre .constant,pre .literal,pre .number,pre .params,pre .preprocessor{color:#f5871f}.tomorrow-yellow,pre .class,pre .css .rules .attribute,pre .ruby .class .title{color:#eab700}.tomorrow-green,pre .header,pre .inheritance,pre .ruby .symbol,pre .string,pre .value,pre .xml .cdata{color:#718c00}.tomorrow-aqua,pre .css .hexcolor{color:#3e999f}.tomorrow-blue,pre .coffeescript .title,pre .function,pre .javascript .title,pre .perl .sub,pre .python .decorator,pre .python .title,pre .ruby .function .title,pre .ruby .title .keyword{color:#4271ae}.tomorrow-purple,pre .javascript .function,pre .keyword{color:#8959a8}pre code{display:block;background:#fff;color:#4d4d4c;font-family:Menlo,Monaco,Consolas,monospace;line-height:1.5;border:1px solid #ccc;padding:10px}
:stylus
body, h4, h5
font-family 'Roboto' sans-serif !important

h1, h2, h3, .aglio
font-family 'Raleway Dots' sans-serif !important

code
color #444
background-color #ddd
font-family 'Inconsolata' monospace !important

a[data-target]
cursor pointer

h4
font-size 100%
font-weight bold
text-transform uppercase

.back-to-top
position fixed
z-index 1
bottom 0px
right 24px
padding 4px 8px
background-color #eee
text-decoration none !important
border-top 1px solid rgba(0, 0, 0, 0.1)
border-left 1px solid rgba(0, 0, 0, 0.1)
border-right 1px solid rgba(0, 0, 0, 0.1)
border-top-left-radius 3px
border-top-right-radius 3px

.panel
overflow hidden

.panel-heading
code
color #c7254e
background-color transparent
h3
margin-top 10px
margin-bottom 10px

a.list-group-item
white-space nowrap
text-overflow ellipsis
overflow hidden

.list-group-item.collapse
display none
body
a.text-muted.back-to-top(href='#top')
i.fa.fa-toggle-up
|  Back to top
.container
.row
nav.col-md-3(style="margin-top: 38px;")
each resourceGroup in api.resourceGroups
.list-group
a.list-group-item(href="#resource-group-#{slug(resourceGroup.name)}")
i.fa.fa-folder-open
|  
= resourceGroup.name || 'Resource Group'
each resource in resourceGroup.resources
if resource.actions.length != 1
a.list-group-item(href="#resource-#{slug(resource.name)}", style="padding-left: 32px;")
i.fa.fa-list
|  
= resource.name || 'Resource'
each action in resource.actions
a.list-group-item(href="##{slug(resourceGroup.name)}-#{slug(resource.name)}-#{slug(action.method)}", style="padding-left: 48px")
+Icon(action.method)
|  
= action.name || action.method + ' ' + resource.uriTemplate
else
a.list-group-item(href="#resource-#{slug(resource.name)}", style="padding-left: 32px;")
- var action = resource.actions[0]
+Icon(action.method)
|  
= resource.name || action.name || action.method + ' ' + resource.uriTemplate
if api.metadata && api.metadata.HOST
p(style="text-align: center")
a(href=api.metadata.HOST.value)= api.metadata.HOST.value

.col-md-9
header
.page-header
h1#top= api.name

.description!= markdown(api.description)

block content
each resourceGroup in api.resourceGroups
+ResourceGroup(resourceGroup, 'primary')

p.text-muted(style="text-align: center;")
| Generated by
a.aglio(href="http://github.com/danielgtaylor/aglio") aglio
| on #{date().format('DD MMM YYYY')}


script(src="http://code.jquery.com/jquery-1.10.1.min.js")
script(src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js")
block scripts
:coffee
$('table').addClass 'table'
120 changes: 120 additions & 0 deletions templates/_bootstrap-mixins.jade
Original file line number Diff line number Diff line change
@@ -0,0 +1,120 @@
//- Common mixins that templates can share
mixin Parameters(params)
ul.list-group
li.list-group-item.bg-default: strong Parameters
li.list-group-item
dl.dl-horizontal
each name in Object.keys(params)
- var param = params[name]
dt= name
dd
code= param.type
|  
if param.required
span.required (required)
else
span (optional)
|  
if param.default
span.text-info.default
strong Default: 
span= param.default
|  
if param.example
span.text-muted.example
strong Example: 
span= param.example
!= markdown(param.description)
if param.values.length
p
strong Choices: 
!= '<code>' + param.values.join('</code>, <code>') + '</code>'

mixin RequestResponse(title, request)
- var id = Math.round(Math.random() * 1000000)
- var content = Object.keys(request.headers).length || request.body
li.list-group-item
strong
= title
if request.name
| &nbsp;&nbsp;
code= request.name
if content
a.pull-right(data-toggle="collapse", data-target="##{id}") Toggle
if content
li.list-group-item.collapse(id=id)
if Object.keys(request.headers).length
h5 Headers
pre
code
each name in Object.keys(request.headers)
!= highlight(name + ': ' + request.headers[name].value, 'http')
br
if request.body
h5 Body
pre
code!= highlight(request.body)


mixin Examples(examples)
ul.list-group
each example in examples
each request in example.requests
+RequestResponse('Request', request)
each response in example.responses
+RequestResponse('Response', response)

mixin ResourceGroup(resourceGroup, getButtonClass)
.panel.panel-default
.panel-heading
h3(id="resource-group-#{slug(resourceGroup.name)}")= resourceGroup.name
.panel-body
!= markdown(resourceGroup.description)
each resource in resourceGroup.resources
h4(id="resource-#{slug(resource.name)}")= resource.name
!= markdown(resource.description)
each action in resource.actions
case action.method
when 'POST': - var panelClass = 'panel-success'
when 'GET': - var panelClass = 'panel-info'
when 'PUT': - var panelClass = 'panel-warning'
when 'PATCH': - var panelClass = 'panel-warning'
when 'DELETE': - var panelClass = 'panel-danger'
default: - var panelClass = 'panel-default'
section.panel(class=panelClass, id="#{slug(resourceGroup.name)}-#{slug(resource.name)}-#{slug(action.method)}")
.panel-heading
if action.name
span.pull-right(style="text-transform: lowercase")= action.name
case action.method
when 'POST': - var btnClass = 'btn-success'
when 'GET': - var btnClass = 'btn-' + getButtonClass
when 'PUT': - var btnClass = 'btn-warning'
when 'PATCH': - var btnClass = 'btn-warning'
when 'DELETE': - var btnClass = 'btn-danger'
default: - var btnClass = 'btn-default'
span.btn.btn-xs(class=btnClass)= action.method
| &nbsp;
code= resource.uriTemplate
.panel-body!= markdown(action.description)

- var params = Object.keys(action.parameters).length ? action.parameters : resource.parameters
if Object.keys(params).length
+Parameters(params)
if action.examples
+Examples(action.examples)

mixin Icon(method)
case method
when 'GET'
i.fa.fa-arrow-circle-down
when 'POST'
i.fa.fa-plus-square
when 'PUT'
i.fa.fa-pencil
when 'PATCH'
i.fa.fa-pencil
when 'DELETE'
i.fa.fa-warning
default
i.fa.fa-dot-circle-o

0 comments on commit bdf0b00

Please sign in to comment.