{{define "head"}}
<title>blog - ari melody 💫</title>
<link rel="shortcut icon" href="/img/favicon.png" type="image/x-icon">

<meta name="description" content="thoughts from your local SPACEGIRL 💫">

<meta property="og:title" content="ari melody blog 💫">
<meta property="og:type" content="article">
<meta property="og:url" content="https://arimelody.space/blog/">
<meta property="og:image" content="https://arimelody.space/img/favicon.png">
<meta property="og:site_name" content="ari melody">
<meta property="og:description" content="thoughts from your local SPACEGIRL 💫">

<link rel="stylesheet" href="/style/main.css">
<link rel="stylesheet" href="/style/index.css">
<link rel="stylesheet" href="/style/blog.css">
{{end}}

{{define "content"}}
<main>
    <h1 class="typeout"># blog</h1>
    <p class="">thoughts from your local SPACEGIRL 💫</p>

    <hr>

    <div id="posts">
        {{if eq (len .Collections) 0}}
        <p>there are no posts! 🍃</p>
        {{end}}
        {{range .Collections}}
        <h2 id="{{.Year}}" class="collection-name">{{.Year}}</h2>
        {{range .Posts}}
        <article class="blog-post">
            <h3 class="blog-title"><a href="/blog/{{.ID}}">{{.Title}}</a></h3>
            <p class="blog-meta">
                <span class="blog-author"><img src="/img/favicon.png" alt="" width="32" height="32"/> {{.Author.DisplayName}}</span>
                <span class="blog-date">&bull; {{.PrintDate}}</span>
            </p>
            {{if ne .Description ""}}
            <p class="blog-description">{{.Description}}</p>
            {{end}}
        </article>
        {{end}}
        {{end}}
    </div>

    <!-- <button type="submit" class="link-button" id="load-more">load more</button> -->

    <script src="/script/blog.js" type="module" defer></script>
</main>
{{end}}