Add cleaned homepage

routes/home.js

@@ -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;

static/css/styles.css

@@ -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;

views/homepage.pug

@@ -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
+