ditch import stuff

feature/server
Talon Poole 2 years ago
parent 0794a35bd9
commit 17a2ab7f5e
  1. 2
      cli.js
  2. 54
      css.js
  3. 26
      gmi-web.css
  4. 17
      html.js

@ -81,7 +81,7 @@ const cli = yargs(process.argv.slice(2))
},
});
const CSS_VARS = CSS.rootVariables(CSS.load({ css: "web" }));
const CSS_VARS = CSS.rootVariables(CSS.load({ css: "gmi-web.css" }));
Object.keys(CSS_VARS).map((key) => {
cli.option(key, { default: CSS_VARS[key] });
cli.conflicts(key, "core");

@ -17,31 +17,34 @@ export function style(options) {
)}</style>`;
}
export function inline(options, tag) {
if (!options.inline || options.css === "none") return "";
const styles = reduceVariables(load(options), options)
.filter(({ selectors }) => selectors && selectors.includes(tag))
.reduce((style, { declarations }) => {
declarations.forEach(({ property, value }) => {
style = `${style}${property}:${value};`;
});
return style;
}, "");
return styles !== "" ? ` style="${styles}"` : "";
}
export const inline = (options) => {
const rules = load(options);
return (tag) => {
if (!options.inline || options.css === "none") return "";
const styles = reduceVariables(rules, options)
.filter(({ selectors }) => selectors && selectors.includes(tag))
.reduce((style, { declarations }) => {
declarations.forEach(({ property, value }) => {
style = `${style}${property}:${value};`;
});
return style;
}, "");
return styles !== "" ? ` style="${styles}"` : "";
};
};
export function load(options) {
console.log("load:", options.css);
options.css =
options.css || (!options.body || !options.inline ? "web" : "core");
options.css ||
(!options.body || !options.inline ? "gmi-web.css" : "gmi.css");
console.log("load:", options.css);
if (
["gmi", "web", "gmi.css", "gmi-web.css"].includes(options.css) ||
existsSync(options.css)
) {
const packageRoot = (file) =>
path.resolve(path.dirname(new URL(import.meta.url).pathname), file);
return resolveImports(
parse(
return parse(
readFileSync(
path.resolve(
["gmi-web.css", "web"].includes(options.css)
@ -53,7 +56,6 @@ export function load(options) {
"utf-8"
)
).stylesheet.rules
);
} else {
throw new Error(`Cannot find file ${options.css}.`);
}
@ -71,16 +73,6 @@ export function rootVariables(rules) {
);
}
function resolveImports(rules) {
const imports = rules
.filter(({ type }) => type === "import")
.map((rule) => load({ css: rule.import.replace(/\"/g, "") }));
return []
.concat(...imports)
.concat(rules.filter(({ type }) => type !== "import"));
}
function reduceVariables(rules, options) {
const defaultVariables = rootVariables(rules);
const CSS_VAR = /(^var\((?<key>.+)\)|(?<val>.+))/;
@ -91,9 +83,13 @@ function reduceVariables(rules, options) {
declarations: rule.declarations.map((declaration) => {
let { key, val } = CSS_VAR.exec(declaration.value).groups;
// only one level of variable referencing is supported
key = CSS_VAR.exec(options[key] || defaultVariables[key]).groups.key || key;
key =
CSS_VAR.exec(options[key] || defaultVariables[key]).groups.key ||
key;
return Object.assign(declaration, {
value: key ? options[key] || defaultVariables[key] : declaration.value,
value: key
? options[key] || defaultVariables[key]
: declaration.value,
});
}),
});

@ -1,4 +1,26 @@
@import "gmi.css";
p,
pre,
ul,
blockquote,
h1,
h2,
h3 {
margin-top: 0;
margin-bottom: 0;
overflow-wrap: break-word;
}
p:empty {
padding-bottom: 20px;
}
a {
display: block;
}
pre {
overflow-y: auto;
}
img,
audio,
@ -115,6 +137,8 @@ blockquote {
margin-left: 0;
margin-right: 0;
padding-left: 0.5rem;
border-left-width: 0.5rem;
border-left-style: solid;
font-family: var(--quote-family);
font-size: var(--quote-size);
font-style: var(--quote-style);

@ -56,7 +56,7 @@ export function block(
}
}
if (options.body || options.inline)
content !== "" ? (props += CSS.inline(options, type)) : "";
content !== "" ? (props += options.inlineCSS(type)) : "";
return `<${type}${props}>${escape(content)}</${type}>`;
}
@ -68,7 +68,7 @@ export function body(tokens, options) {
if (cursor.pre) {
blocks.push(
`<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}${
options.body || options.inline ? CSS.inline(options, "pre") : ""
options.body || options.inline ? options.inlineCSS("pre") : ""
}>`
);
const closing = tokens.findIndex((token) => token.pre);
@ -77,7 +77,7 @@ export function body(tokens, options) {
tokens = tokens.slice(closing + 1);
} else if (cursor.li) {
blocks.push(
`<ul${options.body || options.inline ? CSS.inline(options, "ul") : ""}>`
`<ul${options.body || options.inline ? options.inlineCSS("ul") : ""}>`
);
const closing = tokens.findIndex((token) => !token.li);
blocks = blocks
@ -95,22 +95,21 @@ export function body(tokens, options) {
export function toHTML(gemtext, options) {
const tokens = tokenize(gemtext);
options.inlineCSS = CSS.inline(options);
if (options.body) return body(tokens, options);
console.log(options)
return `<!DOCTYPE html>
<html lang="${options.language}" dir="${options.dir}" style='${CSS.inline(
options,
"html"
)}'>
<html lang="${options.language}" dir="${
options.dir
}" style='${options.inlineCSS("html")}'>
<head>${head(
Object.assign(options, {
title: tokens[0].h1,
description: description(tokens, options),
})
)}</head>
<body${CSS.inline(options, "body")}>
<body${options.inlineCSS("body")}>
${body(tokens, options)}
</body>
</html>

Loading…
Cancel
Save