<!DOCTYPE html>
<html lang="ja" prefix="og: http://ogp.me/ns#">
<meta charset="UTF-8">

<head>
    <title> {{title}} </title>

    <meta property="og:title" content="{{title}}">
    <meta property="og:image" content="{{ogp_url}}">
    <meta property="og:description" content="{{description}}">
    <meta property="og:url" content="{{url}}">
    <meta property="og:type" content="article">
    <meta property="og:site_name" content="{{site_name}}">
    <meta property="og:locale" content="ja_JP">

    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="{{twitter_site}}" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/{{syntax_theme}}.css">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia-repl.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/julia.min.js"></script>


    <script>hljs.highlightAll();</script>

    <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>

    <script type="text/javascript" id="MathJax-script" async
        src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script>


    {{style}}


    <script>
        page_contents = []
    </script>

    {{runner}}


</head>


<body>

    <div class="content">

        <div class="article-header">
            <div class="thumbnail" style="text-align: center">
                <img height="300px" width="300px" src="{{ogp_url}}">
            </div>


            <div class="title">
                {{title}}
            </div>

            <script>
                title = document.querySelector(".title").innerHTML;
            </script>

            <br>
            <div class="date">
                {{date}}
            </div>
            <br>
            <div class="tag">
                {{tag}}
            </div>

        </div>

        <div class="article-body">
            {{contents}}
        </div>


    </div>

    <div class="side">
        <div class="side-sticky">
            <div class="sidebar">
                <ul id="toc"></ul>
            </div>

            <div class="links">
                <a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button"
                    data-show-count="false">Tweet</a>
                <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

                <br>
                <br>
                <br>

                <p><i class="icon fab fa-twitter"></i><a href="https://twitter.com/{{twitter_id}}">@{{twitter_id}}</a>
                </p>
                <p><i class="icon fab fa-github"></i><a href="https://github.com/{{github_id}}">@{{github_id}}</a></p>
                <p><i class="icon fas fa-envelope"></i><a href="mailto:{{mail}}"> {{mail}}</a></p>

                <footer>
                    <p>&copy; {{author}} </p>
                </footer>

            </div>
        </div>

        <script>
            const tocContainer = document.querySelector("#toc");
            const tocTitle = document.createElement("div");
            tocTitle.innerHTML = title;
            tocTitle.classList.add("toc_title");
            tocContainer.appendChild(tocTitle);



            page_contents.forEach(item => {
                if (item.type == "H1" || item.type === "H2" || item.type === "H3") {
                    const listItem = document.createElement("li");
                    listItem.innerHTML = `<a href="#${item.id}">${item.title}</a>`;
                    listItem.classList.add("toc_" + item.type);
                    tocContainer.appendChild(listItem);
                }
            });

            const options = {
                root: null,
                rootMargin: "-50% 0px",
                threshold: 0
            };

            const observer = new IntersectionObserver(onIntersection, options);

            page_contents.forEach(item => {
                const element = document.getElementById(item.id);
                if (element) {
                    observer.observe(element);
                }
            });

            // page_contensts の先頭を active にしておく
            const first_item = document.querySelector(`#toc a[href="#${page_contents[0].id}"]`);
            first_item.classList.add("active");

            prev_item = first_item;

            function onIntersection(entries) {
                entries.forEach(entry => {
                    const id = entry.target.id;
                    const tocItem = document.querySelector(`#toc a[href="#${id}"]`);
                    if (tocItem) {
                        if (entry.isIntersecting) {
                            tocItem.classList.add("active");
                            prev_item.classList.remove("active");
                            prev_item = tocItem;
                        }
                    }
                });
            }
        </script>
    </div>

</body>


</html>