{{define "article.html"}}
 {{template "base.html" .}}
{{end}}

{{define "ext_css"}}
<link rel="stylesheet" href="/statics/css/github-markdown-light.css">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/artalk/2.4.4/ArtalkLite.css">
{{end}}

{{define "body"}}
    <div class="w-full container-2xl mx-auto bg-white shadow-md shadow-gray-100"  style="z-index: 10;" id="header">
        <div class="mx-auto md:w-4/5 p-2 md:px-10 ">
            <div class="text-2xl md:py-5 md:text-5xl">
                {{.title}}
            </div>
            <div class="text-xl md:text-2xl font-light">
                <i class="fa fa-calendar"></i><span class="px-3">{{.date}}
            </div>
        </div>
    </div>

    <div class="h-6 bg-white">
    </div>

    <div class="container-2xl mx-auto bg-white">
        <div class="mx-auto md:w-4/5 p-2 md:px-10 space-y-3 md:space-y-10">
            <div class="leading-snug font-light text-sm md:text-xl overflow-clip tracking-wide">
                <div class="markdown-body">
                    {{.content}}
                </div>
            </div>
        </div>
    </div>
    <div class="h-6 bg-white">
    </div>

    <div class="container-2xl mx-auto bg-white">
        <div class="mx-auto md:w-4/5 p-2 md:px-10 space-y-3 md:space-y-10">
            <div id="Comments"></div>
        </div>
    </div>
{{end}}

{{define "ext_js"}}
<script src="/statics/js/stuck.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/artalk/2.4.4/ArtalkLite.js"></script>
<script>
    new Artalk({
        el:        '#Comments',
        server:    'https://artalk.winxg.com',
        site:      'winxg',
        locale: "auto"
    })

    const Stuck = StuckJs.Stuck;
    const instances = new Stuck([
        { selector: '#header', marginTop: 0 },
    ], { marginTop: 10 });
</script>
{{end}}