Added more microformats to toots layout

assets/css/style.css

@@ -329,9 +329,9 @@ footer {
   margin-bottom: 0;
 }
 .toot-avatar { display: inline-block; }
-.toot .e-content img { border: 2px solid black; }
+.toot img { border: 2px solid black; }
 
-.toot .e-content p:first-of-type {
+.toot .date {
   display: inline-block;
 }
 .toot-photos {

layouts/toots/list.html

@@ -1,41 +1,48 @@
 {{ define "main"}}
   {{ partial "header.html" . }}
   <main>
-    <style>main { text-align: left; }</style> 
+    <style>main { text-align: left; }</style>
     {{ partial "search.html" . }}
     <p>
-        This is an experimental page showing my toots from Mastodon. 
+        This is an experimental page showing my toots from Mastodon.
-        Currently, this does not support boosts and it does not automatically refresh. 
+        Currently, this does not support boosts and it does not automatically refresh.
-        Feel free to check out 
+        Feel free to check out
         <a href="https://fosstodon.org/@brozek">my profile at Fosstodon</a>
     </p>
     {{ $listPageDateFormat := .Site.Params.listPageDateFormat | default "January, 2006"}}
     {{ range $index, $value := .Pages.GroupByDate $listPageDateFormat }}
     {{ range .Pages }}
       <article class="toot h-entry">
-        <div class="e-content">
+        <div rel="author" class="h-card p-author toot-avatar">
-                <img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
+          <img class="u-photo" width=50 src="{{ .Params.account.avatar }}"/>
-            <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+          <span style="display: none;">{{ .Params.account.display_name }}</span>
-            {{ .Content | safeHTML }}
-            {{ if gt (len .Params.media_attachments) 0 }}
-            <div class="toot-photos">
-            {{ range .Params.media_attachments}}
-                {{ if eq .type "image" }}
-                <img src="{{ .preview_url }}" alt="{{ .description }}"/>
-                {{ end }}
-            {{ end }}
-            </div>
-            {{ end }}
         </div>
+        <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+        <div class="e-content p-name">
+          {{ .Content | safeHTML }}
+          {{ if gt (len .Params.media_attachments) 0 }}
+          <div class="toot-photos">
+          {{ range .Params.media_attachments}}
+            {{ if eq .type "image" }}
+            <img src="{{ .preview_url }}" alt="{{ .description }}"/>
+            {{ end }}
+          {{ end }}
+          </div>
+          {{ end }}
+        </div>
+        <a class="u-url" style="display: none">{{ .Permalink }}</a>
+        {{ range .Params.tags }}
+        <a class="p-category" href="{{ .url }}" style="display: none;">{{ .name }}</a>
+        {{ end }}
         <div class="toot-social">
             <span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
             <span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
             <span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
-            <span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
+            <span>| Source: <a class="u-syndication" href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
         </div>
-    </article>
+      </article>
-      {{ end }}
+    {{ end }}
-      {{ end }}
+    {{ end }}
   </main>
   {{ partial "footer.html" . }}
 {{ end }}

layouts/toots/single.html

@@ -4,28 +4,35 @@
 {{ .Scratch.Set "customTitleHeaderLink" "/toots" }}
 {{ partial "header.html" . }}
 <main>
-  <article class="toot h-entry">
+    <article class="toot h-entry">
-      <div class="e-content">
+        <div rel="author" class="h-card p-author toot-avatar">
-              <img class="toot-avatar" width=50 src="{{ .Params.account.avatar }}"/>
+          <img class="u-photo" width=50 src="{{ .Params.account.avatar }}"/>
-          <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+          <span style="display: none;">{{ .Params.account.display_name }}</span>
+        </div>
+        <p class="date">Tooted on <time class="dt-published" datetime='{{ .Date }}'>{{ dateFormat "January 2, 2006 15:04" (time .Date) }}</time></p>
+        <div class="e-content p-name">
           {{ .Content | safeHTML }}
           {{ if gt (len .Params.media_attachments) 0 }}
           <div class="toot-photos">
           {{ range .Params.media_attachments}}
-              {{ if eq .type "image" }}
+            {{ if eq .type "image" }}
-              <img src="{{ .preview_url }}" alt="{{ .description }}"/>
+            <img src="{{ .preview_url }}" alt="{{ .description }}"/>
-              {{ end }}
+            {{ end }}
           {{ end }}
           </div>
           {{ end }}
-      </div>
+        </div>
-      <div class="toot-social">
+        <a class="u-url" style="display: none">{{ .Permalink }}</a>
-          <span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
+        {{ range .Params.tags }}
-          <span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
+        <a class="p-category" href="{{ .url }}" style="display: none;">{{ .name }}</a>
-          <span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
+        {{ end }}
-          <span>| Source: <a href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
+        <div class="toot-social">
-      </div>
+            <span><i class='fas fa-share'></i> {{ .Params.replies_count }} </span>
-  </article>
+            <span><i class='fas fa-retweet'></i> {{ .Params.reblogs_count }} </span>
+            <span><i class='fas fa-star'></i> {{ .Params.favourites_count }} </span>
+            <span>| Source: <a class="u-syndication" href="{{ .Params.syndication }}">{{ .Params.syndication }}</a></span>
+        </div>
+    </article>
 </main>
 {{ partial "footer.html" . }}
 {{ end }}