Snowboard bootstrap template

api-template.html

<div class="row">
  <div class="col-md-3">
      {{template "Navigation" .}}
  </div>
  <div class="col-md-9">
        {{template "ResourceGroups" .}}
  </div>
</div>


{{define "Navigation"}}
<div class="list-group">
      {{range $groupN, $group := .ResourceGroups}}
      {{if $group.Title}}
      <div class="list-group-item list-group-item-action">
            <div class="ui horizontal divider">
              <a href="#{{$group.Title | parameterize}}">{{$group.Title}}</a>
            </div>
      </div>
      {{end}}
      <div class="list-group-item list-group-item-action">
            <div class="ui accordion fluid">
              {{range $resourceN, $resource := $group.Resources}}
                {{if $resource.Transitions}}
                <div class="title {{if eq $resourceN 0}}active{{end}}">
                  <i class="dropdown icon"></i>
                  {{if $resource.Title}}
                    <strong>{{$resource.Title}}</strong>
                  {{else}}
                    <strong>{{$resource.Href.Path}}</strong>
                  {{end}}
                </div>
                <div class="content-menu {{if eq $resourceN 0}}active{{end}}">
                  <div class="ui fluid secondary vertical menu">
                  {{range $transitionN, $transition := $resource.Transitions}}
                    <a class="item {{$transition.Method | colorize}}" href="#{{$transition.Permalink}}">
                      <i class="ui {{$transition.Method | colorize}} empty circular label"></i>
                      {{if $transition.Title}}
                        <span>{{$transition.Title}}</span>
                      {{else}}
                        <span>{{$transition.Method}}</span>
                      {{end}}
                    </a>
                  {{end}}
                  </div>
                </div>
                {{end}}
              {{end}}
            </div>
      </div>
      {{end}}
</div>
{{end}}




{{define "Introduction"}}
{{end}}

