Markdown and Subreddit Sidebars
This commit is contained in:
parent
ac84d8d2db
commit
443b198c12
46
Cargo.lock
generated
46
Cargo.lock
generated
@ -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"
|
||||||
|
@ -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"
|
23
src/post.rs
23
src/post.rs
@ -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())
|
||||||
|
@ -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()),
|
||||||
|
@ -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),
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -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,
|
||||||
|
157
static/style.css
157
static/style.css
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
@ -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>
|
||||||
• <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
• <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>
|
||||||
|
@ -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 %}
|
||||||
• <span class="datetime">{{ item.time }}</span>
|
• <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>
|
||||||
•
|
•
|
||||||
<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>
|
||||||
|
@ -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>
|
||||||
• <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
• <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>
|
||||||
|
@ -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>
|
||||||
• <a class="post_author" href="/u/{{ post.author }}">u/{{ post.author }}</a>
|
• <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>
|
||||||
|
Loading…
Reference in New Issue
Block a user