---
layout: page
title: Topics
permalink: /topics/
---

<div id="tag-nav">
 <a href="#" class="tag-link">All</a>
 {% assign all_tags = site.documents | map: "tags" | compact | uniq | sort %}
 {% for tag in all_tags %}
   <a href="#{{ tag | slugify }}" class="tag-link">{{ tag }}</a>
 {% endfor %}
</div>

<div id="tag-list">
 {% for tag in all_tags %}
   <div class="tag-section" data-tag="{{ tag | slugify }}">
     <h2>{{ tag }}</h2>
     <ul>
       {% for item in site.documents %}
         {% if item.tags contains tag %}
           <li><a href="{{ item.url }}">{{ item.title }}</a></li>
         {% endif %}
       {% endfor %}
     </ul>
   </div>
 {% endfor %}
</div>

<script>
function showTag() {
 const hash = window.location.hash.slice(1);
 const sections = document.querySelectorAll('.tag-section');
 sections.forEach(section => {
   section.style.display = !hash || section.dataset.tag === hash ? 'block' : 'none';
 });
}

window.addEventListener('hashchange', showTag);
showTag();
</script>

<style>
#tag-nav {
 margin-bottom: 2em;
}
.tag-link {
 margin-right: 1em;
}
</style>