Add support for linking an optional custom-style.css file from the user's oasis configuration folder.

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/<your username>/.config/oasis/custom-style.css`
+- Windows `%APPDATA%\oasis\custom-style.css`.
+- Mac OS, `/Users/<your username>/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%;
+}
+```

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();
 

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({