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>(.+)?))$/;

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

export function toHTML(gemtext, options) {
  const tokens = gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups);

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

  if (options.body) return body(tokens, options);

  return `<!DOCTYPE html>
<html lang="${options.language}" dir="${options.dir}" style="${options.styles}">
<head>${head(
    Object.assign(options, {
      title: tokens[0].h1,
      description:
        description && truncate(description.text, options.descriptions),
    })
  )}</head>
<body>
${body(tokens, options)}
</body>
</html>
`;
}

export function head(options) {
  return `
<meta charset="${options.charset}">
<meta name="viewport" content="width=device-width,initial-scale=1">
${
  options.modes || options.css === "full"
    ? `<meta name="color-scheme" content="dark light">\n`
    : ""
}${style(options.css)}
<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}">`
  }
`;
}

export function style(mode) {
  if (mode === "none") return "";
  if (mode === "core")
    return `<style>${CSS.stringify(CSS.CORE, { compress: true })}</style>`;
  if (mode === "full")
    return `<style>${CSS.stringify(CSS.FULL, { compress: true })}</style>`;
  if (fs.existsSync(mode)) {
    return `<style>${CSS.resolve(mode, { compress: true })}</style>`;
  } else {
    throw new Error(`Cannot find file ${mode}.`);
  }
}

function line(
  { text, href, title, pre, alt, h1, h2, h3, li, quote },
  { image, audio, video, css, body } = {}
) {
  if (text) return `<p>${escape(text)}</p>`;

  if (href) {
    const titleProp = title ? ` title="${title}"` : "";
    const FIX_NORMAL_FLOW =
      body && css !== "none" ? ` style="display: block; max-width: 100%;"` : "";
    const matchesExt = (url, exts) =>
      exts.some((ext) => new RegExp(`\.${ext}$`).test(url));

    if (image && matchesExt(href, image)) {
      return `<img src="${href}"${titleProp}${FIX_NORMAL_FLOW}/>`;
    }
    if (audio && matchesExt(href, audio)) {
      return `<audio controls src="${href}"${titleProp}${FIX_NORMAL_FLOW}></audio>`;
    }
    if (video && matchesExt(href, video)) {
      return `<video controls src="${href}"${titleProp}${FIX_NORMAL_FLOW}/></video>`;
    }

    return `<a href="${href}"${FIX_NORMAL_FLOW}>${
      title ? escape(title) : href
    }</a>`;
  }

  if (h1) return `<h1>${escape(h1)}</h1>`;
  if (h2) return `<h2>${escape(h2)}</h2>`;
  if (h3) return `<h3>${escape(h3)}</h3>`;
  if (li) return `<li>${escape(li)}</li>`;

  if (quote) return `<blockquote>${escape(quote)}</blockquote>`;

  return `<p><br></p>`;
}

export function body(tokens, options) {
  let lines = [];

  let cursor = tokens.shift();
  while (tokens.length) {
    if (cursor.pre) {
      lines.push(`<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}>`);
      const closing = tokens.findIndex((token) => token.pre);
      lines = lines.concat(tokens.slice(0, closing).map(({ text }) => text));
      lines.push("</pre>");
      tokens = tokens.slice(closing + 1);
    } else if (cursor.li) {
      lines.push(`<ul>`);
      const closing = tokens.findIndex((token) => !token.li);
      lines = lines
        .concat([line(cursor)])
        .concat(tokens.slice(0, closing).map(line));
      lines.push("</ul>");
      tokens = tokens.slice(closing);
    } else {
      lines.push(line(cursor, options));
    }
    cursor = tokens.shift();
  }

  return lines.join("\n");
}

export const GMI_EXT = /\.gmi$/;

export function streamHTML(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");
    if (options.verbose) console.log(file.path);
    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
refactor 2021-02-11 02:24:00 +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>(.+)?))$/;
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
add --author and --descriptions options 2021-02-12 21:59:18 +00:00			`const truncate = (text, limit) =>`
			text.length > limit ? `${text.substring(0, limit)}...` : text;
refactor 2021-02-15 22:31:08 +00:00
			`export function toHTML(gemtext, options) {`
			`const tokens = gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups);`
refactor 2021-02-11 02:24:00 +00:00
configurable --descriptions truncation 2021-02-15 22:56:53 +00:00			`let description =`
			`options.descriptions > 0`
			`? tokens.find((token) => {`
			`return token.text && token.text !== "";`
			`})`
			`: false;`
add --author and --descriptions options 2021-02-12 21:59:18 +00:00
refactor 2021-02-11 02:24:00 +00:00			`if (options.body) return body(tokens, options);`
Use ES modules use language for <html lang=""> too 2021-02-10 22:03:48 +00:00
title and language meta 2021-01-29 23:17:25 +00:00			return `<!DOCTYPE html>
add --dir and update man page 2021-02-15 17:17:16 +00:00			`<html lang="${options.language}" dir="${options.dir}" style="${options.styles}">`
refactor 2021-02-11 02:24:00 +00:00			`<head>${head(`
			`Object.assign(options, {`
			`title: tokens[0].h1,`
configurable --descriptions truncation 2021-02-15 22:56:53 +00:00			`description:`
			`description && truncate(description.text, options.descriptions),`
refactor 2021-02-11 02:24:00 +00:00			`})`
			`)}</head>`
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			`<body>`
			`${body(tokens, options)}`
			`</body>`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`</html>`
