New UI and Post/Comment Timestamps

This commit is contained in:
spikecodes 2020-10-10 13:56:22 -07:00
parent 442d3abd0b
commit a470f83d49
9 changed files with 128 additions and 65 deletions

1
Cargo.lock generated
View File

@ -825,6 +825,7 @@ checksum = "a2f02823cf78b754822df5f7f268fb59822e7296276d3e069d8e8cb26a14bd10"
name = "libreddit"
version = "0.1.1"
dependencies = [
"chrono",
"comrak",
"reqwest",
"rocket",

View File

@ -11,6 +11,7 @@ serde_json = "1.0"
reqwest = { version = "0.10", features = ["blocking"] }
rocket = "0.4.5"
comrak = "0.8"
chrono = "0.4"
[dependencies.rocket_contrib]
version = "0.4.5"

View File

@ -1,15 +1,17 @@
extern crate comrak;
use comrak::{markdown_to_html, ComrakOptions};
use rocket_contrib::templates::Template;
use chrono::{TimeZone, Utc};
#[get("/r/<subreddit>/comments/<id>/<title>")]
pub fn page(subreddit: String, id: String, title: String) -> Template {
let post: String = post_html(subreddit.as_str(), id.as_str(), title.as_str());
let comments: String = comments_html(subreddit, id, title);
let comments: String = comments_html(subreddit, id, String::from(&title));
let mut context = std::collections::HashMap::new();
context.insert("comments", comments);
context.insert("post", post);
context.insert("title", title.replace("_", " "));
// context.insert("sort", String::from("hot"));
// context.insert("sub", String::from(subreddit.as_str()));
@ -22,13 +24,15 @@ pub struct Post {
pub body: String,
pub author: String,
pub score: i64,
pub media: String
pub media: String,
pub time: String
}
pub struct Comment {
pub body: String,
pub author: String,
pub score: i64
pub score: i64,
pub time: String
}
fn val (j: &serde_json::Value, k: &str) -> String { String::from(j["data"][k].as_str().unwrap_or("")) }
@ -48,6 +52,7 @@ pub fn post_html (sub: &str, id: &str, title: &str) -> String {
Posted by
<a class="post_author" href="/u/{author}">u/{author}</a>
<span style="float: right;">{time}</span>
</p>
<h3 class="post_title">{t}</h3>
{media}
@ -55,7 +60,7 @@ pub fn post_html (sub: &str, id: &str, title: &str) -> String {
</div>
</div><br>
"#, if post.score>1000{format!("{}k", post.score/1000)} else {post.score.to_string()}, sub = post.community,
author = post.author, t = post.title, media = post.media, b = post.body)
author = post.author, t = post.title, media = post.media, b = post.body, time = post.time)
}
fn comments_html (sub: String, id: String, title: String) -> String {
@ -69,12 +74,16 @@ fn comments_html (sub: String, id: String, title: String) -> String {
<button class="post_upvote"></button>
</div>
<div class="post_right">
<p>Posted by <a class="post_author" href="/u/{author}">u/{author}</a></p>
<p>
Posted by <a class="post_author" href="/u/{author}">u/{author}</a>
<span style="float: right;">{time}</span>
</p>
<h4 class="post_body">{t}</h4>
</div>
</div><br>
"#, if comment.score>1000{format!("{}k", comment.score/1000)} else {comment.score.to_string()},
author = comment.author, t = comment.body);
author = comment.author, t = comment.body, time = comment.time);
html.push(hc)
}; html.join("\n")
}
@ -102,13 +111,16 @@ fn fetch_post (sub: String, id: String, title: String) -> Result<Post, Box<dyn s
let post_data: &serde_json::Value = &data[0]["data"]["children"][0];
let unix_time: i64 = post_data["data"]["created_utc"].as_f64().unwrap().round() as i64;
Ok(Post {
title: val(post_data, "title"),
community: val(post_data, "subreddit"),
body: markdown_to_html(post_data["data"]["selftext"].as_str().unwrap(), &ComrakOptions::default()),
author: val(post_data, "author"),
score: post_data["data"]["score"].as_i64().unwrap(),
media: media(post_data)
media: media(post_data),
time: Utc.timestamp(unix_time, 0).to_string()
})
}
@ -123,10 +135,12 @@ fn fetch_comments (sub: String, id: String, title: String) -> Result<Vec<Comment
let mut comments: Vec<Comment> = Vec::new();
for comment in comment_data.iter() {
let unix_time: i64 = comment["data"]["created_utc"].as_f64().unwrap_or(0.0).round() as i64;
comments.push(Comment {
body: markdown_to_html(comment["data"]["body"].as_str().unwrap_or(""), &ComrakOptions::default()),
author: val(comment, "author"),
score: comment["data"]["score"].as_i64().unwrap_or(0)
score: comment["data"]["score"].as_i64().unwrap_or(0),
time: Utc.timestamp(unix_time, 0).to_string()
});
}

