Merge pull request #28 from GeorgeSG/georgesg/add-theme-support

Add theme support

readme.md

···
 - no account necessary for over-18 content
 
 i host a version for myself and a few friends. reach out to
-me if you would like an invite. 
+me if you would like an invite.
 
 ### features
 
···
 or with just [bun](https://bun.sh/):
 
 ```bash
-bun run src/index.js 
+bun run src/index.js
 ```
 
 ### usage
···
 username at the top-right to view the dashboard and to
 invite other users to your instance. copy the link and send
 it to your friends!
+
+### environment variables
+
+- `LURKER_PORT`: port to listen on, defaults to `3000`.
+- `LURKER_THEME`: name of CSS theme file. The file must be present in `src/public`.
 
 ### technical
 

src/mixins/head.pug

···
     meta(charset='UTF-8')
     title #{`${title} · lurker `}
     link(rel="stylesheet", href="/styles.css")
+    if theme
+      link(rel="stylesheet", href=`/${theme}.css`)
     link(rel="preconnect" href="https://rsms.me/")
     link(rel="stylesheet" href="https://rsms.me/inter/inter.css")
     script(src="https://cdn.dashjs.org/latest/dash.all.min.js")
-

src/public/theme.css

···
+/*
+Uncomment and modify the values in this file to change the theme of the app.
+
+:root {
+	--bg-color: white;
+	--bg-color-muted: #eee;
+	--text-color: black;
+	--text-color-muted: #999;
+	--blockquote-color: green;
+	--sticky-color: #dcfeda;
+	--gilded: darkorange;
+	--link-color: #29bc9b;
+	--link-visited-color: #999;
+	--accent: var(--link-color);
+	--error-text-color: red;
+	--border-radius-card: 0.5vmin;
+	--border-radius-media: 0.5vmin;
+	--border-radius-preview: 0.3vmin;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--bg-color: black;
+		--bg-color-muted: #333;
+		--text-color: white;
+		--text-color-muted: #999;
+		--blockquote-color: lightgreen;
+		--sticky-color: #014413;
+		--gilded: gold;
+		--link-color: #79ffe1;
+		--link-visited-color: #999;
+		--accent: var(--link-color);
+		--error-text-color: lightcoral;
+	}
+}
+*/

src/routes/index.js

···
 const { db } = require("../db");
 const { authenticateToken, authenticateAdmin } = require("../auth");
 const { validateInviteToken } = require("../invite");
-const url = require("url");
 
 const router = express.Router();
 const G = new geddit.Geddit();
 
+const commonRenderOptions = {
+	theme: process.env.LURKER_THEME,
+};
+
 // GET /
 router.get("/", authenticateToken, async (req, res) => {
 	const subs = db
 		.query("SELECT * FROM subscriptions WHERE user_id = $id")
 		.all({ id: req.user.id });
 
-	const qs = req.query ? ('?' + new URLSearchParams(req.query).toString()) : '';
+	const qs = req.query ? "?" + new URLSearchParams(req.query).toString() : "";
 
 	if (subs.length === 0) {
 		res.redirect(`/r/all${qs}`);
···
 
 	const [posts, about] = await Promise.all([postsReq, aboutReq]);
 
-	if (query.view == 'card' && posts && posts.posts) {
+	if (query.view == "card" && posts && posts.posts) {
 		posts.posts.forEach(unescape_selftext);
 	}
 
···
 		user: req.user,
 		isSubbed,
 		currentUrl: req.url,
+		...commonRenderOptions,
 	});
 });
 
···
 		user: req.user,
 		from: req.query.from,
 		query: req.query,
+		...commonRenderOptions,
 	});
 });
 
···
 			comments,
 			parent_id,
 			user: req.user,
+			...commonRenderOptions,
 		});
 	},
 );
···
 		)
 		.all({ id: req.user.id });
 
-	res.render("subs", { subs, user: req.user, query: req.query });
+	res.render("subs", {
+		subs,
+		user: req.user,
+		query: req.query,
+		...commonRenderOptions,
+	});
 });
 
 // GET /search
 router.get("/search", authenticateToken, async (req, res) => {
-	res.render("search", { user: req.user, query: req.query });
+	res.render("search", {
+		user: req.user,
+		query: req.query,
+		...commonRenderOptions,
+	});
 });
 
 // GET /sub-search
 router.get("/sub-search", authenticateToken, async (req, res) => {
 	if (!req.query || !req.query.q) {
-		res.render("sub-search", { user: req.user });
+		res.render("sub-search", { user: req.user, ...commonRenderOptions });
 	} else {
 		const { items, after } = await G.searchSubreddits(req.query.q);
 		const subs = db
···
 			user: req.user,
 			original_query: req.query.q,
 			query: req.query,
+			...commonRenderOptions,
 		});
 	}
 });
···
 // GET /post-search
 router.get("/post-search", authenticateToken, async (req, res) => {
 	if (!req.query || !req.query.q) {
-		res.render("post-search", { user: req.user });
+		res.render("post-search", { user: req.user, ...commonRenderOptions });
 	} else {
 		const { items, after } = await G.searchSubmissions(req.query.q);
 		const message =
···
 				? "no results found"
 				: `showing ${items.length} results`;
 
-		if (req.query.view == 'card' && items) {
+		if (req.query.view == "card" && items) {
 			items.forEach(unescape_selftext);
 		}
-	
+
 		res.render("post-search", {
 			items,
 			after,
···
 			original_query: req.query.q,
 			currentUrl: req.url,
 			query: req.query,
+			...commonRenderOptions,
 		});
 	}
 });
···
 				usedAt: Date.parse(inv.usedAt),
 			}));
 	}
-	res.render("dashboard", { invites, isAdmin, user: req.user, query: req.query });
+	res.render("dashboard", {
+		invites,
+		isAdmin,
+		user: req.user,
+		query: req.query,
+		...commonRenderOptions,
+	});
 });
 
 router.get("/create-invite", authenticateAdmin, async (req, res) => {
···
 	const kind = ["jpg", "jpeg", "png", "gif", "webp"].includes(ext)
 		? "img"
 		: "video";
-	res.render("media", { kind, url });
+	res.render("media", { kind, url, ...commonRenderOptions });
 });
 
 router.get("/register", validateInviteToken, async (req, res) => {
-	res.render("register", { isDisabled: false, token: req.query.token });
+	res.render("register", {
+		isDisabled: false,
+		token: req.query.token,
+		...commonRenderOptions,
+	});
 });
 
 router.post("/register", validateInviteToken, async (req, res) => {
···
 	if (user) {
 		return res.render("register", {
 			message: `user by the name "${username}" exists, choose a different username`,
+			...commonRenderOptions,
 		});
 	}
 
 	if (password !== confirm_password) {
 		return res.render("register", {
 			message: "passwords do not match, try again",
+			...commonRenderOptions,
 		});
 	}
 
···
 	} catch (err) {
 		return res.render("register", {
 			message: "error registering user, try again later",
+			...commonRenderOptions,
 		});
 	}
 });