Add svg icons along tags and publish dates

zummenix · Dec 12, 2024 · d785dab · d785dab
1 parent c2cd938
commit d785dab
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 deletions.
diff --git a/sass/style.scss b/sass/style.scss
@@ -9,6 +9,15 @@ body {
   padding: 0;
 }
 
+.svg-icon {
+  display: inline-flex;
+  align-self: center;
+  height: 1em;
+  width: 1em;
+  top: .125em;
+  position: relative;
+}
+
 body {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 14pt;

diff --git a/templates/macros/tools.html b/templates/macros/tools.html
@@ -1,19 +1,21 @@
 {% macro list_posts(pages, with_years) %}
 {% for page in pages %}
 <p>
-  {% if with_years %}
-  <span class="date">{{ page.date | date(format="%B %e, %Y") }}</span>
-  {% else %}
-  <span class="date">{{ page.date | date(format="%B %e") }}</span>
-  {% endif %}
-  <span class="tags-list">|
+  <a href="{{ page.permalink | safe }}" class="post-link">{{ page.title }}</a>
+  <br />
+  <span class="tags-list">
+    {{ macros::tag_icon() }}
     {% for tag in page.taxonomies["tags"] %}
-    <a href="/tags/{{ tag }}">{{ tag }}</a>
+    {{ macros::tag(name=tag) }}
     {% if not loop.last %}·{% endif %}
     {% endfor %}
   </span>
-  <br>
-  <a href="{{ page.permalink | safe }}" class="post-link">{{ page.title }}</a>
+  <br />
+  {% if with_years %}
+  <span class="date">{{ macros::calendar_icon() }}{{ page.date | date(format="%B %e, %Y") }}</span>
+  {% else %}
+  <span class="date">{{ macros::calendar_icon() }}{{ page.date | date(format="%B %e") }}</span>
+  {% endif %}
 </p>
 {% endfor %}
 {% endmacro %}
@@ -23,4 +25,28 @@
   <li><a href="/">Home</a></li>
   <li><a href="/posts">All Posts</a></li>
 </ul>
-{% endmacro%}
+{% endmacro%}
+
+{% macro tag(name) %}
+<a href="/tags/{{ name }}">{{ name }}</a>
+{% endmacro %}
+
+{% macro tag_icon() %}
+<svg class="svg-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none">
+  <path
+    d="M122.7,25.9,42,42,25.9,122.7a8,8,0,0,0,2.2,7.2L132.5,234.3a7.9,7.9,0,0,0,11.3,0l90.5-90.5a7.9,7.9,0,0,0,0-11.3L129.9,28.1A8,8,0,0,0,122.7,25.9Z"
+    stroke-width="4%" />
+  <circle cx="84" cy="84" r="12" fill="currentColor" />
+</svg>
+{% endmacro %}
+
+{% macro calendar_icon() %}
+<svg class="svg-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" fill="none"
+  stroke-width="4%">
+  <rect x="18" y="40" width="220" height="44" />
+  <rect x="18" y="110" width="220" height="128" />
+  <line x1="72" y1="21" x2="72" y2="60" />
+  <line x1="183" y1="21" x2="183" y2="60" />
+  <circle cx="72" cy="150" r="12" fill="currentColor" stroke="none" />
+</svg>
+{% endmacro %}
diff --git a/templates/post.html b/templates/post.html
@@ -10,15 +10,15 @@
 {{ macros::navbar() }}
 <h1>{{ page.title }}</h1>
 <p>
-  <span class="date">Published on {{ page.date | date(format="%B %e, %Y") }}</span>
-  <br>
   <span class="tags-list">
-    Tags:
+    {{ macros::tag_icon() }}
     {% for tag in page.taxonomies["tags"] %}
-    <a href="/tags/{{ tag }}">{{ tag }}</a>
+    {{ macros::tag(name=tag) }}
     {% if not loop.last %}·{% endif %}
     {% endfor %}
   </span>
+  <br />
+  <span class="date">{{ macros::calendar_icon() }}{{ page.date | date(format="%B %e, %Y") }}</span>
 </p>
 {{ page.content | safe }}
 {% endblock %}