WIP - initial RTL support #575 (#577)

* initial RTL support

* fix dir in template-util

* fix dir in blogs new

* fix dir in blogs details

* fix dir in posts new

* fix dir in posts details

* fix dir in posts remote

* Fix dir in partials

some parts should be recheck carefully in real usage

src/template_utils.rs

@@ -146,7 +146,7 @@ pub fn avatar(
 pub fn tabs(links: &[(&str, String, bool)]) -> Html<String> {
     let mut res = String::from(r#"<div class="tabs">"#);
     for (url, title, selected) in links {
-        res.push_str(r#"<a href=""#);
+        res.push_str(r#"<a dir="auto" href=""#);
         res.push_str(url);
         if *selected {
             res.push_str(r#"" class="selected">"#);
@@ -176,7 +176,7 @@ pub fn paginate_param(
             p
         })
         .unwrap_or_default();
-    res.push_str(r#"<div class="pagination">"#);
+    res.push_str(r#"<div class="pagination" dir="auto">"#);
     if page != 1 {
         res.push_str(
             format!(
@@ -239,13 +239,13 @@ macro_rules! input {
 
         Html(format!(
             r#"
-                <label for="{name}">
+                <label for="{name}" dir="auto">
                     {label}
                     {optional}
                     {details}
                 </label>
                 {error}
-                <input type="{kind}" id="{name}" name="{name}" value="{val}" {props}/>
+                <input type="{kind}" id="{name}" name="{name}" value="{val}" {props} dir="auto"/>
                 "#,
             name = stringify!($name),
             label = i18n!(cat, $label),
@@ -264,7 +264,7 @@ macro_rules! input {
                 $err.errors().get(stringify!($name))
             {
                 format!(
-                    r#"<p class="error">{}</p>"#,
+                    r#"<p class="error" dir="auto">{}</p>"#,
                     errs[0]
                         .message
                         .clone()
@@ -332,8 +332,8 @@ macro_rules! input {
         let cat = $catalog;
         Html(format!(
             r#"
-                <label for="{name}">{label}</label>
-                <input type="{kind}" id="{name}" name="{name}" {props}/>
+                <label for="{name}" dir="auto">{label}</label>
+                <input type="{kind}" id="{name}" name="{name}" {props} dir="auto"/>
                 "#,
             name = stringify!($name),
             label = i18n!(cat, $label),

templates/blogs/details.rs.html

@@ -24,7 +24,7 @@
 	<link href='@Instance::get_local().unwrap().compute_box("~", &blog.fqn, "atom.xml")' rel='alternate' type='application/atom+xml'>
 	<link href='@blog.ap_url' rel='alternate' type='application/activity+json'>
 }, {
-    <a href="@uri!(blogs::details: name = &blog.fqn, page = _)">@blog.title</a>
+    <a href="@uri!(blogs::details: name = &blog.fqn, page = _)" dir="auto">@blog.title</a>
 }, {
 <div class="hidden">
     @for author in authors {
@@ -41,38 +41,38 @@
     }
     <div class="h-card">
         <div class="user">
-            <div class="flex wrap">
+            <div class="flex wrap" dir="auto">
                 <div class="avatar medium" style="background-image: url('@blog.icon_url(ctx.0)');" aria-label="@i18n!(ctx.1, "{}'s icon"; &blog.title)"></div>
                 <img class="hidden u-photo" src="@blog.icon_url(ctx.0)"/>
 
                 <h1 class="grow flex vertical">
                     <span class="p-name">@blog.title</span>
-                    <small>~@blog.fqn</small>
+                    <small dir="auto">~@blog.fqn</small>
                 </h1>
 
                 @if ctx.2.clone().and_then(|u| u.is_author_in(ctx.0, &blog).ok()).unwrap_or(false) {
-                    <a href="@uri!(posts::new: blog = &blog.fqn)" class="button">@i18n!(ctx.1, "New article")</a>
-                    <a href="@uri!(blogs::edit: name = &blog.fqn)" class="button">@i18n!(ctx.1, "Edit")</a>
+                    <a href="@uri!(posts::new: blog = &blog.fqn)" class="button" dir="auto">@i18n!(ctx.1, "New article")</a>
+                    <a href="@uri!(blogs::edit: name = &blog.fqn)" class="button" dir="auto">@i18n!(ctx.1, "Edit")</a>
                 }
             </div>
-
-            <main class="user-summary">
+            
+            <main class="user-summary" dir="auto">
                 <p>
                     @i18n!(ctx.1, "There's one author on this blog: ", "There are {0} authors on this blog: "; authors.len())
                     @for (i, author) in authors.iter().enumerate() {@if i >= 1 {, }
-                    <a class="author p-author" href="@uri!(user::details: name = &author.fqn)">@author.name()</a>}
+                    <a class="author p-author" href="@uri!(user::details: name = &author.fqn)" dir="auto">@author.name()</a>}
                 </p>
                 @Html(blog.summary_html.clone())
             </main>
     </div>
 
     <section>
-        <h2>
+        <h2 dir="auto">
             @i18n!(ctx.1, "Latest articles")
             <small><a href="@uri!(blogs::atom_feed: name = &blog.fqn)" title="Atom feed">@icon!("rss")</a></small>
         </h2>
         @if posts.is_empty() {
-            <p>@i18n!(ctx.1, "No posts to see here yet.")</p>
+            <p dir="auto">@i18n!(ctx.1, "No posts to see here yet.")</p>
         }
         <div class="cards">
             @for article in posts {

templates/blogs/new.rs.html

@@ -7,9 +7,9 @@
 @(ctx: BaseContext, form: &NewBlogForm, errors: ValidationErrors)
 
 @:base(ctx, i18n!(ctx.1, "New Blog"), {}, {}, {
-  <h1>@i18n!(ctx.1, "Create a blog")</h1>
+  <h1 dir="auto">@i18n!(ctx.1, "Create a blog")</h1>
   <form method="post" action="@uri!(blogs::create)">
       @input!(ctx.1, title (text), "Title", form, errors, "required minlength=\"1\"")
-      <input type="submit" value="@i18n!(ctx.1, "Create blog")"/>
+      <input type="submit" value="@i18n!(ctx.1, "Create blog")" dir="auto"/>
   </form>
 })

templates/partials/comment.rs.html

@@ -9,7 +9,7 @@
 <div class="comment u-comment h-cite" id="comment-@comm.id">
     <main class="content">
         <header>
-            <a class="author u-author h-card" href="@uri!(user::details: name = &author.fqn)">
+            <a class="author u-author h-card" href="@uri!(user::details: name = &author.fqn)" dir="auto">
                 @avatar(ctx.0, &author, Size::Small, true, ctx.1)
                 <span class="display-name p-name">@author.name()</span>
                 <small>@author.fqn</small>
@@ -27,7 +27,7 @@
         <div class="text p-content">
             @if comm.sensitive {
                 <details>
-                    <summary>@comm.spoiler_text</summary>
+                    <summary dir="auto">@comm.spoiler_text</summary>
             }
             @Html(&comm.content)
             @if comm.sensitive {

templates/partials/home_feed.rs.html

@@ -6,7 +6,7 @@
 
 @if !articles.is_empty() {
 <div class="h-feed">
-    <h2><span class="p-name">@title</span> &mdash; <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
+    <h2 dir="auto"><span class="p-name">@title</span> &mdash; <a href="@link">@i18n!(ctx.1, "View all")</a></h2>
     <div class="cards">
         @for article in articles {
             @:post_card(ctx, article)

templates/partials/image_select.rs.html

@@ -3,7 +3,7 @@
 
 @(ctx: BaseContext, id: &str, title: String, optional: bool, medias: Vec<Media>, selected: Option<i32>)
 
-<label for="@id">
+<label for="@id" dir="auto">
 	@title
 	@if optional {
 		<small>@i18n!(ctx.1, "Optional")</small>
@@ -13,7 +13,7 @@
     <option value="none" @if selected.is_none() { selected }>@i18n!(ctx.1, "None")</option>
     @for media in medias {
         @if media.category() == MediaCategory::Image {
-            <option value="@media.id" @if selected.map(|c| c == media.id).unwrap_or(false) { selected }>
+            <option value="@media.id" @if selected.map(|c| c == media.id).unwrap_or(false) { selected } dir="auto">
                 @if !media.alt_text.is_empty() {
                     @media.alt_text
                 } else {
@@ -22,4 +22,4 @@
             </option>
         }
     }
-</select>
+</select>

templates/partials/instance_description.rs.html

@@ -4,7 +4,7 @@
 
 @(ctx: BaseContext, instance: Instance, n_users: i64, n_articles: i64)
 
-<section class="split">
+<section class="split" dir="auto">
     <div class="presentation card">
         <h2>@i18n!(ctx.1, "What is Plume?")</h2>
         <main>

templates/partials/post_card.rs.html

@@ -8,13 +8,13 @@
     @if article.cover_id.is_some() {
         <div class="cover" style="background-image: url('@Html(article.cover_url(ctx.0).unwrap_or_default())')"></div>
     }
-    <h3 class="p-name">
+    <h3 class="p-name" dir="auto">
         <a class="u-url" href="@uri!(posts::details: blog = article.get_blog(ctx.0).unwrap().fqn, slug = &article.slug, responding_to = _)">
             @article.title
         </a>
     </h3>
     <main>
-        <p class="p-summary">@article.subtitle</p>
+        <p class="p-summary" dir="auto">@article.subtitle</p>
     </main>
     <footer class="authors">
         @Html(i18n!(ctx.1, "By {0}"; format!(

templates/posts/details.rs.html

@@ -28,8 +28,8 @@
         @if article.cover_id.is_some() { style="background-image: url('@article.cover_url(ctx.0).unwrap_or_default()'" }
     >
         <div>
-            <h1 class="article p-name">@article.title</h1>
-            <div class="article-info">
+            <h1 class="article p-name" dir="auto">@article.title</h1>
+            <div class="article-info" dir="auto">
                 <span class="author">
                     @Html(i18n!(ctx.1, "Written by {0}"; format!("<a href=\"{}\">{}</a>",
                                         uri!(user::details: name = &author.fqn),
@@ -38,7 +38,7 @@
                 &mdash;
                 <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>
             </div>
-            <h2 class="article p-summary">@article.subtitle</h2>
+            <h2 class="article p-summary" dir="auto">@article.subtitle</h2>
         </div>
         @if article.cover_id.is_some() {
             <div class="shadow"></div>
@@ -46,12 +46,12 @@
         }
     </header>
 
-    <article class="e-content">
+    <article class="e-content" dir="auto">
         @Html(&article.content)
     </article>
     <div class="article-meta">
         <section class="split">
-            <ul class="tags">
+            <ul class="tags" dir="auto">
                 @for tag in tags {
                     @if !tag.is_hashtag {
                         <li><a class="p-category" href="@uri!(tags::tag: name = &tag.tag, page = _)">@tag.tag</a></li>
@@ -60,7 +60,7 @@
                     }
                 }
             </ul>
-            <p class="right">
+            <p class="right" dir="auto">
                 @if article.license.is_empty() {
                     @i18n!(ctx.1, "All rights reserved."; &article.license)
                 } else {
@@ -116,7 +116,7 @@
             </section>
         }
         <section class="banner">
-            <div class="flex p-author h-card user">
+            <div class="flex p-author h-card user" dir="auto">
                 @avatar(ctx.0, &author, Size::Medium, true, ctx.1)
                 <div class="grow">
                     <h2 class="p-name">
@@ -132,7 +132,7 @@
         	    }
             </div>
         </section>
-        <section class="comments">
+        <section class="comments" dir="auto">
             <h2>@i18n!(ctx.1, "Comments")</h2>
 
             @if ctx.2.is_some() {
@@ -143,7 +143,7 @@
                     @if let Some(ref prev) = previous_comment {
                         <input type="hidden" name="responding_to" value="@prev.id"/>
                     }
-                    <textarea id="plume-editor" name="content">@comment_form.content</textarea>
+                    <textarea id="plume-editor" name="content" dir="auto">@comment_form.content</textarea>
                     <input type="submit" value="@i18n!(ctx.1, "Submit comment")" />
                 </form>
             }
@@ -153,7 +153,7 @@
                     @:comment(ctx, &comm, Some(&article.ap_url), &blog.fqn, &article.slug)
                 }
             } else {
-                <p class="center">@i18n!(ctx.1, "No comments yet. Be the first to react!")</p>
+                <p class="center" dir="auto">@i18n!(ctx.1, "No comments yet. Be the first to react!")</p>
             }
         </section>
     </div>

templates/posts/new.rs.html

@@ -12,8 +12,8 @@
 @(ctx: BaseContext, title: String, blog: Blog, editing: bool, form: &NewPostForm, is_draft: bool, article: Option<Post>, errors: ValidationErrors, medias: Vec<Media>, content_len: u64)
 
 @:base(ctx, title.clone(), {}, {}, {
-    <h1 id="plume-editor-title">@title</h1>
-    <div id="plume-editor" style="display: none;">
+    <h1 id="plume-editor-title" dir="auto">@title</h1>
+    <div id="plume-editor" style="display: none;" dir="auto">
       <header>
         <button id="publish" class="button">@i18n!(ctx.1, "Publish")</button>
         <p id="char-count">@content_len</p>
@@ -32,10 +32,10 @@
             @format!(r#"<p class="error">{}</p>"#, errs[0].message.clone().unwrap_or_else(|| Cow::from("Unknown error")))
         }
 
-        <label for="editor-content">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
-        <textarea id="editor-content" name="content" rows="20">@Html(&form.content)</textarea>
-	    <small id="editor-left">@content_len</small>
-        <p>
+        <label for="editor-content" dir="auto">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
+        <textarea id="editor-content" name="content" rows="20" dir="auto">@Html(&form.content)</textarea>
+	    <small id="editor-left" dir="auto">@content_len</small>
+        <p dir="auto">
             @i18n!(ctx.1, "You can upload media to your gallery, and then copy their Markdown code into your articles to insert them.")
             <a href="@uri!(medias::new)">@i18n!(ctx.1, "Upload media")</a>
         </p>
@@ -47,7 +47,7 @@
         @:image_select(ctx, "cover", i18n!(ctx.1, "Illustration"), true, medias, form.cover)
 
         @if is_draft {
-            <label for="draft">
+            <label for="draft" dir="auto">
                 <input type="checkbox" name="draft" id="draft" checked>
                 @i18n!(ctx.1, "This is a draft, don't publish it yet.")
             </label>

templates/posts/remote_interact.rs.html

@@ -9,6 +9,6 @@
 @(ctx: BaseContext, post: Post, login_form: LoginForm, login_errs: ValidationErrors, remote_form: RemoteForm, remote_errs: ValidationErrors)
 
 @:remote_interact_base(ctx, i18n!(ctx.1, "Interact with {}"; post.title.clone()), i18n!(ctx.1, "Log in to interact"), i18n!(ctx.1, "Enter your full username to interact"), {
-	<h1>@i18n!(ctx.1, "Interact with {}"; post.title.clone())</h1>
+	<h1 dir="auto">@i18n!(ctx.1, "Interact with {}"; post.title.clone())</h1>
 	@:post_card(ctx, post)
 }, login_form, login_errs, remote_form, remote_errs)