Add microformat tags (#341)

Close #229 
Adding `<div>` might have broken the layout in some places. I've tried to fix it, tell me if I missed it somewhere

src/template_utils.rs

@@ -45,12 +45,11 @@ impl Size {
 pub fn avatar(conn: &Connection, user: &User, size: Size, pad: bool, catalog: &Catalog) -> Html<String> {
     let name = escape(&user.name(conn)).to_string();
     Html(format!(
-        r#"<div
+        r#"<div class="avatar {size} {padded}"
-        class="avatar {size} {padded}"
         style="background-image: url('{url}');"
         title="{title}"
-        aria-label="{title}"
+        aria-label="{title}"></div>
-        ></div>"#,
+        <img class="hidden u-photo" src="{url}"/>"#,
         size = size.as_str(),
         padded = if pad { "padded" } else { "" },
         url = user.avatar_url(conn),

static/css/main.css

@@ -51,6 +51,10 @@
  	margin: 3em 0px;
  }
 
+ .hidden {
+	display: none;
+ }
+
 /*
  * == Header ==
  */
@@ -155,10 +159,14 @@ header nav a.title p {
  * == Main ==
  */
 
- body > main > * {
+ body > main > *, .h-feed > * {
  	padding: 0 20%;
  }
 
+ body > main > .h-entry, .h-feed {
+	padding: 0;
+ }
+
  main h1 {
  	font-family: "Route159";
  	font-size: 2.5em;

templates/blogs/details.rs.html

@@ -10,12 +10,21 @@
 @:base(ctx, blog.title.as_ref(), {}, {
     <a href="@uri!(blogs::details: name = &fqn)">@blog.title</a>
 }, {
-    <h1>@blog.title <small>~@fqn</small></h1>
+<div class="hidden">
+    @for author in authors {
+        <div class="h-card">
+            <span class="p-name">@author.name(ctx.0)</span>
+            <a class="u-url" href="@author.ap_url"></a>
+	</div>
+    }
+</div>
+<div class="h-feed">
+    <h1><span class="p-name">@blog.title</span> <small>~@fqn</small></h1>
     <p>@blog.summary</p>
     <p>
         @i18n!(ctx.1, "One author in this blog: ", "{0} authors in this blog: ", authors.len())
         @for author in authors {
-            <a class="author" href="@uri!(user::details: name = author.get_fqn(ctx.0))">@author.name(ctx.0)</a>
+            <a class="author p-author" href="@uri!(user::details: name = author.get_fqn(ctx.0))">@author.name(ctx.0)</a>
         }
     </p>
     <p>
@@ -40,6 +49,7 @@
         </div>
         @paginate(ctx.1, page, n_pages)
     </section>
+</div>
     @if is_author {
         <h2>@i18n!(ctx.1, "Danger zone")</h2>
         <p>@i18n!(ctx.1, "Be very careful, any action taken here can't be cancelled.")</p>

templates/instance/federated.rs.html

@@ -6,7 +6,8 @@
 @(ctx: BaseContext, articles: Vec<Post>, page: i32, n_pages: i32)
 
 @:base(ctx, "All the articles of the Fediverse", {}, {}, {
-  <h1>@i18n!(ctx.1, "All the articles of the Fediverse")</h1>
+<div class="h-feed">
+  <h1 "p-name">@i18n!(ctx.1, "All the articles of the Fediverse")</h1>
 
     @if let Some(_) = ctx.2 {
         @tabs(&[
@@ -29,4 +30,5 @@
         }
     </div>
     @paginate(ctx.1, page, n_pages)
+</div>
 })

templates/instance/local.rs.html

@@ -7,7 +7,8 @@
 @(ctx: BaseContext, instance: Instance, articles: Vec<Post>, page: i32, n_pages: i32)
 
 @:base(ctx, i18n!(ctx.1, "Articles from {}"; instance.name.clone()).as_str(), {}, {}, {
-  <h1>@i18n!(ctx.1, "Articles from {}"; instance.name)</h1>
+<div class="h-feed">
+  <h1 class="p-name">@i18n!(ctx.1, "Articles from {}"; instance.name)</h1>
 
     @if let Some(_) = ctx.2 {
         @tabs(&[
@@ -30,4 +31,5 @@
         }
     </div>
     @paginate(ctx.1, page, n_pages)
+</div>
 })

templates/partials/comment.rs.html

@@ -3,15 +3,21 @@
 @use plume_models::users::User;
 @use routes::*;
 
-@(ctx: BaseContext, comm: &Comment, author: User)
+@(ctx: BaseContext, comm: &Comment, author: User, in_reply_to: Option<&str>)
 
-<div class="comment" id="comment-@comm.id">
+<div class="comment u-comment h-cite" id="comment-@comm.id">
-    <a class="author" href="@uri!(user::details: name = author.get_fqn(ctx.0))">
+    <a class="author u-author h-card" href="@uri!(user::details: name = author.get_fqn(ctx.0))">
         @avatar(ctx.0, &author, Size::Small, true, ctx.1)
-        <span class="display-name">@author.name(ctx.0)</span>
+        <span class="display-name p-name">@author.name(ctx.0)</span>
         <small>@author.get_fqn(ctx.0)</small>
     </a>
-    <div class="text">
+    @if let Some(ref ap_url) = comm.ap_url {
+        <a class="u-url" href="@ap_url"></a>
+    }
+    @if let Some(ref in_reply_to) = in_reply_to {
+        <a class="u-in-reply-to" href="@in_reply_to"></a>
+    }
+    <div class="text p-content">
         @if comm.sensitive {
             <details>
                 <summary>@comm.spoiler_text</summary>
@@ -23,6 +29,6 @@
     </div>
     <a class="button icon icon-message-circle" href="?responding_to=@comm.id">@i18n!(ctx.1, "Respond")</a>
     @for res in comm.get_responses(ctx.0) {
-        @:comment(ctx, &res, res.get_author(ctx.0))
+        @:comment(ctx, &res, res.get_author(ctx.0), comm.ap_url.as_ref().map(|u| &**u))
     }
 </div>

templates/partials/home_feed.rs.html

@@ -5,10 +5,12 @@
 @(ctx: BaseContext, articles: Vec<Post>, link: &str, title: &str)
 
 @if articles.len() > 0 {
-    <h2>@i18n!(ctx.1, title) &mdash; <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
+<div class="h-feed">
+    <h2><span class="p-name">@i18n!(ctx.1, title)</span> &mdash; <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
     <div class="cards spaced">
         @for article in articles {
             @:post_card(ctx, article)
         }
     </div>
+</div>
 }

templates/partials/post_card.rs.html

@@ -4,22 +4,22 @@
 
 @(ctx: BaseContext, article: Post)
 
-<div class="card">
+<div class="card h-entry">
     @if article.cover_id.is_some() {
         <div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div>
     }
-    <h3><a href="@uri!(posts::details: blog = article.get_blog(ctx.0).get_fqn(ctx.0), slug = &article.slug)">@article.title</a></h3>
+    <h3 class="p-name"><a class="u-url"href="@uri!(posts::details: blog = article.get_blog(ctx.0).get_fqn(ctx.0), slug = &article.slug)">@article.title</a></h3>
     <main>
-        <p>@article.subtitle</p>
+        <p class="p-summary">@article.subtitle</p>
     </main>
     <p class="author">
         @Html(i18n!(ctx.1, "By {0}"; format!(
-            "<a href=\"{}\">{}</a>",
+            "<a class=\"p-author h-card\" href=\"{}\">{}</a>",
             uri!(user::details: name = article.get_authors(ctx.0)[0].get_fqn(ctx.0)),
             escape(&article.get_authors(ctx.0)[0].name(ctx.0))
         )))
         @if article.published {
-        ⋅ @article.creation_date.format("%B %e, %Y")
+	⋅ <span class="dt-published" datetime="@article.creation_date.format("%F %T")">@article.creation_date.format("%B %e, %Y")</span>
         }
         ⋅ <a href="@uri!(blogs::details: name = article.get_blog(ctx.0).get_fqn(ctx.0))">@article.get_blog(ctx.0).title</a>
         @if !article.published {

templates/posts/details.rs.html

@@ -22,8 +22,9 @@
 }, {
     <a href="@uri!(blogs::details: name = blog.get_fqn(ctx.0))">@blog.title</a>
 }, {
-    <h1 class="article">@&article.title</h1>
+<div class="h-entry">
-    <h2 class="article">@&article.subtitle</h2>
+    <h1 class="article p-name">@&article.title</h1>
+    <h2 class="article p-summary">@&article.subtitle</h2>
     <div class="article-info">
         <span class="author">
             @Html(i18n!(ctx.1, "Written by {0}"; format!("<a href=\"{}\">{}</a>",
@@ -31,7 +32,7 @@
                                 escape(&author.name(ctx.0)))))
         </span>
         &mdash;
-        <span class="date">@article.creation_date.format("%B %e, %Y")</span>
+        <span class="date dt-published" datetime="@article.creation_date.format("%F %T")">@article.creation_date.format("%B %e, %Y")</span><a class="u-url" href="@article.ap_url"></a>
         @if ctx.2.clone().map(|u| u.id == author.id).unwrap_or(false) {
             &mdash;
             <a href="@uri!(posts::edit: blog = blog.get_fqn(ctx.0), slug = &article.slug)">@i18n!(ctx.1, "Edit")</a>
@@ -46,24 +47,29 @@
     </div>
     @if article.cover_id.is_some() {
         <div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div>
+	<img class="hidden u-photo" src="@article.cover_url(ctx.0).unwrap_or_default()" />
     }
-    <article>
+    <article class="e-content">
         @Html(&article.content)
     </article>
-
     <div class="article-meta">
         <p>@i18n!(ctx.1, "This article is under the {0} license."; &article.license)</p>
         <ul class="tags">
             @for tag in tags {
                 @if !tag.is_hashtag {
-                    <li><a href="@uri!(tags::tag: name = &tag.tag)">@tag.tag</a></li>
+                    <li><a class="p-category" href="@uri!(tags::tag: name = &tag.tag)">@tag.tag</a></li>
+                } else {
+                    <span class="hidden p-category">@tag.tag</span>
                 }
             }
         </ul>
-        <div class="flex">
+        <div class="flex p-author h-card">
             @avatar(ctx.0, &author, Size::Medium, true, ctx.1)
             <div class="grow">
-                <h2><a href="@uri!(user::details: name = author.get_fqn(ctx.0))">@author.name(ctx.0)</a></h2>
+                <h2 class="p-name">
+		    <a href="@uri!(user::details: name = author.get_fqn(ctx.0))">@author.name(ctx.0)</a>
+		    <a rel="author" class="u-url" href="@author.ap_url"></a>
+		</h2>
                 <p>@Html(&author.summary)</h2>
             </div>
 	    @if !ctx.2.as_ref().map(|u| u.id == author.id).unwrap_or(false) {
@@ -72,7 +78,6 @@
                 </form>
 	    }
         </div>
-
         @if ctx.2.is_some() {
             <div class="actions">
                 <form class="likes" action="@uri!(likes::create: blog = blog.get_fqn(ctx.0), slug = &article.slug)" method="POST">
@@ -116,7 +121,6 @@
                 </div>
             </div>
         }
-
         <div class="comments">
             <h2>@i18n!(ctx.1, "Comments")</h2>
 
@@ -136,7 +140,7 @@
             @if !comments.is_empty() {
                 <div class="list">
                     @for comm in comments {
-                        @:comment(ctx, &comm, comm.get_author(ctx.0))
+                        @:comment(ctx, &comm, comm.get_author(ctx.0), Some(&article.ap_url))
                     }
                 </div>
             } else {
@@ -144,4 +148,5 @@
             }
         </div>
     </div>
+</div>
 })

templates/users/details.rs.html

@@ -15,8 +15,9 @@
     ])
 
     @if !recents.is_empty() {
+    <div class="h-feed">
         <h2>
-            @i18n!(ctx.1, "Latest articles")
+            <span class="p-name">@i18n!(ctx.1, "Latest articles")</span>
             <small><a href="@uri!(user::atom_feed: name = user.get_fqn(ctx.0))" title="@i18n!(ctx.1, "Atom feed")">@icon!("rss")</a></small>
         </h2>
         <div class="cards">
@@ -24,14 +25,17 @@
                 @:post_card(ctx, article)
             }
         </div>
+    </div>
     }
 
     @if !reshares.is_empty() {
-        <h2>@i18n!(ctx.1, "Recently boosted")</h2>
+    <div class="h-feed">
+        <h2 class="p-name">@i18n!(ctx.1, "Recently boosted")</h2>
         <div class="cards">
             @for article in reshares {
                 @:post_card(ctx, article)
             }
         </div>
+    </div>
     }
 })

templates/users/header.rs.html

@@ -4,13 +4,14 @@
 
 @(ctx: BaseContext, user: &User, follows: bool, is_remote: bool, instance_url: String)
 
+<div class="h-card">
     <div class="user">
         <div class="flex wrap">
             @avatar(ctx.0, &user, Size::Medium, false, ctx.1)
 
             <h1 class="grow flex vertical">
-            @user.name(ctx.0)
+                <span class="p-name">@user.name(ctx.0)</span>
-            <small>@user.get_fqn(ctx.0)</small>
+                <small class="p-nickname">@user.get_fqn(ctx.0)</small>
             </h1>
 
             <p>
@@ -26,7 +27,9 @@
         </div>
 
         @if is_remote {
-        <a class="inline-block" href="@user.ap_url" target="_blank">@i18n!(ctx.1, "Open on {0}"; instance_url)</a>
+            <a class="inline-block u-url" href="@user.ap_url" rel="me" target="_blank">@i18n!(ctx.1, "Open on {0}"; instance_url)</a>
+        } else {
+            <a class="u-url" href="@user.ap_url"></a>
         }
 
         @if ctx.2.clone().map(|u| u.id != user.id).unwrap_or(false) {
@@ -39,6 +42,7 @@
             </form>
         }
     </div>
-<div class="user-summary">
+    <div class="user-summary p-note">
         @Html(user.summary.clone())
     </div>
+</div>