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
2018-12-08 21:52:46 +01:00 · 2018-12-08 21:52:46 +01:00 · e9f2f769be
parent 4182e67dbf
commit e9f2f769be
11 changed files with 108 additions and 66 deletions
--- a/src/template_utils.rs
+++ b/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
-        class="avatar {size} {padded}"
+        r#"<div class="avatar {size} {padded}"
        style="background-image: url('{url}');"
        title="{title}"
-        aria-label="{title}"
-        ></div>"#,
+        aria-label="{title}"></div>
+        <img class="hidden u-photo" src="{url}"/>"#,
        size = size.as_str(),
        padded = if pad { "padded" } else { "" },
        url = user.avatar_url(conn),
--- a/static/css/main.css
+++ b/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;
--- a/templates/blogs/details.rs.html
+++ b/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>
--- a/templates/instance/federated.rs.html
+++ b/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>
 })
--- a/templates/instance/local.rs.html
+++ b/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>
 })
--- a/templates/partials/comment.rs.html
+++ b/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">
-    <a class="author" href="@uri!(user::details: name = author.get_fqn(ctx.0))">
+<div class="comment u-comment h-cite" id="comment-@comm.id">
+    <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>
--- a/templates/partials/home_feed.rs.html
+++ b/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>
 }
--- a/templates/partials/post_card.rs.html
+++ b/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 {
--- a/templates/posts/details.rs.html
+++ b/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>
-    <h2 class="article">@&article.subtitle</h2>
+<div class="h-entry">
+    <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>
 })
--- a/templates/users/details.rs.html
+++ b/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>
    }
 })
--- a/templates/users/header.rs.html
+++ b/templates/users/header.rs.html
@ -4,13 +4,14 @@

@(ctx: BaseContext, user: &User, follows: bool, is_remote: bool, instance_url: String)

-<div class="user">
+<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)
-            <small>@user.get_fqn(ctx.0)</small>
+                <span class="p-name">@user.name(ctx.0)</span>
+                <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) {
@ -38,7 +41,8 @@
            }
            </form>
        }
-</div>
-<div class="user-summary">
+    </div>
+    <div class="user-summary p-note">
        @Html(user.summary.clone())
+    </div>
 </div>