Some layout and styling

This commit is contained in:
Magnus Hoff 2017-09-01 16:34:24 +02:00
parent 94758adaf4
commit 405b203bc7
5 changed files with 168 additions and 7 deletions

View file

@ -8,6 +8,7 @@ extern crate chrono;
extern crate clap;
extern crate futures;
extern crate hyper;
extern crate pulldown_cmark;
use std::net::SocketAddr;

View file

@ -1,7 +1,6 @@
use chrono;
#[derive(BartDisplay, Clone, Debug, Queryable)]
#[template="templates/article_revision.html"]
#[derive(Debug, Queryable)]
pub struct ArticleRevision {
pub article_id: i32,
pub revision: i32,

View file

@ -10,6 +10,15 @@ use models;
use state::State;
use web::{Lookup, Resource};
fn render_markdown(src: &str) -> String {
use pulldown_cmark::{Parser, html};
let p = Parser::new(src);
let mut buf = String::new();
html::push_html(&mut buf, p);
buf
}
lazy_static! {
static ref TEXT_HTML: mime::Mime = "text/html;charset=utf-8".parse().unwrap();
}
@ -87,11 +96,30 @@ impl Resource for ArticleResource {
}
fn get(self) -> futures::BoxFuture<Response, Box<::std::error::Error + Send>> {
use chrono::{self, TimeZone, Local};
#[derive(BartDisplay)]
#[template="templates/article_revision.html"]
struct Template<'a> {
article_id: i32,
revision: i32,
created: &'a chrono::DateTime<Local>,
title: &'a str,
body: String,
}
self.head().map(move |head|
head
.with_body(Layout {
title: &self.data.title,
body: &self.data
body: &Template {
article_id: self.data.article_id,
revision: self.data.revision,
created: &Local.from_utc_datetime(&self.data.created),
title: &self.data.title,
body: render_markdown(&self.data.body),
}
}.to_string())
).boxed()
}

View file

@ -1,5 +1,20 @@
<p>{{article_id}}-{{revision}}</p>
<p>{{created}}</p>
<header>
<h1>{{title}}</h1>
<p>{{body}}</p>
</header>
<article>
{{{body}}}
</article>
<footer>
<dl>
<dt>Article ID</dt>
<dd>{{article_id}}</dd>
<dt>Revision</dt>
<dd>{{revision}}</dd>
<dt>Last updated</dt>
<dd>{{created}}</dd>
</dl>
</footer>

View file

@ -2,6 +2,124 @@
<html>
<head>
<title>{{title}}</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet">
<style>
html {
font-family: "Apple Garamond", "Baskerville",
"Times New Roman", "Droid Serif", "Times",
"Source Serif Pro", serif;
}
h1 {
font-family: 'Amatic SC', cursive;
font-weight: normal;
font-style: normal;
font-size: 40px;
line-height: 54px;
}
h2 {
font-family: inherit;
font-weight: bold;
font-style: normal;
font-size: 18px;
line-height: 32px;
margin-top: 32px;
margin-bottom: 0;
}
header {
max-width: 600px;
width: 100%;
margin: 40px auto 0 auto;
}
article {
font-size: 18px;
line-height: 32px;
max-width: 600px;
width: 100%;
margin: 0 auto 120px auto;
}
p {
margin: 0 0 28px 0;
}
code, pre {
background: #f8f8f8;
font-family: "SF Mono", "Monaco",
"Inconsolata", "Fira Mono",
"Droid Sans Mono", "Source Code Pro",
monospace;
}
pre {
overflow: auto;
}
a {
color: #5e90af;
}
a:visited {
color: inherit;
}
a:hover {
color: #79b9e1;
}
/* Sticky footer */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column;
}
article {
flex: 1;
}
footer {
background: #f8f8f8;
color: #444;
text-align: center;
font-family: -apple-system, BlinkMacSystemFont,
"Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans",
"Droid Sans", "Helvetica Neue", sans-serif;
}
footer dt, footer dd {
display: inline;
margin: 0;
}
footer dt::after {
content: ": ";
display: inline;
}
footer dd::after {
content: "|";
margin: 0 12px;
}
footer dd:last-child::after {
content: "";
margin: 0;
}
</style>
</head>
<body>
{{{body}}}