Fix issues and add h-entry microformat

Author: andreubotella

_components/postDetails.njk

@@ -1,7 +1,7 @@
 <div class="post-details">
-  <p>By Andreu Botella</p>
+  <p>By <span class="p-author">Andreu Botella</span></p>
   {% if published %}
-    <p><time datetime="{{ date.toISOString() }}">{{ date | date("HUMAN_DATE") }}</time></p>
+    <p><time class="dt-published" datetime="{{ date.toISOString() }}">{{ date | date("HUMAN_DATE") }}</time></p>
   {% else %}
     <p>Not yet published</p>
   {% endif %}
@@ -12,7 +12,7 @@
     <p>Tags:</p>
     <ul>
       {% for tag in tags %}
-        <li><a href="/blog/tag/{{ tag | slugify | urlencode }}/">{{ tag }}</a></li>
+        <li><a class="p-category" href="/blog/tag/{{ tag | slugify | urlencode }}/">{{ tag }}</a></li>
       {% endfor %}
     </ul>
   {% else %}

_includes/blog-archive.njk

@@ -26,7 +26,7 @@ additional_css:
 {% for post in results %}
   <article>
     <header>
-      <h1><a href="{{ post.data.url }}">{{ post.data.title | md(true) | safe }}</a></h1>
+      <h2><a href="{{ post.data.url }}">{{ post.data.title | md(true) | safe }}</a></h2>
       {{ comp.postDetails(post.data) | safe }}
     </header>
     <div class="summary">

_includes/blog-post.njk

@@ -3,14 +3,16 @@ layout: layout.njk
 additional_css:
   - /styles/blog.css
 ---
-<main>
+<main class="h-entry">
   <header>
