[feature] add microformat support (#3848)

Related: #2959

Signed-off-by: Luca Matei Pintilie <luca@lucamatei.com>

web/template/profile.tmpl

@@ -106,7 +106,7 @@
             />
             {{- end }}
             <img
-                class="avatar"
+                class="avatar u-photo"
                 src="{{- .account.Avatar -}}"
                 alt="{{- template "avatarAlt" . -}}"
                 title="{{- template "avatarAlt" . -}}"
@@ -120,7 +120,7 @@
 {{- end -}}
 
 {{- with . }}
-<main class="profile">
+<main class="profile h-card">
     <h2 class="sr-only">Profile for {{ .account.Username -}}</h2>
     <section class="profile-header" role="region" aria-label="Basic info">
         {{- if .account.Moved }}
@@ -148,7 +148,7 @@
             {{- end }}
             <dl class="namerole">
                 <dt class="sr-only">Display name</dt>
-                <dd class="displayname text-cutoff">
+                <dd class="displayname text-cutoff p-name">
                     {{- if .account.DisplayName -}}
                     {{- emojify .account.Emojis (escape .account.DisplayName) -}}
                     {{- else -}}
@@ -171,7 +171,7 @@
                     </dd>
                     {{- end }}
                     <dt class="sr-only">Username</dt>
-                    <dd class="username text-cutoff">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
+                    <dd class="username text-cutoff p-nickname">@{{- .account.Username -}}@{{- .instance.AccountDomain -}}</dd>
                 </div>
                 {{- if .account.Roles }}
                 <dt class="sr-only">Role</dt>
@@ -180,6 +180,7 @@
                 {{- end }}
                 {{- end }}
             </dl>
+            <a class="u-url u-uid" rel="me" href="/@{{- .account.Username -}}" class="hidden"></a>
         </div>
     </section>
     <div class="column-split">
@@ -191,7 +192,7 @@
             {{- include "profile_fields.tmpl" . | indent 3 }}
             {{- end }}
             <h4 class="sr-only">Bio</h4>
-            <div class="bio">
+            <div class="bio p-note">
                 {{- if .account.Note }}
                 {{ emojify .account.Emojis (noescape .account.Note) }}
                 {{- else }}
@@ -212,15 +213,15 @@
         </section>
         <div class="statuses-wrapper" role="region" aria-label="Posts by {{ .account.Username -}}">
             {{- if .pinned_statuses }}
-            <section class="pinned statuses" aria-labelledby="pinned">
+            <section class="pinned statuses h-feed" aria-labelledby="pinned">
                 <div class="col-header">
-                    <h3 id="pinned">Pinned posts</h3>
+                    <h3 class="p-name" id="pinned">Pinned posts</h3>
                     <a href="#recent">jump to recent</a>
                 </div>
                 <div class="thread">
                     {{- range .pinned_statuses }}
                     <article
-                        class="status expanded"
+                        class="status expanded h-entry"
                         {{- includeAttr "status_attributes.tmpl" . | indentAttr 6  }}
                     >
                         {{- include "status.tmpl" . | indent 6 }}
@@ -229,9 +230,9 @@
                 </div>
             </section>
             {{- end }}
-            <section class="recent statuses" aria-labelledby="recent">
+            <section class="recent statuses h-feed" aria-labelledby="recent">
                 <div class="col-header">
-                    <h3 id="recent" tabindex="-1">Recent posts</h3>
+                    <h3 id="recent p-name" tabindex="-1">Recent posts</h3>
                     {{- if .rssFeed }}
                     <a href="{{- .rssFeed -}}" class="rss-icon" aria-label="RSS feed">
                         <i class="fa fa-rss-square" aria-hidden="true"></i>
@@ -244,7 +245,7 @@
                     {{- else }}
                     {{- range .statuses }}
                     <article
-                        class="status expanded"
+                        class="status expanded h-entry"
                         {{- includeAttr "status_attributes.tmpl" . | indentAttr 6  }}
                     >
                         {{- include "status.tmpl" . | indent 6 }}

web/template/status.tmpl

@@ -19,7 +19,7 @@
 
 {{- define "statusContent" -}}
 {{- with .Content }}
-<div class="content" lang="{{- $.LanguageTag.TagStr -}}">
+<div class="content e-content" lang="{{- $.LanguageTag.TagStr -}}">
     {{ noescape . | emojify $.Emojis }}
 </div>
 {{- end }}
@@ -38,7 +38,7 @@
     {{- if .SpoilerText }}
     <details class="text-spoiler">
         <summary>
-            <span class="spoiler-text" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
+            <span class="spoiler-text p-summary" lang="{{- .LanguageTag.TagStr -}}">{{- emojify .Emojis (escape .SpoilerText) -}}</span>
             <span class="button" role="button" tabindex="0">Toggle visibility</span>
         </summary>
         <div class="text">
@@ -70,7 +70,7 @@
 {{- if .Local }}
 <a
     href="{{- .URL -}}"
-    class="status-link"
+    class="status-link u-url"
     data-nosnippet
     title="Open thread at this post"
 >
@@ -79,7 +79,7 @@
 {{- else }}
 <a
     href="{{- .URL -}}"
-    class="status-link"
+    class="status-link u-url"
     data-nosnippet
     rel="nofollow noreferrer noopener" target="_blank"
     title="Open remote post (opens in a new window)"

web/template/status_attributes.tmpl

@@ -52,4 +52,5 @@
 id="{{- .ID -}}{{- if .Pinned -}}-pinned{{- end -}}"
 role="region"
 aria-label="{{- template "ariaLabel" . -}}"
+class="status expanded h-entry"
 {{- end }}

web/template/status_header.tmpl

@@ -18,18 +18,20 @@
 */ -}}
 
 {{- with .Account }}
