gmi-web/html.js

import fs from "fs";
import map from "map-stream";
import escape from "escape-html";
import * as CSS from "./css.js";

export const GMI_REGEX = /^((=>\s?(?<href>[^\s]+)\s?(?<title>.+)?)|(?<pre>```\s?(?<alt>.+)?)|(###\s?(?<h3>.+))|(##\s?(?<h2>.+))|(#\s?(?<h1>.+))|(\*\s?(?<li>.+))|(>\s?(?<quote>.+))|(?<text>(.+)?))$/;
export const tokenize = (gemtext) =>
  JSON.parse(JSON.stringify(gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups)));

export function block(
  { text, href, title, pre, alt, h1, h2, h3, li, quote },
  options = {}
) {
  let type = "p";
  let props = "";
  let content = "";
  if (text) {
    content = text;
  }
  if (h1) {
    type = "h1";
    content = h1;
  }
  if (h2) {
    type = "h2";
    content = h2;
  }
  if (h3) {
    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}"` 
      props += title ? ` title="${title}"` : "";
    } else if (options.audio && matchesExt(href, options.audio)) {
      type = "audio";
      props += ` controls src="${href}"`
      props += title ? ` title="${title}"` : "";
    } else if (options.video && matchesExt(href, options.video)) {
      type = "video";
      props += ` controls src="${href}"`
      props += title ? ` title="${title}"` : "";
    } else {
      type = "a";
      content = title || href;
      props += ` href="${href}"`;
    }
  }
  if (options.body || options.inline)
    content !== "" ? (props += options.inlineCSS(type)) : "";

  return `<${type}${props}>${escape(content)}</${type}>`;
}

export function body(tokens, options) {
  let blocks = [];
  let cursor = tokens.shift();
  while (tokens.length) {
    if (cursor.pre) {
      blocks.push(
        `<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}${
          options.body || options.inline ? options.inlineCSS("pre") : ""
        }>`
      );
      const closing = tokens.findIndex((token) => token.pre);
      blocks = blocks.concat(tokens.slice(0, closing).map(({ text }) => text));
      blocks.push("</pre>");
      tokens = tokens.slice(closing + 1);
    } else if (cursor.li) {
      blocks.push(
        `<ul${options.body || options.inline ? options.inlineCSS("ul") : ""}>`
      );
      const closing = tokens.findIndex((token) => !token.li);
      blocks = blocks
        .concat([block(cursor)])
        .concat(tokens.slice(0, closing).map(block));
      blocks.push("</ul>");
      tokens = tokens.slice(closing);
    } else {
      blocks.push(block(cursor, options));
    }
    cursor = tokens.shift();
  }
  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 `<!DOCTYPE html>
<html lang="${options.html}" dir="${
    options.dir || "ltr"
  }" style='${options.inlineCSS("html")}'>
<head>${head(
    Object.assign(options, {
      title: tokens[0].h1,
      description: description(tokens, options),
    })
  )}</head>
<body${options.inlineCSS("body")}>
${body(tokens, options)}
</body>
</html>
`;
}

export function head(options) {
  return `
<meta charset="${options.charset || "utf-8"}">
<meta name="viewport" content="width=device-width,initial-scale=1">${
    options.styleTag
  }
<title>${options.title}</title>${
    !options.author ? "" : `\n<meta name="author" content="${options.author}">`
  }${
    !options.description
      ? ""
      : `\n<meta name="description" content="${escape(options.description)}">`
  }${
    !options.canonical
      ? ""
      : `\n<link rel="canonical" href="${options.canonical}">`
  }
`;
}

function description(tokens, options) {
  const truncate = (text, limit) =>
    text.length > limit ? `${text.substring(0, limit)}...` : text;

  let description =
    options.description > 0
      ? tokens.find((token) => {
          return token.text && token.text !== "";
        })
      : false;

  return description && truncate(description.text, options.description);
}

export const GMI_EXT = /\.gmi$/;

export function streamHTML(options) {
  options.inlineCSS = options.inlineCSS || CSS.inline(options);
  options.styleTag = options.styleTag || CSS.style(options);
  return map((file, cb) => {
    if (!GMI_EXT.test(file.path)) return cb(null);
    file.contents = Buffer.from(
      toHTML(file.contents.toString("utf-8"), options)
    );
    file.path = file.path.replace(GMI_EXT, ".html");
    return cb(null, file);
  });
}
refactor 2021-02-15 22:31:08 +00:00			`import fs from "fs";`
			`import map from "map-stream";`
Use ES modules use language for <html lang=""> too 2021-02-10 22:03:48 +00:00			`import escape from "escape-html";`
refactor 2021-02-15 22:31:08 +00:00			`import * as CSS from "./css.js";`
more prep 2021-01-30 16:32:44 +00:00
fix bug with spaces at the end of links 2021-02-24 20:13:41 +00:00			export const GMI_REGEX = /^((=>\s?(?<href>[^\s]+)\s?(?<title>.+)?)\|(?<pre>```\s?(?<alt>.+)?)\|(###\s?(?<h3>.+))\|(##\s?(?<h2>.+))\|(#\s?(?<h1>.+))\|(\*\s?(?<li>.+))\|(>\s?(?<quote>.+))\|(?<text>(.+)?))$/;
refactor html.js 2021-02-19 19:32:28 +00:00			`export const tokenize = (gemtext) =>`
testing WIP 2021-02-24 19:50:41 +00:00			`JSON.parse(JSON.stringify(gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups)));`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
narrowing in... 2021-02-18 19:11:03 +00:00			`export function block(`
enable stdio API --body returns just the innerHTML of the body gmi.min.css is created in the script not by Makefile refactor yargs code, better --help menu 2021-02-11 20:57:08 +00:00			`{ text, href, title, pre, alt, h1, h2, h3, li, quote },`
narrowing in... 2021-02-18 19:11:03 +00:00			`options = {}`
enable stdio API --body returns just the innerHTML of the body gmi.min.css is created in the script not by Makefile refactor yargs code, better --help menu 2021-02-11 20:57:08 +00:00			`) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`let type = "p";`
			`let props = "";`
refactor css 2021-02-18 23:16:05 +00:00			`let content = "";`
			`if (text) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`content = text;`
			`}`
			`if (h1) {`
			`type = "h1";`
			`content = h1;`
			`}`
			`if (h2) {`
			`type = "h2";`
			`content = h2;`
			`}`
			`if (h3) {`
			`type = "h3";`
			`content = h3;`
			`}`
			`if (li) {`
			`type = "li";`
			`content = li;`
			`}`
			`if (quote) {`
			`type = "blockquote";`
			`content = quote;`
			`}`
enable stdio API --body returns just the innerHTML of the body gmi.min.css is created in the script not by Makefile refactor yargs code, better --help menu 2021-02-11 20:57:08 +00:00			`if (href) {`
body core styles 2021-02-15 21:40:59 +00:00			`const matchesExt = (url, exts) =>`
			exts.some((ext) => new RegExp(`\.${ext}$`).test(url));
narrowing in... 2021-02-18 19:11:03 +00:00			`if (options.image && matchesExt(href, options.image)) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`type = "img";`
fix inline media src and title 2021-02-24 19:57:59 +00:00			props += ` src="${href}"`
			props += title ? ` title="${title}"` : "";
narrowing in... 2021-02-18 19:11:03 +00:00			`} else if (options.audio && matchesExt(href, options.audio)) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`type = "audio";`
fix inline media src and title 2021-02-24 19:57:59 +00:00			props += ` controls src="${href}"`
			props += title ? ` title="${title}"` : "";
narrowing in... 2021-02-18 19:11:03 +00:00			`} else if (options.video && matchesExt(href, options.video)) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`type = "video";`
fix inline media src and title 2021-02-24 19:57:59 +00:00			props += ` controls src="${href}"`
			props += title ? ` title="${title}"` : "";
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`} else {`
			`type = "a";`
			`content = title \|\| href;`
css wizardry 2021-02-20 19:28:43 +00:00			props += ` href="${href}"`;
three --css modes: gmi.css, base and none when "none" inline tags will be wrapped in <p> --image, --audio and --video now accept the extensions to inline so what's possible to load isn't maintained here --lang is now referred to as --html --html and --body are mutually exclusive 2021-02-11 23:26:29 +00:00			`}`
enable stdio API --body returns just the innerHTML of the body gmi.min.css is created in the script not by Makefile refactor yargs code, better --help menu 2021-02-11 20:57:08 +00:00			`}`
refactor css 2021-02-18 23:16:05 +00:00			`if (options.body \|\| options.inline)`
ditch import stuff 2021-02-20 20:16:36 +00:00			`content !== "" ? (props += options.inlineCSS(type)) : "";`
three --css modes: gmi.css, base and none when "none" inline tags will be wrapped in <p> --image, --audio and --video now accept the extensions to inline so what's possible to load isn't maintained here --lang is now referred to as --html --html and --body are mutually exclusive 2021-02-11 23:26:29 +00:00
refactor css 2021-02-18 23:16:05 +00:00			return `<${type}${props}>${escape(content)}</${type}>`;
enable stdio API --body returns just the innerHTML of the body gmi.min.css is created in the script not by Makefile refactor yargs code, better --help menu 2021-02-11 20:57:08 +00:00			`}`

