Update README.md

Add InsanityWtf Libreddit Instance

Cargo.lock

@@ -93,7 +93,7 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "b4ca8ce00b267af8ccebbd647de0d61e0674b6e61185cc7a592ff88772bed655"
 dependencies = [
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -267,7 +267,7 @@ checksum = "ad26f77093333e0e7c6ffe54ebe3582d908a104e448723eec6d43d08b07143fb"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -346,7 +346,7 @@ checksum = "e5444eec77a9ec2bfe4524139e09195862e981400c4358d3b760cae634e4c4ee"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -357,7 +357,7 @@ checksum = "8d3a45e77e34375a7923b1e8febb049bb011f064714a8e17a1a616fef01da13d"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -562,7 +562,7 @@ checksum = "41cb0e6161ad61ed084a36ba71fbba9e3ac5aee3606fb607fe08da6acbcf3d8c"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -604,7 +604,7 @@ dependencies = [
  "heck",
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -696,7 +696,7 @@ dependencies = [
  "proc-macro-hack",
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -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",
@@ -1272,7 +1262,7 @@ checksum = "65ad2ae56b6abe3a1ee25f15ee605bacadb9a764edaba9c2bf4103800d4a1895"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -1283,7 +1273,7 @@ checksum = "f8e8d2bf0b23038a4424865103a4df472855692821aab4e4f5c3312d461d9e5f"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -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"
@@ -1584,14 +1562,14 @@ checksum = "c84d3526699cd55261af4b941e4e725444df67aa4f9e6a3564f18030d12672df"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[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",
@@ -1700,7 +1678,7 @@ dependencies = [
  "quote 1.0.8",
  "serde",
  "serde_derive",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -1716,7 +1694,7 @@ dependencies = [
  "serde_derive",
  "serde_json",
  "sha1",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -1738,9 +1716,9 @@ dependencies = [
 
 [[package]]
 name = "syn"
-version = "1.0.55"
+version = "1.0.56"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "a571a711dddd09019ccc628e1b17fe87c59b09d513c06c026877aa708334f37a"
+checksum = "a9802ddde94170d186eeee5005b798d9c159fa970403f1be19976d0cfb939b72"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
@@ -1749,22 +1727,22 @@ 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",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -1831,7 +1809,7 @@ dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
  "standback",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]
 
 [[package]]
@@ -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"
@@ -2120,7 +2092,7 @@ dependencies = [
  "log",
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
  "wasm-bindgen-shared",
 ]
 
@@ -2154,7 +2126,7 @@ checksum = "b5a48c72f299d80557c7c62e37e7225369ecc0c963964059509fbafe917c7549"
 dependencies = [
  "proc-macro2 1.0.24",
  "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
  "wasm-bindgen-backend",
  "wasm-bindgen-shared",
 ]

Cargo.toml

@@ -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"

README.md

@@ -7,8 +7,8 @@ Libre + Reddit = [Libreddit](https://libredd.it)
 - 🚀 Fast: written in Rust for blazing fast speeds and safety
 - ☁️ Light: no JavaScript, no ads, no tracking
 - 🕵 Private: all requests are proxied through the server, including media
-- 🔒 Safe: does not rely on Reddit OAuth or require a Reddit API Key 
-- 📱 Responsive: works great on mobile!
+- 🦺 Safe: does not rely on Reddit OAuth or require a Reddit API Key 
+- 🔒 Secure: strong [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) prevents browser requests to Reddit
 
 Like [Invidious](https://github.com/iv-org/invidious) but for Reddit. Browse the coldest takes of [r/unpopularopinion](https://libredd.it/r/unpopularopinion) without being [tracked](#reddit).
 
@@ -41,8 +41,14 @@ Like [Invidious](https://github.com/iv-org/invidious) but for Reddit. Browse the
 
 Feel free to [open an issue](https://github.com/spikecodes/libreddit/issues/new) to have your [selfhosted instance](#deployment) listed here!
 
-- [libredd.it](https://libredd.it) 🇺🇸 (Thank you to [YeapGuy](https://github.com/YeapGuy)!)
-- [libreddit.spike.codes](https://libreddit.spike.codes) 🇺🇸
+| Website | Country | Cloudflare |
+|-|-|-|
+| [libredd.it](https://libredd.it) (official) | 🇺🇸 US  |  |
+| [libreddit.spike.codes](https://libreddit.spike.codes) (official) | 🇺🇸 US  |  |
+| [libreddit.dothq.co](https://libreddit.dothq.co) | 🇺🇸 US  | ✅ |
+| [libreddit.insanity.wtf](https://libreddit.insanity.wtf) | 🇺🇸 US  | ✅ |
+
+A checkmark in the "Cloudflare" category here refers to the use of the reverse proxy, [Cloudflare](https://cloudflare). The checkmark will not be listed for a site which uses Cloudflare DNS but rather the proxying service which grants Cloudflare the ability to monitor traffic to the website.
 
 ## About
 

src/post.rs

@@ -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
@@ -80,13 +79,13 @@ async fn media(data: &serde_json::Value) -> (String, String) {
 	let post_type: &str;
 	let url = if !data["preview"]["reddit_video_preview"]["fallback_url"].is_null() {
 		post_type = "video";
-		format_url(data["preview"]["reddit_video_preview"]["fallback_url"].as_str().unwrap()).await
+		format_url(data["preview"]["reddit_video_preview"]["fallback_url"].as_str().unwrap().to_string()).await
 	} else if !data["secure_media"]["reddit_video"]["fallback_url"].is_null() {
 		post_type = "video";
-		format_url(data["secure_media"]["reddit_video"]["fallback_url"].as_str().unwrap()).await
+		format_url(data["secure_media"]["reddit_video"]["fallback_url"].as_str().unwrap().to_string()).await
 	} else if data["post_hint"].as_str().unwrap_or("") == "image" {
 		post_type = "image";
-		format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap()).await
+		format_url(data["preview"]["images"][0]["source"]["url"].as_str().unwrap().to_string()).await
 	} else {
 		post_type = "link";
 		data["url"].as_str().unwrap().to_string()
@@ -95,33 +94,24 @@ 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
 	let post_data: &serde_json::Value = &json["data"]["children"][0];
 
+	// Grab UTC time as unix timestamp
 	let unix_time: i64 = post_data["data"]["created_utc"].as_f64().unwrap().round() as i64;
+	// Parse post score
 	let score = post_data["data"]["score"].as_i64().unwrap();
 
+	// Determine the type of media along with the media URL
 	let media = media(&post_data["data"]).await;
 
+	// Build a post using data parsed from Reddit post API
 	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,
@@ -131,8 +121,6 @@ async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
 		url: val(post_data, "permalink").await,
 		score: format_num(score),
 		post_type: media.0,
-		media: media.1,
-		time: Utc.timestamp(unix_time, 0).format("%b %e %Y %H:%M UTC").to_string(),
 		flair: Flair(
 			val(post_data, "link_flair_text").await,
 			val(post_data, "link_flair_background_color").await,
@@ -142,6 +130,9 @@ async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
 				"white".to_string()
 			},
 		),
+		nsfw: post_data["data"]["over_18"].as_bool().unwrap_or(false),
+		media: media.1,
+		time: Utc.timestamp(unix_time, 0).format("%b %e %Y %H:%M UTC").to_string(),
 	};
 
 	Ok(post)
@@ -156,14 +147,14 @@ async fn parse_comments(json: serde_json::Value) -> Result<Vec<Comment>, &'stati
 	let mut comments: Vec<Comment> = Vec::new();
 
 	// For each comment, retrieve the values to build a Comment object
-	for comment in comment_data.iter() {
+	for comment in comment_data {
 		let unix_time: i64 = comment["data"]["created_utc"].as_f64().unwrap_or(0.0).round() as i64;
 		if unix_time == 0 {
 			continue;
 		}
 
 		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())

src/subreddit.rs

@@ -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;
 
@@ -55,15 +48,9 @@ pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String
 		.unwrap();
 		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
 	} else {
-		let mut sub = sub_result.unwrap();
+		let sub = sub_result.unwrap();
 		let items = items_result.unwrap();
 
-		sub.icon = if sub.icon != "" {
-			format!(r#"<img class="subreddit_icon" src="{}">"#, sub.icon)
-		} else {
-			String::new()
-		};
-
 		let s = SubredditTemplate {
 			sub: sub,
 			posts: items.0,
@@ -79,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;
@@ -92,14 +79,24 @@ async fn subreddit(sub: &String) -> Result<Subreddit, &'static str> {
 	// Otherwise, grab the JSON output from the request
 	let res = req.unwrap();
 
+	// Metadata regarding the subreddit
 	let members = res["data"]["subscribers"].as_u64().unwrap_or(0);
 	let active = res["data"]["accounts_active"].as_u64().unwrap_or(0);
 
+	// Fetch subreddit icon either from the community_icon or icon_img value
+	let community_icon: &str = res["data"]["community_icon"].as_str().unwrap().split("?").collect::<Vec<&str>>()[0];
+	let icon = if community_icon.is_empty() {
+		val(&res, "icon_img").await
+	} else {
+		community_icon.to_string()
+	};
+
 	let sub = Subreddit {
 		name: val(&res, "display_name").await,
 		title: val(&res, "title").await,
 		description: val(&res, "public_description").await,
-		icon: format_url(val(&res, "icon_img").await.as_str()).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()),
 	};

src/user.rs

@@ -2,6 +2,7 @@
 use crate::utils::{fetch_posts, format_url, nested_val, request, ErrorTemplate, Params, Post, User};
 use actix_web::{http::StatusCode, web, HttpResponse, Result};
 use askama::Template;
+use chrono::{TimeZone, Utc};
 
 // STRUCTS
 #[derive(Template)]
@@ -10,11 +11,22 @@ struct UserTemplate {
 	user: User,
 	posts: Vec<Post>,
 	sort: String,
+	ends: (String, String),
 }
 
-async fn render(username: String, sort: String) -> Result<HttpResponse> {
+async fn render(username: String, sort: Option<String>, ends: (Option<String>, Option<String>)) -> Result<HttpResponse> {
+	let sorting = sort.unwrap_or("new".to_string());
+
+	let before = ends.1.clone().unwrap_or(String::new()); // If there is an after, there must be a before
+
 	// Build the Reddit JSON API url
-	let url: String = format!("user/{}/.json?sort={}", username, sort);
+	let url = match ends.0 {
+		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&raw_json=1", username, sorting, val),
+			None => format!("user/{}/.json?sort={}&raw_json=1", username, sorting),
+		},
+	};
 
 	let user = user(&username).await;
 	let posts = fetch_posts(url, "Comment".to_string()).await;
@@ -27,10 +39,13 @@ async fn render(username: String, sort: String) -> Result<HttpResponse> {
 		.unwrap();
 		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
 	} else {
+		let posts_unwrapped = posts.unwrap();
+		
 		let s = UserTemplate {
 			user: user.unwrap(),
-			posts: posts.unwrap().0,
-			sort: sort,
+			posts: posts_unwrapped.0,
+			sort: sorting,
+			ends: (before, posts_unwrapped.1)
 		}
 		.render()
 		.unwrap();
@@ -40,10 +55,7 @@ async fn render(username: String, sort: String) -> Result<HttpResponse> {
 
 // SERVICES
 pub async fn page(web::Path(username): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
-	match &params.sort {
-		Some(sort) => render(username, sort.to_string()).await,
-		None => render(username, "hot".to_string()).await,
-	}
+	render(username, params.sort.clone(), (params.before.clone(), params.after.clone())).await
 }
 
 // USER
@@ -62,11 +74,15 @@ async fn user(name: &String) -> Result<User, &'static str> {
 	// Otherwise, grab the JSON output from the request
 	let res = req.unwrap();
 
+	// Grab creation date as unix timestamp
+	let created: i64 = res["data"]["created"].as_f64().unwrap().round() as i64;
+
 	// Parse the JSON output into a User struct
 	Ok(User {
 		name: name.to_string(),
-		icon: format_url(nested_val(&res, "subreddit", "icon_img").await.as_str()).await,
+		icon: format_url(nested_val(&res, "subreddit", "icon_img").await).await,
 		karma: res["data"]["total_karma"].as_i64().unwrap(),
+		created: Utc.timestamp(created, 0).format("%b %e, %Y").to_string(),
 		banner: nested_val(&res, "subreddit", "banner_img").await,
 		description: nested_val(&res, "subreddit", "public_description").await,
 	})

src/utils.rs

@@ -11,11 +11,9 @@ use base64::encode;
 //
 // STRUCTS
 //
-#[allow(dead_code)]
 // Post flair with text, background color and foreground color
 pub struct Flair(pub String, pub String, pub String);
 
-#[allow(dead_code)]
 // Post containing content, metadata and media
 pub struct Post {
 	pub title: String,
@@ -26,12 +24,12 @@ pub struct Post {
 	pub url: String,
 	pub score: String,
 	pub post_type: String,
+	pub flair: Flair,
+	pub nsfw: bool,
 	pub media: String,
 	pub time: String,
-	pub flair: Flair,
 }
 
-#[allow(dead_code)]
 // Comment with content, post, score and data/time that it was posted
 pub struct Comment {
 	pub id: String,
@@ -43,22 +41,23 @@ pub struct Comment {
 	pub replies: Vec<Comment>,
 }
 
-#[allow(dead_code)]
 // User struct containing metadata about user
 pub struct User {
 	pub name: String,
 	pub icon: String,
 	pub karma: i64,
+	pub created: String,
 	pub banner: String,
 	pub description: String,
 }
 
-#[allow(dead_code)]
+#[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,
@@ -83,7 +82,12 @@ pub struct ErrorTemplate {
 // FORMATTING
 //
 
-pub async fn format_url(url: &str) -> String {
+// Direct urls to proxy if proxy is enabled
+pub async fn format_url(url: String) -> String {
+	if url.is_empty() {
+		return String::new();
+	};
+
 	#[cfg(feature = "proxy")]
 	return "/proxy/".to_string() + encode(url).as_str();
 
@@ -91,6 +95,7 @@ pub async fn format_url(url: &str) -> String {
 	return url.to_string();
 }
 
+// Append `m` and `k` for millions and thousands respectively
 pub fn format_num(num: i64) -> String {
 	if num > 1000000 {
 		format!("{}m", num / 1000000)
@@ -105,22 +110,20 @@ pub fn format_num(num: i64) -> String {
 // JSON PARSING
 //
 
-#[allow(dead_code)]
 // val() function used to parse JSON from Reddit APIs
 pub async fn val(j: &serde_json::Value, k: &str) -> String {
 	String::from(j["data"][k].as_str().unwrap_or(""))
 }
 
-#[allow(dead_code)]
 // nested_val() function used to parse JSON from Reddit APIs
 pub async fn nested_val(j: &serde_json::Value, n: &str, k: &str) -> String {
 	String::from(j["data"][n][k].as_str().unwrap())
 }
 
-#[allow(dead_code)]
+// Fetch posts of a user or subreddit
 pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Post>, String), &'static str> {
 	// Send a request to the url, receive JSON in response
-	let req = request(url).await;
+	let req = request(url.clone()).await;
 
 	// If the Reddit API returns an error, exit this function
 	if req.is_err() {
@@ -135,9 +138,9 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 
 	let mut posts: Vec<Post> = Vec::new();
 
-	for post in post_list.iter() {
+	for post in post_list {
 		let img = if val(post, "thumbnail").await.starts_with("https:/") {
-			format_url(val(post, "thumbnail").await.as_str()).await
+			format_url(val(post, "thumbnail").await).await
 		} else {
 			String::new()
 		};
@@ -148,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,
@@ -158,8 +161,6 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 			score: format_num(score),
 			post_type: "link".to_string(),
 			media: img,
-			url: val(post, "permalink").await,
-			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 			flair: Flair(
 				val(post, "link_flair_text").await,
 				val(post, "link_flair_background_color").await,
@@ -169,9 +170,14 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 					"white".to_string()
 				},
 			),
+			nsfw: post["data"]["over_18"].as_bool().unwrap_or(false),
+			url: val(post, "permalink").await,
+			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 		});
 	}
 
+	dbg!(url);
+
 	Ok((posts, res["data"]["after"].as_str().unwrap_or("").to_string()))
 }
 
@@ -180,7 +186,6 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 //
 
 // Make a request to a Reddit API and parse the JSON response
-#[allow(dead_code)]
 pub async fn request(mut url: String) -> Result<serde_json::Value, &'static str> {
 	url = format!("https://www.reddit.com/{}", url);
 

static/style.css

@@ -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;
 }
 
@@ -39,10 +37,11 @@ nav {
 }
 
 main {
+	display: flex;
+	justify-content: center;
 	max-width: 750px;
-	margin: 0 auto;
-	margin-top: 25px;
-	padding: 0px 10px;
+	padding: 10px 20px;
+	margin: 20px auto;
 }
 
 footer {
@@ -56,6 +55,10 @@ button {
 	font-weight: bold;
 }
 
+hr {
+	margin: 20px 0;
+}
+
 a {
 	color: inherit;
 	text-decoration: none;
@@ -65,9 +68,14 @@ a:not(.post_right):hover {
 	text-decoration: underline;
 }
 
-#about {
-	padding-top: 20px;
-	background: #151515;
+img[src=""] {
+	display: none;
+}
+
+aside {
+	flex-grow: 1;
+	margin: 20px 20px 0 20px;
+	max-width: 350px;
 }
 
 #version {
@@ -75,55 +83,57 @@ a:not(.post_right):hover {
 	opacity: 25%;
 }
 
-/* Subreddit */
+/* User & Subreddit */
 
-.subreddit {
-	max-width: 750px;
-	margin: 0 auto;
+#user, #subreddit, #sidebar {
+	margin: 40px auto 0 auto;
 	display: flex;
-	padding-bottom: 25px;
+	flex-direction: column;
+	align-items: center;
+	padding: 20px;
+	height: max-content;
+	background: var(--outside);
+	border-radius: 5px;
 }
 
-.subreddit_name {
-	margin-bottom: 10px;
+#sidebar, #sidebar_contents {
+	margin-top: 20px;
 }
 
-.subreddit_right {
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
+#sidebar_label {
+	border: 2px solid var(--highlighted);
+	padding: 10px;
 }
 
-.subreddit_icon {
+#user_icon, #subreddit_icon {
 	width: 100px;
 	height: 100px;
+	border: 2px solid var(--accent);
 	border-radius: 100%;
-	padding: 20px;
+	padding: 10px;
+	margin: 10px;
 }
 
-#stats {
+#user_name, #subreddit_name {
 	margin-top: 10px;
 }
 
-/* User */
-
-.user {
-	max-width: 750px;
-	margin: 0 auto;
-	display: flex;
+#user_description, #subreddit_description {
+	margin: 10px 20px;
+	text-align: center;
+	font-size: 15px;
 }
 
-.user_right {
-	display: flex;
-	flex-flow: column;
-	justify-content: center;
+#user_details, #subreddit_details {
+	display: grid;
+	grid-template-columns: repeat(2, 1fr);
+	margin-top: 15px;
+	grid-column-gap: 20px;
 }
 
-.user_icon {
-	width: 100px;
-	height: 100px;
-	border-radius: 100%;
-	padding: 20px;
+#user_details > label, #subreddit_details > label {
+	color: var(--accent);
+	font-size: 15px;
 }
 
 /* Sorting */
@@ -131,23 +141,26 @@ a:not(.post_right):hover {
 #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);
@@ -177,6 +190,10 @@ a:not(.post_right):hover {
 	display: flex;
 }
 
+.post.highlighted {
+	margin: 20px 0;
+}
+
 .post:hover {
 	background: var(--foreground);
 }
@@ -194,11 +211,27 @@ a:not(.post_right):hover {
 .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;
 }
 
+.post_score {
+	margin-top: 20px;
+	color: var(--accent);
+	font-size: 16px;
+}
+
+.nsfw {
+	color: #FF5C5D;
+	margin-top: 20px;
+	border: 1px solid #FF5C5D;
+	padding: 5px;
+	font-size: 12px;
+	border-radius: 5px;
+	font-weight: bold;
+}
+
 .post_subreddit {
 	font-weight: bold;
 }
@@ -207,11 +240,6 @@ a:not(.post_right):hover {
 	font-size: 18px;
 }
 
-.post_score {
-	margin-top: 20px;
-	color: var(--accent);
-}
-
 .post_right {
 	padding: 20px 25px;
 	flex-grow: 1;
@@ -222,35 +250,17 @@ a:not(.post_right):hover {
 	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);
 }
@@ -264,10 +274,6 @@ a:not(.post_right):hover {
 	max-width: 20%;
 }
 
-.post_thumbnail[src=""] {
-	display: none;
-}
-
 .post_flair {
 	background: var(--accent);
 	color: black;
@@ -295,17 +301,13 @@ a:not(.post_right):hover {
 .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);
@@ -331,7 +333,8 @@ a:not(.post_right):hover {
 	background: var(--foreground);
 	min-width: 40px;
 	border-radius: 5px;
-	padding: 10px 0px;
+	padding: 10px 0;
+	font-size: 16px;
 }
 
 .comment_right {
@@ -350,10 +353,6 @@ a:not(.post_right):hover {
 	align-self: center;
 }
 
-.comment_image[src=""] {
-	display: none;
-}
-
 .comment_body {
 	opacity: 0.9;
 	font-weight: normal;
@@ -402,9 +401,34 @@ a:not(.post_right):hover {
 	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;
@@ -412,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 {
@@ -437,7 +463,7 @@ td, th {
 	}
 
 	.post_left {
-		border-radius: 0px 0px 5px 5px;
+		border-radius: 0 0 5px 5px;
 	}
 
 	.post_right {
@@ -454,10 +480,25 @@ td, th {
 
 	.replies > .comment {
 		margin-left: -25px;
-		padding: 5px 0px;
+		padding: 5px 0;
 	}
 
 	.datetime {
 		width: 100%;
 	}
+}
+
+@media screen and (max-width: 800px) {
+	main {
+		flex-direction: column-reverse;
+	}
+
+	aside {
+		margin: 20px 0 0 0;
+		max-width: 100%;
+	}
+
+	#sidebar {
+		margin: 20px 0;
+	}
 }

templates/popular.html

@@ -1,45 +1,48 @@
 {% extends "base.html" %}
 {% block content %}
-	<form>
-		<select id="sort" name="sort"> 
-			<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
-			<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
-			<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
-			<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
-		</select><input id="sort_submit" type="submit" value="&rarr;">
-	</form>
-	{% for post in posts %}
-	<div class="post">
-		<div class="post_left">
-			<h3 class="post_score">{{ post.score }}</h3>
-		</div>
-		<div class="post_right">
-			<h4>
-				<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">
-				{% 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>
-		</div>
-		<img class="post_thumbnail" src="{{ post.media }}">
-	</div><br>
-	{% endfor %}
+	<div id="column_one">
+		<form>
+			<select id="sort" name="sort"> 
+				<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
+				<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+			</select><input id="sort_submit" type="submit" value="&rarr;">
+		</form>
+		{% for post in posts %}
+		<div class="post">
+			<div class="post_left">
+				<p class="post_score">{{ post.score }}</p>
+				{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+			</div>
+			<div class="post_right">
+				<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>
+				</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>
+				</p>
+			</div>
+			<img class="post_thumbnail" src="{{ post.media }}">
+		</div><br>
+		{% endfor %}
 
-	<footer>
-		{% if ends.0 != "" %}
-		<a href="?before={{ ends.0 }}">PREV</a>
-		{% endif %}
+		<footer>
+			{% if ends.0 != "" %}
+			<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+			{% endif %}
 
-		{% if ends.1 != "" %}
-		<a href="?after={{ ends.1 }}">NEXT</a>
-		{% endif %}
-	</footer>
+			{% if ends.1 != "" %}
+			<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+			{% endif %}
+		</footer>
+	</div>
 {% endblock %}

templates/post.html

@@ -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,74 +19,76 @@
 			{% endif %}
 			&bull; <span class="datetime">{{ item.time }}</span>
 		</summary>
-		<h4 class="comment_body">{{ item.body }}</h4>
+		<p class="comment_body">{{ item.body }}</p>
 
 {%- endmacro %}
 
 {% block content %}
-	<div class="post highlighted">
-		<div class="post_left">
-			<h3 class="post_score">{{ post.score }}</h3>
-		</div>
-		<div class="post_right">
-			<h4>
-				<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>
+	<div id="column_one">
+		<div class="post highlighted">
+			<div class="post_left">
+				<p class="post_score">{{ post.score }}</p>
+				{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+			</div>
+			<div class="post_right">
+				<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>
+				</p>
+				<a href="{{ post.url }}" class="post_title">
+					{{ 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>
+				{% if post.post_type == "image" %}
+				<img class="post_media" src="{{ post.media }}"/>
+				{% else if post.post_type == "video" %}
+				<video class="post_media" src="{{ post.media }}" controls autoplay loop>
+				{% else if post.post_type == "link" %}
+				<a id="post_url" href="{{ post.media }}">{{ post.media }}</a>
 				{% endif %}
-				<span class="datetime">{{ post.time }}</span>
-			</h4>
-			<a href="{{ post.url }}" class="post_title">
-				{{ 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>
-			{% if post.post_type == "image" %}
-			<img class="post_media" src="{{ post.media }}"/>
-			{% else if post.post_type == "video" %}
-			<video class="post_media" src="{{ post.media }}" controls autoplay loop>
-			{% 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>
+			<select id="sort" name="sort"> 
+				<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
+				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+				<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option> 
+				<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
+			</select><input id="sort_submit" type="submit" value="&rarr;">
+		</form>
+
+		{% for c in comments -%}
+			<div class="thread">
+				{% call comment(c) %}
+				<div class="replies">
+					{% for reply1 in c.replies %}
+						{% call comment(reply1) %}
+						<div class="replies">
+							{% for reply2 in reply1.replies %}
+								{% call comment(reply2) %}
+								<div class="replies">
+									{% for reply3 in reply2.replies %}
+										{% call comment(reply3) %}
+										{% if reply3.replies.len() > 0 %}
+											<a class="deeper_replies" href="{{ post.url }}{{ reply3.id }}">&rarr; More replies</a>
+										{% endif %}
+										</details></div>
+									{% endfor %}
+								</div></details></div>
+							{% endfor %}
+						</div></details></div>
+					{% endfor %}
+				</div></details></div>
+			</div>
+		{%- endfor %}
 	</div>
-	<form>
-		<select id="sort" name="sort"> 
-			<option value="confidence" {% if sort == "confidence" %}selected{% endif %}>Best</option> 
-			<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
-			<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
-			<option value="controversial" {% if sort == "controversial" %}selected{% endif %}>Controversial</option> 
-			<option value="old" {% if sort == "old" %}selected{% endif %}>Old</option>
-		</select><input id="sort_submit" type="submit" value="&rarr;">
-	</form>
-
-	{% for c in comments -%}
-		<div class="thread">
-			{% call comment(c) %}
-			<div class="replies">
-				{% for reply1 in c.replies %}
-					{% call comment(reply1) %}
-					<div class="replies">
-						{% for reply2 in reply1.replies %}
-							{% call comment(reply2) %}
-							<div class="replies">
-								{% for reply3 in reply2.replies %}
-									{% call comment(reply3) %}
-									{% if reply3.replies.len() > 0 %}
-										<a class="deeper_replies" href="{{ post.url }}{{ reply3.id }}">&rarr; More replies</a>
-									{% endif %}
-									</details></div>
-								{% endfor %}
-							</div></details></div>
-						{% endfor %}
-					</div></details></div>
-				{% endfor %}
-			</div></details></div>
-		</div>
-	{%- endfor %}
-
 {% endblock %}

templates/subreddit.html

@@ -5,61 +5,69 @@
 {% endif %}
 
 {% block body %}
-	{% if sub.name != "" %}
-	<div id="about">
-		<div class="subreddit">
-			<div class="subreddit_left">
-				{{ sub.icon }}
-			</div>
-			<div class="subreddit_right">
-				<h2 class="subreddit_name">r/{{ sub.name }}</h2>
-				<p class="subreddit_description">{{ sub.description }}</p>
-				<div id="stats">👤 {{ sub.members }} 🟢 {{ sub.active }}</div>
-			</div>
+	<main style="max-width: 1000px;">
+		<div id="column_one">
+			<form>
+				<select id="sort" name="sort"> 
+					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+					<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+					<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				</select><input id="sort_submit" type="submit" value="&rarr;">
+			</form>
+			{% for post in posts %}
+			<div class="post">
+				<div class="post_left">
+					<p class="post_score">{{ post.score }}</p>
+					{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+				</div>
+				<div class="post_right">
+					<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>
+					</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>
+					</p>
+				</div>
+				<img class="post_thumbnail" src="{{ post.media }}">
+			</div><br>
+			{% endfor %}
+
+			<footer>
+				{% if ends.0 != "" %}
+				<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}
+
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+				{% endif %}
+			</footer>
 		</div>
-	</div>
-	{% endif %}
-	<main>
-		<form>
-			<select id="sort" name="sort"> 
-				<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
-				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
-				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
-			</select><input id="sort_submit" type="submit" value="&rarr;">
-		</form>
-		{% for post in posts %}
-		<div class="post">
-			<div class="post_left">
-				<h3 class="post_score">{{ post.score }}</h3>
+		{% if sub.name != "" %}
+		<aside>
+			<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>
-			<div class="post_right">
-				<h4>
-					<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">
-					{% 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>
-			</div>
-			<img class="post_thumbnail" src="{{ post.media }}">
-		</div><br>
-		{% endfor %}
-
-		<footer>
-			{% if ends.0 != "" %}
-			<a href="?before={{ ends.0 }}">PREV</a>
-			{% endif %}
-
-			{% if ends.1 != "" %}
-			<a href="?after={{ ends.1 }}">NEXT</a>
-			{% endif %}
-		</footer>
+			<details id="sidebar">
+				<summary id="sidebar_label">Sidebar</summary>
+				<div id="sidebar_contents">{{ sub.info }}</div>
+			</details>
+		</aside>
+		{% endif %}
 	</main>
 {% endblock %}

templates/user.html

@@ -1,65 +1,80 @@
 {% extends "base.html" %}
 {% block title %}Libreddit: u/{{ user.name }}{% endblock %}
 {% block body %}
-	<div id="about">
-		<div class="user">
-			<div class="user_left">
-				<img class="user_icon" src="{{ user.icon }}">
-			</div>
-			<div class="user_right">
-				<h2 class="user_name">u/{{ user.name }}</h2>
-				<p class="user_description"><span>Karma:</span> {{ user.karma }} | <span>Description:</span> "{{ user.description }}"</p>
-			</div>
+	<main style="max-width: 1000px;">
+		<div id="column_one">
+			<form>
+				<select id="sort" name="sort"> 
+					<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
+					<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
+					<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
+				</select><input id="sort_submit" type="submit" value="&rarr;">
+			</form>
+			{% for post in posts %}
+			{% if post.title != "Comment" %}
+			<div class='post'>
+				<div class="post_left">
+					<p class="post_score">{{ post.score }}</p>
+					{% if post.nsfw %}<div class="nsfw">NSFW</div>{% endif %}
+				</div>
+				<div class="post_right">
+					<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>
+					</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>
+					</p>
+				</div>
+				<img class="post_thumbnail" src="{{ post.media }}">
+			</div><br>
+			{% else %}
+			<div class="comment">
+				<div class="comment_left">
+					<p class="comment_score">{{ post.score }}</p>
+					<div class="line"></div>
+				</div>
+				<details class="comment_right" open>
+					<summary class="comment_data">
+						<a class="comment_link" href="{{ post.url }}">COMMENT</a>
+						<span class="datetime">{{ post.time }}</span>
+					</summary>
+					<p class="comment_body">{{ post.body }}</p>
+				</details>
+			</div><br>
+			{% endif %}
+			{% endfor %}
+			<footer>
+				{% if ends.0 != "" %}
+				<a href="?sort={{ sort }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}
+
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort }}&after={{ ends.1 }}">NEXT</a>
+				{% endif %}
+			</footer>
 		</div>
-	</div>
-	<main>
-		<form>
-			<select id="sort" name="sort"> 
-				<option value="hot" {% if sort == "hot" %}selected{% endif %}>Hot</option>
-				<option value="new" {% if sort == "new" %}selected{% endif %}>New</option> 
-				<option value="top" {% if sort == "top" %}selected{% endif %}>Top</option> 
-			</select><input id="sort_submit" type="submit" value="&rarr;">
-		</form>
-		{% for post in posts %}
-		{% if post.title != "Comment" %}
-		<div class='post'>
-			<div class="post_left">
-				<h3 class="post_score">{{ post.score }}</h3>
+		<aside>
+			<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>
+					<div>{{ user.created }}</div>
+				</div>
 			</div>
-			<div class="post_right">
-				<h4>
-					<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">
-					{% 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>
-			</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>
-			</div>
-			<div class="comment_right">
-				<h4>
-					COMMENT
-					<span class="datetime">{{ post.time }}</span>
-				</h4>
-				<h4 class="comment_body">{{ post.body }}</h4>
-			</div>
-		</div><br>
-		{% endif %}
-		{% endfor %}
+		</aside>
 	</main>
 {% endblock %}