{% extends template.self %}
{% block title %}{% if page.fullTitle %}{{ page.fullTitle }}{% else %}{{ super() }}{% endif %}{% endblock %}
{% block head %} {{ super() }}
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-DWY0DLHWB6"></script>
<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag("js", new Date());

    gtag("config", "G-DWY0DLHWB6");
</script>
<script type="module">
    // コンソールUIでコード実行したらイベントとして送信する
    const onExecuteCode = (scriptType) => {
        gtag("event", "execute_code", {
            "event_category": "console",
            "event_label": "execute_code",
            "script_type": scriptType || "unknown"
        });
    };
    let observer;
    const observeEvalEvent = () => {
        if (observer) {
            observer.disconnect();
        }
        const callback = function(mutationsList) {
            for (const mutation of mutationsList) {
                const mirrorConsole = Array.from(mutation.addedNodes).find(node => Boolean(node.dataset.mirrorConsole));
                if (mirrorConsole) {
                    return onExecuteCode(mirrorConsole.dataset.mirrorConsole);
                }
            }
        };
        observer = new MutationObserver(callback);
        observer.observe(document.body, { childList: true });
    };
    const eventMap = new WeakMap();
    // 問題を報告ボタンを押したらイベントとして送信する
    const onClickIssueReport = () => {
        console.log("click_issue_report");
        gtag("event", "click_issue_report", {
            "event_category": "contribution",
            "event_label": "click_issue_report"
        });
    };
    const observeIssueReport = () => {
        const targetButton = document.querySelector(".gitbook-plugin-github-issue-feedback");
        // すでにイベントが登録されていたら何もしない
        if (eventMap.has(targetButton)) {
            return;
        }
        if (targetButton) {
            targetButton.addEventListener("click", onClickIssueReport);
            eventMap.set(targetButton, onClickIssueReport);
        }
    };
    window.addEventListener("DOMContentLoaded", function() {
        gitbook.events.on("page.change", function() {
            observeEvalEvent();
            observeIssueReport();
        });
    });

</script>
<meta name="google-site-verification" content="bMotEbgYwkzA3k4PkuyK_NUdz0bKh-Phz0oUwNmRSVo"/>
<style>
    /*
     * Disable antialias
     */
    * {
        -webkit-font-smoothing: initial !important
    }

    body {
        text-rendering: initial !important;
        font-smoothing: initial !important;
    }

    /* deny access chapter */
    .summary li.chapter > span {
        cursor: not-allowed;
        opacity: .3;
    }

    /* console ui */

    .mirror-console-attach-button-wrapper {
        margin-top: -1.275em;
        margin-bottom: 1.275em
    }

    .mirror-console-wrapper {
        margin-top: 1.275em;
        margin-bottom: 1.275em
    }

    /* file name for codeblock */
    .code-filename {
        background-color: #eee;
        display: inline-block;
        padding: 2px 8px;
        line-height: inherit;
        margin-bottom: 0px !important;
    }

    /* Markdown */
    /* Support horizon scroll */
    /* https://stackoverflow.com/questions/17770257/scrolling-tables-horizontally-without-wrapping-them-in-div */
    .markdown-section table {
        max-width: 100%;
        overflow-x: auto;
        display: block;
    }
    .markdown-section sup,
    .markdown-section sub {
        font-size: 75%;
    }

    .book_footer {
        text-align: center;
        color: #000000;
        background: #ddd;
        font-size: 16px;
        margin-top: 16px;
        padding: 16px;
    }

    /* github-issue-feedback */
    .gitbook-plugin-github-issue-feedback {
        background-color: #333;
        color: #fff;
        opacity: 0.8;
        padding: 4px;
        margin-right: 24px;
        margin-bottom: 4px;
        border-radius: 6px;
    }

    .gitbook-plugin-github-issue-feedback:hover {
        opacity: 1;
    }

    /* Hide footer on mobile */
    /* Use navigation width */
    @media (max-width: 1240px) {
        .book_footer {
            display: none;
        }
    }

    .navigation {
        min-width: 50px;
    }

    @media (min-width: 1240px) {
        .honkit-plugin-sandpack {
            width: calc(100% + 180px);
            margin: 0 0 1em -90px;
        }
    }

    .honkit-plugin-sandpack, .honkit-plugin-sandpack--buttonContainer {
        margin-bottom: 1em;
    }

</style>
<meta name="theme-color" content="#ffffff">
<link rel="manifest" href="{{ "/manifest.json"|resolveFile }}">
<script defer async>
    // unregister old service worker(remove workbox)
    // https://github.com/js-primer/js-primer/pull/1701
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
        for (const registration of registrations) {
            registration.unregister();
        }
    }).catch(function(err) {
        console.error(new Error("Can not getRegistrations", {
            cause: err
        }));
    });
</script>
{% endblock %}
{% block book_inner %}{{ super() }}
<footer class="book_footer">
    <p>Copyright (c) 2016-present <a href="https://github.com/js-primer/js-primer" target="_blank">jsprimer project</a></p>
</footer>
{% endblock %}
{# page.sponsorsが定義されているページのみスポンサーの表示する #}
{% block page %}{% if page.sponsors %}
<style>
    .page-sponsors .page-sponsors-list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 1em 0;
        list-style: none;
        gap: 16px;
    }
    .page-sponsors-list .sponsor-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 1px solid #e5e5e5;
        border-radius: 4px;
        padding: 16px;
        background-color: #ffffff;
        text-decoration: none;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
        transition: box-shadow 0.2s, border-color 0.2s;
    }
    .page-sponsors-list .sponsor-item:hover {
        border-color: #d0d0d0;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    .page-sponsors-list .sponsor-item img {
        display: block;
        margin-bottom: 8px;
    }
    .page-sponsors-list .sponsor-name {
        font-size: 12px;
        color: #333;
        font-weight: 500;
        text-align: center;
    }
    .page-sponsors-footer {
        text-align: center;
        padding: 0.8em 1em;
        margin: 0;
        border-bottom: 1px solid #eee;
    }
    .page-sponsors-footer p {
        margin: 0;
    }
</style>
<div class="page-sponsors">
{% if page.sponsors | length %}
    <ul class="page-sponsors-list">
    {% for sponsor in page.sponsors %}
        <li>
            <a href="{{sponsor.url}}" title="{{sponsor.name}}" target="_blank" rel="noopener" class="sponsor-item">
                <img src="{{sponsor.logo}}" alt="{{sponsor.name}}" width="64" height="64">
                <div class="sponsor-name">{{sponsor.name}}</div>
            </a>
        </li>
    {% endfor %}
    </ul>
    <div class="page-sponsors-footer">
    <p>このページは<a href="https://jsprimer.net/intro/sponsors/">ページスポンサー</a>の方々にサポートされています{% if page.sponsorsExample %}
        <br/>（この表示はサンプルです）
    {% endif %}
    </p>
    </div>
{% else %}
    <div class="page-sponsors-footer">
        JavaScript Primerの<a href="https://jsprimer.net/intro/sponsors/">スポンサーを募集中</a>
    </div>
{% endif %}
</div>
{% endif %}{{ super() }}
{% endblock %}