Added tgas pages

3 files changed, 112 insertions, 1 deletions

diff --git a/themes/simple/layouts/_default/notes.html b/themes/simple/layouts/_default/notes.html
index e2672e4..3474be6 100644
--- a/themes/simple/layouts/_default/notes.html
+++ b/themes/simple/layouts/_default/notes.html
@@ -13,10 +13,27 @@
 
   <hr class="border-2 border-gray-100 mb-8">
 
+  <!-- Dropdown selector to jump to note -->
   <select id="jump-to-note" class="px-3 py-2 rounded mb-2 bg-gray-100 w-full md:w-auto">
     <option>Jump to note</option>
   </select>
 
+  <!-- List all unique tags -->
+  <nav itemscope itemtype="https://schema.org/SiteNavigationElement" class="mt-6 mb-10" role="feed">
+    <meta itemprop="name" content="Tag list">
+    <section>
+      <ul class="flex flex-wrap gap-2">
+        {{ range .Site.Taxonomies.tags }}
+        <li>
+          <a href="{{ .Page.Permalink }}" class="inline-block px-3 py-1 rounded bg-gray-100 hover:bg-yellow-100">
+            {{ .Page.Title }}
+          </a>
+        </li>
+        {{ end }}
+      </ul>
+    </section>
+  </nav>
+
   <!-- List of all notes -->
   <nav itemscope itemtype="https://schema.org/SiteNavigationElement" class="mb-12" role="feed">
     <meta itemprop="name" content="Article list">
@@ -38,7 +55,7 @@
               <span class="inline-flex flex-row gap-1">
                 <span>(</span>
                 {{ range .Params.tags }}
-                  <span>{{ . }}</span>
+                  <a href="/tags/{{ . | urlize }}.html">{{ . }}</a>
                 {{ end }}
                 <span>)</span>
               </span>
diff --git a/themes/simple/layouts/tags/list.html b/themes/simple/layouts/tags/list.html
new file mode 100644
index 0000000..3aa801b
--- /dev/null
+++ b/themes/simple/layouts/tags/list.html
@@ -0,0 +1,88 @@
+{{ define "main" }}
+<main role="main" class="container-blog mx-auto px-6 md:p-0">
+
+  <section class="mb-6">
+    <h1 class="text-2xl font-bold mb-2 italic">
+      <span class="blue">{{ .Title }}</span>
+      <span>//</span>
+      <span>notes</span>
+      <span>//</span>
+      <span class="text-sm">{{ len .Pages }} of them</span>
+    </h1>
+    <p class="text-gray-600 italic">
+      Notes about things I learn, things I do, things I want to remember,
+      but never do. You can subscribe to this
+      <a href="/notes.xml" class="underline hover:bg-yellow-100">RSS feed</a>
+      which contains only the notes without the blog posts.
+    </p>
+  </section>
+
+  <hr class="border-2 border-gray-100 mb-8">
+
+  <!-- Dropdown selector to jump to note -->
+  <select id="jump-to-note" class="px-3 py-2 rounded mb-2 bg-gray-100 w-full md:w-auto">
+    <option>Jump to note</option>
+  </select>
+
+  <!-- List of all notes -->
+  <nav itemscope itemtype="https://schema.org/SiteNavigationElement" class="mb-12" role="feed">
+    <meta itemprop="name" content="Article list">
+    <section>
+      {{ range .Pages }}
+      <div class="mb-10">
+        <article class="mb-5 single note" itemscope itemtype="http://schema.org/Article">
+          <a href="{{ .Params.url }}">
+            <h2 class="text-xl font-medium notes-heading">{{.Title}}</h2>
+          </a>
+          <p class="text-gray-600 _italic text-sm flex flex-col md:flex-row gap-1">
+            <time datetime="{{ .Date.Format "2006-01-02" }}" itemprop="datePublished">
+              {{ .Date.Format "Monday Jan 2, 2006" }}
+            </time>
+
+            {{ if .Params.tags }}
+            <span class="hidden md:inline-block">
+              <span>with tags</span>
+              <span class="inline-flex flex-row gap-1">
+                <span>(</span>
+                {{ range .Params.tags }}
+                  <span>{{ . }}</span>
+                {{ end }}
+                <span>)</span>
+              </span>
+            </span>
+            {{ end }}
+          <div class="content">
+            {{ .Content | safeHTML }}
+          </div>
+        </article>
+      </div>
+      {{ end }}
+    </section>
+  </nav>
+
+  <script>
+    try {
+      const notes = document.querySelectorAll('h2');
+      const select = document.querySelector('#jump-to-note');
+
+      notes.forEach(note => {
+        const id = note.innerText.toLowerCase().replace(/ /g, '-').replace(/[^\w-]+/g, '');
+        note.id = id;
+        note.innerHTML = `<a href="#${id}"></a>${note.innerHTML}`;
+
+        const option = document.createElement('option');
+        option.value = id;
+        option.innerText = note.innerText;
+        select.appendChild(option);
+
+        select.addEventListener('change', () => {
+          window.location.hash = select.value;
+        });
+      });
+    } catch (error) {
+      console.error(error);
+    }
+  </script>
+
+</main>
+{{ end }}
diff --git a/themes/simple/static/css/tailwind.css b/themes/simple/static/css/tailwind.css
index db7294b..b99c7fc 100644
--- a/themes/simple/static/css/tailwind.css
+++ b/themes/simple/static/css/tailwind.css
@@ -18,10 +18,16 @@
   @apply bg-yellow-100 text-black;
 }
 
+/* Helpers */
+
 a:hover {
   color: blue;
 }
 
+.blue {
+  color: blue;
+}
+
 /* Headings */
 article.single h2 {
   @apply text-2xl font-bold mb-8 mt-8 leading-tight;