View File

@ -1,4 +1,5 @@
use rocket_contrib::templates::Template;
use chrono::{TimeZone, Utc};
#[allow(dead_code)]
#[get("/r/<sub_name>")]
@ -36,7 +37,8 @@ pub struct Post {
pub author: String,
pub score: i64,
pub image: String,
pub url: String
pub url: String,
pub time: String
}
pub struct Subreddit {
@ -64,13 +66,14 @@ pub fn posts_html (sub: &str, sort: &str) -> String {
Posted by
<a class="post_author" href="/u/{author}">u/{author}</a>
<span style="float: right;">{time}</span>
</p>
<h3 class="post_title"><a href="{u}">{t}</a></h3>
</div>
<img class="post_thumbnail" src="{thumb}">
</div><br>
"#, if post.score>1000{format!("{}k", post.score/1000)} else {post.score.to_string()}, sub = post.community,
author = post.author, u = post.url, t = post.title, thumb = post.image);
author = post.author, u = post.url, t = post.title, thumb = post.image, time = post.time);
html_posts.push(hp)
}; html_posts.join("\n")
}
@ -119,13 +122,15 @@ pub fn posts(sub: &str, sort: &str) -> Result<Vec<Post>, Box<dyn std::error::Err
for post in post_list.iter() {
let img = if val(post, "thumbnail").starts_with("https:/") { val(post, "thumbnail") } else { String::new() };
let unix_time: i64 = post["data"]["created_utc"].as_f64().unwrap().round() as i64;
posts.push(Post {
title: val(post, "title"),
community: val(post, "subreddit"),
author: val(post, "author"),
score: post["data"]["score"].as_i64().unwrap(),
image: img,
url: val(post, "permalink")
url: val(post, "permalink"),
time: Utc.timestamp(unix_time, 0).format("%d/%m/%y").to_string()
});
}

View File

@ -1,4 +1,5 @@
use rocket_contrib::templates::Template;
use chrono::{TimeZone, Utc};
#[get("/u/<username>")]
pub fn page(username: String) -> Template {
@ -57,7 +58,8 @@ pub struct Post {
pub author: String,
pub score: i64,
pub image: String,
pub url: String
pub url: String,
pub time: String
}
fn user_val (j: &serde_json::Value, k: &str) -> String { String::from(j["data"]["subreddit"][k].as_str().unwrap()) }
@ -94,13 +96,14 @@ pub fn posts_html (name: &str, sort: &str) -> String {
Posted by
<a class="post_author" href="/u/{author}">u/{author}</a>
<span style="float: right;">{time}</span>
</p>
<h3 class="post_title"><a href="{u}">{t}</a></h3>
</div>
<img class="post_thumbnail" src="{thumb}">
</div><br>
"#, if post.score>1000{format!("{}k", post.score/1000)} else {post.score.to_string()}, sub = post.community,
author = post.author, u = post.url, t = post.title, thumb = post.image);
author = post.author, u = post.url, t = post.title, thumb = post.image, time = post.time);
html_posts.push(hp)
}; html_posts.join("\n")
}
@ -114,6 +117,8 @@ pub fn posts(name: &str, sort: &str) -> Result<Vec<Post>, Box<dyn std::error::Er
let post_list = popular["data"]["children"].as_array().unwrap();
let mut posts: Vec<Post> = Vec::new();
let unix_time: i64 = popular["data"]["created"].as_f64().unwrap().round() as i64;
for post in post_list.iter() {
if post_val(post, "title") == "Comment" { continue };
@ -123,7 +128,8 @@ pub fn posts(name: &str, sort: &str) -> Result<Vec<Post>, Box<dyn std::error::Er
author: String::from(name),
score: post["data"]["score"].as_i64().unwrap(),
image: String::new(),
url: post_val(post, "permalink")
url: post_val(post, "permalink"),
time: Utc.timestamp(unix_time, 0).format("%d/%m/%y").to_string()
});
}

