diff --git a/cli.js b/cli.js index 406aa63..22751a7 100755 --- a/cli.js +++ b/cli.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"); diff --git a/css.js b/css.js index 49b99cf..6856864 100644 --- a/css.js +++ b/css.js @@ -17,31 +17,34 @@ export function style(options) { )}`; } -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\((?.+)\)|(?.+))/; @@ -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, }); }), }); diff --git a/gmi-web.css b/gmi-web.css index 048d8c4..df31f3b 100644 --- a/gmi-web.css +++ b/gmi-web.css @@ -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); diff --git a/html.js b/html.js index 644f0c8..e164937 100644 --- a/html.js +++ b/html.js @@ -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)}`; } @@ -68,7 +68,7 @@ export function body(tokens, options) { if (cursor.pre) { blocks.push( `` ); 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( - `` + `` ); 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 ` - + ${head( Object.assign(options, { title: tokens[0].h1, description: description(tokens, options), }) )} - + ${body(tokens, options)}