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:
parent
4182e67dbf
commit
e9f2f769be
@ -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),
|
||||
|
@ -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;
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
})
|
||||
|
@ -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>
|
||||
})
|
||||
|
@ -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>
|
||||
|
@ -5,10 +5,12 @@
|
||||
@(ctx: BaseContext, articles: Vec<Post>, link: &str, title: &str)
|
||||
|
||||
@if articles.len() > 0 {
|
||||
<h2>@i18n!(ctx.1, title) — <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
|
||||
<div class="h-feed">
|
||||
<h2><span class="p-name">@i18n!(ctx.1, title)</span> — <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
|
||||
<div class="cards spaced">
|
||||
@for article in articles {
|
||||
@:post_card(ctx, article)
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
—
|
||||
<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) {
|
||||
—
|
||||
<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>
|
||||
})
|
||||
|
@ -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>
|
||||
}
|
||||
})
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user