Start an actual design

src/routes/blogs.rs

@@ -14,10 +14,11 @@ use models::users::User;
 use utils;
 
 #[get("/~/<name>", rank = 2)]
-fn details(name: String, conn: DbConn) -> Template {
+fn details(name: String, conn: DbConn, user: Option<User>) -> Template {
     let blog = Blog::find_by_actor_id(&*conn, name).unwrap();    
     Template::render("blogs/details", json!({
-        "blog": blog
+        "blog": blog,
+        "account": user
     }))
 }
 
@@ -28,8 +29,10 @@ fn activity_details(name: String, conn: DbConn) -> ActivityPub {
 }
 
 #[get("/blogs/new")]
-fn new(_user: User) -> Template {
+fn new(user: User) -> Template {
-    Template::render("blogs/new", HashMap::<String, i32>::new())
+    Template::render("blogs/new", json!({
+        "account": user
+    }))
 }
 
 #[derive(FromForm)]

src/routes/comments.rs

@@ -10,10 +10,11 @@ use models::posts::Post;
 use models::users::User;
 
 #[get("/~/<_blog>/<slug>/comment")]
-fn new(_blog: String, slug: String, _user: User, conn: DbConn) -> Template {
+fn new(_blog: String, slug: String, user: User, conn: DbConn) -> Template {
     let post = Post::find_by_slug(&*conn, slug).unwrap();
     Template::render("comments/new", json!({
         "post": post,
+        "account": user
     }))
 }
 

src/routes/instance.rs

@@ -5,14 +5,16 @@ use std::collections::HashMap;
 
 use BASE_URL;
 use db_conn::DbConn;
+use models::users::User;
 use models::instance::*;
 
 #[get("/")]
-fn index(conn: DbConn) -> Template {
+fn index(conn: DbConn, user: Option<User>) -> Template {
     match Instance::get_local(&*conn) {
         Some(inst) => {
             Template::render("instance/index", json!({
-                "instance": inst
+                "instance": inst,
+                "account": user
             }))
         }
         None => {
@@ -25,7 +27,7 @@ fn index(conn: DbConn) -> Template {
 
 #[get("/configure")]
 fn configure() -> Template {
-    Template::render("instance/configure", HashMap::<String, i32>::new())
+    Template::render("instance/configure", json!({}))
 }
 
 #[derive(FromForm)]

src/routes/posts.rs

@@ -18,7 +18,7 @@ use models::users::User;
 use utils;
 
 #[get("/~/<blog>/<slug>", rank = 4)]
-fn details(blog: String, slug: String, conn: DbConn) -> Template {
+fn details(blog: String, slug: String, conn: DbConn, user: Option<User>) -> Template {
     let blog = Blog::find_by_actor_id(&*conn, blog).unwrap();
     let post = Post::find_by_slug(&*conn, slug).unwrap();
     let comments = Comment::for_post(&*conn, post.id);    
@@ -32,7 +32,8 @@ fn details(blog: String, slug: String, conn: DbConn) -> Template {
                 "author": c.get_author(&*conn)
             })
         }).collect::<Vec<serde_json::Value>>(),
-        "n_likes": post.get_likes(&*conn).len()
+        "n_likes": post.get_likes(&*conn).len(),
+        "account": user
     }))
 }
 
@@ -52,8 +53,10 @@ fn new_auth(_blog: String) -> Redirect {
 }
 
 #[get("/~/<_blog>/new", rank = 1)]
-fn new(_blog: String, _user: User) -> Template {
+fn new(_blog: String, user: User) -> Template {
-    Template::render("posts/new", HashMap::<String, String>::new())
+    Template::render("posts/new", json!({
+        "account": user
+    }))
 }
 
 #[derive(FromForm)]

src/routes/session.rs

@@ -9,8 +9,10 @@ use db_conn::DbConn;
 use models::users::{User, AUTH_COOKIE};
 
 #[get("/login")]
-fn new() -> Template {
+fn new(user: Option<User>) -> Template {
-    Template::render("session/login", HashMap::<String, String>::new())
+    Template::render("session/login", json!({
+        "account": user
+    }))
 }
 
 #[derive(FromForm)]

src/routes/user.rs

@@ -19,10 +19,11 @@ fn me(user: User) -> Redirect {
 }
 
 #[get("/@/<name>", rank = 2)]
-fn details(name: String, conn: DbConn) -> Template {
+fn details(name: String, conn: DbConn, account: Option<User>) -> Template {
     let user = User::find_by_fqn(&*conn, name).unwrap();
     Template::render("users/details", json!({
-        "user": serde_json::to_value(user).unwrap()
+        "user": serde_json::to_value(user).unwrap(),
+        "account": account
     }))
 }
 
@@ -44,8 +45,10 @@ fn activity_details(name: String, conn: DbConn) -> ActivityPub {
 }
 
 #[get("/users/new")]
-fn new() -> Template {
+fn new(user: Option<User>) -> Template {
-    Template::render("users/new", HashMap::<String, i32>::new())
+    Template::render("users/new", json!({
+        "account": user
+    }))
 }
 
 #[derive(FromForm)]

static/main.css

@@ -1,4 +1,91 @@
-html {
+html, body {
     margin: 0px;
     padding: 0px;
+    font-family: 'Lato';
+    line-height: 1.5em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-weight: 200;
+}
+
+a, a:visited {
+    color: #7a28cb;
+    text-decoration: none;
+}
+
+header {
+    padding: 20px 10%;
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+}
+
+header nav a {
+    margin: 0px 20px;
+}
+
+main > * {
+    padding: 20px 20%;
+}
+
+main article {
+    font-family: 'Utopia';
+}
+
+.inline {
+    display: flex;
+    align-items: center;
+}
+
+.button, input[type="submit"] {
+    background: white;
+    color: #7a28cb;
+    border: 1px solid #7a28cb;
+    border-radius: 3px;
+    padding: 5px 10px;
+    margin: 0px 20px;
+}
+
+input[type="submit"] {
+    margin: 10px 0px;
+}
+
+.article-meta {
+    background: #F9F9F9;
+}
+
+.comment {
+    background: white;
+    border: 1px solid #7a28cb;
+    border-radius: 3px;
+    padding: 20px;
+    margin: 10px 0px;
+}
+
+.comment a {
+    margin-top: 10px;
+    display: block;
+}
+
+.inline-block {
+    display: inline-block;
+    margin: 0px;
+}
+
+label {
+    display: block;
+}
+
+input {
+    border: none;
+    border-bottom: 1px solid #DADADA;
+    display: block;
+    margin: 10px 0px;
+}
+
+textarea {
+    width: 100%;
+    min-height: 200px;
+    resize: vertical;
 }

templates/base.tera

@@ -6,7 +6,26 @@
         <link rel="stylesheet" href="/static/main.css">
     </head>
     <body>
-        {% block content %}
+        <header>
-        {% endblock content %}
+            <nav>
+                <a href="/">Plume</a>
+                {% block header %}
+                {% endblock header %}
+            </nav>
+            <nav>
+                {% if account %}
+                    <a href="/notifications">Notifications</a>
+                    <a href="/me">My account</a>
+                    <a href="/logout">Log Out</a>
+                {% else %}
+                    <a href="/login">Log In</a>
+                    <a href="/users/new">Register</a>
+                {% endif %}
+            </nav>
+        </header>
+        <main>
+            {% block content %}
+            {% endblock content %}
+        </main>
     </body>
 </html>

templates/posts/details.tera

@@ -4,28 +4,34 @@
 {{ post.title }}
 {% endblock title %}
 
+{% block header %}
+    <a href="../">{{ blog.title }}</a>
+{% endblock header %}
+
 {% block content %}
     <h1>{{ post.title }}</h1>
-    <p>Published in {{ blog.title }}</p>
+    <article>
-    <hr>
-    <p>
         {{ post.content | safe }}
-    </p>
+    </article>
-    <p>License: {{ post.license }}</p>
-    <hr>
 
-    <p>
+    <div class="article-meta">
-        {{ n_likes }} like{{ n_likes | pluralize }}
+        <p>This article is under the {{ post.license }} license.</p>
-    </p>
-    <a href="like">Add yours</a>
 
-    <h2>Comments</h2>
+        <div class="inline">
-    {% for comment in comments %}
+            <p>
-        <div id="comment-{{ comment.id }}">
+                {{ n_likes }} like{{ n_likes | pluralize }}
-            <b>{{ comment.author.display_name }}</b>
+            </p>
-            <div>{{ comment.content | safe }}</div>
+            <a class="button" href="like">Add yours</a>
-            <a href="comment?responding_to={{ comment.id }}">Respond</a>
         </div>
-    {% endfor %}
+
-    <a href="comment?">Comment</a>
+        <h2>Comments</h2>
+        {% for comment in comments %}
+            <div class="comment" id="comment-{{ comment.id }}">
+                <b>{{ comment.author.display_name }}</b>
+                <div>{{ comment.content | safe }}</div>
+                <a href="comment?responding_to={{ comment.id }}">Respond</a>
+            </div>
+        {% endfor %}
+        <a class="button inline-block" href="comment?">Comment</a>
+    </div>
 {% endblock content %}