-    <h1>{{ title | md(true) | safe }}</h1>
+    <h1 class="p-name">{{ title | md(true) | safe }}</h1>
     {# We're including the component with Nunjucks rather than using Lume
       # components because we need it to pick up the local variables in this
       # template (which are the post's data). #}
     {% include "../_components/postDetails.njk" %}
   </header>
 
-  {{ content | safe }}
+  <div class="e-content">
+    {{ content | safe }}
+  </div>
 </main>

_includes/home-layout.njk

@@ -8,33 +8,33 @@ additional_css:
 </main>
 
 <nav id="socials">
-  <h1>Contact</h1>
+  <h2>Contact</h2>
 
   <dl>
     <dt id="social-mastodon" title="Mastodon">Mastodon:</dd>
-    <dd><a target="_new" rel="me" href="https://mastodon.andreubotella.com/@andreu">@[email protected]</a></dd>
+    <dd><a target="_blank" rel="me" href="https://mastodon.andreubotella.com/@andreu">@[email protected]</a></dd>
     <dt id="social-github" title="GitHub">GitHub:</dt>
-    <dd><a target="_new" href="https://github.com/andreubotella">andreubotella</a></dd>
+    <dd><a target="_blank" href="https://github.com/andreubotella">andreubotella</a></dd>
     <dt id="social-matrix" title="Matrix">Matrix:</dt>
     <dd>
-      <a target="_new" href="https://matrix.to/#/@abotella:igalia.com">@abotella:igalia.com</a>
+      <a target="_blank" href="https://matrix.to/#/@abotella:igalia.com">@abotella:igalia.com</a>
     </dd>
     <dt id="social-linkedin" title="LinkedIn">LinkedIn:</dt>
     <dd>
-      <a target="_new" href="https://www.linkedin.com/in/andreu-botella-botella">Andreu Botella</a>
+      <a target="_blank" href="https://www.linkedin.com/in/andreu-botella-botella">Andreu Botella</a>
     </dd>
     <dt id="social-email" title="Email">Email:</dt>
     <dd>
-      <a target="_new" href="mailto:andreu&#x040;andreubotella.com">andreu&#x040;andreubotella.com</a>
+      <a target="_blank" href="mailto:andreu&#x040;andreubotella.com">andreu&#x040;andreubotella.com</a>
       (personal)
     </dd>
     <dd>
-      <a target="_new" href="mailto:abotella&#x040;igalia.com">abotella&#x040;igalia.com</a>
+      <a target="_blank" href="mailto:abotella&#x040;igalia.com">abotella&#x040;igalia.com</a>
       (work)
     </dd>
     <dt id="social-pubkey" title="Public key">Public key:</dt>
     <dd>
-      <a target="_new" href="https://keys.mailvelope.com/pks/lookup?op=get&search=0x3CC8BD9D9311F58F87979B565D4FFE9260FAA4E9">
+      <a target="_blank" href="https://keys.mailvelope.com/pks/lookup?op=get&search=0x3CC8BD9D9311F58F87979B565D4FFE9260FAA4E9">
         <code>3CC8 BD9D 9311 F58F 8797 9B56 5D4F FE92 60FA A4E9</code>
       </a>
     </dd>

_includes/talks-layout.njk

@@ -11,7 +11,7 @@ additional_css:
 
   {% for talk in talks %}
   <section class="talk" id="{{ talk.name | md(true) | striptags | slugify }}">
-    <h1>{{ talk.name | md(true) | safe }}</h1>
+    <h2>{{ talk.name | md(true) | safe }}</h2>
 
     {% if talk.coSpeakers %}
     <p><em>(given together with
@@ -22,7 +22,7 @@ additional_css:
           ,
         {%- endif %}
         {% if cospeaker.url %}
-        <a target="_new" href="{{ cospeaker.url }}">{{ cospeaker.name }}</a>
+        <a target="_blank" href="{{ cospeaker.url }}">{{ cospeaker.name }}</a>
         {%- else %}
         {{ cospeaker.name }}
         {%- endif %}
@@ -39,7 +39,7 @@ additional_css:
       {% else %}
       <dt>Part of:</dt>
       {% endif %}
-      <dd><a target="_new" href="{{ talk.event.url }}">{{ talk.event.name }}</a></dd>
+      <dd><a target="_blank" href="{{ talk.event.url }}">{{ talk.event.name }}</a></dd>
       <dt>Date:</dt>
       {% if (talk.date | string) === talk.date %}
       <dd>{{ talk.date }}</dd>
@@ -52,12 +52,12 @@ additional_css:
       <dd>{{ talk.length }}</dd>
       {% if talk.url %}
       <dt>Link:</dt>
-      <dd><a target="_new" href={{ talk.url }}>{{ talk.url }}</a></dd>
+      <dd><a target="_blank" href={{ talk.url }}>{{ talk.url }}</a></dd>
       {% endif %}
       {% if (talk.type != "interview") or talk.slides %}
       <dt>Slides:</dt>
       {% if talk.slides %}
-      <dd><a target="_new" href="{{ talk.slides }}">{{ talk.slides }}</a></dd>
+      <dd><a target="_blank" href="{{ talk.slides }}">{{ talk.slides }}</a></dd>
       {% else %}
       <dd>TODO</dd>
       {% endif %}
@@ -67,7 +67,7 @@ additional_css:
     {% if talk.youtubeId %}
     <iframe class="youtube"
       src="https://www.youtube-nocookie.com/embed/{{ talk.youtubeId }}"
-      title="YouTube video player: {{ talk.name | md(true) | striptags(true) }}" frameborder="0"
+      title="YouTube video player: {{ talk.name | md(true) | striptags(true) }}"
       allow="picture-in-picture; web-share" allowfullscreen></iframe>
     {% else %}
     <p>(Youtube video pending)</p>

static/styles/home-page.css

@@ -25,7 +25,7 @@ body {
 }
 
 #container main,
-#socials h1 {
+#socials h2 {
   text-align: center;
 }
 
@@ -38,6 +38,10 @@ body {
   background: radial-gradient(farthest-side at bottom right, #fff, 80%, #fff0);
 }
 
+#socials h2 {
+  font-size: 1.75rem;
+}
+
 #socials > dl {
   display: grid;
   grid-template-columns: auto 1fr;

static/styles/style.css

@@ -195,6 +195,7 @@ code {
 iframe.youtube {
   display: block;
   margin: auto;
+  border: none;
   width: 75%;
   max-width: 560px;
   aspect-ratio: 16/9;