Some layout and styling
This commit is contained in:
Magnus Hoff
parent
94758adaf4
commit
405b203bc7
5 changed files with 168 additions and 7 deletions
|
|
@ -8,6 +8,7 @@ extern crate chrono;
|
||||||
extern crate clap;
|
extern crate clap;
|
||||||
extern crate futures;
|
extern crate futures;
|
||||||
extern crate hyper;
|
extern crate hyper;
|
||||||
|
extern crate pulldown_cmark;
|
||||||
|
|
||||||
use std::net::SocketAddr;
|
use std::net::SocketAddr;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
use chrono;
|
use chrono;
|
||||||
|
|
||||||
#[derive(BartDisplay, Clone, Debug, Queryable)]
|
#[derive(Debug, Queryable)]
|
||||||
#[template="templates/article_revision.html"]
|
|
||||||
pub struct ArticleRevision {
|
pub struct ArticleRevision {
|
||||||
pub article_id: i32,
|
pub article_id: i32,
|
||||||
pub revision: i32,
|
pub revision: i32,
|
||||||
|
|
|
||||||
30
src/site.rs
30
src/site.rs
|
|
@ -10,6 +10,15 @@ use models;
|
||||||
use state::State;
|
use state::State;
|
||||||
use web::{Lookup, Resource};
|
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! {
|
lazy_static! {
|
||||||
static ref TEXT_HTML: mime::Mime = "text/html;charset=utf-8".parse().unwrap();
|
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>> {
|
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|
|
self.head().map(move |head|
|
||||||
head
|
head
|
||||||
.with_body(Layout {
|
.with_body(Layout {
|
||||||
title: &self.data.title,
|
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())
|
}.to_string())
|
||||||
).boxed()
|
).boxed()
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,20 @@
|
||||||
<p>{{article_id}}-{{revision}}</p>
|
<header>
|
||||||
<p>{{created}}</p>
|
|
||||||
|
|
||||||
<h1>{{title}}</h1>
|
<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>
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,124 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{title}}</title>
|
<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>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{{{body}}}
|
{{{body}}}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue