Rewrite + Searching

Add Focus Indicator
Update Screenshot for v0.2.3
2020-12-31 15:54:13 -08:00 · 2020-12-30 10:53:27 -08:00 · 2020-12-29 19:40:49 -08:00 · 2020-12-29 19:01:02 -08:00 · 2020-12-29 17:11:47 -08:00 · 2020-12-29 13:29:24 -08:00
19 changed files with 808 additions and 625 deletions
--- a/Cargo.lock
+++ b/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,14 +267,14 @@ checksum = "ad26f77093333e0e7c6ffe54ebe3582d908a104e448723eec6d43d08b07143fb"
 dependencies = [
 "proc-macro2 1.0.24",
 "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
 name = "addr2line"
-version = "0.14.0"
+version = "0.14.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "7c0929d69e78dd9bf5408269919fcbcaeb2e35e5d43e5815517cdc6a8e11a423"
+checksum = "a55f82cfe485775d02112886f4169bde0c5894d75e79ead7eafe7e40a25e45f7"
 dependencies = [
 "gimli",
 ]
@ -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,22 +753,13 @@ 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"
+version = "0.1.16"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "fc587bc0ec293155d5bfa6b9891ec18a1e330c234f896ea47fbada4cadbe47e6"
+checksum = "8fc3cb4d91f53b50155bdcfd23f6a4c39ae1969c2ae85982b135750cccaf5fce"
 dependencies = [
- "cfg-if 0.1.10",
+ "cfg-if 1.0.0",
 "libc",
 "wasi 0.9.0+wasi-snapshot-preview1",
 ]
@ -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,17 +1006,17 @@ checksum = "1482821306169ec4d07f6aca392a4681f66c75c9918aa49641a2595db64053cb"

 [[package]]
 name = "libreddit"
-version = "0.2.2"
+version = "0.2.4"
 dependencies = [
 "actix-web",
 "askama",
 "async-recursion",
 "base64 0.13.0",
 "chrono",
- "pulldown-cmark",
 "reqwest",
 "serde",
 "serde_json",
+ "url",
 ]

 [[package]]
@ -1272,7 +1263,7 @@ checksum = "65ad2ae56b6abe3a1ee25f15ee605bacadb9a764edaba9c2bf4103800d4a1895"
 dependencies = [
 "proc-macro2 1.0.24",
 "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1283,7 +1274,7 @@ checksum = "f8e8d2bf0b23038a4424865103a4df472855692821aab4e4f5c3312d461d9e5f"
 dependencies = [
 "proc-macro2 1.0.24",
 "quote 1.0.8",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1340,18 +1331,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 +1563,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",
@ -1646,9 +1625,9 @@ checksum = "c111b5bd5695e56cffe5129854aa230b39c93a305372fdbb2668ca2394eea9f8"

 [[package]]
 name = "smallvec"
-version = "1.5.1"
+version = "1.6.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "ae524f056d7d770e174287294f562e95044c68e88dec909a00d2094805db9d75"
+checksum = "1a55ca5f3b68e41c979bf8c46a6f1da892ca4db8f94023ce0bd32407573b1ac0"

 [[package]]
 name = "socket2"
@ -1669,9 +1648,9 @@ checksum = "6e63cff320ae2c57904679ba7cb63280a3dc4613885beafb148ee7bf9aa9042d"

 [[package]]
 name = "standback"
-version = "0.2.13"
+version = "0.2.14"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "cf906c8b8fc3f6ecd1046e01da1d8ddec83e48c8b08b84dcc02b585a6bedf5a8"
+checksum = "c66a8cff4fa24853fdf6b51f75c6d7f8206d7c75cab4e467bcd7f25c2b1febe0"
 dependencies = [
 "version_check 0.9.2",
 ]
@ -1700,7 +1679,7 @@ dependencies = [
 "quote 1.0.8",
 "serde",
 "serde_derive",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1716,7 +1695,7 @@ dependencies = [
 "serde_derive",
 "serde_json",
 "sha1",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
@ -1738,9 +1717,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 +1728,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 +1810,7 @@ dependencies = [
 "proc-macro2 1.0.24",
 "quote 1.0.8",
 "standback",
- "syn 1.0.55",
+ "syn 1.0.56",
 ]

 [[package]]
@ -2027,12 +2006,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 +2093,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 +2127,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",
 ]
--- a/Cargo.toml
+++ b/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.4"
 authors = ["spikecodes <19519553+spikecodes@users.noreply.github.com>"]
 edition = "2018"

@ -18,6 +18,6 @@ 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"
+async-recursion = "0.3.1"
+url = "2.2.0"
--- a/README.md
+++ b/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).

@ -18,7 +18,6 @@ Like [Invidious](https://github.com/iv-org/invidious) but for Reddit. Browse the
 - [About](#about)
  - [Elsewhere](#elsewhere)
  - [Info](#info)
-  - [In Progress](#in-progress)
  - [Teddit Comparison](#how-does-it-compare-to-teddit)
 - [Comparison](#comparison)
  - [Speed](#speed)
@ -35,14 +34,22 @@ Like [Invidious](https://github.com/iv-org/invidious) but for Reddit. Browse the

 ## Screenshot

-![](https://i.ibb.co/1RyKrBz/libreddit-rust.png)
+![](https://i.ibb.co/hM6WPHq/image.png)

 ## Instances

 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  | ✅ |
+| [libreddit.kavin.rocks](https://libreddit.kavin.rocks) | 🇮🇳 IN  | ✅ |
+| [spjmllawtheisznfs7uryhxumin26ssv2draj7oope3ok3wuhy43eoyd.onion](http://spjmllawtheisznfs7uryhxumin26ssv2draj7oope3ok3wuhy43eoyd.onion) | 🇮🇳 IN  |  |
+
+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

@ -58,9 +65,6 @@ Libreddit hopes to provide an easier way to browse Reddit, without the ads, trac

 Libreddit currently implements most of Reddit's functionalities but still lacks a few features that are being worked on below.

-### In Progress
- Searching
-
 ### How does it compare to Teddit?

 Teddit is another awesome open source project designed to provide an alternative frontend to Reddit. There is no connection between the two and you're welcome to use whichever one you favor. Competition fosters innovation and Teddit's release has motivated me to build Libreddit into an even more polished product.
@ -68,7 +72,6 @@ Teddit is another awesome open source project designed to provide an alternative
 If you are looking to compare, the biggest differences I have noticed are:
 - Libreddit is themed around Reddit's redesign whereas Teddit appears to stick much closer to Reddit's old design. This may suit some users better as design is always subjective.
 - Libreddit is written in [Rust](https://www.rust-lang.org) for speed and memory safety. It uses [Actix Web](https://actix.rs), which was [benchmarked as the fastest web server for single queries](https://www.techempower.com/benchmarks/#hw=ph&test=db).
- Unlike Teddit (at the time of writing this), Libreddit does not require a Reddit API key to host. 

 ## Comparison

@ -121,7 +124,7 @@ Results from Google Lighthouse ([Libreddit Report](https://lighthouse-dot-webdot

 For transparency, I hope to describe all the ways Libreddit handles user privacy.

-**Logging:** In production (when running the binary, hosting with docker, or using the official instances), Libreddit logs nothing. When debugging (running from source without `--release`), Libreddit logs post IDs fetched to aid troubleshooting but nothing else.
+**Logging:** In production (when running the binary, hosting with docker, or using the official instances), Libreddit logs nothing. When debugging (running from source without `--release`), Libreddit logs post IDs and URL paths fetched to aid troubleshooting but nothing else.

 **DNS:** Both official domains (`libredd.it` and `libreddit.spike.codes`) use Cloudflare as the DNS resolver. Though, the sites are not proxied through Cloudflare meaning Cloudflare doesn't have access to user traffic.

--- a/src/main.rs
+++ b/src/main.rs
@ -2,9 +2,9 @@
 use actix_web::{get, middleware::NormalizePath, web, App, HttpResponse, HttpServer};

 // Reference local files
-mod popular;
 mod post;
 mod proxy;
+mod search;
 mod subreddit;
 mod user;
 mod utils;
@ -42,6 +42,7 @@ async fn main() -> std::io::Result<()> {

 	HttpServer::new(|| {
 		App::new()
+			// .default_service(web::get().to(subreddit::page))
 			// TRAILING SLASH MIDDLEWARE
 			.wrap(NormalizePath::default())
 			// GENERAL SERVICES
@ -50,17 +51,22 @@ async fn main() -> std::io::Result<()> {
 			.route("/robots.txt/", web::get().to(robots))
 			// PROXY SERVICE
 			.route("/proxy/{url:.*}/", web::get().to(proxy::handler))
+			// SEARCH SERVICES
+			.route("/search/", web::get().to(search::page))
+			.route("r/{sub}/search/", web::get().to(search::page))
 			// USER SERVICES
-			.route("/u/{username}/", web::get().to(user::page))
-			.route("/user/{username}/", web::get().to(user::page))
+			.route("/u/{username}/", web::get().to(user::profile))
+			.route("/user/{username}/", web::get().to(user::profile))
 			// SUBREDDIT SERVICES
 			.route("/r/{sub}/", web::get().to(subreddit::page))
+			.route("/r/{sub}/{sort}/", web::get().to(subreddit::page))
 			// POPULAR SERVICES
-			.route("/", web::get().to(popular::page))
+			.route("/", web::get().to(subreddit::page))
+			.route("/{sort:best|hot|new|top|rising}/", web::get().to(subreddit::page))
 			// POST SERVICES
-			.route("/{id:.{5,6}}/", web::get().to(post::short))
-			.route("/r/{sub}/comments/{id}/{title}/", web::get().to(post::page))
-			.route("/r/{sub}/comments/{id}/{title}/{comment_id}/", web::get().to(post::comment))
+			.route("/{id:.{5,6}}/", web::get().to(post::item))
+			.route("/r/{sub}/comments/{id}/{title}/", web::get().to(post::item))
+			.route("/r/{sub}/comments/{id}/{title}/{comment_id}/", web::get().to(post::item))
 	})
 	.bind(address.clone())
 	.expect(format!("Cannot bind to the address: {}", address).as_str())
--- a/src/popular.rs
+++ b/src/popular.rs
@ -1,55 +0,0 @@
-// CRATES
-use crate::utils::{fetch_posts, ErrorTemplate, Params, Post};
-use actix_web::{http::StatusCode, web, HttpResponse, Result};
-use askama::Template;
-
-// STRUCTS
-#[derive(Template)]
-#[template(path = "popular.html", escape = "none")]
-struct PopularTemplate {
-	posts: Vec<Post>,
-	sort: String,
-	ends: (String, String),
-}
-
-// RENDER
-async fn render(sub_name: String, sort: Option<String>, ends: (Option<String>, Option<String>)) -> Result<HttpResponse> {
-	let sorting = sort.unwrap_or("hot".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 = match ends.0 {
-		Some(val) => format!("r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
-		None => match ends.1 {
-			Some(val) => format!("r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
-			None => format!("r/{}/{}.json", sub_name, sorting),
-		},
-	};
-
-	let items_result = fetch_posts(url, String::new()).await;
-
-	if items_result.is_err() {
-		let s = ErrorTemplate {
-			message: items_result.err().unwrap().to_string(),
-		}
-		.render()
-		.unwrap();
-		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
-	} else {
-		let items = items_result.unwrap();
-
-		let s = PopularTemplate {
-			posts: items.0,
-			sort: sorting,
-			ends: (before, items.1),
-		}
-		.render()
-		.unwrap();
-		Ok(HttpResponse::Ok().content_type("text/html").body(s))
-	}
-}
-
-// SERVICES
-pub async fn page(params: web::Query<Params>) -> Result<HttpResponse> {
-	render("popular".to_string(), params.sort.clone(), (params.before.clone(), params.after.clone())).await
-}
--- a/src/post.rs
+++ b/src/post.rs
@ -1,12 +1,11 @@
 // CRATES
-use crate::utils::{format_num, format_url, request, val, Comment, ErrorTemplate, Flair, Params, Post};
-use actix_web::{http::StatusCode, web, HttpResponse, Result};
+use crate::utils::{format_num, format_url, param, request, val, Comment, ErrorTemplate, Flags, Flair, Post};
+use actix_web::{http::StatusCode, HttpRequest, HttpResponse, Result};

 use async_recursion::async_recursion;

 use askama::Template;
 use chrono::{TimeZone, Utc};
-use pulldown_cmark::{html, Options, Parser};

 // STRUCTS
 #[derive(Template)]
@ -17,22 +16,17 @@ struct PostTemplate {
 	sort: String,
 }

-async fn render(id: String, sort: Option<String>, comment_id: Option<String>) -> Result<HttpResponse> {
+pub async fn item(req: HttpRequest) -> Result<HttpResponse> {
+	let path = format!("{}.json?{}&raw_json=1", req.path(), req.query_string());
+	let sort = param(&path, "sort").await;
+	let id = req.match_info().get("id").unwrap_or("").to_string();
+
 	// Log the post ID being fetched in debug mode
 	#[cfg(debug_assertions)]
 	dbg!(&id);

-	// Handling sort paramater
-	let sorting: String = sort.unwrap_or("confidence".to_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)
-	};
-
 	// Send a request to the url, receive JSON in response
-	let req = request(url).await;
+	let req = request(path.clone()).await;

 	// If the Reddit API returns an error, exit and send error page to user
 	if req.is_err() {
@ -42,37 +36,18 @@ async fn render(id: String, sort: Option<String>, comment_id: Option<String>) ->
 		.render()
 		.unwrap();
 		return Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s));
+	} else {
+		// Otherwise, grab the JSON output from the request
+		let res = req.unwrap();
+
+		// Parse the JSON into Post and Comment structs
+		let post = parse_post(res[0].clone()).await.unwrap();
+		let comments = parse_comments(res[1].clone()).await.unwrap();
+
+		// Use the Post and Comment structs to generate a website to show users
+		let s = PostTemplate { comments, post, sort }.render().unwrap();
+		Ok(HttpResponse::Ok().content_type("text/html").body(s))
 	}
-
-	// Otherwise, grab the JSON output from the request
-	let res = req.unwrap();
-
-	// Parse the JSON into Post and Comment structs
-	let post = parse_post(res[0].clone()).await;
-	let comments = parse_comments(res[1].clone()).await;
-
-	// Use the Post and Comment structs to generate a website to show users
-	let s = PostTemplate {
-		comments: comments.unwrap(),
-		post: post.unwrap(),
-		sort: sorting,
-	}
-	.render()
-	.unwrap();
-	Ok(HttpResponse::Ok().content_type("text/html").body(s))
-}
-
-// SERVICES
-pub async fn short(web::Path(id): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
-	render(id, params.sort.clone(), None).await
-}
-
-pub async fn comment(web::Path((_sub, id, _title, comment_id)): web::Path<(String, String, String, String)>, params: web::Query<Params>) -> Result<HttpResponse> {
-	render(id, params.sort.clone(), Some(comment_id)).await
-}
-
-pub async fn page(web::Path((_sub, id)): web::Path<(String, String)>, params: web::Query<Params>) -> Result<HttpResponse> {
-	render(id, params.sort.clone(), None).await
 }

 // UTILITIES
@ -80,13 +55,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 +70,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 +97,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 +106,12 @@ async fn parse_post(json: serde_json::Value) -> Result<Post, &'static str> {
 				"white".to_string()
 			},
 		),
+		flags: Flags {
+			nsfw: post_data["data"]["over_18"].as_bool().unwrap_or(false),
+			stickied: post_data["data"]["stickied"].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 +126,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())
--- a/src/proxy.rs
+++ b/src/proxy.rs
@ -5,6 +5,7 @@ use base64::decode;

 pub async fn handler(web::Path(url): web::Path<String>) -> Result<HttpResponse> {
 	if cfg!(feature = "proxy") {
+		#[cfg(feature = "proxy")]
 		let media: String;

 		#[cfg(not(feature = "proxy"))]
--- a/src/search.rs
+++ b/src/search.rs
@ -0,0 +1,52 @@
+// CRATES
+use crate::utils::{fetch_posts, param, ErrorTemplate, Post};
+use actix_web::{http::StatusCode, HttpRequest, HttpResponse, Result};
+use askama::Template;
+
+// STRUCTS
+#[derive(Template)]
+#[allow(dead_code)]
+#[template(path = "search.html", escape = "none")]
+struct SearchTemplate {
+	posts: Vec<Post>,
+	query: String,
+	sub: String,
+	sort: (String, String),
+	ends: (String, String),
+}
+
+// SERVICES
+pub async fn page(req: HttpRequest) -> Result<HttpResponse> {
+	let path = format!("{}.json?{}", req.path(), req.query_string());
+	let q = param(&path, "q").await;
+	let sort = if param(&path, "sort").await.is_empty() {
+		"relevance".to_string()
+	} else {
+		param(&path, "sort").await
+	};
+	let sub = req.match_info().get("sub").unwrap_or("").to_string();
+
+	let posts = fetch_posts(path.clone(), String::new()).await;
+
+	if posts.is_err() {
+		let s = ErrorTemplate {
+			message: posts.err().unwrap().to_string(),
+		}
+		.render()
+		.unwrap();
+		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
+	} else {
+		let items = posts.unwrap();
+
+		let s = SearchTemplate {
+			posts: items.0,
+			query: q,
+			sub: sub,
+			sort: (sort, param(&path, "t").await),
+			ends: (param(&path, "after").await, items.1),
+		}
+		.render()
+		.unwrap();
+		Ok(HttpResponse::Ok().content_type("text/html").body(s))
+	}
+}
--- a/src/subreddit.rs
+++ b/src/subreddit.rs
@ -1,6 +1,6 @@
 // CRATES
-use crate::utils::{fetch_posts, format_num, format_url, request, val, ErrorTemplate, Params, Post, Subreddit};
-use actix_web::{http::StatusCode, web, HttpResponse, Result};
+use crate::utils::{fetch_posts, format_num, format_url, param, request, val, ErrorTemplate, Post, Subreddit};
+use actix_web::{http::StatusCode, HttpRequest, HttpResponse, Result};
 use askama::Template;
 use std::convert::TryInto;

@ -10,65 +10,40 @@ use std::convert::TryInto;
 struct SubredditTemplate {
 	sub: Subreddit,
 	posts: Vec<Post>,
-	sort: String,
+	sort: (String, String),
 	ends: (String, String),
 }

 // SERVICES
-#[allow(dead_code)]
-pub async fn page(web::Path(sub): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
-	render(sub, params.sort.clone(), (params.before.clone(), params.after.clone())).await
-}
+// web::Path(sub): web::Path<String>, params: web::Query<Params>
+pub async fn page(req: HttpRequest) -> Result<HttpResponse> {
+	let path = format!("{}.json?{}", req.path(), req.query_string());
+	let sub = req.match_info().get("sub").unwrap_or("popular").to_string();
+	let sort = req.match_info().get("sort").unwrap_or("hot").to_string();

-pub async fn render(sub_name: String, sort: Option<String>, ends: (Option<String>, Option<String>)) -> Result<HttpResponse> {
-	let sorting = sort.unwrap_or("hot".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 = match ends.0 {
-		Some(val) => format!("r/{}/{}.json?before={}&count=25", sub_name, sorting, val),
-		None => match ends.1 {
-			Some(val) => format!("r/{}/{}.json?after={}&count=25", sub_name, sorting, val),
-			None => format!("r/{}/{}.json", sub_name, sorting),
-		},
-	};
-
-	let sub_result = if !&sub_name.contains("+") {
-		subreddit(&sub_name).await
+	let sub_result = if !&sub.contains("+") && sub != "popular" {
+		subreddit(&sub).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;
+	let posts = fetch_posts(path.clone(), String::new()).await;

-	if sub_result.is_err() || items_result.is_err() {
+	if posts.is_err() {
 		let s = ErrorTemplate {
-			message: sub_result.err().unwrap().to_string(),
+			message: posts.err().unwrap().to_string(),
 		}
 		.render()
 		.unwrap();
 		Ok(HttpResponse::Ok().status(StatusCode::NOT_FOUND).content_type("text/html").body(s))
 	} else {
-		let mut 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 sub = sub_result.unwrap_or(Subreddit::default());
+		let items = posts.unwrap();

 		let s = SubredditTemplate {
 			sub: sub,
 			posts: items.0,
-			sort: sorting,
-			ends: (before, items.1),
+			sort: (sort, param(&path, "t").await),
+			ends: (param(&path, "after").await, items.1),
 		}
 		.render()
 		.unwrap();
@ -79,7 +54,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 +67,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()),
 	};
--- a/src/user.rs
+++ b/src/user.rs
@ -1,7 +1,8 @@
 // CRATES
-use crate::utils::{fetch_posts, format_url, nested_val, request, ErrorTemplate, Params, Post, User};
-use actix_web::{http::StatusCode, web, HttpResponse, Result};
+use crate::utils::{fetch_posts, format_url, nested_val, param, request, ErrorTemplate, Post, User};
+use actix_web::{http::StatusCode, HttpRequest, HttpResponse, Result};
 use askama::Template;
+use chrono::{TimeZone, Utc};

 // STRUCTS
 #[derive(Template)]
@ -9,16 +10,23 @@ use askama::Template;
 struct UserTemplate {
 	user: User,
 	posts: Vec<Post>,
-	sort: String,
+	sort: (String, String),
+	ends: (String, String),
 }

-async fn render(username: String, sort: String) -> Result<HttpResponse> {
-	// Build the Reddit JSON API url
-	let url: String = format!("user/{}/.json?sort={}", username, sort);
+pub async fn profile(req: HttpRequest) -> Result<HttpResponse> {
+	// Build the Reddit JSON API path
+	let path = format!("{}.json?{}&raw_json=1", req.path(), req.query_string());

+	// Retrieve other variables from Libreddit request
+	let sort = param(&path, "sort").await;
+	let username = req.match_info().get("username").unwrap_or("").to_string();
+
+	// Request user profile data and user posts/comments from Reddit
 	let user = user(&username).await;
-	let posts = fetch_posts(url, "Comment".to_string()).await;
+	let posts = fetch_posts(path.clone(), "Comment".to_string()).await;

+	// If there is an error show error page
 	if user.is_err() || posts.is_err() {
 		let s = ErrorTemplate {
 			message: user.err().unwrap().to_string(),
@ -27,10 +35,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: (sort, param(&path, "t").await),
+			ends: (param(&path, "after").await, posts_unwrapped.1),
 		}
 		.render()
 		.unwrap();
@ -39,12 +50,9 @@ 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,
-	}
-}
+// pub async fn page(web::Path(username): web::Path<String>, params: web::Query<Params>) -> Result<HttpResponse> {
+// 	render(username, params.sort.clone(), params.t.clone(), (params.before.clone(), params.after.clone())).await
+// }

 // USER
 async fn user(name: &String) -> Result<User, &'static str> {
@ -62,11 +70,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,
 	})
--- a/src/utils.rs
+++ b/src/utils.rs
@ -3,6 +3,7 @@
 //
 use chrono::{TimeZone, Utc};
 use serde_json::{from_str, Value};
+use url::Url;
 // use surf::{client, get, middleware::Redirect};

 #[cfg(feature = "proxy")]
@ -11,11 +12,14 @@ 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);
+// Post flags with nsfw and stickied
+pub struct Flags {
+	pub nsfw: bool,
+	pub stickied: bool,
+}

-#[allow(dead_code)]
 // Post containing content, metadata and media
 pub struct Post {
 	pub title: String,
@ -26,12 +30,12 @@ pub struct Post {
 	pub url: String,
 	pub score: String,
 	pub post_type: String,
+	pub flair: Flair,
+	pub flags: Flags,
 	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 +47,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,
@ -67,6 +72,8 @@ pub struct Subreddit {
 // Parser for query params, used in sorting (eg. /r/rust/?sort=hot)
 #[derive(serde::Deserialize)]
 pub struct Params {
+	pub t: Option<String>,
+	pub q: Option<String>,
 	pub sort: Option<String>,
 	pub after: Option<String>,
 	pub before: Option<String>,
@ -83,7 +90,19 @@ pub struct ErrorTemplate {
 // FORMATTING
 //

-pub async fn format_url(url: &str) -> String {
+// Grab a query param from a url
+pub async fn param(path: &String, value: &str) -> String {
+	let url = Url::parse(format!("https://reddit.com/{}", path).as_str()).unwrap();
+	let pairs: std::collections::HashMap<_, _> = url.query_pairs().into_owned().collect();
+	pairs.get(value).unwrap_or(&String::new()).to_owned()
+}
+
+// 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 +110,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 +125,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)]
-pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Post>, String), &'static str> {
+// Fetch posts of a user or subreddit
+pub async fn fetch_posts(path: 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(path.clone()).await;

 	// If the Reddit API returns an error, exit this function
 	if req.is_err() {
@ -135,9 +153,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 +166,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 +176,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 +185,17 @@ pub async fn fetch_posts(url: String, fallback_title: String) -> Result<(Vec<Pos
 					"white".to_string()
 				},
 			),
+			flags: Flags {
+				nsfw: post["data"]["over_18"].as_bool().unwrap_or(false),
+				stickied: post["data"]["stickied"].as_bool().unwrap_or(false),
+			},
+			url: val(post, "permalink").await,
+			time: Utc.timestamp(unix_time, 0).format("%b %e '%y").to_string(),
 		});
 	}

+	dbg!(path);
+
 	Ok((posts, res["data"]["after"].as_str().unwrap_or("").to_string()))
 }

@ -180,9 +204,8 @@ 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);
+pub async fn request(path: String) -> Result<serde_json::Value, &'static str> {
+	let url = format!("https://www.reddit.com/{}", path);

 	// --- actix-web::client ---
 	// let client = actix_web::client::Client::default();
--- a/static/style.css
+++ b/static/style.css
@ -10,13 +10,16 @@
 	--black-contrast: 0 1px 3px rgba(0,0,0,0.5);
 }

+::selection {
+	color: var(--background);
+	background: var(--accent);
+}
+
 * {
 	transition: 0.2s all;
-	margin: 0px;
+	margin: 0;
 	color: white;
 	font-family: sans-serif;
-	font-weight: normal;
-	outline: none;
 }

 body {
@ -27,22 +30,23 @@ body {
 nav {
 	display: flex;
 	justify-content: space-between;
+	align-items: center;
 	color: var(--accent);
 	background: var(--outside);
-	padding: 15px;
-	font-weight: bold;
+	padding: 5px 15px;
 	font-size: 20px;
+	height: 40px;
 }

-#lib, #github {
-	color: white;
-}
+nav #lib, nav #github, nav #version { color: white; }
+nav #version { opacity: 25%; }

 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 {
@ -50,12 +54,20 @@ footer {
 	justify-content: center;
 }

+footer > a {
+	margin-right: 5px;
+}
+
 button {
 	background: none;
 	border: none;
 	font-weight: bold;
 }

+hr {
+	margin: 20px 0;
+}
+
 a {
 	color: inherit;
 	text-decoration: none;
@ -65,106 +77,175 @@ a:not(.post_right):hover {
 	text-decoration: underline;
 }

-#about {
-	padding-top: 20px;
-	background: #151515;
+img[src=""] {
+	display: none;
 }

-#version {
-	color: white;
-	opacity: 25%;
+aside {
+	flex-grow: 1;
+	margin: 20px 20px 0 20px;
+	max-width: 350px;
 }

-/* 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 */
+/* Sorting and Search */

-#sort {
+select {
 	background: var(--outside);
-	box-shadow: var(--black-contrast);
-	border: 0px;
-	padding: 0px 15px;
-	margin: 20px 0px;
-	height: 40px;
-	font-size: 15px;
-	border-radius: 5px 0px 0px 5px;
-	appearance: none;
 }

-#sort_submit {
-	background: var(--highlighted);
-	border: 0px;
-	font-size: 15px;
+select, #search {
+	border: 0;
+	padding: 0 15px;
 	height: 40px;
+	font-size: 15px;
+	appearance: none;
+	border-radius: 5px 0px 0px 5px;
+}
+
+#searchbox {
+	display: flex;
+	box-shadow: var(--black-contrast);
+}
+
+#searchbox > *, #sort_submit {
+	background: var(--highlighted);
+	height: 40px;
+}
+
+#search {
+	border-right: 2px var(--outside) solid;
+	min-width: 0;
+	flex-grow: 1;
+}
+
+#inside {
+	display: flex;
+	font-size: 15px;
+	align-items: center;
+	border-right: 2px var(--outside) solid;
+	height: 40px;
+	padding: 0 10px;
+}
+
+#restrict_sr { margin-right: 5px; }
+
+input[type="submit"] {
+	border: 0;
 	border-radius: 0px 5px 5px 0px;
 }

-#sort > div, footer > a {
+select:hover { background: var(--foreground); }
+input[type="submit"]:hover { color: var(--accent); }
+
+#timeframe {
+	border-radius: 5px 0px 0px 5px;
+	margin-left: 10px;
+}
+
+#search_sort {
+	background: var(--highlighted);
+	border-radius: 5px;
+	overflow: hidden;
+}
+
+#search_sort > #search {
+	border: 0;
+	background: transparent;
+}
+
+#search_sort > :not(:first-child), #search_sort > #sort_options {
+	margin: 0;
+	border-radius: 0;
+	border-right: 0;
+	border-left: 2px solid var(--background);
+	box-shadow: none;
+	background: transparent;
+}
+
+#sort_options {
+	height: 40px;
+}
+
+#sort, #search_sort {
+	display: flex;
+	align-items: center;
+	margin-bottom: 20px;
+}
+
+#sort_options, footer > a {
+	border-radius: 5px;
 	box-shadow: var(--black-contrast);
 	background: var(--outside);
+	display: flex;
+	overflow: hidden;
+}
+
+#sort_options > a, footer > a {
 	color: lightgrey;
-	border-radius: 5px;
-	margin-right: 5px;
 	padding: 10px 20px;
 	text-align: center;
 	cursor: pointer;
 }

-#sort > div.selected {
+#sort_options > a.selected {
 	background: var(--accent);
 	color: black;
 }

-#sort > div:hover {
+#sort_options > a:not(.selected):hover {
 	background: var(--foreground);
 }

@ -177,6 +258,10 @@ a:not(.post_right):hover {
 	display: flex;
 }

+.post.highlighted {
+	margin: 20px 0;
+}
+
 .post:hover {
 	background: var(--foreground);
 }
@ -194,22 +279,40 @@ 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;
+}
+
+.stickied {
+	--accent: #5cff85;
+	border: 1px solid #5cff85;
+	padding: 5px;
+}
+
 .post_subreddit {
 	font-weight: bold;
 }

 .post_title {
 	font-size: 18px;
-}
-
-.post_score {
-	margin-top: 20px;
-	color: var(--accent);
+	line-height: 1.5;
 }

 .post_right {
@ -222,35 +325,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,15 +349,10 @@ a:not(.post_right):hover {
 	max-width: 20%;
 }

-.post_thumbnail[src=""] {
-	display: none;
-}
-
 .post_flair {
 	background: var(--accent);
 	color: black;
 	padding: 5px;
-	margin-right: 5px;
 	border-radius: 5px;
 	font-size: 12px;
 	font-weight: bold;
@ -295,17 +375,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 +407,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 +427,6 @@ a:not(.post_right):hover {
 	align-self: center;
 }

-.comment_image[src=""] {
-	display: none;
-}
-
 .comment_body {
 	opacity: 0.9;
 	font-weight: normal;
@ -402,9 +475,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 +510,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 +537,7 @@ td, th {
 	}

 	.post_left {
-		border-radius: 0px 0px 5px 5px;
+		border-radius: 0 0 5px 5px;
 	}

 	.post_right {
@ -454,10 +554,24 @@ 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; }
+	nav { flex-direction: column; }
+
+	aside {
+		margin: 20px 0 0 0;
+		max-width: 100%;
+	}
+
+	#user, #sidebar {
+		margin: 20px 0;
+	}
 }
--- a/templates/base.html
+++ b/templates/base.html
@ -4,20 +4,20 @@
 		{% block head %}
 		<title>{% block title %}Libreddit{% endblock %}</title>
 		<meta http-equiv="Referrer-Policy" content="no-referrer">
-		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self';">
+		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; base-uri 'none'; form-action 'self';
+			{% if cfg!(not(feature = "proxy")) %}img-src https://*; media-src https://*{% endif %}">
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 		<meta name="description" content="View on Libreddit, an alternative private front-end to Reddit.">
 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" href="/style.css">
 		{% endblock %}
-    </head>
+		</head>
 	<body style="visibility: hidden;">
-		{% block navbar %}
 		<nav>
 			<a href="/"><span id="lib">lib</span>reddit. <span id="version">v{{ env!("CARGO_PKG_VERSION") }}</span></a>
+			{% block search %}{% endblock %}
 			<a id="github" href="https://github.com/spikecodes/libreddit">GITHUB</a>
 		</nav>
-		{% endblock %}
 		
 		{% block body %}
 		<main>
--- a/templates/popular.html
+++ b/templates/popular.html
@ -1,45 +0,0 @@
-{% 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 %}
-
-	<footer>
-		{% if ends.0 != "" %}
-		<a href="?before={{ ends.0 }}">PREV</a>
-		{% endif %}
-
-		{% if ends.1 != "" %}
-		<a href="?after={{ ends.1 }}">NEXT</a>
-		{% endif %}
-	</footer>
-{% endblock %}
--- a/templates/post.html
+++ b/templates/post.html
@ -1,5 +1,13 @@
 {% extends "base.html" %}
+{% import "utils.html" as utils %}
+
 {% block title %}{{ post.title }} - r/{{ post.community }}{% endblock %}
+
+{% block search %}
+	{% call utils::search(["/r/", post.community.as_str()].concat(), "") %}
+{% endblock %}
+
+{% block root %}/r/{{ post.community }}{% endblock %}{% block location %}r/{{ post.community }}{% endblock %}
 {% block head %}
 	{% call super() %}
 	<meta name="author" content="u/{{ post.author }}">
@ -9,7 +17,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 +27,72 @@
 			{% 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.flags.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 id="sort">
+			<select name="sort"> 
+				{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "") %}
+			</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 %}
--- a/templates/search.html
+++ b/templates/search.html
@ -0,0 +1,72 @@
+{% extends "base.html" %}
+{% import "utils.html" as utils %}
+
+{% block content %}
+	<div id="column_one">
+		<form id="search_sort">
+			<input id="search" type="text" name="q" placeholder="Search" value="{{ query }}">
+			{% if sub != "" %}
+			<div id="inside">
+				<input type="checkbox" name="restrict_sr" id="restrict_sr" checked="checked" data-com.bitwarden.browser.user-edited="yes">
+				<label for="restrict_sr">in r/{{ sub }}</label>
+			</div>
+			{% endif %}
+			<select id="sort_options" name="sort">
+				{% call utils::options(sort.0, ["relevance", "hot", "top", "new", "comments"], "") %}
+			</select>{% if sort.0 != "new" %}<select id="timeframe" name="t"> 
+				{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "all") %}
+			</select>{% endif %}<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.flags.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>
+		{% 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.0 }}{% if sort.0 == "top" %}&t={{ sort.1 }}{% endif %}&before={{ ends.0 }}">PREV</a>
+			{% endif %}
+
+			{% if ends.1 != "" %}
+			<a href="?sort={{ sort.0 }}{% if sort.0 == "top" %}&t={{ sort.1 }}{% endif %}&after={{ ends.1 }}">NEXT</a>
+			{% endif %}
+		</footer>
+	</div>
+{% endblock %}
--- a/templates/subreddit.html
+++ b/templates/subreddit.html
@ -1,65 +1,82 @@
 {% extends "base.html" %}
+{% import "utils.html" as utils %}

-{% if sub.name != "" %}
 {% block title %}r/{{ sub.name }}: {{ sub.description }}{% endblock %}
-{% endif %}
+
+{% block search %}
+	{% call utils::search(["/r/", sub.name.as_str()].concat(), "") %}
+{% endblock %}

 {% 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>
-		</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>
-			</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">
+			<form id="sort">
+				<div id="sort_options">
+					{% if sub.name.is_empty() %}
+						{% call utils::sort("", ["hot", "new", "top", "rising"], sort.0) %}
+					{% else %}
+						{% call utils::sort(["/r/", sub.name.as_str()].concat(), ["hot", "new", "top", "rising"], sort.0) %}
 					{% 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>
+				{% if sort.0 == "top" %}<select id="timeframe" name="t"> 
+					{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "day") %}
+					<input id="sort_submit" type="submit" value="&rarr;">
+				</select>{% endif %}
+			</form>
+			{% for post in posts %}
+			<div class="post {% if post.flags.stickied %}stickied{% endif %}">
+				<div class="post_left">
+					<p class="post_score">{{ post.score }}</p>
+					{% if post.flags.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.0 }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}
+
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort.0 }}&after={{ ends.1 }}">NEXT</a>
+				{% endif %}
+			</footer>
+		</div>
+		{% 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>
-			<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 %}
--- a/templates/user.html
+++ b/templates/user.html
@ -1,65 +1,86 @@
 {% extends "base.html" %}
+{% import "utils.html" as utils %}
+
+{% block search %}
+	{% call utils::search("".to_owned(), "", "") %}
+{% endblock %}
+
 {% 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 id="sort">
+				<select name="sort"> 
+					{% call utils::options(sort.0, ["hot", "new", "top"], "") %}
+				</select>{% if sort.0 == "top" %}<select id="timeframe" name="t"> 
+					{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "all") %}
+				</select>{% endif %}<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.flags.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.0 }}&before={{ ends.0 }}">PREV</a>
+				{% endif %}
+
+				{% if ends.1 != "" %}
+				<a href="?sort={{ sort.0 }}&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 %}
--- a/templates/utils.html
+++ b/templates/utils.html
@ -0,0 +1,28 @@
+{% macro options(current, values, default) -%}
+	{% for value in values %}
+		<option value="{{ value }}" {% if current == value || (current == "" && value == default) %}selected{% endif %}>
+			{{ format!("{}{}", value.get(0..1).unwrap().to_uppercase(), value.get(1..).unwrap()) }}
+		</option>
+	{% endfor %}
+{%- endmacro %}
+
+{% macro sort(root, methods, selected) -%}
+	{% for method in methods %}
+		<a {% if method == selected %}class="selected"{% endif %} href="{{ root }}/{{ method }}">
+			{{ format!("{}{}", method.get(0..1).unwrap().to_uppercase(), method.get(1..).unwrap()) }}
+		</a>
+	{% endfor %}
+{%- endmacro %}
+
+{% macro search(root, search) -%}
+<form action="{% if root != "/r/" %}{{ root }}{% endif %}/search/" id="searchbox">
+	<input id="search" type="text" name="q" placeholder="Search" value="{{ search }}">
+	{% if root != "/r/" %}
+	<div id="inside">
+		<input type="checkbox" name="restrict_sr" id="restrict_sr" checked="checked" data-com.bitwarden.browser.user-edited="yes">
+		<label for="restrict_sr">in {{ root }}</label>
+	</div>
+	{% endif %}
+	<input type="submit" value="&rarr;">
+</form>
+{%- endmacro %}
Author	SHA1	Message	Date
spikecodes	a6dc7ee043	Rewrite + Searching	2020-12-31 15:54:13 -08:00
spikecodes	c7282520cd	Add Focus Indicator	2020-12-30 10:53:27 -08:00
spikecodes	a866c1d068	Update Screenshot for v0.2.3	2020-12-29 19:40:49 -08:00
spikecodes	aa9aad6743	Stickied Posts	2020-12-29 19:01:02 -08:00
spikecodes	f65ee2eb6a	Sort Top by Timeframe	2020-12-29 17:11:47 -08:00
Spike	44c4341e67	Update README.md	2020-12-29 13:29:24 -08:00
Spike	1c886f8003	Merge pull request #10 from StuffNoOneCaresAbout/add-instance instances: add libreddit.kavin.rocks	2020-12-29 09:53:23 -08:00
FireMasterK	b481d26be2	instances: add libreddit.kavin.rocks And it's onion counterpart.	2020-12-29 12:53:49 +05:30
spikecodes	f00ef59404	Fix proxy-less deployment	2020-12-28 20:49:15 -08:00
Spike	3115ff3436	Update README.md	2020-12-28 18:45:46 -08:00
spikecodes	443b198c12	Markdown and Subreddit Sidebars	2020-12-28 18:42:46 -08:00
Spike	ac84d8d2db	List Instances as a Table	2020-12-27 21:46:39 -08:00
spikecodes	e27cf94fbf	Include Comment Lines in User History	2020-12-27 15:37:01 -08:00
spikecodes	68495fb280	Add Pages to User Profiles	2020-12-27 12:36:10 -08:00
spikecodes	bec5c78709	Persist Sort on Subreddit Pages	2020-12-26 12:43:51 -08:00
Spike	abfcfdf09e	Merge pull request #8 from zachjmurphy/master Add InsanityWtf Libreddit Instance	2020-12-25 18:55:41 -08:00
spikecodes	dad01749e6	Replace Responsive Feature with Secure	2020-12-25 18:06:33 -08:00
Zach	2efb73cee3	Update README.md	2020-12-25 17:09:11 -05:00
spikecodes	ace21b21d5	Redesign User/Subreddit About Boxes	2020-12-23 22:16:04 -08:00
spikecodes	280e16bd7f	Fix Subreddit Icons	2020-12-23 20:36:49 -08:00
Spike	44d44a529c	Add DotHQ Libreddit Instance	2020-12-23 13:34:05 -08:00
spikecodes	0957f2e339	NSFW Support	2020-12-22 18:29:43 -08:00