Merge pull request 'Add cleaned homepage' (#312) from redmt/teddit:add_clean_homepage into main

Reviewed-on: https://codeberg.org/teddit/teddit/pulls/312
This commit is contained in:
teddit 2022-06-11 11:51:47 +02:00
commit 096c7218d4
11 changed files with 201 additions and 32 deletions

View File

@ -3,6 +3,7 @@ const config = {
use_reddit_oauth: process.env.USE_REDDIT_OAUTH === 'true' || false, // If false, teddit uses Reddit's public API. If true, you need to have your own Reddit app ID (enter the app ID to the "reddit_app_id" config key).
cert_dir: process.env.CERT_DIR || '', // For example '/home/teddit/letsencrypt/live/teddit.net', if you are using https. No trailing slash.
theme: process.env.THEME || 'auto', // One of: 'dark', 'sepia', 'auto', ''. Auto theme uses browser's theme detection (Dark or White theme). White theme is set by the empty the option ('').
clean_homepage: !('CLEAN_HOMEPAGE' in process.env) || process.env.CLEAN_HOMEPAGE === 'true', // Allows the clean homepage to be used (similar to invidious), instead of the usual reddit-like frontpage
flairs_enabled: !('FLAIRS_ENABLED' in process.env) || process.env.FLAIRS_ENABLED === 'true', // Enables the rendering of user and link flairs on teddit
highlight_controversial: !('HIGHLIGHT_CONTROVERSIAL' in process.env) || process.env.HIGHLIGHT_CONTROVERSIAL === 'true', // Enables controversial comments to be indicated by a typographical dagger (†)
api_enabled: !('API_ENABLED' in process.env) || process.env.API_ENABLED === 'true', // Teddit API feature. Might increase loads significantly on your instance.

View File

@ -30,7 +30,7 @@ module.exports = function(fetch) {
} else {
console.error(`Something went wrong while trying to get an access token from reddit API. ${result.status} ${result.statusText}`)
console.error(reddit_api_error_text)
return res.render('index', { json: null, http_status_code: result.status })
return res.render('frontpage', { json: null, http_status_code: result.status })
}
}).catch(error => {
console.log(`Error while obtaining a reddit API key.`, error)
@ -66,7 +66,7 @@ module.exports = function(fetch) {
} else {
console.error(`Something went wrong while fetching data from reddit API. ${result.status} ${result.statusText}`)
console.error(reddit_api_error_text)
return res.render('index', { json: null, http_status_code: result.status })
return res.render('frontpage', { json: null, http_status_code: result.status })
}
}).catch(error => {
console.log(`Error while refreshing the reddit API key.`, error)

View File

@ -5,8 +5,22 @@ const homeRoute = require('express').Router();
const processJsonSubreddit = require('../inc/processJsonSubreddit.js');
const tedditApiSubreddit = require('../inc/teddit_api/handleSubreddit.js')();
const processMoreComments = require('../inc/processMoreComments.js')();
const frontpagePath = config.clean_homepage ? '/frontpage' : '';
homeRoute.get('/:sort?', async (req, res, next) => {
if (config.clean_homepage) {
homeRoute.get('/', (req, res, next) => {
if (req.cookies.clean_homepage && req.cookies.clean_homepage == 'true') {
return res.redirect('/frontpage');
}
res.render('homepage', {
user_preferences: req.cookies,
internal_config: config,
});
});
}
homeRoute.get(`${frontpagePath}/:sort?`, async (req, res, next) => {
let past = req.query.t;
let before = req.query.before;
let after = req.query.after;
@ -122,7 +136,7 @@ homeRoute.get('/:sort?', async (req, res, next) => {
redis.get(key, (error, json) => {
if (error) {
console.error('Error getting the frontpage key from redis.', error);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -148,7 +162,7 @@ homeRoute.get('/:sort?', async (req, res, next) => {
null,
req.cookies
);
return res.render('index', {
return res.render('frontpage', {
json: processed_json,
sortby: sortby,
past: past,
@ -184,7 +198,7 @@ homeRoute.get('/:sort?', async (req, res, next) => {
'Error setting the frontpage key to redis.',
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -209,7 +223,7 @@ homeRoute.get('/:sort?', async (req, res, next) => {
null,
req.cookies
);
return res.render('index', {
return res.render('frontpage', {
json: processed_json,
sortby: sortby,
past: past,
@ -227,7 +241,7 @@ homeRoute.get('/:sort?', async (req, res, next) => {
`Something went wrong while fetching data from Reddit. ${result.status} ${result.statusText}`
);
console.error(config.reddit_api_error_text);
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,

View File

@ -16,6 +16,7 @@ function resetPreferences(res) {
res.clearCookie('domain_youtube');
res.clearCookie('domain_instagram');
res.clearCookie('videos_muted');
res.clearCookie('prefer_frontpage');
}
preferenceRoutes.get('/preferences', (req, res, next) => {
@ -42,7 +43,7 @@ preferenceRoutes.get('/import_prefs/:key', (req, res, next) => {
`Error getting the preferences import key ${key} from redis.`,
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -88,6 +89,7 @@ preferenceRoutes.post('/saveprefs', (req, res, next) => {
let domain_youtube = req.body.domain_youtube;
let domain_instagram = req.body.domain_instagram;
let videos_muted = req.body.videos_muted;
let prefer_frontpage = req.body.prefer_frontpage;
res.cookie('theme', theme, {
maxAge: 365 * 24 * 60 * 60 * 1000,
@ -165,6 +167,12 @@ preferenceRoutes.post('/saveprefs', (req, res, next) => {
httpOnly: true,
});
if (prefer_frontpage === 'on') prefer_frontpage = 'true';
res.cookie('prefer_frontpage', prefer_frontpage, {
maxAge: 365 * 24 * 60 * 60 * 1000,
httpOnly: true,
});
return res.redirect('/preferences');
});

View File

@ -214,7 +214,7 @@ saveRoutes.get(
'Error getting the short URL for post key from redis.',
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -257,7 +257,7 @@ saveRoutes.get(
'Error setting the short URL for post key to redis.',
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -287,7 +287,7 @@ saveRoutes.get(
`Something went wrong while fetching data from Reddit. ${result.status} ${result.statusText}`
);
console.error(config.reddit_api_error_text);
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,

View File

@ -65,7 +65,7 @@ subredditRoutes.get('/r/:subreddit/search', (req, res, next) => {
redis.get(key, (error, json) => {
if (error) {
console.error('Error getting the search key from redis.', error);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -126,7 +126,7 @@ subredditRoutes.get('/r/:subreddit/search', (req, res, next) => {
'Error setting the searches key to redis.',
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -162,7 +162,7 @@ subredditRoutes.get('/r/:subreddit/search', (req, res, next) => {
`Something went wrong while fetching data from Reddit. ${result.status} ${result.statusText}`
);
console.error(config.reddit_api_error_text);
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -206,7 +206,7 @@ subredditRoutes.get(
`Error getting the ${subreddit} wiki key from redis.`,
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -271,7 +271,7 @@ subredditRoutes.get(
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -339,7 +339,7 @@ subredditRoutes.get('/r/random', (req, res, next) => {
);
} else {
console.error(`Fetching random subreddit failed.`, json);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -354,7 +354,7 @@ subredditRoutes.get('/r/random', (req, res, next) => {
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -420,7 +420,7 @@ subredditRoutes.get('/r/:subreddit/:sort?', (req, res, next) => {
redis.get(key, (error, json) => {
if (error) {
console.error(`Error getting the ${subreddit} key from redis.`, error);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -557,7 +557,7 @@ subredditRoutes.get('/r/:subreddit/:sort?', (req, res, next) => {
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -620,7 +620,7 @@ subredditRoutes.get(
`Error getting the ${comments_url} key from redis.`,
error
);
return res.render('index', {
return res.render('frontpage', {
post: null,
user_preferences: req.cookies,
});
@ -759,7 +759,7 @@ subredditRoutes.get(
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
http_statustext: result.statusText,
@ -841,7 +841,7 @@ subredditRoutes.get('/subreddits/:sort?', (req, res, next) => {
redis.get(key, (error, json) => {
if (error) {
console.error(`Error getting the subreddits key from redis.`, error);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -942,7 +942,7 @@ subredditRoutes.get('/subreddits/:sort?', (req, res, next) => {
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,

View File

@ -91,7 +91,7 @@ userRoutes.get('/u/:user/:kind?', (req, res, next) => {
redis.get(key, (error, json) => {
if (error) {
console.error(`Error getting the user ${key} key from redis.`, error);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -163,7 +163,7 @@ userRoutes.get('/u/:user/:kind?', (req, res, next) => {
`Error setting the user ${key} key to redis.`,
error
);
return res.render('index', {
return res.render('frontpage', {
post: null,
user_preferences: req.cookies,
});
@ -208,7 +208,7 @@ userRoutes.get('/u/:user/:kind?', (req, res, next) => {
`Something went wrong while fetching data from Reddit. ${result.status} ${result.statusText}`
);
console.error(config.reddit_api_error_text);
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -220,7 +220,7 @@ userRoutes.get('/u/:user/:kind?', (req, res, next) => {
`Error fetching the overview JSON file from reddit.com/u/${user}`,
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,
@ -236,7 +236,7 @@ userRoutes.get('/u/:user/:kind?', (req, res, next) => {
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
http_statustext: result.statusText,
@ -311,7 +311,7 @@ userRoutes.get('/u/:user/m/:custom_feed/:sort?', (req, res, next) => {
`Error getting the ${user} custom_feed key from redis.`,
error
);
return res.render('index', {
return res.render('frontpage', {
json: null,
user_preferences: req.cookies,
});
@ -436,7 +436,7 @@ userRoutes.get('/u/:user/m/:custom_feed/:sort?', (req, res, next) => {
);
console.error(config.reddit_api_error_text);
}
return res.render('index', {
return res.render('frontpage', {
json: null,
http_status_code: result.status,
user_preferences: req.cookies,

View File

@ -1580,6 +1580,68 @@ code {
padding:4px;
margin:5px 0
}
/* HOMEPAGE SECTION */
body.homepage.clean {
margin: 0;
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body.homepage.clean main {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body.homepage.clean h1 {
margin-bottom: 1rem;
font-size: 3rem;
text-align: center;
width: 100%;
}
body.homepage.clean form {
width: 100vw;
max-width: 750px;
text-align: center;
}
body.homepage.clean input[name="q"] {
width: 90%;
padding: 0.4rem;
border: none;
color: white;
background: #555;
margin-bottom: 1rem;
}
body.homepage.clean .sublinks {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
max-width: 650px;
}
body.homepage.clean .sublinks a {
color: gray;
margin-right: 0.3rem;
}
@media only screen and (max-width: 768px) {
body.homepage.clean form, body.homepage.clean .sublinks {
width: 90%;
max-width: unset;
}
}
/* Fix spoiler texts not showing without JS */
.md .md-spoiler-text:not(.revealed):active,.md .md-spoiler-text:not(.revealed):focus,.md .md-spoiler-text:not(.revealed):hover {
color: black;

77
views/homepage.pug Normal file
View File

@ -0,0 +1,77 @@
doctype html
html
head
title teddit
meta(property='og:title', content='home : teddit')
include includes/meta_default.pug
include includes/meta_description.pug
include includes/head.pug
body(class="" + (user_preferences.theme === 'auto' ? 'dark' : user_preferences.theme) + " homepage clean")
main
h1 teddit
form(action="/search" method="GET")
input(type="text" name="q")
input(type="hidden" name="restrict_sr" value="on")
input(type="hidden" name="nsfw" value="on")
input(type="hidden" name="sort" value="relevance")
input(type="hidden" name="t" value="all")
.sublinks
if user_preferences.subbed_subreddits && Array.isArray(user_preferences.subbed_subreddits)
a(href="/r/popular") Popular
a(href="/r/all") All
a(href="/saved") Saved
each subreddit in user_preferences.subbed_subreddits
a(href="/r/" + subreddit) #{subreddit}
else
a(href="/r/popular") Popular
a(href="/r/all") All
a(href="/saved") Saved
a(href="/r/AskReddit") AskReddit
a(href="/r/pics") pics
a(href="/r/news") news
a(href="/r/worldnews") worldnews
a(href="/r/funny") funny
a(href="/r/tifu") tifu
a(href="/r/videos") videos
a(href="/r/gaming") gaming
a(href="/r/aww") aww
a(href="/r/todayilearned") todayilearned
a(href="/r/gifs") gifs
a(href="/r/Art") Art
a(href="/r/explainlikeimfive") explainlikeimfive
a(href="/r/movies") movies
a(href="/r/Jokes") Jokes
a(href="/r/TwoXChromosomes") TwoXChromosomes
a(href="/r/mildlyinteresting") mildlyinteresting
a(href="/r/LifeProTips") LifeProTips
a(href="/r/askscience") askscience
a(href="/r/IAmA") IAmA
a(href="/r/dataisbeautiful") dataisbeautiful
a(href="/r/books") books
a(href="/r/science") science
a(href="/r/Showerthoughts") Showerthoughts
a(href="/r/gadgets") gadgets
a(href="/r/Futurology") Futurology
a(href="/r/nottheonion") nottheonion
a(href="/r/history") history
a(href="/r/sports") sports
a(href="/r/OldSchoolCool") OldSchoolCool
a(href="/r/GetMotivated") GetMotivated
a(href="/r/DIY") DIY
a(href="/r/photoshopbattles") photoshopbattles
a(href="/r/nosleep") nosleep
a(href="/r/Music") Music
a(href="/r/space") space
a(href="/r/food") food
a(href="/r/UpliftingNews") UpliftingNews
a(href="/r/EarthPorn") EarthPorn
a(href="/r/Documentaries") Documentaries
a(href="/r/InternetIsBeautiful") InternetIsBeautiful
a(href="/r/WritingPrompts") WritingPrompts
a(href="/r/creepy") creepy
a(href="/r/philosophy") philosophy
a(href="/r/announcements") announcements
a(href="/r/listentothis") listentothis
a(href="/r/blog") blog
include includes/footer.pug

View File

@ -105,6 +105,13 @@ html
input(type="checkbox", name="show_upvotes", id="show_upvotes", checked="checked")
else
input(type="checkbox", name="show_upvotes", id="show_upvotes")
if instance_config.clean_homepage
.setting
label(for="prefer_frontpage") Prefer reddit-style frontpage as homepage:
if(user_preferences.prefer_frontpage == 'true')
input(type="checkbox", name="prefer_frontpage", id="prefer_frontpage", checked="true")
else
input(type="checkbox", name="prefer_frontpage", id="prefer_frontpage")
legend Media
.setting
label(for="videos_muted") Mute videos by default: