diff --git a/html.js b/html.js index 3aed862..fdf764e 100644 --- a/html.js +++ b/html.js @@ -11,6 +11,26 @@ export const tokenize = (gemtext) => ) ); +export function toHTML(gemtext, options) { + options.inlineCSS = options.inlineCSS || CSS.inline(options); + options.styleTag = options.styleTag || CSS.style(options); + + const tokens = tokenize(gemtext); + + if (options.body) return body(tokens, options); + + return ` + +${head(tokens, options)} + +${body(tokens, options)} + + +`; +} + export function block( { text, href, title, pre, alt, h1, h2, h3, li, quote }, options = {} @@ -21,6 +41,14 @@ export function block( if (text) { content = text; } + if (li) { + type = "li"; + content = li; + } + if (quote) { + type = "blockquote"; + content = quote; + } if (h1) { type = "h1"; content = h1; @@ -33,17 +61,10 @@ export function block( type = "h3"; content = h3; } - if (li) { - type = "li"; - content = li; - } - if (quote) { - type = "blockquote"; - content = quote; - } if (href) { const matchesExt = (url, exts) => exts.some((ext) => new RegExp(`\.${ext}$`).test(url)); + if (options.image && matchesExt(href, options.image)) { type = "img"; props += ` src="${href}"`; @@ -62,10 +83,12 @@ export function block( props += ` href="${href}"`; } } - if (options.body || options.inline) + + if (options.body || options.inline) { props += options.inlineCSS( type === "p" && content === "" ? "p:empty" : type ); + } return `<${type}${props}>${escape(content)}`; } @@ -102,52 +125,7 @@ export function body(tokens, options) { return blocks.join("\n"); } -export function toHTML(gemtext, options) { - options.inlineCSS = options.inlineCSS || CSS.inline(options); - options.styleTag = options.styleTag || CSS.style(options); - - const tokens = tokenize(gemtext); - - if (options.body) return body(tokens, options); - - return ` - -${head( - Object.assign(options, { - title: tokens[0].h1, - description: description(tokens, options), - }) - )} - -${body(tokens, options)} - - -`; -} - -export function head(options) { - return ` - -${ - options.styleTag - } -${options.title}${ - !options.author ? "" : `\n` - }${ - !options.description - ? "" - : `\n` - }${ - !options.canonical - ? "" - : `\n` - } -`; -} - -function description(tokens, options) { +export function head(tokens, options) { const truncate = (text, limit) => text.length > limit ? `${text.substring(0, limit)}...` : text; @@ -158,7 +136,23 @@ function description(tokens, options) { }) : false; - return description && truncate(description.text, options.description); + return ` + +${ + options.styleTag + } +${tokens.find(({h1}) => h1).h1 || ""}${ + options.author ? `\n` : "" + }${ + description + ? `\n` + : "" + }${ + options.canonical + ? `\n` + : "" + } +`; } export const GMI_EXT = /\.gmi$/; diff --git a/html.spec.js b/html.spec.js index 9237cc9..62019b7 100644 --- a/html.spec.js +++ b/html.spec.js @@ -178,7 +178,7 @@ test("--image, --audio, --video", () => { }); test("tokenize", () => { - expect(tokenize(gemtext, { body: true })).toMatchInlineSnapshot(` + expect(tokenize(gemtext)).toMatchInlineSnapshot(` Array [ Object { "h1": "gmi-web", diff --git a/package.json b/package.json index 47ea47c..794463e 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "gmi-web-cli", "version": "1.0.0-rc.4", - "description": "A bridge between HTML and Gemini", + "description": "A bridge between Gemini and HTML", "main": "html.js", "type": "module", "bin": { @@ -11,17 +11,18 @@ "./gmi-web.1" ], "files": [ - "UNLICENSE", - "README.md", - "CONTRIBUTING.md", - "gmi-web.1", - "gmi-web.css", - "gmi.css", "html.js", "html.spec.js", "css.js", "css.spec.js", - "cli.js" + "gmi.css", + "gmi-web.css", + "cli.js", + "README.md", + "CONTRIBUTING.md", + "gmi-web.1", + "example.gmi", + "UNLICENSE" ], "scripts": { "test": "NODE_OPTIONS=--experimental-vm-modules jest",