Merge pull request #2 from spikecodes/master

Merge upstream
This commit is contained in:
robrobinbin 2021-01-18 18:48:23 +01:00 committed by GitHub
commit 4b0677d10e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 156 additions and 114 deletions

4
Cargo.lock generated
View File

@ -844,9 +844,9 @@ dependencies = [
[[package]]
name = "hermit-abi"
version = "0.1.17"
version = "0.1.18"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5aca5565f760fb5b220e499d72710ed156fdb74e631659e99377d9ebfbd13ae8"
checksum = "322f4de77956e22ed0e5032c359a0f1273f1f7f0d79bfa3b8ffbc730d7fbcc5c"
dependencies = [
"libc",
]

View File

@ -2,40 +2,34 @@
> An alternative private front-end to Reddit
Libre + Reddit = [Libreddit](https://libredd.it)
![screenshot](https://i.ibb.co/FxxbKM6/libreddit-rust.png)
- 🚀 Fast: written in Rust for blazing fast speeds and safety
- ☁️ Light: no JavaScript, no ads, no tracking
---
- 🚀 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
- 🔒 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).
---
## Contents
- [Screenshot](#screenshot)
- [Instances](#instances)
**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)
- [Elsewhere](#elsewhere)
- [Info](#info)
- [Teddit Comparison](#how-does-it-compare-to-teddit)
- [Comparison](#comparison)
- [Speed](#speed)
- [Privacy](#privacy)
- [Installation](#installation)
- [Cargo](#a-cargo)
- [Docker](#b-docker)
- [AUR](#c-aur)
- [GitHub Releases](#d-github-releases)
- [Repl.it](#e-replit)
- Developing
- [Deployment](#deployment)
- [Building](#building)
- [Deployment](#deployment)
## Screenshot
---
![](https://i.ibb.co/FxxbKM6/libreddit-rust.png)
## Instances
# Instances
Feel free to [open an issue](https://github.com/spikecodes/libreddit/issues/new) to have your [selfhosted instance](#deployment) listed here!
@ -50,21 +44,22 @@ Feel free to [open an issue](https://github.com/spikecodes/libreddit/issues/new)
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
---
# About
### Elsewhere
Find Libreddit on...
- 💬 Matrix: [#libreddit:kde.org](https://matrix.to/#/#libreddit:matrix.org)
- 🐋 Docker: [spikecodes/libreddit](https://hub.docker.com/r/spikecodes/libreddit)
- :octocat: GitHub: [spikecodes/libreddit](https://github.com/spikecodes/libreddit)
- 🦊 GitLab: [spikecodes/libreddit](https://gitlab.com/spikecodes/libreddit)
### Info
## 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.
Libreddit currently implements most of Reddit's (signed-out) functionalities but still lacks [a few features](https://github.com/spikecodes/libreddit/issues).
### How does it compare to Teddit?
## 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.
@ -72,25 +67,27 @@ 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).
## Comparison
---
# Comparison
This section outlines how Libreddit compares to Reddit.
### Speed
## Speed
Lasted tested December 21, 2020.
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 | 22 | 70 |
| Resource Size | 135 KiB | 2,222 KiB |
| Time to Interactive | **1.7 s** | **11.5 s**|
| | Libreddit | Reddit |
|------------------------|---------------|-----------|
| Requests | 20 | 70 |
| Resource Size (card ui)| 1,224 KiB | 1,690 KiB |
| Time to Interactive | **1.5 s** | **11.2 s**|
### Privacy
## Privacy
#### Reddit
### Reddit
**Logging:** According to Reddit's [privacy policy](https://www.redditinc.com/policies/privacy-policy), they "may [automatically] log information" including:
- IP address
@ -119,7 +116,7 @@ Results from Google Lighthouse ([Libreddit Report](https://lighthouse-dot-webdot
- Third-Party Cookies
- Third-Party Site
#### Libreddit
### Libreddit
For transparency, I hope to describe all the ways Libreddit handles user privacy.
@ -131,9 +128,11 @@ For transparency, I hope to describe all the ways Libreddit handles user privacy
**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.
## Installation
---
### A) Cargo
# Installation
## A) Cargo
Make sure Rust stable is installed along with `cargo`, Rust's package manager.
@ -141,7 +140,7 @@ Make sure Rust stable is installed along with `cargo`, Rust's package manager.
cargo install libreddit
```
### B) Docker
## B) Docker
Deploy the Docker image of Libreddit:
```
@ -153,7 +152,7 @@ Deploy using a different port (in this case, port 80):
docker run -d --name libreddit -p 80:8080 spikecodes/libreddit
```
### C) AUR
## C) AUR
For ArchLinux users, Libreddit is available from the AUR as [`libreddit-git`](https://aur.archlinux.org/packages/libreddit-git).
@ -162,12 +161,11 @@ Install:
yay -S libreddit-git
```
### D) GitHub Releases
## D) 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).
Currently, Libreddit does not have Windows or macOS binaries but those will be available soon.
### E) Repl.it
## E) 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.
@ -177,7 +175,9 @@ Currently, Libreddit does not have Windows or macOS binaries but those will be a
In the web preview (defaults to top right), you should see your instance hosted where you can assign a [custom domain](https://docs.repl.it/repls/web-hosting#custom-domains).
## Deployment
---
# Deployment
Once installed, deploy Libreddit (unless you're using Docker) by running:

View File

@ -1,19 +1,55 @@
/* General */
/* Define themes */
/* Constants */
:root {
--nsfw: #ff5c5d;
--admin: #ea0027;
}
/* Automatic theme selection */
:root, .dark{
/* Default & fallback theme (dark) */
--accent: aqua;
--green: #5cff85;
--nsfw: #FF5C5D;
--admin: #ea0027;
--text: white;
--foreground: #222;
--background: #0F0F0F;
--outside: #1F1F1F;
--background: #0f0f0f;
--outside: #1f1f1f;
--post: #161616;
--highlighted: #333;
--shadow: 0 1px 3px rgba(0,0,0,0.5);
--shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* Browser-defined light theme */
@media (prefers-color-scheme: light) {
:root {
--accent: #009a9a;
--green: #00a229;
--text: black;
--foreground: #f5f5f5;
--background: #ddd;
--outside: #ececec;
--post: #eee;
--highlighted: white;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
}
/* Light theme setting */
.light {
--accent: #009a9a;
--green: #00a229;
--text: black;
--foreground: #f5f5f5;
--background: #ddd;
--outside: #ececec;
--post: #eee;
--highlighted: white;
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* General */
::selection {
color: var(--foreground);
background: var(--accent);
@ -110,13 +146,16 @@ hr {
a {
color: inherit;
text-decoration: none;
transition: 0.2s all;
}
a:hover {
text-decoration: underline;
}
svg {
stroke: var(--text);
}
img[src=""] {
display: none;
}
@ -136,20 +175,6 @@ aside {
opacity: 0.5;
}
/* Light Theme */
.light {
--accent: #009a9a;
--green: #00a229;
--text: black;
--foreground: #f5f5f5;
--background: #DDD;
--outside: #ECECEC;
--post: #eee;
--highlighted: white;
--shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* User & Subreddit */
#user, #subreddit, #sidebar {
@ -230,6 +255,10 @@ aside {
/* Sorting and Search */
select, #search, #sort_options, #inside, #searchbox > *, #sort_submit {
height: 40px;
}
.search_label {
max-width: 300px;
overflow: hidden;
@ -239,13 +268,13 @@ aside {
select {
background: var(--outside);
transition: 0.2s all;
transition: 0.2s background;
}
select, #search {
border: none;
padding: 0 15px;
height: 40px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
@ -259,10 +288,7 @@ select, #search {
border-radius: 5px;
}
#searchbox > *, #sort_submit {
background: var(--highlighted);
height: 40px;
}
#searchbox > *, #sort_submit { background: var(--highlighted); }
#search {
border-right: 2px var(--outside) solid;
@ -274,20 +300,25 @@ select, #search {
display: flex;
align-items: center;
border-right: 2px var(--outside) solid;
height: 40px;
padding: 0 10px;
}
#restrict_sr { margin-right: 5px; }
input[type="submit"] {
input[type="submit"], button.submit {
border: 0;
border-radius: 0px 5px 5px 0px;
transition: 0.2s all;
}
button.submit {
display: flex;
align-items: center;
}
select:hover { background: var(--foreground); }
input[type="submit"]:hover { color: var(--accent); }
button.submit:hover > svg { stroke: var(--accent); }
#timeframe {
margin: 0 2px;
@ -321,10 +352,6 @@ input[type="submit"]:hover { color: var(--accent); }
background: transparent;
}
#sort_options {
height: 40px;
}
#sort, #search_sort {
display: flex;
align-items: center;
@ -344,7 +371,7 @@ input[type="submit"]:hover { color: var(--accent); }
padding: 10px 20px;
text-align: center;
cursor: pointer;
transition: 0.2s all;
transition: 0.2s background;
}
#sort_options > a.selected {
@ -360,7 +387,7 @@ input[type="submit"]:hover { color: var(--accent); }
border-radius: 5px;
background: var(--post);
box-shadow: var(--shadow);
transition: 0.2s all;
transition: 0.2s background;
border: 1px solid var(--highlighted);
margin-bottom: 20px;
}
@ -410,7 +437,7 @@ a.search_subreddit:hover {
background: var(--post);
box-shadow: var(--shadow);
display: grid;
transition: 0.2s background-color;
transition: 0.2s background;
grid-template: "post_score post_header post_thumbnail" auto
"post_score post_title post_thumbnail" 1fr
"post_score post_media post_thumbnail" auto
@ -429,7 +456,6 @@ a.search_subreddit:hover {
background: var(--foreground);
}
.post_score {
padding-top: 20px;
color: var(--accent);
@ -437,7 +463,7 @@ a.search_subreddit:hover {
text-align: center;
background: var(--foreground);
border-radius: 5px 0 0 5px;
transition: 0.2s background-color;
transition: 0.2s background;
}
.post:hover > .post_score {
@ -546,7 +572,7 @@ a.search_subreddit:hover {
border: 1px solid var(--foreground);
display: grid;
overflow: hidden;
background-color: black;
background-color: var(--background);
grid-area: post_thumbnail;
margin: 5px;
}
@ -568,7 +594,6 @@ a.search_subreddit:hover {
grid-area: 1 / 1 / 2 / 2;
align-self: center;
justify-self: center;
stroke: var(--text);
max-width: 100%;
}
@ -716,13 +741,8 @@ a.search_subreddit:hover {
overflow: hidden;
}
.compact .post.highlighted {
border-radius: 5px;
}
.compact .post:not(:last-of-type):not(.highlighted):not(.stickied) {
border-bottom: 0;
}
.compact .post.highlighted { border-radius: 5px; }
.compact .post:not(:last-of-type):not(.highlighted):not(.stickied) { border-bottom: 0; }
.compact .post_score {
padding-top: 15px;
@ -826,9 +846,10 @@ input[type="submit"] {
.md h6 { font-size: 12px; }
.md blockquote {
padding-left: 6px;
padding: 10px;
margin: 4px 0 4px 5px;
border-left: 4px solid var(--highlighted);
background: var(--post);
}
.md a, .md a * {
@ -906,21 +927,11 @@ td, th {
font-size: 14px;
}
.post_score::before {
content: "↑"
}
.post:hover > .post_score {
background: unset;
}
.post_score::before { content: "↑" }
.post:hover > .post_score { background: unset; }
.post_header {
font-size: 14px;
}
.post_footer {
margin-left: 15px;
}
.post_header { font-size: 14px; }
.post_footer { margin-left: 15px; }
.replies > .comment {
margin-left: -25px;

View File

@ -15,7 +15,7 @@
<body class="
{% if prefs.layout != "" %}{{ prefs.layout }}{% endif %}
{% if prefs.wide == "on" %} wide{% endif %}
{% if prefs.theme == "light" %} light{% endif %}">
{% if prefs.theme != "system" %} {{ prefs.theme }}{% endif %}">
<!-- NAVIGATION BAR -->
<nav>
<p id="logo">

View File

@ -87,7 +87,13 @@
<form id="sort">
<select name="sort" title="Sort comments by">
{% call utils::options(sort, ["confidence", "top", "new", "controversial", "old"], "confidence") %}
</select><input id="sort_submit" type="submit" value="&rarr;">
</select><button id="sort_submit" class="submit">
<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
<path d="M20 50 H100" />
<path d="M75 15 L100 50 L75 85" />
&rarr;
</svg>
</button>
</form>
<!-- COMMENTS -->

View File

@ -17,7 +17,13 @@
{% call utils::options(params.sort, ["relevance", "hot", "top", "new", "comments"], "") %}
</select>{% if params.sort != "new" %}<select id="timeframe" name="t" title="Timeframe">
{% call utils::options(params.t, ["hour", "day", "week", "month", "year", "all"], "all") %}
</select>{% endif %}<input id="sort_submit" type="submit" value="&rarr;">
</select>{% endif %}<button id="sort_submit" class="submit">
<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
<path d="M20 50 H100" />
<path d="M75 15 L100 50 L75 85" />
&rarr;
</svg>
</button>
</form>
{% if subreddits.len() > 0 %}

View File

@ -14,7 +14,7 @@
<div id="theme">
<label for="theme">Theme:</label>
<select name="theme">
{% call utils::options(prefs.theme, ["dark", "light"], "dark") %}
{% call utils::options(prefs.theme, ["system", "light", "dark"], "system") %}
</select>
</div>
<p>Interface</p>

View File

@ -24,8 +24,15 @@
</div>
{% if sort.0 == "top" || sort.0 == "controversial" %}<select id="timeframe" name="t" title="Timeframe">
{% call utils::options(sort.1, ["hour", "day", "week", "month", "year", "all"], "day") %}
<input id="sort_submit" type="submit" value="&rarr;">
</select>{% endif %}
</select>
<button id="sort_submit" class="submit">
<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
<path d="M20 50 H100" />
<path d="M75 15 L100 50 L75 85" />
&rarr;
</svg>
</button>
{% endif %}
</form>
<div id="posts">

View File

@ -15,7 +15,13 @@
{% 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;">
</select>{% endif %}<button id="sort_submit" class="submit">
<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
<path d="M20 50 H100" />
<path d="M75 15 L100 50 L75 85" />
&rarr;
</svg>
</button>
</form>
<div id="posts">

View File

@ -23,7 +23,13 @@
<label for="restrict_sr" class="search_label">in {{ root }}</label>
</div>
{% endif %}
<input type="submit" value="&rarr;">
<button class="submit">
<svg width="15" viewBox="0 0 110 100" fill="none" stroke-width="10" stroke-linecap="round">
<path d="M20 50 H100" />
<path d="M75 15 L100 50 L75 85" />
&rarr;
</svg>
</button>
</form>
{%- endmacro %}