template.hbs

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1">
    <title>{{title}}{{#if pkg.version}} {{pkg.version}}{{/if}}{{#if description}} &#8212; {{description}}{{/if}}</title>
    {{#if description}}
    <meta name="description" content="{{description}}">
    {{/if}}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css">
    <style>
        input[type="search"]::-webkit-search-cancel-button {
            -webkit-appearance: searchfield-cancel-button;
        }

        .jumbotron {
            margin-bottom: 0;
            border-radius: 0;
            background-color: #2B303E;
            -webkit-font-smoothing: antialiased;
        }

        .jumbotron h1 {
            font-size: 3.5rem;
            line-height: 1;
        }

        .jumbotron h1,
        .jumbotron h1 a {
            color: #eee;
        }

        .jumbotron small {
            font-weight: 200;
            color: #777;
        }

        .jumbotron p {
            font-size: 1.5rem;
            font-weight: 200;
            line-height: 1.2;
            color: #ccc;
        }

        .wrap {
            padding: 2rem 1rem;
        }

        .search {
            margin: 0 0 1rem 0;
            width: 90%;
        }

        .menu {
            padding: 0;
        }

        .menu li {
            list-style: none;
        }

        .menu li ul {
            padding: 0;
        }

        .menu li a {
            display: block;
            padding: .25rem;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .menu .file {
            color: #E54D89;
        }

        .menu .file+ul {
            margin: 0 0 1rem 0;
        }

        .menu .scope-private a {
            color: #8BAAC6;
        }

        .method {
            margin: 0 0 4rem 0;
        }

        .method .method-name {
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .method .method-name+.scope-private {
            color: #AAAAAA;
        }

        .method section {
            margin: 2rem 0;
        }

        .method h3 {
            margin: 0 0 1rem 0;
        }

        .method .table,
        .method .table p,
        .method .table ol,
        .method .table ul {
            margin: 0;
        }

        .permalink {
            position: absolute;
            margin-left: -1em;
            font-weight: normal;
            color: #eee;
            text-decoration: none;
        }

        .permalink:hover {
            color: #E54D89;
        }

        .back-to-top {
            display: none;
            position: fixed;
            right: 1rem;
            bottom: 1rem;
            padding: .5rem .6rem;
            line-height: 1;
            background: #fff;
            z-index: 999;
        }

        .back-to-top.visible {
            display: block;
        }

        .back-to-top svg {
            vertical-align: middle;
        }

        .bs-footer {
            margin: 3rem auto;
            color: #777;
            text-align: center;
        }
    </style>
</head>

<body>

    <a href="#" class="back-to-top"><svg xmlns="http://www.w3.org/2000/svg" width="13px" height="14px"
            viewBox="0 0 13 14">
            <path
                d="M7.18761156,13 L7.18761156,5.49249703 L10.4587853,5.49249703 L5.09931763,0.113558129 L-0.26015,5.49249703 L3.01102371,5.49249703 L3.01102371,13 L7.18761156,13 Z"
                fill="#428bca"></path>
        </svg> Back to Top</a>

    <div class="jumbotron">

        <div class="container">

            <h1>
                {{#if pkg.homepage}}
                <a href="{{pkg.homepage}}">{{title}}</a>
                {{else}}
                {{title}}
                {{/if}}
                {{#if pkg.version}}<small>{{pkg.version}}</small>{{/if}}
            </h1>

            {{#if description}}<p>{{description}}</p>{{/if}}

        </div>

    </div>

    <div class="wrap">

        <div class="container">

            <div class="row">

                <div class="col-md-3 hidden-sm hidden-xs">

                    <input type="search" class="form-control search" id="search-methods" placeholder="Search..."
                        autocomplete="off">

                    <ul class="menu">

                        {{#each files}}

                        <li>
                            <a href="#{{name}}" class="file"><b>{{name}}</b></a>
                            <ul>

                                {{#each methods}}

                                <li class="method-link scope-{{#if isPrivate}}private{{else}}public{{/if}}">
                                    <a href="#{{uid}}" title="{{name}}">{{name}}</a>
                                </li>

                                {{/each}}

                            </ul>

                        </li>

                        {{/each}}

                    </ul>

                </div>

                <div class="col-md-9">

                    {{#each files}}

                    <a id="{{name}}"></a>

                    {{#each methods}}

                    <div class="method scope-{{#if isPrivate}}private{{else}}public{{/if}}">

                        <h2 id="{{uid}}">
                            <a href="#{{uid}}" class="permalink">#</a>
                            <span class="method-name" title="{{name}}({{params}})">{{name}}({{params}})</span>
                            {{#if isPrivate}}
                            <small class="scope-private">private {{type}}</small>
                            {{/if}}
                        </h2>

                        <div class="description lead">

                            {{{markdown description}}}

                        </div>

                        {{#if tags.param.length}}

                        <section class="parameters">

                            <h3>Parameters</h3>

                            <div class="table-responsive">
                                <table class="table">

                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                            <th></th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {{#each tags.param}}
                                        <tr>
                                            <td>{{name}}</td>
                                            <td>
                                                {{#each types}}
                                                <code>{{.}}</code>
                                                {{/each}}
                                            </td>
                                            <td>{{{markdown description}}}</td>
                                            <td>
                                                {{#if isOptional}}
                                                <span class="tag tag-default">Optional</span>
                                                {{/if}}
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>

                                </table>
                            </div>

                        </section>

                        {{/if}}

                        {{#if tags.property.length}}

                        <section class="property">

                            <h3>Properties</h3>

                            <div class="table-responsive">
                                <table class="table">

                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Type</th>
                                            <th>Description</th>
                                            <th></th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                        {{#each tags.property}}
                                        <tr>
                                            <td>{{name}}</td>
                                            <td>
                                                {{#each types}}
                                                <code>{{.}}</code>
                                                {{/each}}
                                            </td>
                                            <td>{{{markdown description}}}</td>
                                            <td>
                                                {{#if isOptional}}
                                                <span class="tag tag-default">Optional</span>
                                                {{/if}}
                                            </td>
                                        </tr>
                                        {{/each}}
                                    </tbody>

                                </table>
                            </div>

                        </section>

                        {{/if}}

                        {{#if tags.example.length}}

                        <section class="examples">

                            <h3>Examples</h3>

                            {{#each tags.example}}

                            <pre><code class="hljs javascript">{{{highlightBlock .}}}</code></pre>

                            {{/each}}

                        </section>

                        {{/if}}

                        <section class="returns">

                            <h3>Returns</h3>

                            {{#if tags.return.length}}

                            {{#each tags.return}}

                            <p>
                                {{#each types}}
                                <code>{{.}}</code>
                                {{/each}}
                            </p>

                            {{{markdown description}}}

                            {{/each}}

                            {{else}}

                            <p><code>Void</code></p>

                            {{/if}}

                        </section>

                    </div>

                    {{/each}}

                    {{/each}}

                </div>

            </div>

        </div>

    </div>

    <footer class="bs-footer">

        <div class="container">

            <p>Documentation generated with <a href="https://github.com/neogeek/doxdox">doxdox</a>.</p>

        </div>

    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
    <script>

        (function () {

            'use strict';

            var headerHeight = $('.jumbotron').outerHeight(true),
                $backToTop = $('.back-to-top');

            function handleScrollEvent() {

                if (window.scrollY > headerHeight && $backToTop.not('.visible')) {

                    $backToTop.addClass('visible');

                } else if (window.scrollY < headerHeight && $backToTop.is('.visible')) {

                    $backToTop.removeClass('visible');

                }

            }

            $('pre code:not(.hljs)').each(function () {
                hljs.highlightBlock(this);
            });

            var $searchInput = $('#search-methods');
            var $methodLinks = $('.method-link');
            var $methodNames = $('.method .method-name');

            var urlQuery = window.location.search.match(/q=([^&]+)/);

            $searchInput.on('keyup', function (e) {

                var query = new RegExp(e.target.value.replace(' ', '|'), 'ig');

                $methodLinks.each(function () {

                    var $this = $(this);

                    if (!$this.text().match(query)) {

                        $this.hide();

                    } else {

                        $this.show();

                    }

                });

                $methodNames.each(function () {

                    var $this = $(this);

                    if (!$this.text().match(query)) {

                        $this.closest('.method').hide();

                    } else {

                        $this.closest('.method').show();

                    }

                });

                window.history.replaceState({}, '', window.location.pathname + '?q=' + e.target.value);

            });

            $searchInput.on('search', function () {

                $searchInput.trigger('keyup');

            });

            if (urlQuery && urlQuery.length > 1) {

                $searchInput.val(urlQuery[1]).trigger('keyup');

            }

            $(window).on('scroll', handleScrollEvent);

            handleScrollEvent();

        })();

    </script>

</body>

</html>