From 1b47d439ec2bb71d10bf556f56e2738a411d83e8 Mon Sep 17 00:00:00 2001 From: Supernova Date: Tue, 8 Dec 2020 12:37:26 -0500 Subject: [PATCH] Add support for linking an optional custom-style.css file from the user's oasis configuration folder. --- docs/configuring.md | 19 +++++++++++++++++++ src/index.js | 28 ++++++++++++++++++++++++++++ src/views/index.js | 19 +++++++++++++++++++ 3 files changed, 66 insertions(+) diff --git a/docs/configuring.md b/docs/configuring.md index 8c58f71..6aeb92b 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -25,3 +25,22 @@ Which value is given is decided like this: 1. If an argument is given on the command-line, use that value. 2. Otherwise, use the value from the configuration file if present. 3. If neither command-line nor configuration file are given, use the built-in default value. + +# Custom Styles + +The stylesheet values may be overridden by adding custom values to a file found in a +standard folder for configuration, depending on your operating system: + +- Linux: `$XDG_CONFIG_HOME/oasis/custom-style.css`. + Usually this is `/home//.config/oasis/custom-style.css` +- Windows `%APPDATA%\oasis\custom-style.css`. +- Mac OS, `/Users//Library/Preferences/oasis/custom-style.css` + +As an example the width used for the main body may be changed to a different +fixed width or a dynamic width: + +```css +:root { + --measure: 75%; +} +``` diff --git a/src/index.js b/src/index.js index 3991862..65a7ebf 100755 --- a/src/index.js +++ b/src/index.js @@ -36,6 +36,24 @@ if (config.debug) { process.env.DEBUG = "oasis,oasis:*"; } +const customStyleFile = path.join( + envPaths("oasis", { suffix: "" }).config, + "/custom-style.css" +); +let haveCustomStyle; + +try { + fs.readFileSync(customStyleFile, "utf8"); + haveCustomStyle = true; +} catch (e) { + if (e.code === "ENOENT") { + haveCustomStyle = false; + } else { + console.log(`There was a problem loading ${customStyleFile}`); + throw e; + } +} + const nodeHttp = require("http"); const debug = require("debug")("oasis"); @@ -61,6 +79,12 @@ if (haveConfig) { ); } +if (!haveCustomStyle) { + log( + `No custom style file found at ${customStyleFile}, ignoring this stylesheet.` + ); +} + debug("Current configuration: %O", config); debug(`You can save the above to ${defaultConfigFile} to make \ these settings the default. See the readme for details.`); @@ -545,6 +569,10 @@ router ctx.type = "text/css"; ctx.body = requireStyle(filePath); }) + .get("/custom-style.css", (ctx) => { + ctx.type = "text/css"; + ctx.body = requireStyle(customStyleFile); + }) .get("/profile", async (ctx) => { const myFeedId = await meta.myFeedId(); diff --git a/src/views/index.js b/src/views/index.js index 13d9f07..ea45233 100644 --- a/src/views/index.js +++ b/src/views/index.js @@ -1,5 +1,9 @@ "use strict"; +const path = require("path"); +const envPaths = require("env-paths"); +const fs = require("fs"); + const debug = require("debug")("oasis"); const highlightJs = require("highlight.js"); @@ -81,6 +85,20 @@ const template = (titlePrefix, ...elements) => { ) ); + const customCSS = (filename) => { + const customStyleFile = path.join( + envPaths("oasis", { suffix: "" }).config, + filename + ); + try { + if (fs.existsSync(customStyleFile)) { + return link({ rel: "stylesheet", href: filename }); + } + } catch (error) { + return ""; + } + }; + const nodes = html( { lang: "en" }, head( @@ -88,6 +106,7 @@ const template = (titlePrefix, ...elements) => { link({ rel: "stylesheet", href: "/theme.css" }), link({ rel: "stylesheet", href: "/assets/style.css" }), link({ rel: "stylesheet", href: "/assets/highlight.css" }), + customCSS("/custom-style.css"), link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }), meta({ charset: "utf-8" }), meta({