notes.html

---
layout: default
title: Recent notes
has_open_heart: true
---

{% assign notes = site.notes | sort: "date" | reverse %}
{% assign tags = notes | map: "tags" | uniq | sort %}
<style>
  {% for tag in tags %}
  body:has([value="{{ tag }}"]:not(:checked)) .note:has([data-tag="{{ tag }}"]) { display: none; }
  body:has([value="{{ tag }}"]:checked) .note:has([data-tag="{{ tag }}"]) { display: block !important; }
  {% endfor %}
</style>

<details class="details-note-tags">
  <summary class="monospace smol">Tag filter</summary>
  <form action="#" method="get" class="note-tags">
    {% for tag in tags %}
    <label class="note-tag" data-tag="{{ tag }}">
      <input id="{{ tag | slugify }}" name="tag" value="{{ tag }}" checked type="checkbox">
      {% assign notes_with_tag = notes | where_exp: "note", "note.tags contains tag" %}
      {{ tag }}
      ({{ notes_with_tag | size }})
    </label>
    {% endfor %}
    <hr class="inline-hr">
    <button type="reset" class="note-tag check-all-tag">Check all</button>
  </form>
</details>

<ul class="notes">
{% for note in notes limit: 200 %}
  <li class="note">
    <div class="general-actions">
      <h2 class="text">
        <a href="{{ note.url }}" class="monospace">{{ note.date | date: "%b %e, %Y" }}</a>
      </h2>
      <button type="button" class="share-button monospace" data-share-url="{{ note.url }}" hidden>Share</button>
      <open-heart class="text-open-heart monospace" href="https://likes.muan.dev/?id={{ note.url }}" emoji="❤️" aria-labelledby="like-prompt">
        <span class="on">Liked ♥︎.</span><span class="off">Like?</span>
      </open-heart>
    </div>
    <div class="note-content" lang="{{ note.lang }}">{{ note.content | markdownify }}</div>
    <div class="note-tags">
      {% for tag in note.tags %}<label class="note-tag" for="{{ tag | slugify }}" data-tag="{{ tag }}">{{ tag }}</label>{% endfor %}
      <a href="https://github.com/muan/site/edit/main/{{ note.path }}" class="hidden-link" tabindex="-1" aria-hidden="true">&nbsp;&nbsp;&nbsp;&nbsp;</a>
    </div>
  </li>
{% endfor %}
</ul>

{% if notes.size > 200 %}
  <hr>
  <p class="desc">Only the most recent 200 notes are shown.</p>
  {% for note in notes %}
    {% assign id = note.date | date: "%Y%m%d%I%M" %}
    <a class="note" id="t{{id}}" href="{{ note.url }}" hidden></a>
  {% endfor %}
  <script>
    if (window.location.hash) document.querySelector(document.location.hash)?.click()
  </script>
{% endif %}