View File

@ -1,6 +1,6 @@
<html>
<head>
<title>Libreddit</title>
<title>Libreddit: Alternative private front-end to Reddit </title>
<style>
* {
transition: 0.2s all;
@ -17,9 +17,11 @@
display: flex;
justify-content: space-between;
color: aqua;
background: #111;
padding: 10px;
border-bottom: 2px solid #222;
background: #151515;
padding: 15px;
font-weight: bold;
font-size: 20px;
/* border-bottom: 3px solid #222; */
}
main {
@ -52,7 +54,7 @@
}
#sort > div {
background: #111;
background: #151515;
color: lightgrey;
border-radius: 5px;
margin-right: 5px;
@ -60,6 +62,7 @@
width: 50px;
text-align: center;
cursor: pointer;
font-weight: bold;
}
#sort > div:hover {
@ -67,13 +70,14 @@
}
#sort > #sort_{{sort}} {
background: #333;
background: aqua;
color: black;
}
.post {
border: 2px solid #222;
/* border: 3px solid #222; */
border-radius: 5px;
background: #111;
background: #151515;
display: flex;
}
@ -95,7 +99,7 @@
background: #222;
border-radius: 5px 0px 0px 5px;
min-width: 50px;
padding: 10px 0px;
padding: 5px;
}
.post_upvote {
@ -103,11 +107,12 @@
}
.post_score {
margin-top: 10px;
margin-top: 1em;
color: aqua;
}
.post_right {
padding: 10px 25px;
padding: 20px 25px;
flex-grow: 1;
flex-shrink: 1;
}
@ -124,7 +129,8 @@
object-fit: cover;
width: auto;
flex-shrink: 0;
border-radius: 0px 5px 5px 0px;
padding: 10px;
border-radius: 15px;
}
.post_thumbnail[src=""] {
@ -133,7 +139,10 @@
</style>
</head>
<body>
<header><a href="/">LIBREDDIT</a><a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a></header>
<header>
<a href="/"><span style="color:white">lib</span>reddit.</a>
<a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a>
</header>
<div id="sort">
<div id="sort_hot"><a href="/hot">Hot</a></div>
<div id="sort_top"><a href="/top">Top</a></div>

View File

@ -1,6 +1,7 @@
<html>
<head>
<title>Libreddit</title>
<title>{{title}}</title>
<meta name="description" content="View post and karma on Libreddit, the private frontend for Reddit.">
<style>
* {
transition: 0.2s all;
@ -17,9 +18,11 @@
display: flex;
justify-content: space-between;
color: aqua;
background: #111;
padding: 10px;
border-bottom: 2px solid #222;
background: #151515;
padding: 15px;
font-weight: bold;
font-size: 20px;
/* border-bottom: 3px solid #222; */
}
main {
@ -72,7 +75,7 @@
}
#sort > div {
background: #111;
background: #151515;
color: lightgrey;
border-radius: 5px;
margin-right: 5px;
@ -80,6 +83,7 @@
width: 50px;
text-align: center;
cursor: pointer;
font-weight: bold;
}
#sort > div:hover {
@ -87,13 +91,14 @@
}
#sort > #sort_{{sort}} {
background: #333;
background: aqua;
color: black;
}
.post {
border: 2px solid #222;
/* border: 3px solid #222; */
border-radius: 5px;
background: #111;
background: #151515;
display: flex;
}
@ -115,7 +120,7 @@
background: #222;
border-radius: 5px 0px 0px 5px;
min-width: 50px;
padding: 10px 0px;
padding: 5px;
}
.post_upvote {
@ -123,11 +128,12 @@
}
.post_score {
margin-top: 10px;
margin-top: 1em;
color: aqua;
}
.post_right {
padding: 10px 25px;
padding: 20px 25px;
flex-grow: 1;
flex-shrink: 1;
}
@ -166,7 +172,10 @@
</style>
</head>
<body>
<header><a href="/">LIBREDDIT</a><a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a></header>
<header>
<a href="/"><span style="color:white">lib</span>reddit.</a>
<a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a>
</header>
{{!-- <div id="sort">
<div id="sort_new"><a href="/u/{{user}}/?sort=new">New</a></div>
<div id="sort_hot"><a href="/u/{{user}}/?sort=hot">Hot</a></div>

View File

@ -17,9 +17,11 @@
display: flex;
justify-content: space-between;
color: aqua;
background: #111;
padding: 10px;
border-bottom: 2px solid #222;
background: #151515;
padding: 15px;
font-weight: bold;
font-size: 20px;
/* border-bottom: 3px solid #222; */
}
main {
@ -44,7 +46,7 @@
}
#about {
background: #111;
background: #151515;
}
.subreddit {
@ -75,7 +77,7 @@
}
#sort > div {
background: #111;
background: #151515;
color: lightgrey;
border-radius: 5px;
margin-right: 5px;
@ -83,6 +85,7 @@
width: 50px;
text-align: center;
cursor: pointer;
font-weight: bold;
}
#sort > div:hover {
@ -90,13 +93,14 @@
}
#sort > #sort_{{sort}} {
background: #333;
background: aqua;
color: black;
}
.post {
border: 2px solid #222;
/* border: 3px solid #222; */
border-radius: 5px;
background: #111;
background: #151515;
display: flex;
}
@ -118,7 +122,7 @@
background: #222;
border-radius: 5px 0px 0px 5px;
min-width: 50px;
padding: 10px 0px;
padding: 5px;
}
.post_upvote {
@ -126,11 +130,12 @@
}
.post_score {
margin-top: 10px;
margin-top: 1em;
color: aqua;
}
.post_right {
padding: 10px 25px;
padding: 20px 25px;
flex-grow: 1;
flex-shrink: 1;
}
@ -147,7 +152,8 @@
object-fit: cover;
width: auto;
flex-shrink: 0;
border-radius: 0px 5px 5px 0px;
padding: 10px;
border-radius: 15px;
}
.post_thumbnail[src=""] {
@ -156,7 +162,10 @@
</style>
</head>
<body>
<header><a href="/">LIBREDDIT</a><a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a></header>
<header>
<a href="/"><span style="color:white">lib</span>reddit.</a>
<a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a>
</header>
<div id="about">{{{about}}}</div>
<div id="sort">
<div id="sort_hot"><a href="/r/{{sub}}/hot">Hot</a></div>

View File

@ -17,9 +17,11 @@
display: flex;
justify-content: space-between;
color: aqua;
background: #111;
padding: 10px;
border-bottom: 2px solid #222;
background: #151515;
padding: 15px;
font-weight: bold;
font-size: 20px;
/* border-bottom: 3px solid #222; */
}
main {
@ -48,7 +50,7 @@
}
#about {
background: #111;
background: #151515;
}
.user {
@ -79,7 +81,7 @@
}
#sort > div {
background: #111;
background: #151515;
color: lightgrey;
border-radius: 5px;
margin-right: 5px;
@ -87,6 +89,7 @@
width: 50px;
text-align: center;
cursor: pointer;
font-weight: bold;
}
#sort > div:hover {
@ -94,7 +97,8 @@
}
#sort > #sort_{{sort}} {
background: #333;
background: aqua;
color: black;
}
#note {
@ -104,9 +108,9 @@
}
.post {
border: 2px solid #222;
/* border: 3px solid #222; */
border-radius: 5px;
background: #111;
background: #151515;
display: flex;
}
@ -128,7 +132,7 @@
background: #222;
border-radius: 5px 0px 0px 5px;
min-width: 50px;
padding: 10px 0px;
padding: 5px;
}
.post_upvote {
@ -136,11 +140,12 @@
}
.post_score {
margin-top: 10px;
margin-top: 1em;
color: aqua;
}
.post_right {
padding: 10px 25px;
padding: 20px 25px;
flex-grow: 1;
flex-shrink: 1;
}
@ -157,7 +162,8 @@
object-fit: cover;
width: auto;
flex-shrink: 0;
border-radius: 0px 5px 5px 0px;
padding: 10px;
border-radius: 15px;
}
.post_thumbnail[src=""] {
@ -166,7 +172,10 @@
</style>
</head>
<body>
<header><a href="/">LIBREDDIT</a><a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a></header>
<header>
<a href="/"><span style="color:white">lib</span>reddit.</a>
<a style="color:white" href="https://github.com/spikecodes/libreddit">GITHUB</a>
</header>
<div id="about">{{{about}}}</div>
<h3 id="note">Note: Libreddit currently only shows a user's posts, comments are not shown.</h3>
<div id="sort">