title and language meta 2021-01-29 23:17:25 +00:00			`;
refactor 2021-02-11 02:24:00 +00:00			`}`

			`export function head(options) {`
			return `
fix parse config bug move charset to top of head 2021-02-12 21:17:00 +00:00			`<meta charset="${options.charset}">`
refactor 2021-02-15 22:31:08 +00:00			`<meta name="viewport" content="width=device-width,initial-scale=1">`
			`${`
			`options.modes \|\| options.css === "full"`
			? `<meta name="color-scheme" content="dark light">\n`
			`: ""`
			`}${style(options.css)}`
refactor 2021-02-11 02:24:00 +00:00			`<title>${options.title}</title>${`
configurable --descriptions truncation 2021-02-15 22:56:53 +00:00			!options.author ? "" : `\n<meta name="author" content="${options.author}">`
add --author and --descriptions options 2021-02-12 21:59:18 +00:00			`}${`
refactor 2021-02-11 02:24:00 +00:00			`!options.description`
			`? ""`
configurable --descriptions truncation 2021-02-15 22:56:53 +00:00			: `\n<meta name="description" content="${escape(options.description)}">`
title and language meta 2021-01-29 23:17:25 +00:00			`}${`
			`!options.canonical`
			`? ""`
configurable --descriptions truncation 2021-02-15 22:56:53 +00:00			: `\n<link rel="canonical" href="${options.canonical}">`
format 2021-01-28 23:13:02 +00:00			`}`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`;
			`}`
it works 2021-01-28 23:07:57 +00:00
refactor 2021-02-15 22:31:08 +00:00			`export function style(mode) {`
			`if (mode === "none") return "";`
			`if (mode === "core")`
			return `<style>${CSS.stringify(CSS.CORE, { compress: true })}</style>`;
			`if (mode === "full")`
			return `<style>${CSS.stringify(CSS.FULL, { compress: true })}</style>`;
			`if (fs.existsSync(mode)) {`
			return `<style>${CSS.resolve(mode, { compress: true })}</style>`;
			`} else {`
			throw new Error(`Cannot find file ${mode}.`);
			`}`
			`}`

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			`function line(`
			`{ text, href, title, pre, alt, h1, h2, h3, li, quote },`
body core styles 2021-02-15 21:40:59 +00:00			`{ image, audio, video, css, body } = {}`
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 (text) return `<p>${escape(text)}</p>`;
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			`if (href) {`
			const titleProp = title ? ` title="${title}"` : "";
refactor 2021-02-15 22:31:08 +00:00			`const FIX_NORMAL_FLOW =`
			body && css !== "none" ? ` style="display: block; max-width: 100%;"` : "";
body core styles 2021-02-15 21:40:59 +00:00			`const matchesExt = (url, exts) =>`
			exts.some((ext) => new RegExp(`\.${ext}$`).test(url));

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			`if (image && matchesExt(href, image)) {`
body core styles 2021-02-15 21:40:59 +00:00			return `<img src="${href}"${titleProp}${FIX_NORMAL_FLOW}/>`;
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			`}`
			`if (audio && matchesExt(href, audio)) {`
body core styles 2021-02-15 21:40:59 +00:00			return `<audio controls src="${href}"${titleProp}${FIX_NORMAL_FLOW}></audio>`;
			`}`
			`if (video && matchesExt(href, video)) {`
			return `<video controls src="${href}"${titleProp}${FIX_NORMAL_FLOW}/></video>`;
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 2021-02-15 22:31:08 +00:00			return `<a href="${href}"${FIX_NORMAL_FLOW}>${
			`title ? escape(title) : href`
			}</a>`;
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			`}`
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			if (h1) return `<h1>${escape(h1)}</h1>`;
			if (h2) return `<h2>${escape(h2)}</h2>`;
			if (h3) return `<h3>${escape(h3)}</h3>`;
			if (li) return `<li>${escape(li)}</li>`;
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			if (quote) return `<blockquote>${escape(quote)}</blockquote>`;
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			return `<p><br></p>`;
			`}`

refactor 2021-02-11 02:24:00 +00:00			`export function body(tokens, options) {`
			`let lines = [];`
it works 2021-01-28 23:07:57 +00:00
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) {`
refactor 2021-02-11 02:24:00 +00:00			lines.push(`<pre${cursor.alt ? ` title="${cursor.alt}"` : ""}>`);
format 2021-01-28 23:13:02 +00:00			`const closing = tokens.findIndex((token) => token.pre);`
refactor 2021-02-11 02:24:00 +00:00			`lines = lines.concat(tokens.slice(0, closing).map(({ text }) => text));`
			`lines.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) {`
refactor 2021-02-11 02:24:00 +00:00			lines.push(`<ul>`);
format 2021-01-28 23:13:02 +00:00			`const closing = tokens.findIndex((token) => !token.li);`
refactor 2021-02-11 02:24:00 +00:00			`lines = lines`
fix lists add test 2021-02-02 22:02:09 +00:00			`.concat([line(cursor)])`
			`.concat(tokens.slice(0, closing).map(line));`
refactor 2021-02-11 02:24:00 +00:00			`lines.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 {`
refactor 2021-02-11 02:24:00 +00:00			`lines.push(line(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			`}`

refactor 2021-02-11 02:24:00 +00:00			`return lines.join("\n");`
it works 2021-01-28 23:07:57 +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) {`
			`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");`
			`if (options.verbose) console.log(file.path);`
			`return cb(null, file);`
			`});`
			`}`