Markdown and Subreddit Sidebars

Cargo.lock

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

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"

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

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

src/user.rs

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

src/utils.rs

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

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

templates/popular.html

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

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

templates/subreddit.html

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

templates/user.html

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