Add support for linking an optional custom-style.css file from the user's oasis configuration folder.
This commit is contained in:
parent
2d4063e2dd
commit
1b47d439ec
|
@ -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.
|
1. If an argument is given on the command-line, use that value.
|
||||||
2. Otherwise, use the value from the configuration file if present.
|
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.
|
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%;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
28
src/index.js
28
src/index.js
|
@ -36,6 +36,24 @@ if (config.debug) {
|
||||||
process.env.DEBUG = "oasis,oasis:*";
|
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 nodeHttp = require("http");
|
||||||
const debug = require("debug")("oasis");
|
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("Current configuration: %O", config);
|
||||||
debug(`You can save the above to ${defaultConfigFile} to make \
|
debug(`You can save the above to ${defaultConfigFile} to make \
|
||||||
these settings the default. See the readme for details.`);
|
these settings the default. See the readme for details.`);
|
||||||
|
@ -545,6 +569,10 @@ router
|
||||||
ctx.type = "text/css";
|
ctx.type = "text/css";
|
||||||
ctx.body = requireStyle(filePath);
|
ctx.body = requireStyle(filePath);
|
||||||
})
|
})
|
||||||
|
.get("/custom-style.css", (ctx) => {
|
||||||
|
ctx.type = "text/css";
|
||||||
|
ctx.body = requireStyle(customStyleFile);
|
||||||
|
})
|
||||||
.get("/profile", async (ctx) => {
|
.get("/profile", async (ctx) => {
|
||||||
const myFeedId = await meta.myFeedId();
|
const myFeedId = await meta.myFeedId();
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,9 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
const path = require("path");
|
||||||
|
const envPaths = require("env-paths");
|
||||||
|
const fs = require("fs");
|
||||||
|
|
||||||
const debug = require("debug")("oasis");
|
const debug = require("debug")("oasis");
|
||||||
const highlightJs = require("highlight.js");
|
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(
|
const nodes = html(
|
||||||
{ lang: "en" },
|
{ lang: "en" },
|
||||||
head(
|
head(
|
||||||
|
@ -88,6 +106,7 @@ const template = (titlePrefix, ...elements) => {
|
||||||
link({ rel: "stylesheet", href: "/theme.css" }),
|
link({ rel: "stylesheet", href: "/theme.css" }),
|
||||||
link({ rel: "stylesheet", href: "/assets/style.css" }),
|
link({ rel: "stylesheet", href: "/assets/style.css" }),
|
||||||
link({ rel: "stylesheet", href: "/assets/highlight.css" }),
|
link({ rel: "stylesheet", href: "/assets/highlight.css" }),
|
||||||
|
customCSS("/custom-style.css"),
|
||||||
link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }),
|
link({ rel: "icon", type: "image/svg+xml", href: "/assets/favicon.svg" }),
|
||||||
meta({ charset: "utf-8" }),
|
meta({ charset: "utf-8" }),
|
||||||
meta({
|
meta({
|
||||||
|
|
Loading…
Reference in New Issue