Build tag system

src/_includes/css/base.css

@@ -321,7 +321,7 @@ textarea {
 
 u {
     text-decoration: underline;
-    text-underline-offset: 0.6ex;
+    text-underline-offset: 0.3ex;
     text-decoration-style: wavy;
     text-decoration-color: var(--accent);
 }

src/_includes/css/prose.css

@@ -89,3 +89,11 @@ PROSE
         margin-block-start: 0.5lh;
     }
 }
+
+.excerpt {
+    :is(h1, h2, h3, h4, h5, h6) {
+        font-size: var(--f4);
+        font-family: var(--sans);
+        margin-bottom: 0.25rlh;
+    }
+}

src/_includes/css/utils.css

@@ -840,6 +840,16 @@ BORDERS
     border-width: 1px 0 0;
 }
 
+.border-2 {
+    border-width: 2px;
+}
+
+.hover\:border-neon {
+    &:where(:hover, :focus-within) {
+        border-color: var(--neon);
+    }
+}
+
 /*
 COLOURS
 ----------------------------------------------------------------*/

src/_includes/layouts/note.njk

@@ -13,13 +13,8 @@ layout: layouts/main.njk
                     <p title="Posted from" class="muted font-sans mb0 f6 target">{{ location }}</p>
                 {% endif %}
 
-                {% if tags %}
-                    <ul role="list" class="mb0 f6">
-                        {% for tag in tags %}
-                        <li class="muted font-sans inline">#{{ tag }}</li>
-                        {% endfor %}
-                    </ul>
-                {% endif %}
+                {% import "tag-list.njk" as t %}
+                {{ t.list(tags) }}
             </div>
         </header>
 

src/_includes/layouts/page.njk

@@ -4,7 +4,7 @@ layout: layouts/main.njk
 
 <main role="main">
   <article class="Page">
-    <header>
+    <header class="mb3">
         <h1 class="title mb0 {{ "comp-" + color if color }}">{{ title }}</h1>
     	{% if subtitle %}
     		<p class="subhead mb0">{{ subtitle | md(true) | safe }}</p>

src/_includes/layouts/post.njk

@@ -24,13 +24,8 @@ layout: layouts/main.njk
         About {{ content | default("No content", true) | readingTime }} reading time
       </p>
 
-      {% if tags %}
-        <ul role="list" class="mb0 f6">
-            {% for tag in tags %}
-            <li class="muted font-sans inline">#{{ tag }}</li>
-            {% endfor %}
-        </ul>
-      {% endif %}
+      {% import "tag-list.njk" as t %}
+      {{ t.list(tags) }}
     </header>
 
     <div class="prose" itemprop="articleBody">

src/_includes/layouts/tagg.njk

@@ -0,0 +1,40 @@
+---
+layout: layouts/main.njk
+---
+
+<main role="main">
+    <article>
+        <header class="mb3">
+            <h1 class="f5 fw5 mb0"><a class="muted" href="/tags">Tags</a> <span class="faint">/</span> <u>{{ tag }}</u></h1>
+        </header>
+
+        <ul role="list">
+            {% for thing in search.pages(tag, "date=desc") %}
+            <li class="mb4 border border-2 hover:border-neon pa2 rounded-small">
+                <article>
+                    <header class="mb2">
+                        <h2 class="f4 mb1">
+                            <a  href="{{ thing.url }}">
+                                {{ thing.type | title }}:
+                                {% if thing.type == "note" %}
+                                    {{ thing.date | tdate('HumanTime') }}
+                                {% else %}
+                                    {{ thing.title }}
+                                {% endif %}
+                            </a>
+                        </h2>
+
+                        {% if thing.type != "note" %}
+                            <p class="muted f6">
+                                {{ thing.date | tdate('HumanDate') }}
+                            </p>
+                        {% endif %}
+                    </header>
+
+                    <div class="prose excerpt f5">{{ thing.content | excerpt | md | safe }}</div>
+                </article>
+            </li>
+            {% endfor %}
+        </ul>
+    </article>
+</main>

src/_includes/tag-list.njk

@@ -0,0 +1,11 @@
+{% macro list(tags) %}
+    {% if tags %}
+    <ul role="list" class="mb0 f6">
+        {% for tag in tags %}
+        <li class="font-sans inline">
+            <a href="/tags/{{ tag }}" class="muted">#{{ tag }}</a>
+        </li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+{% endmacro %}

src/all.njk

@@ -4,7 +4,7 @@ layout: layouts/page.njk
 ---
 
 <ol>
-    {% for page in search.pages("type!=post type!=note type!=book type!=recipe url!='/all/' url!='/'", "title") %}
+    {% for page in search.pages("type!=tag type!=post type!=note type!=book type!=recipe url!='/all/' url!='/'", "title") %}
     <li><a title="{{ page.description }}" href="{{ page.url }}">{{ page.title }}</a></li>
     {% endfor %}
 </ol>

src/micro.njk

@@ -24,13 +24,8 @@ menu:
                         <p title="Posted from" class="muted font-sans mb0 f6 target">{{ post.location }}</p>
                     {% endif %}
 
-                    {% if post.tags %}
-                        <ul role="list" class="mb0 f6">
-                            {% for tag in post.tags %}
-                            <li class="muted font-sans inline">#{{ tag }}</li>
-                            {% endfor %}
-                        </ul>
-                    {% endif %}
+                    {% import "tag-list.njk" as t %}
+                    {{ t.list(post.tags) }}
                 </div>
             </header>
 

src/tags.njk

@@ -0,0 +1,10 @@
+---
+title: All tags
+layout: layouts/page.njk
+---
+
+<ol>
+    {% for tag in search.values("tags") %}
+    <li><a href="/tags/{{ tag }}">{{ tag }}</a></li>
+    {% endfor %}
+</ol>

src/tags.page.ts

@@ -0,0 +1,11 @@
+export const layout = 'layouts/tagg.njk';
+
+export default function* ({ search }: Lume.Data) {
+    for (const tag of search.values<string>('tags')) {
+        yield {
+            url: `/tags/${tag}/`,
+            type: 'tag',
+            tag,
+        };
+    }
+}