{{define "ResourceGroups"}}
{{range $groupN, $group := .ResourceGroups}}
  <div class="ui header center aligned">
    <div class="ui header">
      <div class="sub header">
        {{$group.Description | markdownize}}
      </div>
    </div>
  </div>
  {{range $resourceN, $resource := $group.Resources}}
    {{if $resource.Transitions}}
      <div class="ui stacked segments">
        <div class="ui basic segment resource">
          <div class="ui purple huge ribbon label">
            {{if $resource.Title}}{{$resource.Title}}{{else}}{{$resource.Href.Path}}{{end}}
          </div>
          <div class="ui header">
            <div class="ui sub header">
              {{$resource.Description | markdownize}}
            </div>
          </div>
        </div>

        {{range $transitionN, $transition := $resource.Transitions}}
          {{template "Divider"}}
          <div class="ui basic segment">
            <h3 class="ui block center aligned header" id="{{$transition.Permalink}}">
              {{if $transition.Title}}{{$transition.Title}}{{else}}{{$transition.Method}}{{end}}
            </h3>
            <div class="description">{{$transition.Description | markdownize}}</div>

            {{range $transactionN, $transaction := $transition.Transactions}}
              <h4 class="ui horizontal divider">
                REQUEST{{if $transaction.Request.Title}} {{$transaction.Request.Title}}{{end}}
              </h4>
              <div class="description">{{$transaction.Request.Description | markdownize}}</div>
              <div class="fluid ui large labeled button">
                <div class="ui {{$transaction.Request.Method | colorize}} large button">
                  <h3>{{$transaction.Request.Method}}</h3>
                </div>
                <a class="ui basic fluid request-url {{$transaction.Request.Method | colorize}} label">
                  <code>{{$transition.URL}}</code>
                </a>
              </div>
              {{ if or (ne (len $transition.Href.Parameters) 0) (ne (len $resource.Href.Parameters) 0)}}
                <table class="ui celled definition table">
                  <thead>
                    <tr>
                      <th colspan="4">Parameters</th>
                    </tr>
                  <thead>
                  <tbody>
                    {{if $transition.Href.Parameters}}
                      {{template "Parameters" $transition.Href.Parameters}}
                    {{end}}
                    {{if $resource.Href.Parameters}}
                      {{template "Parameters" $resource.Href.Parameters}}
                    {{end}}
                  </tbody>
                </table>
              {{end}}
              {{if $transaction.Request.Headers}}
                {{template "Headers" $transaction.Request.Headers}}
              {{end}}
              {{if ne $transaction.Request.Body.Body ""}}
                <div class="ui stacked segment">
                  <div class="ui fluid transaction accordion">
                    <div class="title">
                      <code>{{$transaction.Request.Body.ContentType}}</code>
                    </div>
                    <div class="content tabbed">
                      <div class="ui top attached tabular menu">
                        <a data-tab="body" class="active item">BODY</a>
                        <a data-tab="schema" class="item">SCHEMA</a>
                      </div>
                      <div class="ui bottom attached active tab segment" data-tab="body">
                        <pre style="white-space: inherit">
                          <code class="language-{{alias $transaction.Request.Body.ContentType}}">{{$transaction.Request.Body.Body}}</code>
                        </pre>
                      </div>
                      <div class="ui bottom attached tab segment" data-tab="schema">
                        <pre style="white-space: inherit">
                          <code class="language-json">{{$transaction.Request.Schema.Body}}</code>
                        </pre>
                      </div>
                    </div>
                  </div>
                </div>
              {{end}}

              <h4 class="ui horizontal divider">RESPONSE</h4>
              <div class="description">{{$transaction.Response.Description | markdownize}}</div>
              {{template "Headers" $transaction.Response.Headers}}
              <div class="ui stacked {{$transaction.Response.StatusCode | colorize}} segment">
                <div class="ui fluid transaction accordion">
                  <div class="title center aligned">
                    <a class="ui {{$transaction.Response.StatusCode | colorize}} circular label">
                      {{$transaction.Response.StatusCode}}
                    </a>
                    <code>{{$transaction.Response.Body.ContentType}}</code>
                  </div>
                  <div class="content tabbed">
                    <div class="ui top attached tabular menu">
                      <a data-tab="body" class="active item">BODY</a>
                      <a data-tab="schema" class="item">SCHEMA</a>
                    </div>
                    <div class="ui bottom attached active tab segment" data-tab="body">
                      <pre style="white-space: inherit">
                        <code class="language-{{alias $transaction.Response.Body.ContentType}}">{{$transaction.Response.Body.Body}}</code>
                      </pre>
                    </div>
                    <div class="ui bottom attached tab segment" data-tab="schema">
                      <pre style="white-space: inherit">
                        <code class="language-json">{{$transaction.Response.Schema.Body}}</code>
                      </pre>
                    </div>
                  </div>
                </div>
              </div>
            {{end}}
          </div>
        {{end}}
        </div>
      <div class="ui hidden divider"></div>
    {{end}}
  {{end}}
{{end}}
{{end}}

{{define "Headers"}}
<table class="ui celled definition table">
  <thead>
    <tr>
      <th colspan="2">Headers</th>
    </tr>
  </thead>
  <tbody>
  {{range $index, $header := .}}
    <tr>
      <td class="four wide">{{.Key}}</td>
      <td><code>{{.Value}}</code></td>
    </tr>
  {{end}}
  </tbody>
</table>
{{end}}

{{define "Parameters"}}
  {{range $index, $param := .}}
    <tr>
      <td class="center aligned one wide">
        <i class="ui empty circular label {{if eq .Required true}}black{{else}}grey{{end}}" data-content="{{if eq .Required true}}required{{else}}optional{{end}}" data-position="top center"></i>
      </td>
      <td><code>{{.Key}}</code></td>
      <td class="center aligned">
        <code>{{.Kind}}</code>
        {{if .Value}}<code class="ui label">{{.Value}}</code>{{end}}
        {{if .Default}}<div class="ui violet image label">Default<div class="detail">{{.Default}}</div></div>{{end}}
      </td>
      <td class="eight wide">
        {{if .Description}}{{.Description | markdownize}}{{else}}-{{end}}
        {{if .Members}}
          <ul class="ui bulleted list">
            {{range .Members}}
              <li class="item">{{.}}</li>
            {{end}}
          </ul>
        {{end}}
      </td>
    </tr>
  {{end}}
{{end}}

{{define "Divider"}}
<div class="ui grey horizontal small divider header">
  <i class="ui grey micro circular label"></i>
  <i class="ui pink micro circular label"></i>
  <i class="ui grey micro circular label"></i>
</div>
{{end}}