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
This commit is contained in:
fdb-hiroshima 2018-12-08 21:52:46 +01:00 committed by Baptiste Gelez
parent 4182e67dbf
commit e9f2f769be
11 changed files with 108 additions and 66 deletions

View File

@ -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),

View File

@ -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;

View File

@ -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>

View File

@ -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>
})

View File

@ -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>
})

View File

@ -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>

View File

@ -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>
}

View File

@ -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 {

View File

@ -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>
})

View File

@ -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>
}
})

View File

@ -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)
<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) {
@ -39,6 +42,7 @@
</form>
}
</div>
<div class="user-summary">
<div class="user-summary p-note">
@Html(user.summary.clone())
</div>
</div>