gmi-web/to-html.js

const fs = require("fs");
const path = require("path");
const TOKENS_EXT = /\.tokens\.json$/;
// https://developer.mozilla.org/en-US/docs/Web/Media/Formats
const IMG_EXT = (exports.IMG_EXT = /\.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$/);
const AUDIO_EXT = (exports.AUDIO_EXT = /\.(mp3|wav|aac|aacp|mpeg|off|flac)$/);
const VIDEO_EXT = (exports.VIDEO_EXT = /\.(mp4|webm)$/);
const BASE_STYLE = (exports.baseStyle =
  "<style>p,a,pre,h1,h2,h3,ul,blockquote,img,audio,video{display:block;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere;}</style>");

const toHTML = (exports.toHTML = (file, options) => {
  const tokens = JSON.parse(file.contents.toString("utf8"));
  const title = tokens[0].h1;
  return `<!DOCTYPE html>
<html style="${options.override}">
${head(file.path, title, options)}
<body>
${gemtext(tokens, options)}
</body>
</html>
`;
});

module.exports = (options) => (file, cb) => {
  if (!TOKENS_EXT.test(file.path)) return cb(null);
  file.contents = Buffer.from(toHTML(file, options));
  file.path = file.path.replace(TOKENS_EXT, ".html");
  if (options.verbose) console.log(file.path);
  return cb(null, file);
};

// TODO: meta: language, description, canonical
function head(file, title, options) {
  return `<head>
<meta charset="utf-8">
<meta language="${options.language}">
<meta name="viewport" content="width=device-width,initial-scale=1">${
    !options.css
      ? BASE_STYLE
      : `\n<meta name="color-scheme" content="dark light">\n<style>${fs.readFileSync(
          path.resolve(__dirname, "./gmi.min.css"),
          "utf8"
        )}</style>`
  }${
    !options.canonical
      ? ""
      : `<link rel="canonical" href="gemini://${
          options.canonical
        }/${file.replace(TOKENS_EXT, ".gmi")}">`
  }
<title>${title}</title>
</head>
`;
}

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

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

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

function line(
  { text, href, title, pre, alt, h1, h2, h3, li, quote },
  { images, audio, video }
) {
  if (text) return `<p>${text}</p>`;
  if (href) {
    if (images && IMG_EXT.test(href))
      return `<img src="${href}" title="${title}"/>`;
    if (audio && AUDIO_EXT.test(href))
      return `<audio controls src="${href}" title="${title}"></audio>`;
    if (video && VIDEO_EXT.test(href))
      return `<video controls src="${href}" title="${title}"/></video>`;

    return `<a href="${href}">${title || href}</a>`;
  }
  if (h1) return `<h1>${h1}</h1>`;
  if (h2) return `<h2>${h2}</h2>`;
  if (h3) return `<h3>${h3}</h3>`;
  if (li) return `<li>${li}</li>`;
  if (quote) return `<blockquote>${quote}</blockquote>`;
  return `<p><br></p>`;
}

function omit(key, obj) {
  const { [key]: omitted, ...rest } = obj;
  return rest;
}
round of cleaning 2021-01-29 06:15:23 +00:00			`const fs = require("fs");`
			`const path = require("path");`
it works 2021-01-28 23:07:57 +00:00			`const TOKENS_EXT = /\.tokens\.json$/;`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`// https://developer.mozilla.org/en-US/docs/Web/Media/Formats`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`const IMG_EXT = (exports.IMG_EXT = /\.(apng\|avif\|gif\|jpg\|jpeg\|jfif\|pjpeg\|pjp\|png\|svg\|webp)$/);`
			`const AUDIO_EXT = (exports.AUDIO_EXT = /\.(mp3\|wav\|aac\|aacp\|mpeg\|off\|flac)$/);`
			`const VIDEO_EXT = (exports.VIDEO_EXT = /\.(mp4\|webm)$/);`
			`const BASE_STYLE = (exports.baseStyle =`
			`"<style>p,a,pre,h1,h2,h3,ul,blockquote,img,audio,video{display:block;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere;}</style>");`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
title and language meta 2021-01-29 23:17:25 +00:00			`const toHTML = (exports.toHTML = (file, options) => {`
			`const tokens = JSON.parse(file.contents.toString("utf8"));`
			`const title = tokens[0].h1;`
			return `<!DOCTYPE html>
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`<html style="${options.override}">`
title and language meta 2021-01-29 23:17:25 +00:00			`${head(file.path, title, options)}`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`<body>`
title and language meta 2021-01-29 23:17:25 +00:00			`${gemtext(tokens, options)}`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`</body>`
			`</html>`
title and language meta 2021-01-29 23:17:25 +00:00			`;
			`});`

gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`module.exports = (options) => (file, cb) => {`
round of cleaning 2021-01-29 06:15:23 +00:00			`if (!TOKENS_EXT.test(file.path)) return cb(null);`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`file.contents = Buffer.from(toHTML(file, options));`
			`file.path = file.path.replace(TOKENS_EXT, ".html");`
			`if (options.verbose) console.log(file.path);`
			`return cb(null, file);`
			`};`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`// TODO: meta: language, description, canonical`
title and language meta 2021-01-29 23:17:25 +00:00			`function head(file, title, options) {`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			return `<head>
it works 2021-01-28 23:07:57 +00:00			`<meta charset="utf-8">`
title and language meta 2021-01-29 23:17:25 +00:00			`<meta language="${options.language}">`
format 2021-01-28 23:13:02 +00:00			`<meta name="viewport" content="width=device-width,initial-scale=1">${`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`!options.css`
			`? BASE_STYLE`
			: `\n<meta name="color-scheme" content="dark light">\n<style>${fs.readFileSync(
round of cleaning 2021-01-29 06:15:23 +00:00			`path.resolve(__dirname, "./gmi.min.css"),`
			`"utf8"`
			)}</style>`
title and language meta 2021-01-29 23:17:25 +00:00			`}${`
			`!options.canonical`
			`? ""`
getting closeeee 2021-01-29 23:27:39 +00:00			: `<link rel="canonical" href="gemini://${
			`options.canonical`
			}/${file.replace(TOKENS_EXT, ".gmi")}">`
format 2021-01-28 23:13:02 +00:00			`}`
title and language meta 2021-01-29 23:17:25 +00:00			`<title>${title}</title>`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`</head>`
			`;
			`}`
it works 2021-01-28 23:07:57 +00:00
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`function gemtext(tokens, options) {`
format 2021-01-28 23:13:02 +00:00			`let body = [];`
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) {`
format 2021-01-28 23:13:02 +00:00			body.push(`<pre${cursor.alt ? `title="${cursor.alt}"` : ""}>`);
			`const closing = tokens.findIndex((token) => token.pre);`
			`body = body.concat(tokens.slice(0, closing).map(({ text }) => text));`
			`body.push("</pre>");`
			`tokens = tokens.slice(closing + 1);`
it works 2021-01-28 23:07:57 +00:00			`}`
			`if (cursor.li) {`
format 2021-01-28 23:13:02 +00:00			body.push(`<ul>`);
			`const closing = tokens.findIndex((token) => !token.li);`
			`body = body.concat(tokens.slice(0, closing).map(line));`
			`body.push("</ul>");`
			`tokens = tokens.slice(closing + 1);`
it works 2021-01-28 23:07:57 +00:00			`}`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`body.push(line(cursor, options));`
format 2021-01-28 23:13:02 +00:00			`cursor = tokens.shift();`
it works 2021-01-28 23:07:57 +00:00			`}`

format 2021-01-28 23:13:02 +00:00			`return body.join("\n");`
it works 2021-01-28 23:07:57 +00:00			`}`

gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`function line(`
			`{ text, href, title, pre, alt, h1, h2, h3, li, quote },`
title and language meta 2021-01-29 23:17:25 +00:00			`{ images, audio, video }`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`) {`
it works 2021-01-28 23:07:57 +00:00			if (text) return `<p>${text}</p>`;
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`if (href) {`
title and language meta 2021-01-29 23:17:25 +00:00			`if (images && IMG_EXT.test(href))`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			return `<img src="${href}" title="${title}"/>`;
title and language meta 2021-01-29 23:17:25 +00:00			`if (audio && AUDIO_EXT.test(href))`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			return `<audio controls src="${href}" title="${title}"></audio>`;
title and language meta 2021-01-29 23:17:25 +00:00			`if (video && VIDEO_EXT.test(href))`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			return `<video controls src="${href}" title="${title}"/></video>`;

			return `<a href="${href}">${title \|\| href}</a>`;
			`}`
it works 2021-01-28 23:07:57 +00:00			if (h1) return `<h1>${h1}</h1>`;
			if (h2) return `<h2>${h2}</h2>`;
			if (h3) return `<h3>${h3}</h3>`;
			if (li) return `<li>${li}</li>`;
			if (quote) return `<blockquote>${quote}</blockquote>`;
			return `<p><br></p>`;
			`}`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00
			`function omit(key, obj) {`
			`const { [key]: omitted, ...rest } = obj;`
			`return rest;`
			`}`