refactor 2021-02-11 02:24:00 +00:00			`export function body(tokens, options) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`let blocks = [];`
format 2021-01-28 23:13:02 +00:00			`let cursor = tokens.shift();`
it works 2021-01-28 23:07:57 +00:00			`while (tokens.length) {`
			`if (cursor.pre) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`blocks.push(`
			`<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}${
ditch import stuff 2021-02-20 20:16:36 +00:00			`options.body \|\| options.inline ? options.inlineCSS("pre") : ""`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			}>`
			`);`
format 2021-01-28 23:13:02 +00:00			`const closing = tokens.findIndex((token) => token.pre);`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`blocks = blocks.concat(tokens.slice(0, closing).map(({ text }) => text));`
			`blocks.push("</pre>");`
format 2021-01-28 23:13:02 +00:00			`tokens = tokens.slice(closing + 1);`
fix undefined links 2021-01-30 21:28:30 +00:00			`} else if (cursor.li) {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`blocks.push(`
ditch import stuff 2021-02-20 20:16:36 +00:00			`<ul${options.body \|\| options.inline ? options.inlineCSS("ul") : ""}>`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`);`
format 2021-01-28 23:13:02 +00:00			`const closing = tokens.findIndex((token) => !token.li);`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`blocks = blocks`
			`.concat([block(cursor)])`
			`.concat(tokens.slice(0, closing).map(block));`
			`blocks.push("</ul>");`
fix lists add test 2021-02-02 22:02:09 +00:00			`tokens = tokens.slice(closing);`
escape potential html in gemini content fix rogue newline after pre tag 2021-01-30 18:47:46 +00:00			`} else {`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`blocks.push(block(cursor, options));`
it works 2021-01-28 23:07:57 +00:00			`}`
format 2021-01-28 23:13:02 +00:00			`cursor = tokens.shift();`
it works 2021-01-28 23:07:57 +00:00			`}`
add --inline refactor css.js and html.js 2021-02-18 16:43:25 +00:00			`return blocks.join("\n");`
it works 2021-01-28 23:07:57 +00:00			`}`

narrowing in... 2021-02-18 19:11:03 +00:00			`export function toHTML(gemtext, options) {`
move styleTag and inlineCSS to html.js 2021-02-24 19:37:45 +00:00			`options.inlineCSS = options.inlineCSS \|\| CSS.inline(options);`
			`options.styleTag = options.styleTag \|\| CSS.style(options);`

refactor html.js 2021-02-19 19:32:28 +00:00			`const tokens = tokenize(gemtext);`
narrowing in... 2021-02-18 19:11:03 +00:00
			`if (options.body) return body(tokens, options);`

			return `<!DOCTYPE html>
move styleTag and inlineCSS to html.js 2021-02-24 19:37:45 +00:00			`<html lang="${options.html}" dir="${`
fix defaults 2021-02-24 20:23:28 +00:00			`options.dir \|\| "ltr"`
ditch import stuff 2021-02-20 20:16:36 +00:00			`}" style='${options.inlineCSS("html")}'>`
narrowing in... 2021-02-18 19:11:03 +00:00			`<head>${head(`
			`Object.assign(options, {`
			`title: tokens[0].h1,`
			`description: description(tokens, options),`
			`})`
			`)}</head>`
ditch import stuff 2021-02-20 20:16:36 +00:00			`<body${options.inlineCSS("body")}>`
narrowing in... 2021-02-18 19:11:03 +00:00			`${body(tokens, options)}`
			`</body>`
			`</html>`
			`;
			`}`

			`export function head(options) {`
			return `
fix defaults 2021-02-24 20:23:28 +00:00			`<meta charset="${options.charset \|\| "utf-8"}">`
fix color-schemes 2021-02-20 21:22:37 +00:00			`<meta name="viewport" content="width=device-width,initial-scale=1">${`
			`options.styleTag`
			`}`
narrowing in... 2021-02-18 19:11:03 +00:00			`<title>${options.title}</title>${`
			!options.author ? "" : `\n<meta name="author" content="${options.author}">`
			`}${`
			`!options.description`
			`? ""`
			: `\n<meta name="description" content="${escape(options.description)}">`
			`}${`
			`!options.canonical`
			`? ""`
			: `\n<link rel="canonical" href="${options.canonical}">`
			`}`
			`;
			`}`

			`function description(tokens, options) {`
			`const truncate = (text, limit) =>`
			text.length > limit ? `${text.substring(0, limit)}...` : text;

			`let description =`
fix defaults 2021-02-24 20:23:28 +00:00			`options.description > 0`
narrowing in... 2021-02-18 19:11:03 +00:00			`? tokens.find((token) => {`
			`return token.text && token.text !== "";`
			`})`
			`: false;`

fix defaults 2021-02-24 20:23:28 +00:00			`return description && truncate(description.text, options.description);`
narrowing in... 2021-02-18 19:11:03 +00:00			`}`

refactor 2021-02-11 02:24:00 +00:00			`export const GMI_EXT = /\.gmi$/;`

refactor 2021-02-15 22:31:08 +00:00			`export function streamHTML(options) {`
move styleTag and inlineCSS to html.js 2021-02-24 19:37:45 +00:00			`options.inlineCSS = options.inlineCSS \|\| CSS.inline(options);`
			`options.styleTag = options.styleTag \|\| CSS.style(options);`
refactor 2021-02-15 22:31:08 +00:00			`return map((file, cb) => {`
			`if (!GMI_EXT.test(file.path)) return cb(null);`
			`file.contents = Buffer.from(`
			`toHTML(file.contents.toString("utf-8"), options)`
			`);`
			`file.path = file.path.replace(GMI_EXT, ".html");`
			`return cb(null, file);`
			`});`
			`}`