-<address>
+<address class="p-author h-card">
     {{- if $.Local }}
     <a
         href="{{- .URL -}}"
         rel="author"
         title="Open profile"
+        class="u-url u-uid"
     >
     {{- else }}
     <a
         href="{{- .URL -}}"
         rel="author nofollow noreferrer noopener" target="_blank"
         title="Open remote profile (opens in a new window)"
+        class="u-url u-uid"
     >
     {{- end }}
         <picture
@@ -47,10 +49,11 @@
                 src="{{- .Avatar -}}"
                 alt="Avatar for {{ .Username -}}"
                 title="Avatar for {{ .Username -}}"
+                class="u-photo"
             >
         </picture>
         <div class="author-strap">
-            <span class="displayname text-cutoff">
+            <span class="displayname text-cutoff p-name">
                 {{- if .DisplayName -}}
                 {{- emojify .Emojis (escape .DisplayName) -}}
                 {{- else -}}
@@ -58,7 +61,7 @@
                 {{- end -}}
             </span>
             <span class="sr-only">,</span>
-            <span class="username text-cutoff">@{{- .Acct -}}</span>
+            <span class="username text-cutoff p-nickname">@{{- .Acct -}}</span>
         </div>
         <span class="sr-only">(open profile)</span>
     </a>

web/template/status_info.tmpl

@@ -23,14 +23,14 @@
         <div class="stats-item published-at text-cutoff">
             <dt class="sr-only">Published</dt>
             <dd>
-                <time datetime="{{- .CreatedAt -}}">{{- .CreatedAt -}}</time>
+                <time class="dt-published" datetime="{{- .CreatedAt -}}">{{- .CreatedAt -}}</time>
             </dd>
         </div>
         {{- if .EditedAt -}}
         <div class="stats-item edited-at text-cutoff">
             <dt class="sr-only">Edited</dt>
             <dd>
-                (edited <time datetime="{{- .EditedAt -}}">{{- .EditedAt -}}</time>)
+                (edited <time class="dt-updated" datetime="{{- .EditedAt -}}">{{- .EditedAt -}}</time>)
             </dd>
         </div>
         {{ end }}