Merge pull request #3 from spikecodes/master

Merge upstream

README.md

@@ -6,6 +6,8 @@
 
 ---
 
+**10 second pitch:** Libreddit is a portmanteau of "libre" (meaning freedom) and "Reddit". It is a private front-end 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).
+
 - 🚀 Fast: written in Rust for blazing fast speeds and memory safety
 - ☁️ Light: no JavaScript, no ads, no tracking, no bloat
 - 🕵 Private: all requests are proxied through the server, including media
@@ -13,8 +15,6 @@
 
 ---
 
-**10 second pitch:** Libreddit is a portmanteau of "libre" (meaning freedom) and "Reddit". It is a private front-end 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).
-
 ## Jump to...
 - [About](#about)
   - [Teddit Comparison](#how-does-it-compare-to-teddit)
@@ -48,11 +48,14 @@ A checkmark in the "Cloudflare" category here refers to the use of the reverse p
 
 # About
 
-Find Libreddit on...
+Find Libreddit on 💬 [Matrix](https://matrix.to/#/#libreddit:kde.org), 🐋 [Docker](https://hub.docker.com/r/spikecodes/libreddit), :octocat: [GitHub](https://github.com/spikecodes/libreddit), and 🦊 [GitLab](https://gitlab.com/spikecodes/libreddit).
-- 💬 Matrix: [#libreddit:kde.org](https://matrix.to/#/#libreddit:matrix.org)
+
-- 🐋 Docker: [spikecodes/libreddit](https://hub.docker.com/r/spikecodes/libreddit)
+## Built with
-- :octocat: GitHub: [spikecodes/libreddit](https://github.com/spikecodes/libreddit)
+
-- 🦊 GitLab: [spikecodes/libreddit](https://gitlab.com/spikecodes/libreddit)
+- [Rust](https://www.rust-lang.org/) - Programming language
+- [Actix Web](https://github.com/actix/actix-web) - Web server
+- [Askama](https://github.com/djc/askama) - Templating engine
+- [ureq](https://github.com/algesten/ureq) - HTTP client
 
 ## Info
 Libreddit hopes to provide an easier way to browse Reddit, without the ads, trackers, and bloat. Libreddit was inspired by other alternative front-ends to popular services such as [Invidious](https://github.com/iv-org/invidious) for YouTube, [Nitter](https://github.com/zedeus/nitter) for Twitter, and [Bibliogram](https://sr.ht/~cadence/bibliogram/) for Instagram.
@@ -80,7 +83,7 @@ Lasted tested Jan 17, 2021.
 Results from Google Lighthouse ([Libreddit Report](https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https%3A%2F%2Flibredd.it), [Reddit Report](https://lighthouse-dot-webdotdevsite.appspot.com/lh/html?url=https%3A%2F%2Fwww.reddit.com%2F)).
 
 |                        | Libreddit     | Reddit     |
-|------------------------|---------------|-----------|
+|------------------------|---------------|------------|
 | Requests               | 20            | 70         |
 | Resource Size (card ui)| 1,224 KiB     | 1,690 KiB  |
 | Time to Interactive    | **1.5 s**     | **11.2 s** |
@@ -126,13 +129,13 @@ For transparency, I hope to describe all the ways Libreddit handles user privacy
 
 **Cookies:** Libreddit uses optional cookies to store any configured settings in [the settings menu](https://libredd.it/settings). This is not a cross-site cookie and the cookie holds no personal data, only a value of the possible layout.
 
-**Hosting:** The official instances (`libredd.it` and `libreddit.spike.codes`) are hosted on [Repl.it](https://repl.it/) which monitors usage to prevent abuse. I can understand if this invalidates certain users' threat models and therefore, selfhosting and browsing through Tor are welcomed.
+**Hosting:** The official instances are hosted on [Repl.it](https://repl.it/) which monitors usage to prevent abuse. I can understand if this invalidates certain users' threat models and therefore, selfhosting and browsing through Tor are welcomed.
 
 ---
 
 # Installation
 
-## A) Cargo
+## 1) Cargo
 
 Make sure Rust stable is installed along with `cargo`, Rust's package manager.
 
@@ -140,9 +143,9 @@ Make sure Rust stable is installed along with `cargo`, Rust's package manager.
 cargo install libreddit
 ```
 
-## B) Docker
+## 2) Docker
 
-Deploy the Docker image of Libreddit:
+Deploy the [Docker image](https://hub.docker.com/r/spikecodes/libreddit) of Libreddit:
 ```
 docker run -d --name libreddit -p 8080:8080 spikecodes/libreddit
 ```
@@ -152,22 +155,21 @@ Deploy using a different port (in this case, port 80):
 docker run -d --name libreddit -p 80:8080 spikecodes/libreddit
 ```
 
-## C) AUR
+## 3) AUR
 
 For ArchLinux users, Libreddit is available from the AUR as [`libreddit-git`](https://aur.archlinux.org/packages/libreddit-git).
 
-Install:
 ```
 yay -S libreddit-git
 ```
 
-## D) GitHub Releases
+## 4) GitHub Releases
 
 If you're on Linux and none of these methods work for you, you can grab a Linux binary from [the newest release](https://github.com/spikecodes/libreddit/releases/latest).
 
-## E) Repl.it
+## 5) Repl.it
 
-**Note:** Repl.it is a free option but they are *not* private and are monitor server usage to prevent abuse. If you really need a free and easy setup, this method may work best for you.
+**Note:** Repl.it is a free option but they are *not* private and will monitor server usage to prevent abuse. If you need a free and easy setup, this method may work best for you.
 
 1. Create a Repl.it account (see note above)
 2. Visit [the official Repl](https://repl.it/@spikethecoder/libreddit) and fork it
@@ -179,18 +181,18 @@ In the web preview (defaults to top right), you should see your instance hosted
 
 # Deployment
 
-Once installed, deploy Libreddit (unless you're using Docker) by running:
+Once installed, deploy Libreddit to `0.0.0.0:8080` by running:
 
 ```
 libreddit
 ```
 
-Specify a custom address for the server by passing the `-a` or `--address` argument:
+## Options
-```
-libreddit --address=0.0.0.0:8111
-```
 
-Given you have a TLS certificate, you can pass the `-r` or `--redirect-https` arguments to force HTTPS.
+| Short | Long               | Example                           |
+|-------|--------------------|-----------------------------------|
+| `-a`  | `--address`        | `libreddit --adress=0.0.0.0:8111` |
+| `-r`  | `--redirect-https` | `libreddit --redirect-https`      |
 
 ## Building
 

src/utils.rs

@@ -473,9 +473,9 @@ pub async fn request(path: &str) -> Result<Value, String> {
 			Err("Page not found".to_string())
 		}
 		// If failed to send request
-		Err(e) => {
+		Err(_e) => {
 			#[cfg(debug_assertions)]
-			dbg!(format!("{} - {}", url, e));
+			dbg!(format!("{} - {}", url, _e));
 			Err("Couldn't send request to Reddit, this instance may be being rate-limited. Try another.".to_string())
 		}
 	}

static/style.css

@@ -16,6 +16,7 @@
 	--background: #0f0f0f;
 	--outside: #1f1f1f;
 	--post: #161616;
+	--panel-border: 1px solid #333;
 	--highlighted: #333;
 	--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 }
@@ -30,6 +31,7 @@
 		--background: #ddd;
 		--outside: #ececec;
 		--post: #eee;
+		--panel-border: 1px solid #ccc;
 		--highlighted: white;
 		--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 	}
@@ -44,6 +46,7 @@
 	--background: #ddd;
 	--outside: #ececec;
 	--post: #eee;
+	--panel-border: 1px solid #ccc;
 	--highlighted: white;
 	--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
@@ -167,7 +170,7 @@ aside {
 }
 
 .post, .panel {
-	border: 1px solid var(--highlighted);
+	border: var(--panel-border);
 }
 
 .dot {
@@ -388,7 +391,7 @@ button.submit:hover > svg { stroke: var(--accent); }
 	background: var(--post);
 	box-shadow: var(--shadow);
 	transition: 0.2s background;
-	border: 1px solid var(--highlighted);
+	border: var(--panel-border);
 	margin-bottom: 20px;
 }
 
@@ -443,7 +446,7 @@ a.search_subreddit:hover {
 			"post_score post_media  post_thumbnail" auto
 			"post_score post_body   post_thumbnail" auto
 			"post_score post_footer post_thumbnail" auto
-			/ minmax(50px, auto) 1fr fit-content(min(20%, 152px));
+			/ minmax(40px, auto) 1fr fit-content(min(20%, 152px));
 }
 
 .post:not(:last-child) { margin-bottom: 10px; }
@@ -458,18 +461,16 @@ a.search_subreddit:hover {
 
 .post_score {
 	padding-top: 20px;
+	font-size: 13px;
+	font-weight: bold;
+	text-align: end;
 	color: var(--accent);
 	grid-area: post_score;
-	text-align: center;
+	text-align: end;
-	background: var(--foreground);
 	border-radius: 5px 0 0 5px;
 	transition: 0.2s background;
 }
 
-.post:hover > .post_score {
-	background: var(--highlighted);
-}
-
 .post_score .label {
 	display: none;
 } 
@@ -569,7 +570,7 @@ a.search_subreddit:hover {
 
 .post_thumbnail {
 	border-radius: 5px;
-	border: 1px solid var(--foreground);
+	border: var(--panel-border);
 	display: grid;
 	overflow: hidden;
 	background-color: var(--background);
@@ -891,13 +892,14 @@ input[type="submit"] {
 
 /* Tables */
 
+table, td, th {	border: var(--panel-border); }
+
 table {
-	border: 3px var(--highlighted) solid;
+	border-width: 3px;
 	border-spacing: 0;
 }
 
 td, th {
-	border: 1px var(--highlighted) solid;
 	padding: 10px;
 }
 
@@ -917,7 +919,6 @@ td, th {
 		background-color: unset;
 		margin: 5px 0px 20px 20px;
 		padding: 0;
-		font-size: 14px;
 	}
 	
 	.compact .post_score {

templates/post.html

@@ -41,7 +41,6 @@
 
 		<!-- POST CONTENT -->
 		<div class="post highlighted">
-			
 			<p class="post_header">
 				<a class="post_subreddit" href="/r/{{ post.community }}">r/{{ post.community }}</a>
 				<span class="dot">&bull;</span>
@@ -73,14 +72,12 @@
 			<div class="post_body">{{ post.body }}</div>
 			<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
 			<div class="post_footer">
-				
 				<ul id="post_links">
 					<li><a href="/{{ post.id }}">permalink</a></li>
 					<li><a href="https://reddit.com/{{ post.id }}">reddit</a></li>
 				</ul>
 				<p>{{ post.upvote_ratio }}% Upvoted</p>
 			</div>
-
 		</div>
 
 		<!-- SORT FORM -->

templates/search.html

@@ -77,7 +77,7 @@
 
 			<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
 			<div class="post_footer">
-				<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
+				<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} comments</a>
 			</div>
 		</div>
 		{% else %}

templates/subreddit.html

@@ -72,7 +72,7 @@
 
 				<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
 				<div class="post_footer">
-					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
+					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} comments</a>
 				</div>
 			</div>
 			{% endif %}

templates/user.html

@@ -62,7 +62,7 @@
 
 				<div class="post_score">{{ post.score }}<span class="label"> Upvotes</span></div>
 				<div class="post_footer">
-					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} Comments</a>
+					<a href="{{ post.permalink }}" class="post_comments">{{ post.comments }} comments</a>
 				</div>
 			</div>
 			{% else %}