Okay now actually adding the content

topics.md

@@ -0,0 +1,50 @@
+---
+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>