aitzol/Plume
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add microformat tags (#341)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/template_utils.rs
View File

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

10
static/css/main.css
View File

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

14
templates/blogs/details.rs.html
View File

@ -10,12 +10,21 @@
@:base(ctx, blog.title.as_ref(), {}, { @:base(ctx, blog.title.as_ref(), {}, {
<a href="@uri!(blogs::details: name = &fqn)">@blog.title</a> <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>@blog.summary</p>
<p> <p>
@i18n!(ctx.1, "One author in this blog: ", "{0} authors in this blog: ", authors.len()) @i18n!(ctx.1, "One author in this blog: ", "{0} authors in this blog: ", authors.len())
@for author in authors { @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>
<p> <p>
@ -40,6 +49,7 @@
</div> </div>
@paginate(ctx.1, page, n_pages) @paginate(ctx.1, page, n_pages)
</section> </section>
</div>
@if is_author { @if is_author {
<h2>@i18n!(ctx.1, "Danger zone")</h2> <h2>@i18n!(ctx.1, "Danger zone")</h2>
<p>@i18n!(ctx.1, "Be very careful, any action taken here can't be cancelled.")</p> <p>@i18n!(ctx.1, "Be very careful, any action taken here can't be cancelled.")</p>

4
templates/instance/federated.rs.html
View File

@ -6,7 +6,8 @@
@(ctx: BaseContext, articles: Vec<Post>, page: i32, n_pages: i32) @(ctx: BaseContext, articles: Vec<Post>, page: i32, n_pages: i32)
@:base(ctx, "All the articles of the Fediverse", {}, {}, { @: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 { @if let Some(_) = ctx.2 {
@tabs(&[ @tabs(&[
@ -29,4 +30,5 @@
} }
</div> </div>
@paginate(ctx.1, page, n_pages) @paginate(ctx.1, page, n_pages)
</div>
}) })

4
templates/instance/local.rs.html
View File

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

18
templates/partials/comment.rs.html
View File

@ -3,15 +3,21 @@
@use plume_models::users::User; @use plume_models::users::User;
@use routes::*; @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) @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> <small>@author.get_fqn(ctx.0)</small>
</a> </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 { @if comm.sensitive {
<details> <details>
<summary>@comm.spoiler_text</summary> <summary>@comm.spoiler_text</summary>
@ -23,6 +29,6 @@
</div> </div>
<a class="button icon icon-message-circle" href="?responding_to=@comm.id">@i18n!(ctx.1, "Respond")</a> <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) { @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> </div>

4
templates/partials/home_feed.rs.html
View File

@ -5,10 +5,12 @@
@(ctx: BaseContext, articles: Vec<Post>, link: &str, title: &str) @(ctx: BaseContext, articles: Vec<Post>, link: &str, title: &str)
@if articles.len() > 0 { @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"> <div class="cards spaced">
@for article in articles { @for article in articles {
@:post_card(ctx, article) @:post_card(ctx, article)
} }
</div> </div>
</div>
} }

10
templates/partials/post_card.rs.html
View File

@ -4,22 +4,22 @@
@(ctx: BaseContext, article: Post) @(ctx: BaseContext, article: Post)
<div class="card"> <div class="card h-entry">
@if article.cover_id.is_some() { @if article.cover_id.is_some() {
<div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div> <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> <main>
<p>@article.subtitle</p> <p class="p-summary">@article.subtitle</p>
</main> </main>
<p class="author"> <p class="author">
@Html(i18n!(ctx.1, "By {0}"; format!( @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)), uri!(user::details: name = article.get_authors(ctx.0)[0].get_fqn(ctx.0)),
escape(&article.get_authors(ctx.0)[0].name(ctx.0)) escape(&article.get_authors(ctx.0)[0].name(ctx.0))
))) )))
@if article.published { @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> ⋅ <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 { @if !article.published {

29
templates/posts/details.rs.html
View File

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

8
templates/users/details.rs.html
View File

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

66
templates/users/header.rs.html
View File

@ -4,41 +4,45 @@
@(ctx: BaseContext, user: &User, follows: bool, is_remote: bool, instance_url: String) @(ctx: BaseContext, user: &User, follows: bool, is_remote: bool, instance_url: String)
<div class="user"> <div class="h-card">
<div class="flex wrap"> <div class="user">
@avatar(ctx.0, &user, Size::Medium, false, ctx.1) <div class="flex wrap">
@avatar(ctx.0, &user, Size::Medium, false, ctx.1)
<h1 class="grow flex vertical"> <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> </h1>
<p> <p>
@if user.is_admin { @if user.is_admin {
<span class="badge">@i18n!(ctx.1, "Admin")</span> <span class="badge">@i18n!(ctx.1, "Admin")</span>
} }
@if ctx.2.clone().map(|u| u.id == user.id).unwrap_or(false) { @if ctx.2.clone().map(|u| u.id == user.id).unwrap_or(false) {
<span class="badge">@i18n!(ctx.1, "It is you")</span> <span class="badge">@i18n!(ctx.1, "It is you")</span>
<a href="@uri!(user::edit: name = &user.username)" class="button inline-block">@i18n!(ctx.1, "Edit your profile")</a> <a href="@uri!(user::edit: name = &user.username)" class="button inline-block">@i18n!(ctx.1, "Edit your profile")</a>
} }
</p> </p>
</div> </div>
@if is_remote { @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>
}
@if ctx.2.clone().map(|u| u.id != user.id).unwrap_or(false) {
<form class="inline" method="post" action="@uri!(user::follow: name = user.get_fqn(ctx.0))">
@if follows {
<input type="submit" value="@i18n!(ctx.1, "Unfollow")">
} else { } else {
<input type="submit" value="@i18n!(ctx.1, "Follow")"> <a class="u-url" href="@user.ap_url"></a>
} }
</form>
} @if ctx.2.clone().map(|u| u.id != user.id).unwrap_or(false) {
</div> <form class="inline" method="post" action="@uri!(user::follow: name = user.get_fqn(ctx.0))">
<div class="user-summary"> @if follows {
@Html(user.summary.clone()) <input type="submit" value="@i18n!(ctx.1, "Unfollow")">
} else {
<input type="submit" value="@i18n!(ctx.1, "Follow")">
}
</form>
}
</div>
<div class="user-summary p-note">
@Html(user.summary.clone())
</div>
</div> </div>