Add better microformats

johanbrook · Oct 22, 2024 · 8ac6231 · 8ac6231
1 parent 35a22cc
commit 8ac6231
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 20 deletions.
diff --git a/_syndicate.ts b/_syndicate.ts
@@ -104,7 +104,7 @@ export const postStatus = async (todo: Todo, accessToken: string, dryRun = false
 
 export const persistStatusUrl = async (todo: Todo, url: string, dryRun = false) => {
     const data = {
-        statusUrl: url,
+        fediUrl: url,
     };
 
     const filePath = './src' + todo.sourcePath;

diff --git a/src/_includes/layouts/note.njk b/src/_includes/layouts/note.njk
@@ -2,23 +2,33 @@
 layout: layouts/main.njk
 ---
 <main>
-    <article class="Page Note">
+    <article class="Page Note h-entry">
        	<header>
             <h1>
-                <time title="{{ date | tdate('Detailed') }}" datetime="{{ date | tdate('Machine') }}" pubdate>{{ date | tdate('HumanTime') }}</time>
+                <a href="{{ url | url(true)}}" rel="bookmark" class="u-url u-uid dt-published no-underline" title="{{ date | tdate('Detailed') }}">
+                    <time datetime="{{ date | tdate('Machine') }}">{{ date | tdate('HumanDate') }}</time> — <time>{{ date | tdate('Time') }}</time>
+                </a>
             </h1>
 
             <div class="flex justify-between items-baseline gap">
-                {% if location %}
-                    <p title="Posted from" class="detail mb0 target">{{ location }}</p>
-                {% endif %}
+                <p class="detail mb0 sep-list">
+                    {% if location %}
+                        <span class="p-location">{{ location }}</span>
+                    {% endif %}
+
+                    {% if fediUrl %}
+                        Also on <a class="muted u-syndication" rel="syndication" href="{{ fediUrl }}">Fediverse ⤤</a>
+                    {% endif %}
+                </p>
 
                 {% import "tag-list.njk" as t %}
                 {{ t.list(tags) }}
             </div>
+
+            <a rel="author" class="visually-hidden p-author h-card" href="{{ meta.site }}">{{ meta.author }}</a>
         </header>
 
-        <div class="prose">
+        <div class="prose e-content">
             {{ content | md | safe }}
         </div>
 

diff --git a/src/_includes/layouts/post.njk b/src/_includes/layouts/post.njk
@@ -2,16 +2,16 @@
 layout: layouts/main.njk
 ---
 <main>
-  <article class="Page Post" itemscope itemtype="http://schema.org/BlogPosting">
+  <article class="Page Post h-entry">
     <header>
-      <h1 itemprop="name" class="{% if link %}fw6 pt3{% else %}title{% endif %}">{{ title }}</h1>
+      <h1 class="p-name {% if link %}fw6 pt3{% else %}title{% endif %}">{{ title }}</h1>
 
       <p class="mb1 fw5">
-          <time class="text-color-contrast" datetime="{{ date | tdate('Machine') }}" title="{{ date | tdate('Detailed') }}" itemprop="datePublished" pubdate>
+          <time class="text-color-contrast dt-published" datetime="{{ date | tdate('Machine') }}" title="{{ date | tdate('Detailed') }}" pubdate>
             {{ date | tdate('HumanDate') }}
           </time>
           {% if updated %}
-            <time title="Updated at {{ updated | tdate('Detailed', updatedTimezone) }}" class="muted normal ml-1" datetime="{{ updated | tdate('Machine', updatedTimezone) }}" itemprop="dateModified">
+            <time title="Updated at {{ updated | tdate('Detailed', updatedTimezone) }}" class="dt-updated muted normal ml-1" datetime="{{ updated | tdate('Machine', updatedTimezone) }}">
                 (updated {{ updated | tdate('HumanDate', updatedTimezone) }})
             </time>
           {% endif %}
@@ -28,13 +28,17 @@ layout: layouts/main.njk
       {{ t.list(tags) }}
     </header>
 
-    <div class="prose" itemprop="articleBody">
+    <div class="prose e-content">
       {% if link %}
         <p class="f3 mb4">
-          <a class="btn" title="{{ link }}" href="{{ link }}">Follow link to {{ link | hostname }} →</a>
+          <a class="btn u-bookmark-of" title="{{ link }}" href="{{ link }}">Follow link to {{ link | hostname }} →</a>
         </p>
       {% endif %}
       {{ content | safe }}
     </div>
+
+    <footer>
+        <a href="{{ url | url(true) }}" class="visually-hidden u-url u-uid">Permalink</a>
+    </footer>
   </article>
 </main>
diff --git a/src/_includes/tag-list.njk b/src/_includes/tag-list.njk
@@ -2,8 +2,8 @@
     {% if tags %}
     <ul role="list" class="f6">
         {% for tag in tags %}
-        <li class="font-sans inline">
-            <a href="/tags/{{ tag }}" class="muted">#{{ tag }}</a>
+        <li class="font-sans inline tag-list">
+            <a href="/tags/{{ tag }}" rel="tag" class="muted p-category">{{ tag }}</a>
         </li>
         {% endfor %}
     </ul>

diff --git a/src/_lume-plugins/temporal-date.ts b/src/_lume-plugins/temporal-date.ts
@@ -42,6 +42,8 @@ export enum DateTimeFormat {
     Machine = 'Machine',
     /** 2024-02-19 */
     Date = 'Date',
+    /** 13:39 */
+    Time = 'Time',
     /** February 19, 2024 */
     HumanDate = 'HumanDate',
     /** February 19, 2024 — 13:39 */
@@ -115,6 +117,9 @@ const formattedOf = (
         case DateTimeFormat.Date: {
             return date.toPlainDate().toString();
         }
+        case DateTimeFormat.Time: {
+            return date.toPlainTime().toString().substring(0, 5);
+        }
         default:
             throw new Error(`${format} not implemented!`);
     }

diff --git a/src/micro.njk b/src/micro.njk
@@ -16,14 +16,20 @@ menu:
         <article class="Note">
            	<header class="mb2">
                 <h1>
-                    <a href="{{ post.url }}" title="Permalink ({{ post.date | tdate('Detailed', post.timezone) }})" class="no-underline u-url u-uid">
-                        <time class="dt-published" datetime="{{ post.date | tdate('Machine', post.timezone) }}" pubdate>{{ post.date | tdate('HumanTime', post.timezone) }}</time> <span>#</span>
+                    <a href="{{ post.url | url(true)}}" rel="bookmark" class="u-url u-uid dt-published no-underline" title="{{ post.date | tdate('Detailed') }}">
+                        <time datetime="{{ post.date | tdate('Machine') }}">{{ post.date | tdate('HumanDate') }}</time> — <time>{{ post.date | tdate('Time') }}</time>
                     </a>
                 </h1>
                 <div class="flex justify-between items-baseline gap">
-                    {% if post.location %}
-                        <p title="Posted from" class="detail mb0 target p-location">{{ post.location }}</p>
-                    {% endif %}
+                    <p class="detail mb0 sep-list">
+                        {% if post.location %}
+                            <span class="p-location">{{ post.location }}</span>
+                        {% endif %}
+
+                        {% if post.fediUrl %}
+                            Also on <a class="muted u-syndication" rel="syndication" href="{{ post.fediUrl }}">Fediverse ⤤</a>
+                        {% endif %}
+                    </p>
 
                     {{ t.list(post.tags) }}
                 </div>