Markdown and Subreddit Sidebars

This commit is contained in:
spikecodes 2020-12-28 18:42:46 -08:00
parent ac84d8d2db
commit 443b198c12
11 changed files with 153 additions and 182 deletions

46
Cargo.lock generated
View File

@ -753,15 +753,6 @@ dependencies = [
"version_check 0.9.2",
]
[[package]]
name = "getopts"
version = "0.2.21"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "14dbbfd5c71d70241ecf9e6f13737f7b5ce823821063188d7e46c41d371eebd5"
dependencies = [
"unicode-width",
]
[[package]]
name = "getrandom"
version = "0.1.15"
@ -972,9 +963,9 @@ checksum = "47be2f14c678be2fdcab04ab1171db51b2762ce6f0a8ee87c8dd4a04ed216135"
[[package]]
name = "itoa"
version = "0.4.6"
version = "0.4.7"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "dc6f3ad7b9d11a0c00842ff8de1b60ee58661048eb8049ed33c73594f359d7e6"
checksum = "dd25036021b0de88a0aff6b850051563c6516d0bf53f8638938edbb9de732736"
[[package]]
name = "js-sys"
@ -1015,14 +1006,13 @@ checksum = "1482821306169ec4d07f6aca392a4681f66c75c9918aa49641a2595db64053cb"
[[package]]
name = "libreddit"
version = "0.2.2"
version = "0.2.3"
dependencies = [
"actix-web",
"askama",
"async-recursion",
"base64 0.13.0",
"chrono",
"pulldown-cmark",
"reqwest",
"serde",
"serde_json",
@ -1340,18 +1330,6 @@ dependencies = [
"unicode-xid 0.2.1",
]
[[package]]
name = "pulldown-cmark"
version = "0.8.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "ffade02495f22453cd593159ea2f59827aae7f53fa8323f756799b670881dcf8"
dependencies = [
"bitflags",
"getopts",
"memchr",
"unicase",
]
[[package]]
name = "quick-error"
version = "1.2.3"
@ -1589,9 +1567,9 @@ dependencies = [
[[package]]
name = "serde_json"
version = "1.0.60"
version = "1.0.61"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "1500e84d27fe482ed1dc791a56eddc2f230046a040fa908c08bda1d9fb615779"
checksum = "4fceb2595057b6891a4ee808f70054bd2d12f0e97f1cbb78689b59f676df325a"
dependencies = [
"itoa",
"ryu",
@ -1749,18 +1727,18 @@ dependencies = [
[[package]]
name = "thiserror"
version = "1.0.22"
version = "1.0.23"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "0e9ae34b84616eedaaf1e9dd6026dbe00dcafa92aa0c8077cb69df1fcfe5e53e"
checksum = "76cc616c6abf8c8928e2fdcc0dbfab37175edd8fb49a4641066ad1364fdab146"
dependencies = [
"thiserror-impl",
]
[[package]]
name = "thiserror-impl"
version = "1.0.22"
version = "1.0.23"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9ba20f23e85b10754cd195504aebf6a27e2e6cbe28c17778a0c930724628dd56"
checksum = "9be73a2caec27583d0046ef3796c3794f868a5bc813db689eed00c7631275cd1"
dependencies = [
"proc-macro2 1.0.24",
"quote 1.0.8",
@ -2027,12 +2005,6 @@ version = "1.7.1"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "bb0d2e7be6ae3a5fa87eed5fb451aff96f2573d2694942e40543ae0bbe19c796"
[[package]]
name = "unicode-width"
version = "0.1.8"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "9337591893a19b88d8d87f2cec1e73fad5cdfd10e5a6f349f498ad6ea2ffb1e3"
[[package]]
name = "unicode-xid"
version = "0.1.0"

View File

@ -3,7 +3,7 @@ name = "libreddit"
description = " Alternative private front-end to Reddit"
license = "AGPL-3.0"
repository = "https://github.com/spikecodes/libreddit"
version = "0.2.2"
version = "0.2.3"
authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"]
edition = "2018"
@ -18,6 +18,5 @@ reqwest = { version = "0.10", default_features = false, features = ["rustls-tls"
askama = "0.8.0"
serde = "1.0.117"
serde_json = "1.0"
pulldown-cmark = "0.8.0"
chrono = "0.4.19"
async-recursion = "0.3.1"

View File

@ -6,7 +6,6 @@ use async_recursion::async_recursion;
use askama::Template;
use chrono::{TimeZone, Utc};
use pulldown_cmark::{html, Options, Parser};
// STRUCTS
#[derive(Template)]
@ -27,8 +26,8 @@ async fn render(id: String, sort: Option<String>, comment_id: Option<String>) ->
// Build the Reddit JSON API url
let url: String = match comment_id {
None => format!("{}.json?sort={}", id, sorting),
Some(val) => format!("{}.json?sort={}&comment={}", id, sorting, val),
None => format!("{}.json?sort={}&raw_json=1", id, sorting),
Some(val) => format!("{}.json?sort={}&comment={}&raw_json=1", id, sorting, val),
};
// Send a request to the url, receive JSON in response
@ -95,20 +94,6 @@ async fn media(data: &serde_json::Value) -> (String, String) {
(post_type.to_string(), url)
}
async fn markdown_to_html(md: &str) -> String {
let mut options = Options::empty();
options.insert(Options::ENABLE_TABLES);
options.insert(Options::ENABLE_FOOTNOTES);
options.insert(Options::ENABLE_STRIKETHROUGH);
options.insert(Options::ENABLE_TASKLISTS);
let parser = Parser::new_ext(md, options);
// Write to String buffer.
let mut html_output = String::new();
html::push_html(&mut html_output, parser);
html_output
}
// POSTS
async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
// Retrieve post (as opposed to comments) from JSON
@ -126,7 +111,7 @@ async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
let post = Post {
title: val(post_data, "title").await,
community: val(post_data, "subreddit").await,
body: markdown_to_html(post_data["data"]["selftext"].as_str().unwrap()).await,
body: val(post_data,"selftext_html").await,
author: val(post_data, "author").await,
author_flair: Flair(
val(post_data, "author_flair_text").await,
@ -169,7 +154,7 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'stati
}
let score = comment["data"]["score"].as_i64().unwrap_or(0);
let body = markdown_to_html(comment["data"]["body"].as_str().unwrap_or("")).await;
let body = val(comment, "body_html").await;
let replies: Vec<Comment> = if comment["data"]["replies"].is_object() {
parse_comments(comment["data"]["replies"].clone()).await.unwrap_or(Vec::new())

View File

@ -36,14 +36,7 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String
let sub_result = if !&sub_name.contains("+") {
subreddit(&sub_name).await
} else {
Ok(Subreddit {
name: String::new(),
title: String::new(),
description: String::new(),
icon: String::new(),
members: String::new(),
active: String::new(),
})
Ok(Subreddit::default())
};
let items_result = fetch_posts(url, String::new()).await;
@ -73,7 +66,7 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String
// SUBREDDIT
async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
// Build the Reddit JSON API url
let url: String = format!("r/{}/about.json", sub);
let url: String = format!("r/{}/about.json?raw_json=1", sub);
// Send a request to the url, receive JSON in response
let req = request(url).await;
@ -102,6 +95,7 @@ async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
name: val(&res, "display_name").await,
title: val(&res, "title").await,
description: val(&res, "public_description").await,
info: val(&res, "description_html").await.replace("\\", ""),
icon: format_url(icon).await,
members: format_num(members.try_into().unwrap()),
active: format_num(active.try_into().unwrap()),

View File

@ -21,10 +21,10 @@ async fn render(username: String, sort: Option<String>, ends: (Option<String>, O
// Build the Reddit JSON API url
let url = match ends.0 {
Some(val) => format!("user/{}/.json?sort={}&before={}&count=25", username, sorting, val),
Some(val) => format!("user/{}/.json?sort={}&before={}&count=25&raw_json=1", username, sorting, val),
None => match ends.1 {
Some(val) => format!("user/{}/.json?sort={}&after={}&count=25", username, sorting, val),
None => format!("user/{}/.json?sort={}", username, sorting),
Some(val) => format!("user/{}/.json?sort={}&after={}&count=25&raw_json=1", username, sorting, val),
None => format!("user/{}/.json?sort={}&raw_json=1", username, sorting),
},
};

View File

@ -51,11 +51,13 @@ pub struct User {
pub description: String,
}
#[derive(Default)]
// Subreddit struct containing metadata about community
pub struct Subreddit {
pub name: String,
pub title: String,
pub description: String,
pub info: String,
pub icon: String,
pub members: String,
pub active: String,
@ -149,7 +151,7 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
posts.push(Post {
title: if title.is_empty() { fallback_title.to_owned() } else { title },
community: val(post, "subreddit").await,
body: val(post, "body").await,
body: val(post, "body_html").await,
author: val(post, "author").await,
author_flair: Flair(
val(post, "author_flair_text").await,

View File

@ -12,10 +12,9 @@
* {
transition: 0.2s all;
margin: 0px;
margin: 0;
color: white;
font-family: sans-serif;
font-weight: normal;
outline: none;
}
@ -30,7 +29,6 @@ nav {
color: var(--accent);
background: var(--outside);
padding: 15px;
font-weight: bold;
font-size: 20px;
}
@ -43,13 +41,12 @@ main {
justify-content: center;
max-width: 750px;
padding: 10px 20px;
margin: 0 auto;
margin: 20px auto;
}
footer {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
button {
@ -58,6 +55,10 @@ button {
font-weight: bold;
}
hr {
margin: 20px 0;
}
a {
color: inherit;
text-decoration: none;
@ -67,19 +68,14 @@ a:not(.post_right):hover {
text-decoration: underline;
}
#about {
padding-top: 20px;
background: #151515;
img[src=""] {
display: none;
}
aside {
/* background: #151515; */
padding: 20px;
height: max-content;
border-radius: 5px;
flex-grow: 1;
margin: 80px 20px 0px 20px;
background: var(--outside);
margin: 20px 20px 0 20px;
max-width: 350px;
}
#version {
@ -89,15 +85,27 @@ aside {
/* User & Subreddit */
.user, .subreddit {
max-width: 350px;
margin: 0 auto;
#user, #subreddit, #sidebar {
margin: 40px auto 0 auto;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
height: max-content;
background: var(--outside);
border-radius: 5px;
}
.user_icon, .subreddit_icon {
#sidebar, #sidebar_contents {
margin-top: 20px;
}
#sidebar_label {
border: 2px solid var(--highlighted);
padding: 10px;
}
#user_icon, #subreddit_icon {
width: 100px;
height: 100px;
border: 2px solid var(--accent);
@ -106,24 +114,24 @@ aside {
margin: 10px;
}
.user_name, .subreddit_name {
#user_name, #subreddit_name {
margin-top: 10px;
}
.user_description, .subreddit_description {
#user_description, #subreddit_description {
margin: 10px 20px;
text-align: center;
font-size: 15px;
}
.user_details, .subreddit_details {
#user_details, #subreddit_details {
display: grid;
grid-template-columns: repeat(2, 1fr);
margin-top: 15px;
grid-column-gap: 20px;
}
.user_details > label, .subreddit_details > label {
#user_details > label, #subreddit_details > label {
color: var(--accent);
font-size: 15px;
}
@ -133,23 +141,26 @@ aside {
#sort {
background: var(--outside);
box-shadow: var(--black-contrast);
border: 0px;
padding: 0px 15px;
margin: 20px 0px;
border: 0;
padding: 0 15px;
margin-bottom: 20px;
height: 40px;
font-size: 15px;
border-radius: 5px 0px 0px 5px;
border-radius: 5px 0 0 5px;
appearance: none;
}
#sort_submit {
background: var(--highlighted);
border: 0px;
border: 0;
font-size: 15px;
height: 40px;
border-radius: 0px 5px 5px 0px;
border-radius: 0 5px 5px 0;
}
#sort:hover { background: var(--foreground); }
#sort_submit:hover { color: var(--accent); }
#sort > div, footer > a {
box-shadow: var(--black-contrast);
background: var(--outside);
@ -180,7 +191,7 @@ aside {
}
.post.highlighted {
margin-top: 20px;
margin: 20px 0;
}
.post:hover {
@ -200,7 +211,7 @@ aside {
.post_left {
text-align: center;
background: var(--foreground);
border-radius: 5px 0px 0px 5px;
border-radius: 5px 0 0 5px;
min-width: 50px;
padding: 5px;
}
@ -208,6 +219,7 @@ aside {
.post_score {
margin-top: 20px;
color: var(--accent);
font-size: 16px;
}
.nsfw {
@ -238,35 +250,17 @@ aside {
margin: 5px;
}
.post_right > p {
opacity: 0.75;
font-size: 16px;
}
.post_media {
max-width: 90%;
align-self: center;
}
.post_media[src=""] {
display: none;
}
.post_body {
opacity: 0.9;
font-weight: normal;
margin: 10px 5px;
}
.post_body > p:not(:first-child) {
margin-top: 20px;
}
.post_body a {
text-decoration: underline;
color: var(--accent);
}
#post_url {
color: var(--accent);
}
@ -280,10 +274,6 @@ aside {
max-width: 20%;
}
.post_thumbnail[src=""] {
display: none;
}
.post_flair {
background: var(--accent);
color: black;
@ -311,17 +301,13 @@ aside {
.comment_left {
text-align: center;
min-width: 50px;
padding: 5px 0px;
padding: 5px 0;
align-items: center;
}
.comment_title {
font-size: 20px;
}
.comment_author {
opacity: 0.9;
}
.comment_title { font-size: 20px; }
.comment_link { text-decoration: underline; }
.comment_author { opacity: 0.9; }
.comment_author.op {
color: var(--accent);
@ -347,7 +333,8 @@ aside {
background: var(--foreground);
min-width: 40px;
border-radius: 5px;
padding: 10px 0px;
padding: 10px 0;
font-size: 16px;
}
.comment_right {
@ -366,10 +353,6 @@ aside {
align-self: center;
}
.comment_image[src=""] {
display: none;
}
.comment_body {
opacity: 0.9;
font-weight: normal;
@ -418,9 +401,34 @@ aside {
background: black;
}
/* Code */
/* Markdown */
pre {
.md > *:not(:first-child) {
margin-top: 20px;
}
.md p { font-size: 15px; }
.md h1 { font-size: 22px; }
.md h2 { font-size: 20px; }
.md h3 { font-size: 18px; }
.md h4 { font-size: 16px; }
.md h5 { font-size: 14px; }
.md h6 { font-size: 12px; }
.md blockquote {
padding-left: 8px;
margin: 4px 0 4px 8px;
border-left: 4px solid var(--highlighted);
}
.md a {
text-decoration: underline;
color: var(--accent);
}
.md li { margin: 10px 0; }
.md pre {
background: var(--outside);
padding: 20px;
margin-top: 10px;
@ -428,11 +436,13 @@ pre {
box-shadow: var(--black-contrast);
}
code {
.md code {
font-family: monospace;
font-size: 14px;
}
.md code:not(.md pre > code) { background: var(--highlighted); }
/* Tables */
table {
@ -453,7 +463,7 @@ td, th {
}
.post_left {
border-radius: 0px 0px 5px 5px;
border-radius: 0 0 5px 5px;
}
.post_right {
@ -470,7 +480,7 @@ td, th {
.replies > .comment {
margin-left: -25px;
padding: 5px 0px;
padding: 5px 0;
}
.datetime {
@ -484,6 +494,11 @@ td, th {
}
aside {
margin: 20px 0px 0px 0px;
margin: 20px 0 0 0;
max-width: 100%;
}
#sidebar {
margin: 20px 0;
}
}

View File

@ -12,24 +12,24 @@
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
<p class="post_score">{{ post.score }}</p>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<p>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
</p>
<p class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</p>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
@ -37,11 +37,11 @@
<footer>
{% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a>
<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
{% endif %}
{% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a>
<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
{% endif %}
</footer>
</div>

View File

@ -9,7 +9,7 @@
<div id="{{ item.id }}" class="comment">
<div class="comment_left">
<h3 class="comment_score">{{ item.score }}</h3>
<p class="comment_score">{{ item.score }}</p>
<div class="line"></div>
</div>
<details class="comment_right" open>
@ -19,7 +19,7 @@
{% endif %}
&bull; <span class="datetime">{{ item.time }}</span>
</summary>
<h4 class="comment_body">{{ item.body }}</h4>
<p class="comment_body">{{ item.body }}</p>
{%- endmacro %}
@ -27,11 +27,11 @@
<div id="column_one">
<div class="post highlighted">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
<p class="post_score">{{ post.score }}</p>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<p>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull;
<a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
@ -39,7 +39,7 @@
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
</p>
<a href="{{ post.url }}" class="post_title">
{{ post.title }}
{% if post.flair.0 != "" %}
@ -53,7 +53,7 @@
{% else if post.post_type == "link" %}
<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
{% endif %}
<h4 class="post_body">{{ post.body }}</h4>
<div class="post_body">{{ post.body }}</div>
</div>
</div>
<form>

View File

@ -17,24 +17,24 @@
{% for post in posts %}
<div class="post">
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
<p class="post_score">{{ post.score }}</p>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<p>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime">{{ post.time }}</span>
</h4>
<h3 class="post_title">
</p>
<p class="post_title">
{% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</p>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
@ -52,17 +52,21 @@
</div>
{% if sub.name != "" %}
<aside>
<div class="subreddit">
<img class="subreddit_icon" src="{{ sub.icon }}">
<h2 class="subreddit_name">r/{{ sub.name }}</h2>
<p class="subreddit_description">{{ sub.description }}</p>
<div class="subreddit_details">
<div id="subreddit">
<img id="subreddit_icon" src="{{ sub.icon }}">
<p id="subreddit_name">r/{{ sub.name }}</p>
<p id="subreddit_description">{{ sub.description }}</p>
<div id="subreddit_details">
<label>Members</label>
<label>Active</label>
<div>{{ sub.members }}</div>
<div>{{ sub.active }}</div>
</div>
</div>
<details id="sidebar">
<summary id="sidebar_label">Sidebar</summary>
<div id="sidebar_contents">{{ sub.info }}</div>
</details>
</aside>
{% endif %}
</main>

View File

@ -14,42 +14,42 @@
{% if post.title != "Comment" %}
<div class='post'>
<div class="post_left">
<h3 class="post_score">{{ post.score }}</h3>
<p class="post_score">{{ post.score }}</p>
{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div>
<div class="post_right">
<h4>
<p>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b>
&bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span>
</h4>
<h3 class="post_title">
</p>
<p class="post_title">
{% if post.flair.0 == "Comment" %}
{% else if post.flair.0 == "" %}
{% else %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %}
<a href="{{ post.url }}">{{ post.title }}</a>
</h3>
</p>
</div>
<img class="post_thumbnail" src="{{ post.media }}">
</div><br>
{% else %}
<div class="comment">
<div class="comment_left">
<h3 class="comment_score">{{ post.score }}</h3>
<p class="comment_score">{{ post.score }}</p>
<div class="line"></div>
</div>
<div class="comment_right">
<h4>
COMMENT
<details class="comment_right" open>
<summary class="comment_data">
<a class="comment_link" href="{{ post.url }}">COMMENT</a>
<span class="datetime">{{ post.time }}</span>
</h4>
<h4 class="comment_body">{{ post.body }}</h4>
</div>
</summary>
<p class="comment_body">{{ post.body }}</p>
</details>
</div><br>
{% endif %}
{% endfor %}
@ -64,11 +64,11 @@
</footer>
</div>
<aside>
<div class="user">
<img class="user_icon" src="{{ user.icon }}">
<h2 class="user_name">u/{{ user.name }}</h2>
<div class="user_description">{{ user.description }}</div>
<div class="user_details">
<div id="user">
<img id="user_icon" src="{{ user.icon }}">
<p id="user_name">u/{{ user.name }}</p>
<div id="user_description">{{ user.description }}</div>
<div id="user_details">
<label>Karma</label>
<label>Created</label>
<div>{{ user.karma }}</div>