gmi-web/html.js
2021-02-15 21:40:59 +00:00

130 lines
3.9 KiB
JavaScript

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>(.+)?))$/;
const truncate = (text, limit) =>
text.length > limit ? `${text.substring(0, limit)}...` : text;
export function html(file, options) {
const tokens = file.contents
.toString("utf8")
.split("\n")
.map((line) => GMI_REGEX.exec(line).groups);
let description = options.descriptions
? 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, 200),
})
)}</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.css && options.css !== ""
? `<meta name="color-scheme" content="dark light">`
: ""
}${options.css && options.css !== "" ? `<style>${options.css}</style>` : ""}
<title>${options.title}</title>${
!options.author ? "" : `<meta name="author" content="${options.author}">`
}${
!options.description
? ""
: `<meta name="description" content="${escape(options.description)}">`
}${
!options.canonical
? ""
: `<link rel="canonical" href="${options.canonical}">`
}
`;
}
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 ? ` 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 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);
};