Add icons to posts

blog/content/edition-3/posts/01-freestanding-binary/index.md

@@ -6,6 +6,10 @@ date = 0000-01-01
 
 [extra]
 chapter = "Bare Bones"
+icon = '''<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-file-binary" viewBox="0 0 16 16">
+  <path d="M5.526 13.09c.976 0 1.524-.79 1.524-2.205 0-1.412-.548-2.203-1.524-2.203-.978 0-1.526.79-1.526 2.203 0 1.415.548 2.206 1.526 2.206zm-.832-2.205c0-1.05.29-1.612.832-1.612.358 0 .607.247.733.721L4.7 11.137a6.749 6.749 0 0 1-.006-.252zm.832 1.614c-.36 0-.606-.246-.732-.718l1.556-1.145c.003.079.005.164.005.249 0 1.052-.29 1.614-.829 1.614zm5.329.501v-.595H9.73V8.772h-.69l-1.19.786v.688L8.986 9.5h.05v2.906h-1.18V13h3z"/>
+  <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H4zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
+</svg>'''
 +++
 
 The first step in creating our own operating system kernel is to create a Rust executable that does not link the standard library. This makes it possible to run Rust code on the [bare metal] without an underlying operating system.

blog/content/edition-3/posts/02-minimal-kernel/index.md

@@ -6,6 +6,9 @@ date = 0000-01-01
 
 [extra]
 chapter = "Bare Bones"
+icon = '''<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-cpu" viewBox="0 0 16 16">
+  <path d="M5 0a.5.5 0 0 1 .5.5V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2h1V.5a.5.5 0 0 1 1 0V2A2.5 2.5 0 0 1 14 4.5h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14v1h1.5a.5.5 0 0 1 0 1H14a2.5 2.5 0 0 1-2.5 2.5v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14h-1v1.5a.5.5 0 0 1-1 0V14A2.5 2.5 0 0 1 2 11.5H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2v-1H.5a.5.5 0 0 1 0-1H2A2.5 2.5 0 0 1 4.5 2V.5A.5.5 0 0 1 5 0zm-.5 3A1.5 1.5 0 0 0 3 4.5v7A1.5 1.5 0 0 0 4.5 13h7a1.5 1.5 0 0 0 1.5-1.5v-7A1.5 1.5 0 0 0 11.5 3h-7zM5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3zM6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5h-3z"/>
+</svg>'''
 +++
 
 In this post we create a minimal 64-bit Rust kernel for the x86 architecture. We build upon the [freestanding Rust binary] from the previous post to create a bootable disk image, that prints something to the screen.

blog/sass/css/edition-3/main.scss

@@ -419,14 +419,39 @@ tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
 
 /* Blog post or page title */
 
-.page-title, .post-title, .post-title a {
+.page-title, .post-list-title, .post-list-title a {
     color: var(--post-title-color);
 }
 
-.page-title, .post-title {
+.page-title, .post-list-title {
     margin-top: 0;
 }
 
+.post-list-icon {
+    float: left;
+    margin-top: -2.1rem;
+    margin-left: -3rem;
+    width: 2rem;
+}
+
+.post-title {
+    margin-bottom: 0.5rem;
+}
+
+.post-title h1 {
+    display: inline;
+}
+
+.post-icon {
+    display: inline-block;
+    padding-top: 0rem;
+    margin-left: 1rem;
+    margin-top: -2rem;
+    margin-bottom: -2rem;
+    width: 3rem;
+    vertical-align: -1rem;
+}
+
 /* Meta data line below post title */
 
 .post-date {
@@ -586,7 +611,11 @@ main img {
 }
 
 .posts ul {
-    padding-left: 2em;
+    padding-left: 3rem;
+}
+
+.posts li {
+    list-style-type: none;
 }
 
 .posts.neutral {

blog/templates/edition-3/page.html

@@ -34,7 +34,12 @@
 
 {% block main %}
     <div class="{% if page.extra.rtl %}right-to-left{% endif %}">
+    <div class="post-title">
         <h1>{{ page.title }}</h1>
+        <span class="post-icon">
+            {%- if page.extra.icon -%}{{page.extra.icon | safe}}{%- endif -%}
+        </span>
+    </div>
     <time datetime="{{ page.date | date(format="%Y-%m-%d") }}" class="post-date">
         {{ page.date | date(format="%b %d, %Y") }}
         {% if page.extra.updated %} (updated on {{ page.extra.updated | date(format="%b %d, %Y") }}) {% endif %}

blog/templates/macros.html

@@ -30,7 +30,10 @@
             {%- set post = page -%}
             {%- set not_translated = true -%}
         {%- endif -%}
-        <h3 class="post-title"><a href="{{ post.path | safe }}">{{ post.title }}</a></h3>
+        <h3 class="post-list-title"><a href="{{ post.path | safe }}">{{ post.title }}</a></h3>
+        <span class="post-list-icon">
+            {%- if post.extra.icon -%}{{post.extra.icon | safe}}{%- endif -%}
+        </span>
         <div class="post-summary">
             {{ post.summary | safe }}
             <a class="read-more" href="{{ post.path | safe }}"><em>read&nbsp;more&nbsp;»</em></a>