index.pug

extends layout.pug

block content
    h2.second-heading.mb-3 Quick Start

    p.sub-heading Get your production ready CDN links bellow. You can also automate your upgrades by pulling the latest versions from our API.
    -var current = config.files.bootstrap.find(file => file.current);
    -var previous = config.files.bootstrap.find(file => semver.satisfies(file.version, '^4', { includePrerelease: true }));

    each item in [current, previous]
        .third-heading=`v${item.version}`

        .hr.horizontal-divider

        div
            -var name   = `quickstartcss_${item.version.replace(/\./g, '_')}`;
            -var file   = item.stylesheet;
            -var sri    = item.stylesheetSri;
            -var formId = `${name}_form`;

            .d-flex.flex-column.content-card-block
                .content-card-subtitle CSS
                .content-card-input
                    input.d-flex.flex-grow-1(id=formId, type='text', readonly, value=file)
                    button.btn.p-0.d-flex.align-items-center.justify-content-center.dropdown-toggle(type='button',
                        data-toggle='collapse',
                        data-target=`#${name}`,
                        aria-label='Toggle Dropdown',
                        aria-expanded='false',
                        aria-controls=name)
                        include /assets/img/arrow_down_white.svg
                span.mt-2.copy-btn Click to copy

            include _partials/csscode.pug

            -var name   = `quickstartjs_${item.version.replace(/\./g, '_')}`;
            -var file   = item.javascript;
            -var sri    = item.javascriptSri;
            -var formId = `${name}_form`;

            .d-flex.flex-column.content-card-block
                .content-card-subtitle JavaScript
                .content-card-input
                    input.d-flex.flex-grow-1(id=formId, type='text', readonly, value=file)
                    button.btn.p-0.d-flex.align-items-center.justify-content-center.dropdown-toggle(type='button',
                        data-toggle='collapse',
                        data-target=`#${name}`,
                        aria-label='Toggle Dropdown',
                        aria-expanded='false',
                        aria-controls=name)
                        include /assets/img/arrow_down_white.svg
                span.mt-2.copy-btn Click to copy

            include _partials/jscode.pug

            -var name   = `quickstartjsbundle_${item.version.replace(/\./g, '_')}`;
            -var file   = item.javascriptBundle;
            -var sri    = item.javascriptBundleSri;
            -var formId = `${name}_form`;

            .d-flex.flex-column.content-card-block
                .content-card-subtitle JavaScript Bundle
                .content-card-input
                    input.d-flex.flex-grow-1(id=formId, type='text', readonly, value=file)
                    button.btn.p-0.d-flex.align-items-center.justify-content-center.dropdown-toggle(type='button',
                        data-toggle='collapse',
                        data-target=`#${name}`,
                        aria-label='Toggle Dropdown',
                        aria-expanded='false',
                        aria-controls=name)
                        include /assets/img/arrow_down_white.svg
                span.mt-2.copy-btn Click to copy

            include _partials/jscode.pug

            //- if (item.javascriptEsm)
            //-     -var name   = `quickstartjsesm_${item.version.replace(/\./g, '_')}`;
            //-     -var file   = item.javascriptEsm;
            //-     -var sri    = item.javascriptEsmSri;
            //-     -var formId = `${name}_form`;

            //-     .form-group.my-4
            //-         label.content-card-subtitle(for=formId) JavaScript ESM Build
            //-         .input-group.input-group-lg
            //-             input.form-control(id=formId, type='text', readonly, value=file)
            //-             .input-group-append
            //-                 button.btn.btn-dark.dropdown-toggle(type='button',
            //-                     data-toggle='collapse',
            //-                     data-target=`#${name}`,
            //-                     aria-label='Toggle Dropdown',
            //-                     aria-expanded='false',
            //-                     aria-controls=name)
            //-         span.form-text.text-muted Click to copy

            //-     include _partials/jscode.pug

//- vim: ft=pug sw=4 sts=4 et: