{
    "Bootstrap 5 scripts": {
        "prefix": "!b5-scripts",
        "body": [
            "<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "${1|<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>, |}"
        ],
        "description": "Adds the cnd for the css scripts and has an option to use popper."
    },
    "Offcanvas Scripts": {
        "prefix": "!offcanvas-scripts",
        "body": [
            "<style>",
            "    html,body {overflow-x: hidden; /* Prevent scroll on narrow devices */}",
            "    body {padding-top: 56px;}",
            "",
            "    @media (max-width: 991.98px) {",
            "    .offcanvas-collapse {",
            "        position: fixed;",
            "        top: 56px; /* Height of navbar */",
            "        bottom: 0;",
            "        left: 100%;",
            "        width: 100%;",
            "        padding-right: 1rem;",
            "        padding-left: 1rem;",
            "        overflow-y: auto;",
            "        visibility: hidden;",
            "        background-color: #343a40;",
            "        transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
            "    }",
            "    .offcanvas-collapse.open {",
            "        visibility: visible;",
            "        transform: translateX(-100%);",
            "    }",
            "    }",
            "",
            "    .nav-scroller {",
            "    position: relative;",
            "    z-index: 2;",
            "    height: 2.75rem;",
            "    overflow-y: hidden;",
            "    }",
            "",
            "    .nav-scroller .nav {",
            "    display: flex;",
            "    flex-wrap: nowrap;",
            "    padding-bottom: 1rem;",
            "    margin-top: -1px;",
            "    overflow-x: auto;",
            "    color: rgba(255, 255, 255, .75);",
            "    text-align: center;",
            "    white-space: nowrap;",
            "    -webkit-overflow-scrolling: touch;",
            "    }",
            "",
            "    .nav-underline .nav-link {",
            "    padding-top: .75rem;",
            "    padding-bottom: .75rem;",
            "    font-size: .875rem;",
            "    color: #6c757d;",
            "    }",
            "",
            "    .nav-underline .nav-link:hover {",
            "    color: #007bff;",
            "    }",
            "",
            "    .nav-underline .active {",
            "    font-weight: 500;",
            "    color: #343a40;",
            "    }",
            "",
            "    .text-white-50 { color: rgba(255, 255, 255, .5); }",
            "",
            "    .bg-purple { background-color: #6f42c1; }",
            "</style>",
            "<script type=\"text/javascript\">",
            "    (function () {",
            "      'use strict'",
            "        document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
            "        document.querySelector('.offcanvas-collapse').classList.toggle('open')",
            "      })",
            "    })()",
            " </script>"
        ],
        "description": "Offcanvas Scripts"
    },
    "Bootstrap 5 HTML Template": {
        "prefix": "!b5-$",
        "body": [
            "<!DOCTYPE html>",
            "<html lang=\"en\">",
            "<head>",
            "  <meta charset=\"UTF-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "  <title>${1:Bootstrap Site}</title>",
            "  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "  <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
            "  <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "</head>",
            "<body>",
            "<h1>Hello-Bootstrap</h1>",
            "</body>",
            "</html>"
        ],
        "description": "An HTML Boilerplate with  Bootstrap 5"
    },
    "Offcanvas Template": {
        "prefix": "!offcanvasTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "   <head>",
            "      <meta charset=\"utf-8\">",
            "      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "      <meta name=\"author\" content=\"Hans McMurdy\">",
            "      <title>Bootstrap 5 Offcanvas Template · Bootstrap</title>",
            "      <meta name=\"title\" content=\"#JavaScriptFirst\">",
            "      <meta name=\"description\" content=\"Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First\">",
            "      <!-- Bootstrap core CSS -->",
            "      <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "      <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "      <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
            "      <!-- Favicons -->",
            "",
            "      <meta name=\"theme-color\" content=\"#7952b3\">",
            "      <style>",
            "         .bd-placeholder-img {",
            "            font-size: 1.125rem;",
            "            text-anchor: middle;",
            "            -webkit-user-select: none;",
            "            -moz-user-select: none;",
            "            -ms-user-select: none;",
            "            user-select: none;",
            "         }",
            "         @media (min-width: 768px) {",
            "            .bd-placeholder-img-lg {",
            "             font-size: 3.5rem;",
            "            }",
            "         }",
            "      </style>",
            "      <style>",
            "            /* Prevent scroll on narrow devices */",
            "            html,body {overflow-x: hidden; }",
            "            body {padding-top: 56px;}",
            "            @media (max-width: 991.98px) {",
            "                .offcanvas-collapse {",
            "                    position: fixed;",
            "                    top: 56px; /* Height of navbar */",
            "                    bottom: 0;",
            "                    left: 100%;",
            "                    width: 100%;",
            "                    padding-right: 1rem;",
            "                    padding-left: 1rem;",
            "                    overflow-y: auto;",
            "                    visibility: hidden;",
            "                    background-color: #343a40;",
            "                    transition: transform .3s ease-in-out, visibility .3s ease-in-out;",
            "                }",
            "                .offcanvas-collapse.open {",
            "                    visibility: visible;",
            "                    transform: translateX(-100%);",
            "                }",
            "            }",
            "            .nav-scroller {",
            "                position: relative;",
            "                z-index: 2;",
            "                height: 2.75rem;",
            "                overflow-y: hidden;",
            "            }",
            "            .nav-scroller .nav {",
            "                display: flex;",
            "                flex-wrap: nowrap;",
            "                padding-bottom: 1rem;",
            "                margin-top: -1px;",
            "                overflow-x: auto;",
            "                color: rgba(255, 255, 255, .75);",
            "                text-align: center;",
            "                white-space: nowrap;",
            "                -webkit-overflow-scrolling: touch;",
            "            }",
            "            .nav-underline .nav-link {",
            "                padding-top: .75rem;",
            "                padding-bottom: .75rem;",
            "                font-size: .875rem;",
            "                color: #6c757d;",
            "            }",
            "            .nav-underline .nav-link:hover {color: #007bff;}",
            "            .nav-underline .active {font-weight: 500;color: #343a40;}",
            "            .text-white-50 { color: rgba(255, 255, 255, .5); }",
            "            .bg-purple { background-color: #6f42c1; }",
            "      </style>",
            "   </head>",
            "   <body class=\"bg-light\">",
            "      <nav class=\"navbar navbar-expand-lg fixed-top navbar-dark bg-dark\">",
            "         <div class=\"container-fluid\">",
            "            <a class=\"navbar-brand\" href=\"#\">Offcanvas navbar</a>",
            "            <button class=\"navbar-toggler p-0 border-0\" type=\"button\" data-toggle=\"offcanvas\">",
            "            <span class=\"navbar-toggler-icon\"></span>",
            "            </button>",
            "            <div class=\"navbar-collapse offcanvas-collapse\" id=\"navbarsExampleDefault\">",
            "               <ul class=\"navbar-nav mr-auto mb-2 mb-lg-0\">",
            "                  <li class=\"nav-item active\">",
            "                     <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
            "                  </li>",
            "                  <li class=\"nav-item\">",
            "                     <a class=\"nav-link\" href=\"#\">About</a>",
            "                  </li>",
            "               </ul>",
            "            </div>",
            "         </div>",
            "      </nav>",
            "      ",
            "      <main class=\"container\">",
            "        <div class=\"d-flex align-items-center p-3 my-3 text-white-50 bg-purple rounded shadow-sm\">",
            "          <img class=\"mr-3\" src=\"https://hansmcmurdy.com/JavaScript-First/logo.svg\" alt=\"\" width=\"48\" height=\"48\">",
            "          <div class=\"lh-1\">",
            "            <h6 class=\"mb-0 text-white lh-1\">#JavaScriptFirst</h6>",
            "            <small>Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript.</small>",
            "          </div>",
            "        </div>",
            "",
            "      </main>",
            "      <script type=\"text/javascript\">",
            "         (function () {",
            "           'use strict'",
            "             document.querySelector('[data-toggle=\"offcanvas\"]').addEventListener('click', function () {",
            "             document.querySelector('.offcanvas-collapse').classList.toggle('open')",
            "           })",
            "         })()",
            "      </script>",
            "   </body>",
            "</html>"
        ],
        "description": "Offcanvas Template"
    },
    "Template Nav Bottom": {
        "prefix": "!mobileNav",
        "body": [
            "",
            "<!doctype html>",
            "<html lang=\"en\">",
            "  <head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    <meta name=\"author\" content=\"Hans McMurdy\">",
            "    <title>Bootstrap 5 Navbar Bottom Template · Bootstrap</title>",
            "    <meta name=\"title\" content=\"#JavaScriptFirst\">",
            "    <meta name=\"description\" content=\"Learn how to code with #JavaScriptFirst: https://github.com/HansUXdev/JavaScript-First\">",
            "    <!-- Bootstrap core CSS -->",
            "    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "    <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
            "    <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/navbar-bottom/\">",
            "    <style>",
            "      .bd-placeholder-img {",
            "        font-size: 1.125rem;",
            "        text-anchor: middle;",
            "        -webkit-user-select: none;",
            "        -moz-user-select: none;",
            "        -ms-user-select: none;",
            "        user-select: none;",
            "      }",
            "",
            "      @media (min-width: 768px) {",
            "        .bd-placeholder-img-lg {",
            "          font-size: 3.5rem;",
            "        }",
            "      }",
            "    </style>",
            "",
            "    ",
            "  </head>",
            "  <body>",
            "    ",
            "    <main class=\"container\">",
            "        <div class=\"d-flex align-items-center p-3 my-3 text-dark-50 bg-purple rounded shadow-sm\">",
            "          <img class=\"mr-3\" src=\"https://hansmcmurdy.com/JavaScript-First/logo.svg\" alt=\"\" width=\"48\" height=\"48\">",
            "          <div class=\"lh-1\">",
            "            <h6 class=\"mb-1 text-dark lh-2\">#JavaScriptFirst</h6>",
            "            <small class=\"text-sm-left lh-base font-normal text-lowercase text-decoration-none text-reset\">",
            "                ${1:Learn Modern JavaScript, from an Open Source Book that teaches anyone how to code with JavaScript using the node.js runtime environment rather than a browser and by the end, you will build a server and a website using JavaScript.}",
            "            </small>",
            "          </div>",
            "        </div>",
            "    </main>",
            "",
            "",
            "<nav class=\"navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark\">",
            "  <div class=\"container-fluid\">",
            "    <a class=\"navbar-brand\" href=\"#\">Bottom navbar</a>",
            "    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\" aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "      <span class=\"navbar-toggler-icon\"></span>",
            "    </button>",
            "    <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">",
            "      <ul class=\"navbar-nav\">",
            "        <li class=\"nav-item active\">",
            "          <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
            "        </li>",
            "        <li class=\"nav-item\">",
            "          <a class=\"nav-link\" href=\"#\">Link</a>",
            "        </li>",
            "        <li class=\"nav-item\">",
            "          <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>",
            "        </li>",
            "        <li class=\"nav-item dropup\">",
            "          <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"dropdown10\" data-toggle=\"dropdown\" aria-expanded=\"false\">Dropup</a>",
            "          <ul class=\"dropdown-menu\" aria-labelledby=\"dropdown10\">",
            "            <li><a class=\"dropdown-item\" href=\"#\">Action</a></li>",
            "            <li><a class=\"dropdown-item\" href=\"#\">Another action</a></li>",
            "            <li><a class=\"dropdown-item\" href=\"#\">Something else here</a></li>",
            "          </ul>",
            "        </li>",
            "      </ul>",
            "    </div>",
            "  </div>",
            "</nav>",
            "  ",
            "  </body>",
            "</html>",
            ""
        ],
        "description": "Template Nav Bottom"
    },
    "Masonary Template": {
        "prefix": "!masonaryTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    <meta name=\"description\" content=\"\">",
            "    <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "    <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "    <title>Masonry example · Bootstrap</title>",
            "",
            "    <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/masonry/\">",
            "",
            "",
            "",
            "    <!-- Bootstrap core CSS -->",
            "",
            "    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\"",
            "        integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "    <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"",
            "        integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\"",
            "        crossorigin=\"anonymous\"></script>",
            "    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\"",
            "        integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\"",
            "        crossorigin=\"anonymous\"></script>",
            "",
            "    <!-- Favicons -->",
            "    <!-- <link rel=\"apple-touch-icon\" href=\"/docs/5.0/assets/img/favicons/apple-touch-icon.png\" sizes=\"180x180\">",
            "    <link rel=\"icon\" href=\"/docs/5.0/assets/img/favicons/favicon-32x32.png\" sizes=\"32x32\" type=\"image/png\">",
            "    <link rel=\"icon\" href=\"/docs/5.0/assets/img/favicons/favicon-16x16.png\" sizes=\"16x16\" type=\"image/png\">",
            "    <link rel=\"manifest\" href=\"/docs/5.0/assets/img/favicons/manifest.json\">",
            "    <link rel=\"mask-icon\" href=\"/docs/5.0/assets/img/favicons/safari-pinned-tab.svg\" color=\"#7952b3\">",
            "    <link rel=\"icon\" href=\"/docs/5.0/assets/img/favicons/favicon.ico\">",
            " -->",
            "",
            "",
            "    <meta name=\"theme-color\" content=\"#7952b3\">",
            "",
            "",
            "    <style>",
            "        .bd-placeholder-img {",
            "            font-size: 1.125rem;",
            "            text-anchor: middle;",
            "            -webkit-user-select: none;",
            "            -moz-user-select: none;",
            "            -ms-user-select: none;",
            "            user-select: none;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .bd-placeholder-img-lg {",
            "                font-size: 3.5rem;",
            "            }",
            "        }",
            "    </style>",
            "",
            "",
            "</head>",
            "",
            "<body>",
            "",
            "    <div class=\"container py-5\">",
            "        <h1>Bootstrap and Masonry</h1>",
            "        <p class=\"lead\">Integrate <a href=\"https://masonry.desandro.com/\">Masonry</a> with the Bootstrap grid system and",
            "            cards component.</p>",
            "",
            "        <p>Masonry is not included in Bootstrap. Add it by including the JavaScript plugin manually, or using a CDN like",
            "            so:</p>",
            "",
            "        <pre><code>",
            "&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js&quot; integrity=&quot;sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D&quot; crossorigin=&quot;anonymous&quot; async&gt;&lt;/script&gt;",
            "  </code></pre>",
            "",
            "        <p>By adding <code>data-masonry='{\"percentPosition\": true }'</code> to the <code>.row</code> wrapper, we can",
            "            combine the powers of Bootstrap's responsive grid and Masonry's positioning.</p>",
            "",
            "        <hr class=\"my-5\">",
            "",
            "        <div class=\"row\" data-masonry='{\"percentPosition\": true }'>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card\">",
            "                    <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"200\"",
            "                        xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: Image cap\"",
            "                        preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                        <title>Placeholder</title>",
            "                        <rect width=\"100%\" height=\"100%\" fill=\"#868e96\" /><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\"",
            "                            dy=\".3em\">Image cap</text>",
            "                    </svg>",
            "",
            "                    <div class=\"card-body\">",
            "                        <h5 class=\"card-title\">Card title that wraps to a new line</h5>",
            "                        <p class=\"card-text\">This is a longer card with supporting text below as a natural lead-in to",
            "                            additional content. This content is a little bit longer.</p>",
            "                    </div>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card p-3\">",
            "                    <figure class=\"p-3 mb-0\">",
            "                        <blockquote class=\"blockquote\">",
            "                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>",
            "                        </blockquote>",
            "                        <figcaption class=\"blockquote-footer mb-0 text-muted\">",
            "                            Someone famous in <cite title=\"Source Title\">Source Title</cite>",
            "                        </figcaption>",
            "                    </figure>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card\">",
            "                    <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"200\"",
            "                        xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: Image cap\"",
            "                        preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                        <title>Placeholder</title>",
            "                        <rect width=\"100%\" height=\"100%\" fill=\"#868e96\" /><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\"",
            "                            dy=\".3em\">Image cap</text>",
            "                    </svg>",
            "",
            "                    <div class=\"card-body\">",
            "                        <h5 class=\"card-title\">Card title</h5>",
            "                        <p class=\"card-text\">This card has supporting text below as a natural lead-in to additional",
            "                            content.</p>",
            "                        <p class=\"card-text\"><small class=\"text-muted\">Last updated 3 mins ago</small></p>",
            "                    </div>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card bg-primary text-white text-center p-3\">",
            "                    <figure class=\"mb-0\">",
            "                        <blockquote class=\"blockquote\">",
            "                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>",
            "                        </blockquote>",
            "                        <figcaption class=\"blockquote-footer mb-0 text-white\">",
            "                            Someone famous in <cite title=\"Source Title\">Source Title</cite>",
            "                        </figcaption>",
            "                    </figure>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card text-center\">",
            "                    <div class=\"card-body\">",
            "                        <h5 class=\"card-title\">Card title</h5>",
            "                        <p class=\"card-text\">This card has a regular title and short paragraph of text below it.</p>",
            "                        <p class=\"card-text\"><small class=\"text-muted\">Last updated 3 mins ago</small></p>",
            "                    </div>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card\">",
            "                    <svg class=\"bd-placeholder-img card-img\" width=\"100%\" height=\"260\"",
            "                        xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: Card image\"",
            "                        preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                        <title>Placeholder</title>",
            "                        <rect width=\"100%\" height=\"100%\" fill=\"#868e96\" /><text x=\"50%\" y=\"50%\" fill=\"#dee2e6\"",
            "                            dy=\".3em\">Card image</text>",
            "                    </svg>",
            "",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card p-3 text-right\">",
            "                    <figure class=\"mb-0\">",
            "                        <blockquote class=\"blockquote\">",
            "                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>",
            "                        </blockquote>",
            "                        <figcaption class=\"blockquote-footer mb-0 text-muted\">",
            "                            Someone famous in <cite title=\"Source Title\">Source Title</cite>",
            "                        </figcaption>",
            "                    </figure>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-sm-6 col-lg-4 mb-4\">",
            "                <div class=\"card\">",
            "                    <div class=\"card-body\">",
            "                        <h5 class=\"card-title\">Card title</h5>",
            "                        <p class=\"card-text\">This is another card with title and supporting text below. This card has",
            "                            some additional content to make it slightly taller overall.</p>",
            "                        <p class=\"card-text\"><small class=\"text-muted\">Last updated 3 mins ago</small></p>",
            "                    </div>",
            "                </div>",
            "            </div>",
            "        </div>",
            "",
            "    </div>",
            "",
            "",
            "",
            "    <script async src=\"https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js\"",
            "        integrity=\"sha384-GNFwBvfVxBkLMJpYMOABq3c+d3KnQxudP/mGPkzpZSTYykLBNsZEnG2D9G/X/+7D\"",
            "        crossorigin=\"anonymous\"></script>",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Masonary Template"
    },
    "Product Template": {
        "prefix": "!productTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    <meta name=\"description\" content=\"\">",
            "    <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "    <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "    <title>Product example · Bootstrap</title>",
            "",
            "    <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/product/\">",
            "",
            "    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\"",
            "        integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\"",
            "        integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\"",
            "        crossorigin=\"anonymous\"></script>",
            "    <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"",
            "        integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\"",
            "        crossorigin=\"anonymous\"></script>",
            "",
            "",
            "",
            "    <style>",
            "        .bd-placeholder-img {",
            "            font-size: 1.125rem;",
            "            text-anchor: middle;",
            "            -webkit-user-select: none;",
            "            -moz-user-select: none;",
            "            -ms-user-select: none;",
            "            user-select: none;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .bd-placeholder-img-lg {",
            "                font-size: 3.5rem;",
            "            }",
            "        }",
            "    </style>",
            "",
            "",
            "    <!-- Custom styles for this template -->",
            "    <!-- <link href=\"product.css\" rel=\"stylesheet\"> -->",
            "    <style>",
            "        .container {",
            "            max-width: 960px;",
            "        }",
            "",
            "        /*",
            " * Custom translucent site header",
            " */",
            "",
            "        .site-header {",
            "            background-color: rgba(0, 0, 0, .85);",
            "            -webkit-backdrop-filter: saturate(180%) blur(20px);",
            "            backdrop-filter: saturate(180%) blur(20px);",
            "        }",
            "",
            "        .site-header a {",
            "            color: #727272;",
            "            transition: color .15s ease-in-out;",
            "        }",
            "",
            "        .site-header a:hover {",
            "            color: #fff;",
            "            text-decoration: none;",
            "        }",
            "",
            "        /*",
            " * Dummy devices (replace them with your own or something else entirely!)",
            " */",
            "",
            "        .product-device {",
            "            position: absolute;",
            "            right: 10%;",
            "            bottom: -30%;",
            "            width: 300px;",
            "            height: 540px;",
            "            background-color: #333;",
            "            border-radius: 21px;",
            "            transform: rotate(30deg);",
            "        }",
            "",
            "        .product-device::before {",
            "            position: absolute;",
            "            top: 10%;",
            "            right: 10px;",
            "            bottom: 10%;",
            "            left: 10px;",
            "            content: \"\";",
            "            background-color: rgba(255, 255, 255, .1);",
            "            border-radius: 5px;",
            "        }",
            "",
            "        .product-device-2 {",
            "            top: -25%;",
            "            right: auto;",
            "            bottom: 0;",
            "            left: 5%;",
            "            background-color: #e5e5e5;",
            "        }",
            "",
            "",
            "        /*",
            " * Extra utilities",
            " */",
            "",
            "        .flex-equal>* {",
            "            flex: 1;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .flex-md-equal>* {",
            "                flex: 1;",
            "            }",
            "        }",
            "    </style>",
            "</head>",
            "",
            "<body>",
            "",
            "    <nav class=\"site-header sticky-top py-1\">",
            "        <div class=\"container d-flex flex-column flex-md-row justify-content-between\">",
            "            <a class=\"py-2\" href=\"#\" aria-label=\"Product\">",
            "                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"",
            "                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" class=\"d-block mx-auto\" role=\"img\"",
            "                    viewBox=\"0 0 24 24\">",
            "                    <title>Product</title>",
            "                    <circle cx=\"12\" cy=\"12\" r=\"10\" />",
            "                    <path",
            "                        d=\"M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94\" />",
            "                </svg>",
            "            </a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Tour</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Product</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Features</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Enterprise</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Support</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Pricing</a>",
            "            <a class=\"py-2 d-none d-md-inline-block\" href=\"#\">Cart</a>",
            "        </div>",
            "    </nav>",
            "",
            "    <div class=\"position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light\">",
            "        <div class=\"col-md-5 p-lg-5 mx-auto my-5\">",
            "            <h1 class=\"display-4 font-weight-normal\">Punny headline</h1>",
            "            <p class=\"lead font-weight-normal\">And an even wittier subheading to boot. Jumpstart your marketing efforts",
            "                with this example based on Apple’s marketing pages.</p>",
            "            <a class=\"btn btn-outline-secondary\" href=\"#\">Coming soon</a>",
            "        </div>",
            "        <div class=\"product-device shadow-sm d-none d-md-block\"></div>",
            "        <div class=\"product-device product-device-2 shadow-sm d-none d-md-block\"></div>",
            "    </div>",
            "",
            "    <div class=\"d-md-flex flex-md-equal w-100 my-md-3 pl-md-3\">",
            "        <div class=\"bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden\">",
            "            <div class=\"my-3 py-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-light shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 p-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-dark shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "    </div>",
            "",
            "    <div class=\"d-md-flex flex-md-equal w-100 my-md-3 pl-md-3\">",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 p-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-dark shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "        <div class=\"bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden\">",
            "            <div class=\"my-3 py-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-light shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "    </div>",
            "",
            "    <div class=\"d-md-flex flex-md-equal w-100 my-md-3 pl-md-3\">",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 p-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-white shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 py-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-white shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "    </div>",
            "",
            "    <div class=\"d-md-flex flex-md-equal w-100 my-md-3 pl-md-3\">",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 p-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-white shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "        <div class=\"bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden\">",
            "            <div class=\"my-3 py-3\">",
            "                <h2 class=\"display-5\">Another headline</h2>",
            "                <p class=\"lead\">And an even wittier subheading.</p>",
            "            </div>",
            "            <div class=\"bg-white shadow-sm mx-auto\" style=\"width: 80%; height: 300px; border-radius: 21px 21px 0 0;\">",
            "            </div>",
            "        </div>",
            "    </div>",
            "",
            "    <footer class=\"container py-5\">",
            "        <div class=\"row\">",
            "            <div class=\"col-12 col-md\">",
            "                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" fill=\"none\" stroke=\"currentColor\"",
            "                    stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" class=\"d-block mb-2\" role=\"img\"",
            "                    viewBox=\"0 0 24 24\">",
            "                    <title>Product</title>",
            "                    <circle cx=\"12\" cy=\"12\" r=\"10\" />",
            "                    <path",
            "                        d=\"M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94\" />",
            "                </svg>",
            "                <small class=\"d-block mb-3 text-muted\">&copy; 2017-2020</small>",
            "            </div>",
            "            <div class=\"col-6 col-md\">",
            "                <h5>Features</h5>",
            "                <ul class=\"list-unstyled text-small\">",
            "                    <li><a class=\"link-secondary\" href=\"#\">Cool stuff</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Random feature</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Team feature</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Stuff for developers</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Another one</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Last time</a></li>",
            "                </ul>",
            "            </div>",
            "            <div class=\"col-6 col-md\">",
            "                <h5>Resources</h5>",
            "                <ul class=\"list-unstyled text-small\">",
            "                    <li><a class=\"link-secondary\" href=\"#\">Resource name</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Resource</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Another resource</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Final resource</a></li>",
            "                </ul>",
            "            </div>",
            "            <div class=\"col-6 col-md\">",
            "                <h5>Resources</h5>",
            "                <ul class=\"list-unstyled text-small\">",
            "                    <li><a class=\"link-secondary\" href=\"#\">Business</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Education</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Government</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Gaming</a></li>",
            "                </ul>",
            "            </div>",
            "            <div class=\"col-6 col-md\">",
            "                <h5>About</h5>",
            "                <ul class=\"list-unstyled text-small\">",
            "                    <li><a class=\"link-secondary\" href=\"#\">Team</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Locations</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Privacy</a></li>",
            "                    <li><a class=\"link-secondary\" href=\"#\">Terms</a></li>",
            "                </ul>",
            "            </div>",
            "        </div>",
            "    </footer>",
            "",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Product Template"
    },
    "Dashboard Template": {
        "prefix": "!dashboardTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "  <meta charset=\"utf-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "  <meta name=\"description\" content=\"\">",
            "  <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "  <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "  <title>Dashboard Template · Bootstrap</title>",
            "",
            "  <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/dashboard/\">",
            "",
            "",
            "",
            "  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\"",
            "    integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "  <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"",
            "    integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\"",
            "    crossorigin=\"anonymous\"></script>",
            "  <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\"",
            "    integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\"",
            "    crossorigin=\"anonymous\"></script>",
            "",
            "  <style>",
            "    .bd-placeholder-img {",
            "      font-size: 1.125rem;",
            "      text-anchor: middle;",
            "      -webkit-user-select: none;",
            "      -moz-user-select: none;",
            "      -ms-user-select: none;",
            "      user-select: none;",
            "    }",
            "",
            "    @media (min-width: 768px) {",
            "      .bd-placeholder-img-lg {",
            "        font-size: 3.5rem;",
            "      }",
            "    }",
            "",
            "    body {",
            "      font-size: .875rem;",
            "    }",
            "",
            "    .feather {",
            "      width: 16px;",
            "      height: 16px;",
            "      vertical-align: text-bottom;",
            "    }",
            "",
            "    /* Sidebar*/",
            "",
            "    .sidebar {",
            "      position: fixed;",
            "      top: 0;",
            "      bottom: 0;",
            "      left: 0;",
            "      z-index: 100;",
            "      /* Behind the navbar */",
            "      padding: 48px 0 0;",
            "      /* Height of navbar */",
            "      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);",
            "    }",
            "",
            "    @media (max-width: 767.98px) {",
            "      .sidebar {",
            "        top: 5rem;",
            "      }",
            "    }",
            "",
            "    .sidebar-sticky {",
            "      position: relative;",
            "      top: 0;",
            "      height: calc(100vh - 48px);",
            "      padding-top: .5rem;",
            "      overflow-x: hidden;",
            "      overflow-y: auto;",
            "      /* Scrollable contents if viewport is shorter than content. */",
            "    }",
            "",
            "    .sidebar .nav-link {",
            "      font-weight: 500;",
            "      color: #333;",
            "    }",
            "",
            "    .sidebar .nav-link .feather {",
            "      margin-right: 4px;",
            "      color: #727272;",
            "    }",
            "",
            "    .sidebar .nav-link.active {",
            "      color: #007bff;",
            "    }",
            "",
            "    .sidebar .nav-link:hover .feather,",
            "    .sidebar .nav-link.active .feather {",
            "      color: inherit;",
            "    }",
            "",
            "    .sidebar-heading {",
            "      font-size: .75rem;",
            "      text-transform: uppercase;",
            "    }",
            "",
            "    /*Navbar*/",
            "    .navbar-brand {",
            "      padding-top: .75rem;",
            "      padding-bottom: .75rem;",
            "      font-size: 1rem;",
            "      background-color: rgba(0, 0, 0, .25);",
            "      box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);",
            "    }",
            "",
            "    .navbar .navbar-toggler {",
            "      top: .25rem;",
            "      right: 1rem;",
            "    }",
            "",
            "    .navbar .form-control {",
            "      padding: .75rem 1rem;",
            "      border-width: 0;",
            "      border-radius: 0;",
            "    }",
            "",
            "    .form-control-dark {",
            "      color: #fff;",
            "      background-color: rgba(255, 255, 255, .1);",
            "      border-color: rgba(255, 255, 255, .1);",
            "    }",
            "",
            "    .form-control-dark:focus {",
            "      border-color: transparent;",
            "      box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);",
            "    }",
            "  </style>",
            "</head>",
            "",
            "<body>",
            "",
            "  <nav class=\"navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow\">",
            "    <a class=\"navbar-brand col-md-3 col-lg-2 mr-0 px-3\" href=\"#\">Company name</a>",
            "    <button class=\"navbar-toggler position-absolute d-md-none collapsed\" type=\"button\" data-toggle=\"collapse\"",
            "      data-target=\"#sidebarMenu\" aria-controls=\"sidebarMenu\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "      <span class=\"navbar-toggler-icon\"></span>",
            "    </button>",
            "    <input class=\"form-control form-control-dark w-100\" type=\"text\" placeholder=\"Search\" aria-label=\"Search\">",
            "    <ul class=\"navbar-nav px-3\">",
            "      <li class=\"nav-item text-nowrap\">",
            "        <a class=\"nav-link\" href=\"#\">Sign out</a>",
            "      </li>",
            "    </ul>",
            "  </nav>",
            "",
            "  <div class=\"container-fluid\">",
            "    <div class=\"row\">",
            "      <nav id=\"sidebarMenu\" class=\"col-md-3 col-lg-2 d-md-block bg-light sidebar collapse\">",
            "        <div class=\"position-sticky pt-3\">",
            "          <ul class=\"nav flex-column\">",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link active\" aria-current=\"page\" href=\"#\">",
            "                <span data-feather=\"home\"></span>",
            "                Dashboard",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"file\"></span>",
            "                Orders",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"shopping-cart\"></span>",
            "                Products",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"users\"></span>",
            "                Customers",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"bar-chart-2\"></span>",
            "                Reports",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"layers\"></span>",
            "                Integrations",
            "              </a>",
            "            </li>",
            "          </ul>",
            "",
            "          <h6 class=\"sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted\">",
            "            <span>Saved reports</span>",
            "            <a class=\"link-secondary\" href=\"#\" aria-label=\"Add a new report\">",
            "              <span data-feather=\"plus-circle\"></span>",
            "            </a>",
            "          </h6>",
            "          <ul class=\"nav flex-column mb-2\">",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"file-text\"></span>",
            "                Current month",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"file-text\"></span>",
            "                Last quarter",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"file-text\"></span>",
            "                Social engagement",
            "              </a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">",
            "                <span data-feather=\"file-text\"></span>",
            "                Year-end sale",
            "              </a>",
            "            </li>",
            "          </ul>",
            "        </div>",
            "      </nav>",
            "",
            "      <main class=\"col-md-9 ml-sm-auto col-lg-10 px-md-4\">",
            "        <div",
            "          class=\"d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom\">",
            "          <h1 class=\"h2\">Dashboard</h1>",
            "          <div class=\"btn-toolbar mb-2 mb-md-0\">",
            "            <div class=\"btn-group mr-2\">",
            "              <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Share</button>",
            "              <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Export</button>",
            "            </div>",
            "            <button type=\"button\" class=\"btn btn-sm btn-outline-secondary dropdown-toggle\">",
            "              <span data-feather=\"calendar\"></span>",
            "              This week",
            "            </button>",
            "          </div>",
            "        </div>",
            "",
            "        <canvas class=\"my-4 w-100\" id=\"myChart\" width=\"900\" height=\"380\"></canvas>",
            "",
            "        <h2>Section title</h2>",
            "        <div class=\"table-responsive\">",
            "          <table class=\"table table-striped table-sm\">",
            "            <thead>",
            "              <tr>",
            "                <th>#</th>",
            "                <th>Header</th>",
            "                <th>Header</th>",
            "                <th>Header</th>",
            "                <th>Header</th>",
            "              </tr>",
            "            </thead>",
            "            <tbody>",
            "              <tr>",
            "                <td>1,001</td>",
            "                <td>Lorem</td>",
            "                <td>ipsum</td>",
            "                <td>dolor</td>",
            "                <td>sit</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,002</td>",
            "                <td>amet</td>",
            "                <td>consectetur</td>",
            "                <td>adipiscing</td>",
            "                <td>elit</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,003</td>",
            "                <td>Integer</td>",
            "                <td>nec</td>",
            "                <td>odio</td>",
            "                <td>Praesent</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,003</td>",
            "                <td>libero</td>",
            "                <td>Sed</td>",
            "                <td>cursus</td>",
            "                <td>ante</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,004</td>",
            "                <td>dapibus</td>",
            "                <td>diam</td>",
            "                <td>Sed</td>",
            "                <td>nisi</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,005</td>",
            "                <td>Nulla</td>",
            "                <td>quis</td>",
            "                <td>sem</td>",
            "                <td>at</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,006</td>",
            "                <td>nibh</td>",
            "                <td>elementum</td>",
            "                <td>imperdiet</td>",
            "                <td>Duis</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,007</td>",
            "                <td>sagittis</td>",
            "                <td>ipsum</td>",
            "                <td>Praesent</td>",
            "                <td>mauris</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,008</td>",
            "                <td>Fusce</td>",
            "                <td>nec</td>",
            "                <td>tellus</td>",
            "                <td>sed</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,009</td>",
            "                <td>augue</td>",
            "                <td>semper</td>",
            "                <td>porta</td>",
            "                <td>Mauris</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,010</td>",
            "                <td>massa</td>",
            "                <td>Vestibulum</td>",
            "                <td>lacinia</td>",
            "                <td>arcu</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,011</td>",
            "                <td>eget</td>",
            "                <td>nulla</td>",
            "                <td>Class</td>",
            "                <td>aptent</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,012</td>",
            "                <td>taciti</td>",
            "                <td>sociosqu</td>",
            "                <td>ad</td>",
            "                <td>litora</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,013</td>",
            "                <td>torquent</td>",
            "                <td>per</td>",
            "                <td>conubia</td>",
            "                <td>nostra</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,014</td>",
            "                <td>per</td>",
            "                <td>inceptos</td>",
            "                <td>himenaeos</td>",
            "                <td>Curabitur</td>",
            "              </tr>",
            "              <tr>",
            "                <td>1,015</td>",
            "                <td>sodales</td>",
            "                <td>ligula</td>",
            "                <td>in</td>",
            "                <td>libero</td>",
            "              </tr>",
            "            </tbody>",
            "          </table>",
            "        </div>",
            "      </main>",
            "    </div>",
            "  </div>",
            "",
            "",
            "  <script src=\"/docs/5.0/dist/js/bootstrap.bundle.min.js\"",
            "    integrity=\"sha384-DBjhmceckmzwrnMMrjI7BvG2FmRuxQVaTfFYHgfnrdfqMhxKt445b7j3KBQLolRl\"",
            "    crossorigin=\"anonymous\"></script>",
            "",
            "  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.24.1/feather.min.js\"",
            "    integrity=\"sha384-EbSscX4STvYAC/DxHse8z5gEDaNiKAIGW+EpfzYTfQrgIlHywXXrM9SUIZ0BlyfF\"",
            "    crossorigin=\"anonymous\"></script>",
            "  <script src=\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js\"",
            "    integrity=\"sha384-i+dHPTzZw7YVZOx9lbH5l6lP74sLRtMtwN2XjVqjf3uAGAREAF4LMIUDTWEVs4LI\"",
            "    crossorigin=\"anonymous\"></script>",
            "  <script src=\"dashboard.js\"></script>",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Dashboard Template"
    },
    "Carousel Template": {
        "prefix": "!CarouselTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "  <meta charset=\"utf-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "  <meta name=\"description\" content=\"\">",
            "  <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "  <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "  <title>Carousel Template · Bootstrap</title>",
            "",
            "  <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/carousel/\">",
            "",
            "",
            "",
            "  <!-- Bootstrap core CSS -->",
            "  <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\"",
            "    integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "  <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\"",
            "    integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\"",
            "    crossorigin=\"anonymous\"></script>",
            "  <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"",
            "    integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\"",
            "    crossorigin=\"anonymous\"></script>",
            "",
            "  <style>",
            "    .bd-placeholder-img {",
            "      font-size: 1.125rem;",
            "      text-anchor: middle;",
            "      -webkit-user-select: none;",
            "      -moz-user-select: none;",
            "      -ms-user-select: none;",
            "      user-select: none;",
            "    }",
            "",
            "    @media (min-width: 768px) {",
            "      .bd-placeholder-img-lg {",
            "        font-size: 3.5rem;",
            "      }",
            "    }",
            "",
            "    /* GLOBAL STYLES",
            "    --------------------------------------------- */",
            "    /* Padding below the footer and lighter body text */",
            "",
            "    body {",
            "      padding-top: 3rem;",
            "      padding-bottom: 3rem;",
            "      color: #5a5a5a;",
            "    }",
            "",
            "",
            "    /* CUSTOMIZE THE CAROUSEL",
            "    -------------------------------------------- */",
            "",
            "    /* Carousel base class */",
            "    .carousel {",
            "      margin-bottom: 4rem;",
            "    }",
            "",
            "    /* Since positioning the image, we need to help out the caption */",
            "    .carousel-caption {",
            "      bottom: 3rem;",
            "      z-index: 10;",
            "    }",
            "",
            "    /* Declare heights because of positioning of img element */",
            "    .carousel-item {",
            "      height: 32rem;",
            "    }",
            "",
            "    .carousel-item>img {",
            "      position: absolute;",
            "      top: 0;",
            "      left: 0;",
            "      min-width: 100%;",
            "      height: 32rem;",
            "    }",
            "",
            "",
            "    /* MARKETING CONTENT",
            "-------------------------------------------------- */",
            "",
            "    /* Center align the text within the three columns below the carousel */",
            "    .marketing .col-lg-4 {",
            "      margin-bottom: 1.5rem;",
            "      text-align: center;",
            "    }",
            "",
            "    .marketing h2 {",
            "      font-weight: 400;",
            "    }",
            "",
            "    .marketing .col-lg-4 p {",
            "      margin-right: .75rem;",
            "      margin-left: .75rem;",
            "    }",
            "",
            "",
            "    /* Featurettes",
            "------------------------- */",
            "",
            "    .featurette-divider {",
            "      margin: 5rem 0;",
            "      /* Space out the Bootstrap <hr> more */",
            "    }",
            "",
            "    /* Thin out the marketing headings */",
            "    .featurette-heading {",
            "      font-weight: 300;",
            "      line-height: 1;",
            "      letter-spacing: -.05rem;",
            "    }",
            "",
            "",
            "    /* RESPONSIVE CSS",
            "-------------------------------------------------- */",
            "",
            "    @media (min-width: 40em) {",
            "",
            "      /* Bump up size of carousel content */",
            "      .carousel-caption p {",
            "        margin-bottom: 1.25rem;",
            "        font-size: 1.25rem;",
            "        line-height: 1.4;",
            "      }",
            "",
            "      .featurette-heading {",
            "        font-size: 50px;",
            "      }",
            "    }",
            "",
            "    @media (min-width: 62em) {",
            "      .featurette-heading {",
            "        margin-top: 7rem;",
            "      }",
            "    }",
            "  </style>",
            "",
            "",
            "  <!-- Custom styles for this template -->",
            "  <link href=\"carousel.css\" rel=\"stylesheet\">",
            "</head>",
            "",
            "<body>",
            "",
            "  <header>",
            "    <nav class=\"navbar navbar-expand-md navbar-dark fixed-top bg-dark\">",
            "      <div class=\"container-fluid\">",
            "        <a class=\"navbar-brand\" href=\"#\">Carousel</a>",
            "        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarCollapse\"",
            "          aria-controls=\"navbarCollapse\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "          <span class=\"navbar-toggler-icon\"></span>",
            "        </button>",
            "        <div class=\"collapse navbar-collapse\" id=\"navbarCollapse\">",
            "          <ul class=\"navbar-nav mr-auto mb-2 mb-md-0\">",
            "            <li class=\"nav-item active\">",
            "              <a class=\"nav-link\" aria-current=\"page\" href=\"#\">Home</a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link\" href=\"#\">Link</a>",
            "            </li>",
            "            <li class=\"nav-item\">",
            "              <a class=\"nav-link disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Disabled</a>",
            "            </li>",
            "          </ul>",
            "          <form class=\"d-flex\">",
            "            <input class=\"form-control mr-2\" type=\"search\" placeholder=\"Search\" aria-label=\"Search\">",
            "            <button class=\"btn btn-outline-success\" type=\"submit\">Search</button>",
            "          </form>",
            "        </div>",
            "      </div>",
            "    </nav>",
            "  </header>",
            "",
            "  <main>",
            "",
            "    <div id=\"myCarousel\" class=\"carousel slide\" data-ride=\"carousel\">",
            "      <ol class=\"carousel-indicators\">",
            "        <li data-target=\"#myCarousel\" data-slide-to=\"0\" class=\"active\"></li>",
            "        <li data-target=\"#myCarousel\" data-slide-to=\"1\"></li>",
            "        <li data-target=\"#myCarousel\" data-slide-to=\"2\"></li>",
            "      </ol>",
            "      <div class=\"carousel-inner\">",
            "        <div class=\"carousel-item active\">",
            "          <svg class=\"bd-placeholder-img\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /></svg>",
            "",
            "          <div class=\"container\">",
            "            <div class=\"carousel-caption text-left\">",
            "              <h1>Example headline.</h1>",
            "              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget",
            "                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>",
            "              <p><a class=\"btn btn-lg btn-primary\" href=\"#\" role=\"button\">Sign up today</a></p>",
            "            </div>",
            "          </div>",
            "        </div>",
            "        <div class=\"carousel-item\">",
            "          <svg class=\"bd-placeholder-img\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /></svg>",
            "",
            "          <div class=\"container\">",
            "            <div class=\"carousel-caption\">",
            "              <h1>Another example headline.</h1>",
            "              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget",
            "                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>",
            "              <p><a class=\"btn btn-lg btn-primary\" href=\"#\" role=\"button\">Learn more</a></p>",
            "            </div>",
            "          </div>",
            "        </div>",
            "        <div class=\"carousel-item\">",
            "          <svg class=\"bd-placeholder-img\" width=\"100%\" height=\"100%\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /></svg>",
            "",
            "          <div class=\"container\">",
            "            <div class=\"carousel-caption text-right\">",
            "              <h1>One more for good measure.</h1>",
            "              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget",
            "                metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>",
            "              <p><a class=\"btn btn-lg btn-primary\" href=\"#\" role=\"button\">Browse gallery</a></p>",
            "            </div>",
            "          </div>",
            "        </div>",
            "      </div>",
            "      <a class=\"carousel-control-prev\" href=\"#myCarousel\" role=\"button\" data-slide=\"prev\">",
            "        <span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>",
            "        <span class=\"sr-only\">Previous</span>",
            "      </a>",
            "      <a class=\"carousel-control-next\" href=\"#myCarousel\" role=\"button\" data-slide=\"next\">",
            "        <span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>",
            "        <span class=\"sr-only\">Next</span>",
            "      </a>",
            "    </div>",
            "",
            "",
            "    <!-- Marketing messaging and featurettes",
            "  ================================================== -->",
            "    <!-- Wrap the rest of the page in another container to center all the content. -->",
            "",
            "    <div class=\"container marketing\">",
            "",
            "      <!-- Three columns of text below the carousel -->",
            "      <div class=\"row\">",
            "        <div class=\"col-lg-4\">",
            "          <svg class=\"bd-placeholder-img rounded-circle\" width=\"140\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            aria-label=\"Placeholder: 140x140\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /><text x=\"50%\" y=\"50%\" fill=\"#777\" dy=\".3em\">140x140</text>",
            "          </svg>",
            "",
            "          <h2>Heading</h2>",
            "          <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies",
            "            vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo cursus",
            "            magna.</p>",
            "          <p><a class=\"btn btn-secondary\" href=\"#\" role=\"button\">View details &raquo;</a></p>",
            "        </div><!-- /.col-lg-4 -->",
            "        <div class=\"col-lg-4\">",
            "          <svg class=\"bd-placeholder-img rounded-circle\" width=\"140\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            aria-label=\"Placeholder: 140x140\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /><text x=\"50%\" y=\"50%\" fill=\"#777\" dy=\".3em\">140x140</text>",
            "          </svg>",
            "",
            "          <h2>Heading</h2>",
            "          <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras",
            "            mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris",
            "            condimentum nibh.</p>",
            "          <p><a class=\"btn btn-secondary\" href=\"#\" role=\"button\">View details &raquo;</a></p>",
            "        </div><!-- /.col-lg-4 -->",
            "        <div class=\"col-lg-4\">",
            "          <svg class=\"bd-placeholder-img rounded-circle\" width=\"140\" height=\"140\" xmlns=\"http://www.w3.org/2000/svg\"",
            "            aria-label=\"Placeholder: 140x140\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#777\" /><text x=\"50%\" y=\"50%\" fill=\"#777\" dy=\".3em\">140x140</text>",
            "          </svg>",
            "",
            "          <h2>Heading</h2>",
            "          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta",
            "            felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum",
            "            massa justo sit amet risus.</p>",
            "          <p><a class=\"btn btn-secondary\" href=\"#\" role=\"button\">View details &raquo;</a></p>",
            "        </div><!-- /.col-lg-4 -->",
            "      </div><!-- /.row -->",
            "",
            "",
            "      <!-- START THE FEATURETTES -->",
            "",
            "      <hr class=\"featurette-divider\">",
            "",
            "      <div class=\"row featurette\">",
            "        <div class=\"col-md-7\">",
            "          <h2 class=\"featurette-heading\">First featurette heading. <span class=\"text-muted\">It’ll blow your mind.</span>",
            "          </h2>",
            "          <p class=\"lead\">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod",
            "            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus",
            "            commodo.</p>",
            "        </div>",
            "        <div class=\"col-md-5\">",
            "          <svg class=\"bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto\" width=\"500\"",
            "            height=\"500\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: 500x500\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#eee\" /><text x=\"50%\" y=\"50%\" fill=\"#aaa\" dy=\".3em\">500x500</text>",
            "          </svg>",
            "",
            "        </div>",
            "      </div>",
            "",
            "      <hr class=\"featurette-divider\">",
            "",
            "      <div class=\"row featurette\">",
            "        <div class=\"col-md-7 order-md-2\">",
            "          <h2 class=\"featurette-heading\">Oh yeah, it’s that good. <span class=\"text-muted\">See for yourself.</span></h2>",
            "          <p class=\"lead\">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod",
            "            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus",
            "            commodo.</p>",
            "        </div>",
            "        <div class=\"col-md-5 order-md-1\">",
            "          <svg class=\"bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto\" width=\"500\"",
            "            height=\"500\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: 500x500\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#eee\" /><text x=\"50%\" y=\"50%\" fill=\"#aaa\" dy=\".3em\">500x500</text>",
            "          </svg>",
            "",
            "        </div>",
            "      </div>",
            "",
            "      <hr class=\"featurette-divider\">",
            "",
            "      <div class=\"row featurette\">",
            "        <div class=\"col-md-7\">",
            "          <h2 class=\"featurette-heading\">And lastly, this one. <span class=\"text-muted\">Checkmate.</span></h2>",
            "          <p class=\"lead\">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod",
            "            semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus",
            "            commodo.</p>",
            "        </div>",
            "        <div class=\"col-md-5\">",
            "          <svg class=\"bd-placeholder-img bd-placeholder-img-lg featurette-image img-fluid mx-auto\" width=\"500\"",
            "            height=\"500\" xmlns=\"http://www.w3.org/2000/svg\" aria-label=\"Placeholder: 500x500\"",
            "            preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "            <title>Placeholder</title>",
            "            <rect width=\"100%\" height=\"100%\" fill=\"#eee\" /><text x=\"50%\" y=\"50%\" fill=\"#aaa\" dy=\".3em\">500x500</text>",
            "          </svg>",
            "",
            "        </div>",
            "      </div>",
            "",
            "      <hr class=\"featurette-divider\">",
            "",
            "      <!-- /END THE FEATURETTES -->",
            "",
            "    </div><!-- /.container -->",
            "",
            "",
            "    <!-- FOOTER -->",
            "    <footer class=\"container\">",
            "      <p class=\"float-right\"><a href=\"#\">Back to top</a></p>",
            "      <p>&copy; 2017-2020 Company, Inc. &middot; <a href=\"#\">Privacy</a> &middot; <a href=\"#\">Terms</a></p>",
            "    </footer>",
            "  </main>",
            "",
            "",
            "",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Carousel Template"
    },
    "Album Template": {
        "prefix": "!AlbumTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "  <meta charset=\"utf-8\">",
            "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "  <meta name=\"description\" content=\"\">",
            "  <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "  <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "  <title>Album example · Bootstrap</title>",
            "",
            "  <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/album/\">",
            "",
            "",
            "",
            "  <!-- Bootstrap core CSS -->",
            "<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "<script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
            "",
            "  <style>",
            "    .bd-placeholder-img {",
            "      font-size: 1.125rem;",
            "      text-anchor: middle;",
            "      -webkit-user-select: none;",
            "      -moz-user-select: none;",
            "      -ms-user-select: none;",
            "      user-select: none;",
            "    }",
            "",
            "    @media (min-width: 768px) {",
            "      .bd-placeholder-img-lg {",
            "        font-size: 3.5rem;",
            "      }",
            "    }",
            "  </style>",
            "",
            "",
            "</head>",
            "",
            "<body>",
            "",
            "  <header>",
            "    <div class=\"collapse bg-dark\" id=\"navbarHeader\">",
            "      <div class=\"container\">",
            "        <div class=\"row\">",
            "          <div class=\"col-sm-8 col-md-7 py-4\">",
            "            <h4 class=\"text-white\">About</h4>",
            "            <p class=\"text-muted\">Add some information about the album below, the author, or any other background",
            "              context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off",
            "              to some social networking sites or contact information.</p>",
            "          </div>",
            "          <div class=\"col-sm-4 offset-md-1 py-4\">",
            "            <h4 class=\"text-white\">Contact</h4>",
            "            <ul class=\"list-unstyled\">",
            "              <li><a href=\"#\" class=\"text-white\">Follow on Twitter</a></li>",
            "              <li><a href=\"#\" class=\"text-white\">Like on Facebook</a></li>",
            "              <li><a href=\"#\" class=\"text-white\">Email me</a></li>",
            "            </ul>",
            "          </div>",
            "        </div>",
            "      </div>",
            "    </div>",
            "    <div class=\"navbar navbar-dark bg-dark shadow-sm\">",
            "      <div class=\"container\">",
            "        <a href=\"#\" class=\"navbar-brand d-flex align-items-center\">",
            "          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"",
            "            stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" aria-hidden=\"true\" class=\"mr-2\"",
            "            viewBox=\"0 0 24 24\">",
            "            <path d=\"M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z\" />",
            "            <circle cx=\"12\" cy=\"13\" r=\"4\" /></svg>",
            "          <strong>Album</strong>",
            "        </a>",
            "        <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarHeader\"",
            "          aria-controls=\"navbarHeader\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "          <span class=\"navbar-toggler-icon\"></span>",
            "        </button>",
            "      </div>",
            "    </div>",
            "  </header>",
            "",
            "  <main>",
            "",
            "    <section class=\"py-5 text-center container\">",
            "      <div class=\"row py-lg-5\">",
            "        <div class=\"col-lg-6 col-md-8 mx-auto\">",
            "          <h1 class=\"font-weight-light\">Album example</h1>",
            "          <p class=\"lead text-muted\">Something short and leading about the collection below—its contents, the creator,",
            "            etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>",
            "          <p>",
            "            <a href=\"#\" class=\"btn btn-primary my-2\">Main call to action</a>",
            "            <a href=\"#\" class=\"btn btn-secondary my-2\">Secondary action</a>",
            "          </p>",
            "        </div>",
            "      </div>",
            "    </section>",
            "",
            "    <div class=\"album py-5 bg-light\">",
            "      <div class=\"container\">",
            "",
            "        <div class=\"row row-cols-1 row-cols-sm-2 row-cols-md-3 g-3\">",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "          <div class=\"col\">",
            "            <div class=\"card shadow-sm\">",
            "              <svg class=\"bd-placeholder-img card-img-top\" width=\"100%\" height=\"225\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\" focusable=\"false\">",
            "                <title>Placeholder</title>",
            "                <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                  dy=\".3em\">Thumbnail</text>",
            "              </svg>",
            "",
            "              <div class=\"card-body\">",
            "                <p class=\"card-text\">This is a wider card with supporting text below as a natural lead-in to additional",
            "                  content. This content is a little bit longer.</p>",
            "                <div class=\"d-flex justify-content-between align-items-center\">",
            "                  <div class=\"btn-group\">",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">View</button>",
            "                    <button type=\"button\" class=\"btn btn-sm btn-outline-secondary\">Edit</button>",
            "                  </div>",
            "                  <small class=\"text-muted\">9 mins</small>",
            "                </div>",
            "              </div>",
            "            </div>",
            "          </div>",
            "        </div>",
            "      </div>",
            "    </div>",
            "",
            "  </main>",
            "",
            "  <footer class=\"text-muted py-5\">",
            "    <div class=\"container\">",
            "      <p class=\"float-right mb-1\">",
            "        <a href=\"#\">Back to top</a>",
            "      </p>",
            "      <p class=\"mb-1\">Album example is &copy; Bootstrap, but please download and customize it for yourself!</p>",
            "      <p class=\"mb-0\">New to Bootstrap? <a href=\"/\">Visit the homepage</a> or read our <a",
            "          href=\"/docs/5.0/getting-started/introduction/\">getting started guide</a>.</p>",
            "    </div>",
            "  </footer>",
            "",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Album Template"
    },
    "Blog Template": {
        "prefix": "!BlogTemplate",
        "body": [
            "<!doctype html>",
            "<html lang=\"en\">",
            "",
            "<head>",
            "    <meta charset=\"utf-8\">",
            "    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
            "    <meta name=\"description\" content=\"\">",
            "    <meta name=\"author\" content=\"Mark Otto, Jacob Thornton, and Bootstrap contributors\">",
            "    <meta name=\"generator\" content=\"Hugo 0.72.0\">",
            "    <title>Blog Template · Bootstrap</title>",
            "",
            "    <link rel=\"canonical\" href=\"https://v5.getbootstrap.com/docs/5.0/examples/blog/\">",
            "",
            "",
            "",
            "    <!-- Bootstrap core CSS -->",
            "    <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\"",
            "        integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "    <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\"",
            "        integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\"",
            "        crossorigin=\"anonymous\"></script>",
            "    <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\"",
            "        integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\"",
            "        crossorigin=\"anonymous\"></script>",
            "",
            "    <style>",
            "        .bd-placeholder-img {",
            "            font-size: 1.125rem;",
            "            text-anchor: middle;",
            "            -webkit-user-select: none;",
            "            -moz-user-select: none;",
            "            -ms-user-select: none;",
            "            user-select: none;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .bd-placeholder-img-lg {",
            "                font-size: 3.5rem;",
            "            }",
            "        }",
            "    </style>",
            "",
            "",
            "    <!-- Custom styles for this template -->",
            "    <link href=\"https://fonts.googleapis.com/css?family=Playfair&#43;Display:700,900&amp;display=swap\" rel=\"stylesheet\">",
            "    <!-- Custom styles for this template -->",
            "    <style>",
            "        /* stylelint-disable selector-list-comma-newline-after */",
            "",
            "        .blog-header {",
            "            line-height: 1;",
            "            border-bottom: 1px solid #e5e5e5;",
            "        }",
            "",
            "        .blog-header-logo {",
            "            font-family: \"Playfair Display\", Georgia, \"Times New Roman\", serif;",
            "            font-size: 2.25rem;",
            "        }",
            "",
            "        .blog-header-logo:hover {",
            "            text-decoration: none;",
            "        }",
            "",
            "        h1,",
            "        h2,",
            "        h3,",
            "        h4,",
            "        h5,",
            "        h6 {",
            "            font-family: \"Playfair Display\", Georgia, \"Times New Roman\", serif;",
            "        }",
            "",
            "        .display-4 {",
            "            font-size: 2.5rem;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .display-4 {",
            "                font-size: 3rem;",
            "            }",
            "        }",
            "",
            "        .nav-scroller {",
            "            position: relative;",
            "            z-index: 2;",
            "            height: 2.75rem;",
            "            overflow-y: hidden;",
            "        }",
            "",
            "        .nav-scroller .nav {",
            "            display: flex;",
            "            flex-wrap: nowrap;",
            "            padding-bottom: 1rem;",
            "            margin-top: -1px;",
            "            overflow-x: auto;",
            "            text-align: center;",
            "            white-space: nowrap;",
            "            -webkit-overflow-scrolling: touch;",
            "        }",
            "",
            "        .nav-scroller .nav-link {",
            "            padding-top: .75rem;",
            "            padding-bottom: .75rem;",
            "            font-size: .875rem;",
            "        }",
            "",
            "        .card-img-right {",
            "            height: 100%;",
            "            border-radius: 0 3px 3px 0;",
            "        }",
            "",
            "        .flex-auto {",
            "            flex: 0 0 auto;",
            "        }",
            "",
            "        .h-250 {",
            "            height: 250px;",
            "        }",
            "",
            "        @media (min-width: 768px) {",
            "            .h-md-250 {",
            "                height: 250px;",
            "            }",
            "        }",
            "",
            "        /* Pagination */",
            "        .blog-pagination {",
            "            margin-bottom: 4rem;",
            "        }",
            "",
            "        .blog-pagination>.btn {",
            "            border-radius: 2rem;",
            "        }",
            "",
            "        /*",
            "        * Blog posts",
            "        */",
            "        .blog-post {",
            "            margin-bottom: 4rem;",
            "        }",
            "",
            "        .blog-post-title {",
            "            margin-bottom: .25rem;",
            "            font-size: 2.5rem;",
            "        }",
            "",
            "        .blog-post-meta {",
            "            margin-bottom: 1.25rem;",
            "            color: #727272;",
            "        }",
            "",
            "        /*",
            "        * Footer",
            "        */",
            "        .blog-footer {",
            "            padding: 2.5rem 0;",
            "            color: #727272;",
            "            text-align: center;",
            "            background-color: #f9f9f9;",
            "            border-top: .05rem solid #e5e5e5;",
            "        }",
            "",
            "        .blog-footer p:last-child {",
            "            margin-bottom: 0;",
            "        }",
            "    </style>",
            "</head>",
            "",
            "<body>",
            "",
            "    <div class=\"container\">",
            "        <header class=\"blog-header py-3\">",
            "            <div class=\"row flex-nowrap justify-content-between align-items-center\">",
            "                <div class=\"col-4 pt-1\">",
            "                    <a class=\"link-secondary\" href=\"#\">Subscribe</a>",
            "                </div>",
            "                <div class=\"col-4 text-center\">",
            "                    <a class=\"blog-header-logo text-dark\" href=\"#\">Large</a>",
            "                </div>",
            "                <div class=\"col-4 d-flex justify-content-end align-items-center\">",
            "                    <a class=\"link-secondary\" href=\"#\" aria-label=\"Search\">",
            "                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" fill=\"none\" stroke=\"currentColor\"",
            "                            stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" class=\"mx-3\" role=\"img\"",
            "                            viewBox=\"0 0 24 24\">",
            "                            <title>Search</title>",
            "                            <circle cx=\"10.5\" cy=\"10.5\" r=\"7.5\" />",
            "                            <path d=\"M21 21l-5.2-5.2\" />",
            "                        </svg>",
            "                    </a>",
            "                    <a class=\"btn btn-sm btn-outline-secondary\" href=\"#\">Sign up</a>",
            "                </div>",
            "            </div>",
            "        </header>",
            "",
            "        <div class=\"nav-scroller py-1 mb-2\">",
            "            <nav class=\"nav d-flex justify-content-between\">",
            "                <a class=\"p-2 link-secondary\" href=\"#\">World</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">U.S.</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Technology</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Design</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Culture</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Business</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Politics</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Opinion</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Science</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Health</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Style</a>",
            "                <a class=\"p-2 link-secondary\" href=\"#\">Travel</a>",
            "            </nav>",
            "        </div>",
            "",
            "        <div class=\"p-4 p-md-5 mb-4 text-white rounded bg-dark\">",
            "            <div class=\"col-md-6 px-0\">",
            "                <h1 class=\"display-4 font-italic\">Title of a longer featured blog post</h1>",
            "                <p class=\"lead my-3\">Multiple lines of text that form the lede, informing new readers quickly and",
            "                    efficiently about what’s most interesting in this post’s contents.</p>",
            "                <p class=\"lead mb-0\"><a href=\"#\" class=\"text-white font-weight-bold\">Continue reading...</a></p>",
            "            </div>",
            "        </div>",
            "",
            "        <div class=\"row mb-2\">",
            "            <div class=\"col-md-6\">",
            "                <div",
            "                    class=\"row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative\">",
            "                    <div class=\"col p-4 d-flex flex-column position-static\">",
            "                        <strong class=\"d-inline-block mb-2 text-primary\">World</strong>",
            "                        <h3 class=\"mb-0\">Featured post</h3>",
            "                        <div class=\"mb-1 text-muted\">Nov 12</div>",
            "                        <p class=\"card-text mb-auto\">This is a wider card with supporting text below as a natural",
            "                            lead-in to additional content.</p>",
            "                        <a href=\"#\" class=\"stretched-link\">Continue reading</a>",
            "                    </div>",
            "                    <div class=\"col-auto d-none d-lg-block\">",
            "                        <svg class=\"bd-placeholder-img\" width=\"200\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                            aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\"",
            "                            focusable=\"false\">",
            "                            <title>Placeholder</title>",
            "                            <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                                dy=\".3em\">Thumbnail</text>",
            "                        </svg>",
            "",
            "                    </div>",
            "                </div>",
            "            </div>",
            "            <div class=\"col-md-6\">",
            "                <div",
            "                    class=\"row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative\">",
            "                    <div class=\"col p-4 d-flex flex-column position-static\">",
            "                        <strong class=\"d-inline-block mb-2 text-success\">Design</strong>",
            "                        <h3 class=\"mb-0\">Post title</h3>",
            "                        <div class=\"mb-1 text-muted\">Nov 11</div>",
            "                        <p class=\"mb-auto\">This is a wider card with supporting text below as a natural lead-in to",
            "                            additional content.</p>",
            "                        <a href=\"#\" class=\"stretched-link\">Continue reading</a>",
            "                    </div>",
            "                    <div class=\"col-auto d-none d-lg-block\">",
            "                        <svg class=\"bd-placeholder-img\" width=\"200\" height=\"250\" xmlns=\"http://www.w3.org/2000/svg\"",
            "                            aria-label=\"Placeholder: Thumbnail\" preserveAspectRatio=\"xMidYMid slice\" role=\"img\"",
            "                            focusable=\"false\">",
            "                            <title>Placeholder</title>",
            "                            <rect width=\"100%\" height=\"100%\" fill=\"#55595c\" /><text x=\"50%\" y=\"50%\" fill=\"#eceeef\"",
            "                                dy=\".3em\">Thumbnail</text>",
            "                        </svg>",
            "",
            "                    </div>",
            "                </div>",
            "            </div>",
            "        </div>",
            "    </div>",
            "",
            "    <main class=\"container\">",
            "        <div class=\"row\">",
            "            <div class=\"col-md-8\">",
            "                <h3 class=\"pb-4 mb-4 font-italic border-bottom\">",
            "                    From the Firehose",
            "                </h3>",
            "",
            "                <div class=\"blog-post\">",
            "                    <h2 class=\"blog-post-title\">Sample blog post</h2>",
            "                    <p class=\"blog-post-meta\">January 1, 2014 by <a href=\"#\">Mark</a></p>",
            "",
            "                    <p>This blog post shows a few different types of content that’s supported and styled with Bootstrap.",
            "                        Basic typography, images, and code are all supported.</p>",
            "                    <hr>",
            "                    <p>Cum sociis natoque penatibus et magnis <a href=\"#\">dis parturient montes</a>, nascetur ridiculus",
            "                        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere",
            "                        consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>",
            "                    <blockquote>",
            "                        <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>",
            "                            ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>",
            "                    </blockquote>",
            "                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet",
            "                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>",
            "                    <h2>Heading</h2>",
            "                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non",
            "                        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,",
            "                        porta ac consectetur ac, vestibulum at eros.</p>",
            "                    <h3>Sub-heading</h3>",
            "                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>",
            "                    <pre><code>Example code block</code></pre>",
            "                    <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod.",
            "                        Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>",
            "                    <h3>Sub-heading</h3>",
            "                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean",
            "                        lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce",
            "                        dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit",
            "                        amet risus.</p>",
            "                    <ul>",
            "                        <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>",
            "                        <li>Donec id elit non mi porta gravida at eget metus.</li>",
            "                        <li>Nulla vitae elit libero, a pharetra augue.</li>",
            "                    </ul>",
            "                    <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.",
            "                    </p>",
            "                    <ol>",
            "                        <li>Vestibulum id ligula porta felis euismod semper.</li>",
            "                        <li>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>",
            "                        <li>Maecenas sed diam eget risus varius blandit sit amet non magna.</li>",
            "                    </ol>",
            "                    <p>Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.</p>",
            "                </div><!-- /.blog-post -->",
            "",
            "                <div class=\"blog-post\">",
            "                    <h2 class=\"blog-post-title\">Another blog post</h2>",
            "                    <p class=\"blog-post-meta\">December 23, 2013 by <a href=\"#\">Jacob</a></p>",
            "",
            "                    <p>Cum sociis natoque penatibus et magnis <a href=\"#\">dis parturient montes</a>, nascetur ridiculus",
            "                        mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere",
            "                        consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p>",
            "                    <blockquote>",
            "                        <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong>",
            "                            ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>",
            "                    </blockquote>",
            "                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet",
            "                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>",
            "                    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non",
            "                        commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus,",
            "                        porta ac consectetur ac, vestibulum at eros.</p>",
            "                </div><!-- /.blog-post -->",
            "",
            "                <div class=\"blog-post\">",
            "                    <h2 class=\"blog-post-title\">New feature</h2>",
            "                    <p class=\"blog-post-meta\">December 14, 2013 by <a href=\"#\">Chris</a></p>",
            "",
            "                    <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean",
            "                        lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce",
            "                        dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit",
            "                        amet risus.</p>",
            "                    <ul>",
            "                        <li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>",
            "                        <li>Donec id elit non mi porta gravida at eget metus.</li>",
            "                        <li>Nulla vitae elit libero, a pharetra augue.</li>",
            "                    </ul>",
            "                    <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet",
            "                        fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>",
            "                    <p>Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.",
            "                    </p>",
            "                </div><!-- /.blog-post -->",
            "",
            "                <nav class=\"blog-pagination\">",
            "                    <a class=\"btn btn-outline-primary\" href=\"#\">Older</a>",
            "                    <a class=\"btn btn-outline-secondary disabled\" href=\"#\" tabindex=\"-1\" aria-disabled=\"true\">Newer</a>",
            "                </nav>",
            "",
            "            </div>",
            "",
            "            <aside class=\"col-md-4\">",
            "                <div class=\"p-4 mb-3 bg-light rounded\">",
            "                    <h4 class=\"font-italic\">About</h4>",
            "                    <p class=\"mb-0\">Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur",
            "                        purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>",
            "                </div>",
            "",
            "                <div class=\"p-4\">",
            "                    <h4 class=\"font-italic\">Archives</h4>",
            "                    <ol class=\"list-unstyled mb-0\">",
            "                        <li><a href=\"#\">March 2014</a></li>",
            "                        <li><a href=\"#\">February 2014</a></li>",
            "                        <li><a href=\"#\">January 2014</a></li>",
            "                        <li><a href=\"#\">December 2013</a></li>",
            "                        <li><a href=\"#\">November 2013</a></li>",
            "                        <li><a href=\"#\">October 2013</a></li>",
            "                        <li><a href=\"#\">September 2013</a></li>",
            "                        <li><a href=\"#\">August 2013</a></li>",
            "                        <li><a href=\"#\">July 2013</a></li>",
            "                        <li><a href=\"#\">June 2013</a></li>",
            "                        <li><a href=\"#\">May 2013</a></li>",
            "                        <li><a href=\"#\">April 2013</a></li>",
            "                    </ol>",
            "                </div>",
            "",
            "                <div class=\"p-4\">",
            "                    <h4 class=\"font-italic\">Elsewhere</h4>",
            "                    <ol class=\"list-unstyled\">",
            "                        <li><a href=\"#\">GitHub</a></li>",
            "                        <li><a href=\"#\">Twitter</a></li>",
            "                        <li><a href=\"#\">Facebook</a></li>",
            "                    </ol>",
            "                </div>",
            "            </aside>",
            "",
            "        </div><!-- /.row -->",
            "",
            "    </main><!-- /.container -->",
            "",
            "    <footer class=\"blog-footer\">",
            "        <p>Blog template built for <a href=\"https://getbootstrap.com/\">Bootstrap</a> by <a",
            "                href=\"https://twitter.com/mdo\">@mdo</a>.</p>",
            "        <p>",
            "            <a href=\"#\">Back to top</a>",
            "        </p>",
            "    </footer>",
            "",
            "",
            "",
            "</body>",
            "",
            "</html>"
        ],
        "description": "Blog Template"
    },
    "HTML HTTP Server": {
        "prefix": "!html ",
        "body": [
            "const http = require('http')",
            "const fs = require('fs');",
            "const PORT = ${1:7000};",
            "http.createServer(function (request, response) {",
            "  if (request.url == '/') {",
            "    fs.readFile('${2:index.html}', function(err, data) {",
            "      response.writeHead(200, {'Content-Type': 'text/html'});",
            "      response.write(data);",
            "      return response.end();",
            "    });",
            "  }",
            "  else{",
            "    return response.end('Invalid request');",
            "  }",
            "}).listen(PORT);",
            "",
            ""
        ],
        "description": "HTML HTTP Server"
    },
    "HTTP Server for rendering dynamic pages": {
        "prefix": "!http",
        "body": [
            "// This is the lightweight way to server render a dynamic HTML without any frameworks or libraries...",
            "// Because it's time you out grow HTML/CSS and get over ES6 as a buzzword...",
            "// All we need is the built in HTTP method, template strings and few functions and you can create powerful layouts...",
            "// Start thinking in terms of vanilla JS but also in ways that transfer to react...",
            "// Learn more in my book",
            "// https://github.com/HansUXdev/JavaScript-First",
            "",
            "const http = require('http')",
            "const fs = require('fs');",
            "",
            "// For Pages on your site",
            "const homepages = [",
            "    { ",
            "      name: 'Home', ",
            "      url: \"/\",",
            "      icon: \"\"",
            "    },",
            "    { ",
            "      name: 'About', ",
            "      url: \"/about\",",
            "      icon: \"fa-user\"",
            "    },",
            "    { ",
            "      name: 'Portfolio', ",
            "      url: \"/Portfolio\",",
            "      icon: \"fa-th\"",
            "    },",
            "    { ",
            "      name: 'Contact',",
            "      url: \"/Contact\",",
            "      icon: \"fa-envelope\"",
            "    }",
            "];",
            "  ",
            "",
            "// layout template",
            "const HTML = (header,body) => {",
            "    return `<!DOCTYPE html>",
            "    <html lang=\"en\">",
            "    <head>",
            "      <meta charset=\"UTF-8\">",
            "      <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
            "      \\${header}",
            "      <link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css\" integrity=\"sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I\" crossorigin=\"anonymous\">",
            "      <script src=\"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
            "      <script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
            "    </head>",
            "    <body>",
            "    \\${body}",
            "    </body>",
            "    </html>`;",
            "}",
            "",
            "// used to create links to each page",
            "// Example of how to use it",
            "// let links = NavLinks(homepages)",
            "const NavLinks = (data) => {",
            "    return data.map(links => `",
            "      <li class=\"nav-item\">",
            "        <a class=\"nav-link\" href=\"\\${links.url}\">\\${links.name}</a>",
            "      </li>",
            "    `).join('');",
            "};",
            "",
            "// Navbar Function to build a dynamic navbar on the server",
            "/*",
            "* Example",
            "* create links for each page",
            "* let links = NavLinks(homepages)",
            "* pass that into the 'content' arguement and returns your final menu",
            "* Nav(links)                     ",
            "*/",
            "",
            "const Nav = (content, logo=\"https://hansmcmurdy.com/JavaScript-First/logo.svg\") => {",
            "  return `",
            "  <div class=\"collapse\" id=\"JSFirst\">",
            "    <div class=\"bg-dark p-4\">",
            "      <h5 class=\"text-white h4\"> #JavaScriptFirst is an online Book </h5>",
            "      <span class=\"text-muted\">",
            "      Learn more about the book here: <a class=\"\" href=\"https://hansmcmurdy.com/JavaScript-First/\">#JavaScriptFirst</a>",
            "      </span>",
            "    </div>",
            "  </div>",
            "  <nav class=\"navbar navbar-expand-lg navbar-light bg-light\">",
            "  <div class=\"container-fluid\">",
            "    <a class=\"navbar-brand\" href=\"#\" type=\"button\" data-toggle=\"collapse\" data-target=\"#JSFirst\" aria-controls=\"JSFirst\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "      <img src=\"\\${logo}\" width=\"30\" height=\"30\" alt=\"image of a logo\" loading=\"lazy\">",
            "    </a>",
            "    <button class=\"navbar-toggler\" type=\"button\" data-toggle=\"collapse\" data-target=\"#navbarNavAltMarkup\" aria-controls=\"navbarNavAltMarkup\" aria-expanded=\"false\" aria-label=\"Toggle navigation\">",
            "      <span class=\"navbar-toggler-icon\"></span>",
            "    </button>",
            "    <div class=\"collapse navbar-collapse\" id=\"navbarNavAltMarkup\">",
            "      <div class=\"navbar-nav\">",
            "        \\${content}",
            "      </div>",
            "    </div>",
            "  </div>",
            "</nav>`;",
            "};",
            "",
            "/**",
            " * @export",
            " * @param {string} [route=\"/\"]",
            " * @param {number} [port=8000]",
            " * @param {*} HTML - is a callback that returns an html string",
            " */",
            "const Server = (home = \"/\", port=8000, template, pages=false )  =>{",
            "    http.createServer(",
            "        (request, response)=>{",
            "        req = this.request;",
            "        if(request.url == home){",
            "          response.writeHead(200,{",
            "            'Content-Type': 'text/html',",
            "            'Content-Length': template.length,",
            "            'Expires': new Date().toUTCString()",
            "          })",
            "          response.end(template)",
            "        }",
            "        else{",
            "          // writeHTML()",
            "          response.end(\"nope\")",
            "        }",
            "      }",
            "    ).listen(port);",
            "    //",
            "  };",
            "  ",
            "/*Example */",
            "let links = NavLinks(homepages)",
            "const home = HTML(",
            "    `<title>#JavaScriptFrist Bootstrap Site</title>`,",
            "    `\\${ Nav(links)}`",
            ");",
            "Server('/',7000,home)"
        ],
        "description": "HTTP Server for rendering dynamic pages"
    }
}