gmi-web/gmi.html.js

import fs from "fs";
import path from "path";
import escape from "escape-html";

export const GMI_REGEX = /^((=>\s?(?<href>[^\s]+)(\s(?<title>.+))?)|(?<pre>```\s?(?<alt>.+)?)|(###\s?(?<h3>.+))|(##\s?(?<h2>.+))|(#\s?(?<h1>.+))|(\*\s?(?<li>.+))|(>\s?(?<quote>.+))|(?<text>(.+)?))$/;

export function html(file, options) {
  const tokens = file.contents
    .toString("utf8")
    .split("\n")
    .map((line) => GMI_REGEX.exec(line).groups);

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

  return `<!DOCTYPE html>
<html lang="${options.language}" style="${options.styles}">
<head>${head(
    Object.assign(options, {
      title: tokens[0].h1,
      charset: "utf-8",
    })
  )}</head>
<body>${body(tokens, options)}</body>
</html>
`;
}

export const BASE_CSS =
  "p,a,pre,h1,h2,h3,ul,blockquote,img,audio,video{display:block;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere;}";

export const GMI_CSS = fs.readFileSync(
  // TODO import.meta.resolve is supposed to accomplish this without "path"
  path.resolve(
    path.dirname(new URL(import.meta.url).pathname),
    "./gmi.min.css"
  ),
  "utf8"
);

export function head(options) {
  return `
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="${options.charset}">
<meta language="${options.language}">
<title>${options.title}</title>${
    !options.description
      ? ""
      : `<meta name="description" content="${options.description}}">`
  }${
    !options.css
      ? `<style>${BASE_CSS}</style>`
      : `\n<meta name="color-scheme" content="dark light">\n<style>${GMI_CSS}</style>`
  }${
    !options.canonical
      ? ""
      : `<link rel="canonical" href="${options.canonical}}">`
  }
`;
}

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 IMAGE_EXT = /\.(apng|avif|gif|jpg|jpeg|jfif|pjpeg|pjp|png|svg|webp)$/;
export const AUDIO_EXT = /\.(mp3|wav|aac|aacp|mpeg|off|flac)$/;
export const VIDEO_EXT = /\.(mp4|webm)$/;

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

    return `<a href="${href}">${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 const GMI_EXT = /\.gmi$/;

export default (options) => (file, cb) => {
  if (!GMI_EXT.test(file.path)) return cb(null);
  file.contents = Buffer.from(html(file, options));
  file.path = file.path.replace(GMI_EXT, ".html");
  if (options.verbose) console.log(file.path);
  return cb(null, file);
};
Use ES modules use language for <html lang=""> too 2021-02-10 22:03:48 +00:00			`import fs from "fs";`
			`import path from "path";`
			`import escape from "escape-html";`
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
refactor 2021-02-11 02:24:00 +00:00			`export function html(file, options) {`
			`const tokens = file.contents`
			`.toString("utf8")`
			`.split("\n")`
			`.map((line) => GMI_REGEX.exec(line).groups);`

			`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>
refactor 2021-02-11 02:24:00 +00:00			`<html lang="${options.language}" style="${options.styles}">`
			`<head>${head(`
			`Object.assign(options, {`
			`title: tokens[0].h1,`
			`charset: "utf-8",`
			`})`
			`)}</head>`
			`<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 const BASE_CSS =`
			`"p,a,pre,h1,h2,h3,ul,blockquote,img,audio,video{display:block;max-width:100%;margin:0;padding:0;overflow-wrap:anywhere;}";`

			`export const GMI_CSS = fs.readFileSync(`
			`// TODO import.meta.resolve is supposed to accomplish this without "path"`
			`path.resolve(`
			`path.dirname(new URL(import.meta.url).pathname),`
			`"./gmi.min.css"`
			`),`
			`"utf8"`
			`);`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
refactor 2021-02-11 02:24:00 +00:00			`export function head(options) {`
			return `
			`<meta name="viewport" content="width=device-width,initial-scale=1">`
			`<meta charset="${options.charset}">`
title and language meta 2021-01-29 23:17:25 +00:00			`<meta language="${options.language}">`
refactor 2021-02-11 02:24:00 +00:00			`<title>${options.title}</title>${`
			`!options.description`
			`? ""`
			: `<meta name="description" content="${options.description}}">`
			`}${`
use cli to pass in CSS vars 2021-01-29 22:32:30 +00:00			`!options.css`
refactor 2021-02-11 02:24:00 +00:00			? `<style>${BASE_CSS}</style>`
fix lists add test 2021-02-02 22:02:09 +00:00			: `\n<meta name="color-scheme" content="dark light">\n<style>${GMI_CSS}</style>`
title and language meta 2021-01-29 23:17:25 +00:00			`}${`
			`!options.canonical`
			`? ""`
Use ES modules use language for <html lang=""> too 2021-02-10 22:03:48 +00:00			: `<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-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 IMAGE_EXT = /\.(apng\|avif\|gif\|jpg\|jpeg\|jfif\|pjpeg\|pjp\|png\|svg\|webp)$/;`
			`export const AUDIO_EXT = /\.(mp3\|wav\|aac\|aacp\|mpeg\|off\|flac)$/;`
			`export const VIDEO_EXT = /\.(mp4\|webm)$/;`

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 },`
fix lists add test 2021-02-02 22:02:09 +00:00			`{ images, audio, video } = {}`
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`) {`
escape potential html in gemini content fix rogue newline after pre tag 2021-01-30 18:47:46 +00:00			if (text) return `<p>${escape(text)}</p>`;
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`if (href) {`
Use ES modules use language for <html lang=""> too 2021-02-10 22:03:48 +00:00			const titleProp = title ? ` title="${title}"` : "";
refactor 2021-02-11 02:24:00 +00:00			if (images && IMAGE_EXT.test(href)) return `<img src="${href}"${titleProp}/>`;
title and language meta 2021-01-29 23:17:25 +00:00			`if (audio && AUDIO_EXT.test(href))`
optional title props 2021-02-02 22:34:26 +00:00			return `<audio controls src="${href}"${titleProp}></audio>`;
title and language meta 2021-01-29 23:17:25 +00:00			`if (video && VIDEO_EXT.test(href))`
optional title props 2021-02-02 22:34:26 +00:00			return `<video controls src="${href}"${titleProp}/></video>`;
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00
fix undefined links 2021-01-30 21:28:30 +00:00			return `<a href="${href}">${title ? escape(title) : href}</a>`;
gmi-web(1) inline media 2021-01-29 00:24:22 +00:00			`}`
escape potential html in gemini content fix rogue newline after pre tag 2021-01-30 18:47:46 +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>`;
			if (quote) return `<blockquote>${escape(quote)}</blockquote>`;
it works 2021-01-28 23:07:57 +00:00			return `<p><br></p>`;
			`}`
refactor 2021-02-11 02:24:00 +00:00
			`export const GMI_EXT = /\.gmi$/;`

			`export default (options) => (file, cb) => {`
			`if (!GMI_EXT.test(file.path)) return cb(null);`
			`file.contents = Buffer.from(html(file, options));`
			`file.path = file.path.replace(GMI_EXT, ".html");`
			`if (options.verbose) console.log(file.path);`
			`return cb(null, file);`
			`};`