{{ define "main" }}
<main role="main" class="container-blog mx-auto px-6 md:p-0">

  <!-- Search modal and results -->
  {{ partial "search.html" . }}

  <!-- Notes CTA -->
  <a class="flex items-center gap-2 w-full bg-yellow-200 hover:cursor-pointer rounded mb-8 p-4" href="/notes.html">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="hidden lg:block w-6 h-6">
      <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
    </svg>
    <p>For interesting <span span class="italic font-medium">notes</span> and
    small <span class="italic font-medium">experiments</span> I usually partake
    in, check the Notes page.</p>
  </a>

  <h1 class="text-2xl font-bold mb-6">Blog posts</h1>

  <!-- List of all blog posts -->
  <nav itemscope itemtype="https://schema.org/SiteNavigationElement" class="mb-12" role="feed">
    <meta itemprop="name" content="Article list">
    {{ range (where .Site.RegularPages "Section" "posts") }}
    <div>
      <article class="mb-5" itemscope itemtype="http://schema.org/Article">
        <time class="block text-gray-400 font-medium text-xs">{{ .Date.Format "Monday Jan 2, 2006" }}</time>
        <a href="/{{ .Params.url }}" itemprop="url" class="hover:bg-yellow-100" rel="bookmark noopener" aria-label="Opens URL">
          {{ if .Params.draft }}
          <span class="bg-orange-600 text-white px-1.5">Draft</span>
          {{ end }}
          {{.Title}}
        </a>
      </article>
    </div>
    {{ end }}
  </nav>

  <hr class="border-2 border-gray-100 mb-10">

  <!-- Projects I work on -->
  {{ partial "side-projects.html" . }}

  <hr class="border-2 border-gray-100 mb-10">

  <!-- Openring -->
  {{ partial "openring.html" . }}

</main>
{{ end }}