<html lang="{{project.langCode}}">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="keywords" content="{{page.pageKeywords}}">

    <meta name="description" content="{{page.pageDescription}}">

    <meta name="author" content="{{page.author}}">

    <meta name="generator" content="{{project.generatorName}}">

 

    <title>{{page.title}}</title>

 

    <!-- Bootstrap core CSS -->

    <style class="anchorjs"></style>

    <link href="{{page.relativeSiteRoot}}/css/bootstrap.min.css" rel="stylesheet">

 

    <!-- Documentation extras -->

    <link href="{{page.relativeSiteRoot}}/css/docs.min.css" rel="stylesheet">

    <link href="{{page.relativeSiteRoot}}/css/template-custom.css" rel="stylesheet">

 

    {{#page.favicon}}

    <link rel="shortcut icon" href="{{{page.favicon}}}">

    {{/page.favicon}}

 

    <meta name="theme-color" content="#563d7c">

 

        {{#project.googleAnalyticsTrackingId}}

    <script>

        window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;

        ga('create', '{{project.googleAnalyticsTrackingId}}', 'auto');

        ga('send', 'pageview');

    </script>

    <script async="" src="https://www.google-analytics.com/analytics.js"></script>

        {{/project.googleAnalyticsTrackingId}}   

        {{#page.pageInlineStyles}}

        {{{page.pageInlineStyles}}}

        {{/page.pageInlineStyles}}       

</head>

 

<body>

    <a class="skippy sr-only sr-only-focusable" href="#content">

        <span class="skippy-text">Skip to main content</span>

    </a>

 

    <header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">

   

        {{#page.siteLogo}}

        <a class="navbar-brand mr-0 mr-md-2" href="/" aria-label="Logo">

                    <img src="{{page.siteLogo}}">

        </a>

        {{/page.siteLogo}}

 

        <div class="navbar-nav-scroll">

            <ul class="navbar-nav bd-navbar-nav flex-row">

            {{#page.mainMenu}}

                {{#menuList}}

                <li class="nav-item {{#menuItemsLevel2}}dropdown{{/menuItemsLevel2}}">

                    <a class="nav-link {{#menuItemsLevel2}}dropdown-toggle{{/menuItemsLevel2}} {{#isCurrentPageUnderThisMenuItem}}active{{/isCurrentPageUnderThisMenuItem}}" href="{{menuLink}}" {{#menuItemsLevel2}}data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"{{/menuItemsLevel2}}>

                        {{menuCaption}}

                    </a>

 

                    {{! First level submenu items }}

                    {{#menuItemsLevel2}}

                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                        {{#menuList}}

                        <li {{#menuItemsLevel3}}class="dropdown-submenu"{{/menuItemsLevel3}} data-MenuLevel="{{Level}}">

                            <a class="dropdown-item {{#menuItemsLevel3}}dropdown-toggle{{/menuItemsLevel3}}" href="{{menuLink}}">

                            {{menuCaption}}

                            </a>

                            {{#menuItemsLevel3}}

                            <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

                                {{! Second level submenu items }}

                                {{#menuList}}

                                <li data-MenuLevel="{{Level}}">

                                    <a class="dropdown-item" href="{{menuLink}}">

                                    {{menuCaption}}

                                    </a>

                                </li>

                                {{/menuList}}

                            </ul>

                            {{/menuItemsLevel3}}

 

                        </li>

                        {{/menuList}}

                    </ul>

                    {{/menuItemsLevel2}}

                </li>

                {{/menuList}}

            {{/page.mainMenu}}

            </ul>

        </div>

 

                {{#project.mainNavHasRightSideButtons}}

        <ul class="navbar-nav flex-row ml-md-auto d-none d-md-flex">

        </ul>

        <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/download/">Download</a>

        <a class="btn btn-bd-download d-none d-lg-inline-block mb-3 mb-md-0 ml-md-3" href="/buy/">Buy</a>

        {{/project.mainNavHasRightSideButtons}}

    </header>

 

        

    <div class="container-fluid">

        <div class="row flex-xl-nowrap">

            {{#if page.pageLevel, ">", 1}}

            {{#page.siblingMenuItems}}

            <div class="col-12 col-md-3 col-xl-2 bd-sidebar">

                <nav class="collapse bd-links" id="bd-docs-nav">

                    <div class="bd-toc-item active">

                        <ul class="nav bd-sidenav">

                            {{#menuList}}

                            <li class="{{#isCurrentPageUnderThisMenuItem}} active bd-sidenav-active{{/isCurrentPageUnderThisMenuItem}}">

                                <a href="{{menuLink}}" >

                                    {{menuCaption}}

                                </a>

                            </li>

                            {{/menuList}}                                   

                        </ul>

                    </div>

                </nav>

            </div>

            {{/page.siblingMenuItems}}

            {{/if}}

 

            {{#page.hasPageTableOfContent}}

            <div class="d-none d-xl-block col-xl-2 bd-toc">

                <ul class="section-nav">

                    <li class="toc-entry toc-h2"><a href="#compiled-css-and-js">toc-item1</a></li>

                    <li class="toc-entry toc-h2"><a href="#source-files">toc-item2</a></li>

                    <li class="toc-entry toc-h2"><a href="#package-managers">toc-item3</a>

                        <ul>

                            <li class="toc-entry toc-h3"><a href="#npm">toc-subitem1</a></li>

                            <li class="toc-entry toc-h3"><a href="#yarn">toc-subitem2</a></li>

                            <li class="toc-entry toc-h3"><a href="#rubygems">toc-subitem3</a></li>

                        </ul>

                    </li>

                </ul>

            </div>

            {{/page.hasPageTableOfContent}}

 

            <main class="col-12 col-md-9 col-xl-8 py-md-3 pl-md-5 bd-content" role="main">

                    {{{page.pageContent}}}                       

            </main>

        </div>    

    </div>

 

        <footer class="text-muted bg-light">

            <div class="container">

                <p>&nbsp;</p>

                <p class="float-right">

                    <a href="#">Back to top</a>

                </p>

                <p>

                    {{project.copyrightDescription}}

                    {{#page.isHomePage}}

                    <a style="font-size: 9pt" href="{{{project.GeneratorBacklink}}}">{{project.GeneratorBacklinkCaption}}</a>

                    {{/page.isHomePage}}

                </p>

            </div>

        </footer>       

 

    <script src="{{page.relativeSiteRoot}}/js/jquery-3.3.1.slim.min.js"</script>

    <script>window.jQuery || document.write('<script src="{{page.relativeSiteRoot}}/js/jquery-slim.min.js"><\/script>')</script>

    <script src="{{page.relativeSiteRoot}}/js/bootstrap.bundle.min.js"></script>

    <script src="{{page.relativeSiteRoot}}/js/docs.min.js"></script>

    <script src="{{page.relativeSiteRoot}}/js/template-custom.js"></script>

    <audio controls="controls" style="display: none;"></audio>

</body>

</html>