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

View File

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

View File

@ -6,7 +6,6 @@ use async_recursion::async_recursion;
use askama::Template; use askama::Template;
use chrono::{TimeZone, Utc}; use chrono::{TimeZone, Utc};
use pulldown_cmark::{html, Options, Parser};
// STRUCTS // STRUCTS
#[derive(Template)] #[derive(Template)]
@ -27,8 +26,8 @@ async fn render(id: String, sort: Option<String>, comment_id: Option<String>) ->
// Build the Reddit JSON API url // Build the Reddit JSON API url
let url: String = match comment_id { let url: String = match comment_id {
None => format!("{}.json?sort={}", id, sorting), None => format!("{}.json?sort={}&raw_json=1", id, sorting),
Some(val) => format!("{}.json?sort={}&comment={}", id, sorting, val), Some(val) => format!("{}.json?sort={}&comment={}&raw_json=1", id, sorting, val),
}; };
// Send a request to the url, receive JSON in response // 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) (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 // POSTS
async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> { async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
// Retrieve post (as opposed to comments) from JSON // 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 { let post = Post {
title: val(post_data, "title").await, title: val(post_data, "title").await,
community: val(post_data, "subreddit").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: val(post_data, "author").await,
author_flair: Flair( author_flair: Flair(
val(post_data, "author_flair_text").await, 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 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() { let replies: Vec<Comment> = if comment["data"]["replies"].is_object() {
parse_comments(comment["data"]["replies"].clone()).await.unwrap_or(Vec::new()) 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("+") { let sub_result = if !&sub_name.contains("+") {
subreddit(&sub_name).await subreddit(&sub_name).await
} else { } else {
Ok(Subreddit { Ok(Subreddit::default())
name: String::new(),
title: String::new(),
description: String::new(),
icon: String::new(),
members: String::new(),
active: String::new(),
})
}; };
let items_result = fetch_posts(url, String::new()).await; 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 // SUBREDDIT
async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> { async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
// Build the Reddit JSON API url // 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 // Send a request to the url, receive JSON in response
let req = request(url).await; let req = request(url).await;
@ -102,6 +95,7 @@ async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
name: val(&res, "display_name").await, name: val(&res, "display_name").await,
title: val(&res, "title").await, title: val(&res, "title").await,
description: val(&res, "public_description").await, description: val(&res, "public_description").await,
info: val(&res, "description_html").await.replace("\\", ""),
icon: format_url(icon).await, icon: format_url(icon).await,
members: format_num(members.try_into().unwrap()), members: format_num(members.try_into().unwrap()),
active: format_num(active.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 // Build the Reddit JSON API url
let url = match ends.0 { 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 { None => match ends.1 {
Some(val) => format!("user/{}/.json?sort={}&after={}&count=25", username, sorting, val), Some(val) => format!("user/{}/.json?sort={}&after={}&count=25&raw_json=1", username, sorting, val),
None => format!("user/{}/.json?sort={}", username, sorting), None => format!("user/{}/.json?sort={}&raw_json=1", username, sorting),
}, },
}; };

View File

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

View File

@ -12,10 +12,9 @@
* { * {
transition: 0.2s all; transition: 0.2s all;
margin: 0px; margin: 0;
color: white; color: white;
font-family: sans-serif; font-family: sans-serif;
font-weight: normal;
outline: none; outline: none;
} }
@ -30,7 +29,6 @@ nav {
color: var(--accent); color: var(--accent);
background: var(--outside); background: var(--outside);
padding: 15px; padding: 15px;
font-weight: bold;
font-size: 20px; font-size: 20px;
} }
@ -43,13 +41,12 @@ main {
justify-content: center; justify-content: center;
max-width: 750px; max-width: 750px;
padding: 10px 20px; padding: 10px 20px;
margin: 0 auto; margin: 20px auto;
} }
footer { footer {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin-bottom: 20px;
} }
button { button {
@ -58,6 +55,10 @@ button {
font-weight: bold; font-weight: bold;
} }
hr {
margin: 20px 0;
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@ -67,19 +68,14 @@ a:not(.post_right):hover {
text-decoration: underline; text-decoration: underline;
} }
#about { img[src=""] {
padding-top: 20px; display: none;
background: #151515;
} }
aside { aside {
/* background: #151515; */
padding: 20px;
height: max-content;
border-radius: 5px;
flex-grow: 1; flex-grow: 1;
margin: 80px 20px 0px 20px; margin: 20px 20px 0 20px;
background: var(--outside); max-width: 350px;
} }
#version { #version {
@ -89,15 +85,27 @@ aside {
/* User & Subreddit */ /* User & Subreddit */
.user, .subreddit { #user, #subreddit, #sidebar {
max-width: 350px; margin: 40px auto 0 auto;
margin: 0 auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; 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; width: 100px;
height: 100px; height: 100px;
border: 2px solid var(--accent); border: 2px solid var(--accent);
@ -106,24 +114,24 @@ aside {
margin: 10px; margin: 10px;
} }
.user_name, .subreddit_name { #user_name, #subreddit_name {
margin-top: 10px; margin-top: 10px;
} }
.user_description, .subreddit_description { #user_description, #subreddit_description {
margin: 10px 20px; margin: 10px 20px;
text-align: center; text-align: center;
font-size: 15px; font-size: 15px;
} }
.user_details, .subreddit_details { #user_details, #subreddit_details {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
margin-top: 15px; margin-top: 15px;
grid-column-gap: 20px; grid-column-gap: 20px;
} }
.user_details > label, .subreddit_details > label { #user_details > label, #subreddit_details > label {
color: var(--accent); color: var(--accent);
font-size: 15px; font-size: 15px;
} }
@ -133,23 +141,26 @@ aside {
#sort { #sort {
background: var(--outside); background: var(--outside);
box-shadow: var(--black-contrast); box-shadow: var(--black-contrast);
border: 0px; border: 0;
padding: 0px 15px; padding: 0 15px;
margin: 20px 0px; margin-bottom: 20px;
height: 40px; height: 40px;
font-size: 15px; font-size: 15px;
border-radius: 5px 0px 0px 5px; border-radius: 5px 0 0 5px;
appearance: none; appearance: none;
} }
#sort_submit { #sort_submit {
background: var(--highlighted); background: var(--highlighted);
border: 0px; border: 0;
font-size: 15px; font-size: 15px;
height: 40px; 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 { #sort > div, footer > a {
box-shadow: var(--black-contrast); box-shadow: var(--black-contrast);
background: var(--outside); background: var(--outside);
@ -180,7 +191,7 @@ aside {
} }
.post.highlighted { .post.highlighted {
margin-top: 20px; margin: 20px 0;
} }
.post:hover { .post:hover {
@ -200,7 +211,7 @@ aside {
.post_left { .post_left {
text-align: center; text-align: center;
background: var(--foreground); background: var(--foreground);
border-radius: 5px 0px 0px 5px; border-radius: 5px 0 0 5px;
min-width: 50px; min-width: 50px;
padding: 5px; padding: 5px;
} }
@ -208,6 +219,7 @@ aside {
.post_score { .post_score {
margin-top: 20px; margin-top: 20px;
color: var(--accent); color: var(--accent);
font-size: 16px;
} }
.nsfw { .nsfw {
@ -238,35 +250,17 @@ aside {
margin: 5px; margin: 5px;
} }
.post_right > p {
opacity: 0.75;
font-size: 16px;
}
.post_media { .post_media {
max-width: 90%; max-width: 90%;
align-self: center; align-self: center;
} }
.post_media[src=""] {
display: none;
}
.post_body { .post_body {
opacity: 0.9; opacity: 0.9;
font-weight: normal; font-weight: normal;
margin: 10px 5px; margin: 10px 5px;
} }
.post_body > p:not(:first-child) {
margin-top: 20px;
}
.post_body a {
text-decoration: underline;
color: var(--accent);
}
#post_url { #post_url {
color: var(--accent); color: var(--accent);
} }
@ -280,10 +274,6 @@ aside {
max-width: 20%; max-width: 20%;
} }
.post_thumbnail[src=""] {
display: none;
}
.post_flair { .post_flair {
background: var(--accent); background: var(--accent);
color: black; color: black;
@ -311,17 +301,13 @@ aside {
.comment_left { .comment_left {
text-align: center; text-align: center;
min-width: 50px; min-width: 50px;
padding: 5px 0px; padding: 5px 0;
align-items: center; align-items: center;
} }
.comment_title { .comment_title { font-size: 20px; }
font-size: 20px; .comment_link { text-decoration: underline; }
} .comment_author { opacity: 0.9; }
.comment_author {
opacity: 0.9;
}
.comment_author.op { .comment_author.op {
color: var(--accent); color: var(--accent);
@ -347,7 +333,8 @@ aside {
background: var(--foreground); background: var(--foreground);
min-width: 40px; min-width: 40px;
border-radius: 5px; border-radius: 5px;
padding: 10px 0px; padding: 10px 0;
font-size: 16px;
} }
.comment_right { .comment_right {
@ -366,10 +353,6 @@ aside {
align-self: center; align-self: center;
} }
.comment_image[src=""] {
display: none;
}
.comment_body { .comment_body {
opacity: 0.9; opacity: 0.9;
font-weight: normal; font-weight: normal;
@ -418,9 +401,34 @@ aside {
background: black; 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); background: var(--outside);
padding: 20px; padding: 20px;
margin-top: 10px; margin-top: 10px;
@ -428,11 +436,13 @@ pre {
box-shadow: var(--black-contrast); box-shadow: var(--black-contrast);
} }
code { .md code {
font-family: monospace; font-family: monospace;
font-size: 14px; font-size: 14px;
} }
.md code:not(.md pre > code) { background: var(--highlighted); }
/* Tables */ /* Tables */
table { table {
@ -453,7 +463,7 @@ td, th {
} }
.post_left { .post_left {
border-radius: 0px 0px 5px 5px; border-radius: 0 0 5px 5px;
} }
.post_right { .post_right {
@ -470,7 +480,7 @@ td, th {
.replies > .comment { .replies > .comment {
margin-left: -25px; margin-left: -25px;
padding: 5px 0px; padding: 5px 0;
} }
.datetime { .datetime {
@ -484,6 +494,11 @@ td, th {
} }
aside { 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 %} {% for post in posts %}
<div class="post"> <div class="post">
<div class="post_left"> <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 %} {% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
</div> </div>
<div class="post_right"> <div class="post_right">
<h4> <p>
<b><a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a></b> <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> &bull; <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
{% if post.author_flair.0 != "" %} {% if post.author_flair.0 != "" %}
<small class="author_flair">{{ post.author_flair.0 }}</small> <small class="author_flair">{{ post.author_flair.0 }}</small>
{% endif %} {% endif %}
<span class="datetime" style="float: right;">{{ post.time }}</span> <span class="datetime" style="float: right;">{{ post.time }}</span>
</h4> </p>
<h3 class="post_title"> <p class="post_title">
{% if post.flair.0 != "" %} {% if post.flair.0 != "" %}
<small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small> <small class="post_flair" style="color:{{ post.flair.2 }}; background:{{ post.flair.1 }}">{{ post.flair.0 }}</small>
{% endif %} {% endif %}
<a href="{{ post.url }}">{{ post.title }}</a> <a href="{{ post.url }}">{{ post.title }}</a>
</h3> </p>
</div> </div>
<img class="post_thumbnail" src="{{ post.media }}"> <img class="post_thumbnail" src="{{ post.media }}">
</div><br> </div><br>
@ -37,11 +37,11 @@
<footer> <footer>
{% if ends.0 != "" %} {% if ends.0 != "" %}
<a href="?before={{ ends.0 }}">PREV</a> <a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
{% endif %} {% endif %}
{% if ends.1 != "" %} {% if ends.1 != "" %}
<a href="?after={{ ends.1 }}">NEXT</a> <a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
{% endif %} {% endif %}
</footer> </footer>
</div> </div>

View File

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

View File

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

View File

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