specter/gmi-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

narrowing in...

Browse source
This commit is contained in:
Talon Poole 2021-02-18 19:11:03 +00:00
parent b172d16ca9
commit fee09522ee
7 changed files with 95 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
Makefile
View file

@ -1,10 +0,0 @@
build: gmi-web.1
npm install
gmi-web.1: gmi-web.1.scd
scdoc < $< > $@
clean:
rm -rf gmi-web.1 node_modules
.PHONY: clean

26
README.md
View file

@ -1,10 +1,6 @@
# gmi-web # gmi-web
This repo is home to: This repo is home to [a gmi-to-html reference](#gmi-to-html), [the gmi-web(1) command-line tool](#gmi-web-1) and [a gmi.css stylesheet](#gmi-css).
- [a gmi-to-html specification](#gmi-to-html)
- [the gmi-web(1) command-line tool](#gmi-web-1)
- [a gmi.css stylesheet](#gmi-css)
# gmi-to-html # gmi-to-html
@ -22,11 +18,11 @@ The converted Gemini document should exist inside the `<body>`. Consider if shar
List items must be wrapped with a `<ul>` tag. Empty lines should be represented as `<p><br></p>`. Take care to render `<pre>` blocks with their original formatting, DO NOT indent the generated List items must be wrapped with a `<ul>` tag. Empty lines should be represented as `<p><br></p>`. Take care to render `<pre>` blocks with their original formatting, DO NOT indent the generated
HTML for these tags. HTML for these tags.
`<a>` tags are considered [inline elements](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) which has presentational implications—CSS 2.1's _Normal Flow_ renders inline elements vertically. Gemini only deals with horizontally flowing content, this can be addressed by either re-defining `a {display: block;}` at the CSS level or by wrapping `<a>` tags in a "block" level element such as `<p>`. [MDN: Changing Element Levels](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#changing_element_levels) `<a>` tags are categorized as [inline](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) which CSS 2.1's _Normal Flow_ presents vertically—Gemini only deals with horizontally flowing content, this can be addressed by either using `a {display: block;}` at the CSS level or by wrapping `<a>` tags in a "block" level element such as `<p>`. [MDN: Changing Element Levels](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements#changing_element_levels)
### Optional: inline media ### Optional: inline media
If a link is consumable by `<img>`, `<audio>` or `<video>` you may insert the respective tag inline instead of an `<a>`. Images and video should be styled to have `max-width: 100%;` so they don't overflow the body. It's a good idea to also include the "controls" attribute. These are all categorized as inline just like `<a>` and should be handled accordingly. If a link is consumable by `<img>`, `<audio>` or `<video>` you may insert the respective tag inline, instead of an `<a>`. Images and video should be styled to have `max-width: 100%;` so they don't overflow the body. It's a good idea to also include the `controls` attribute. These are all categorized as inline just like `<a>` and will need `display: block;` styling or to be wrapped in a "block" level element.
## `<html>` and `<head>` ## `<html>` and `<head>`
@ -51,10 +47,9 @@ These may also be nice to have:
# gmi-web(1) # gmi-web(1)
Currently approaching a v1 release 🎉 Would you like to help test the RC? _You will need_: [node(1) w/ npm(1)](https://nodejs.org/en/)
```sh ```sh
npm install --global gmi-web-cli npm install --global gmi-web-cli
gmi-web --help
``` ```
``` ```
@ -78,18 +73,17 @@ Inline Media:
--video [array] --video [array]
CSS: CSS:
--body-width [default: "48rem"]
--serif [default: "georgia, times, serif"] --serif [default: "georgia, times, serif"]
--sans-serif [default: "avenir, helvetica, arial, sans-serif"] --sans-serif [default: "avenir, helvetica, arial, sans-serif"]
--mono [default: "consolas, monaco, monospace"] --mono [default: "consolas, monaco, monospace"]
--foreground [default: "black"] --foreground [default: "black"]
--background [default: "white"] --background [default: "white"]
--a-decoration [default: "none"] --a-decoration [default: "underline"]
--a-style [default: "normal"] --a-style [default: "normal"]
--a-prefix [default: ""⇒""]
--ul-bullet [default: ""*""] --ul-bullet [default: ""*""]
--p-indent [default: "0rem"] --p-indent [default: "0rem"]
--quote-style [default: "italic"] --quote-style [default: "italic"]
--body-width [default: "48rem"]
--p-size [default: "1.25rem"] --p-size [default: "1.25rem"]
--a-size [default: "var(--p-size)"] --a-size [default: "var(--p-size)"]
--pre-size [default: "1rem"] --pre-size [default: "1rem"]
@ -108,6 +102,7 @@ CSS:
Options: Options:
--version Show version number [boolean] --version Show version number [boolean]
--config Path to JSON config file --config Path to JSON config file
--inline [boolean]
--help Show help [boolean] --help Show help [boolean]
Examples: Examples:
@ -117,9 +112,10 @@ Examples:
gmi-web --image jpg --audio mp3 --image png --body < doc.gmi gmi-web --image jpg --audio mp3 --image png --body < doc.gmi
See the gmi-web(1) man page for more information. See the gmi-web(1) man page for more information.
``` ```
## config
A JSON file can be passed to `--config` for conveniently applying any option without using the command-line flag. For example a `web.json` file with the following contents... A JSON file can be passed to `--config` for conveniently applying any option without using the command-line flag. For example a `web.json` file with the following contents...
```json ```json
@ -127,9 +123,7 @@ A JSON file can be passed to `--config` for conveniently applying any option wit
"html": "en", "html": "en",
"descriptions": 200, "descriptions": 200,
"foreground": "#137752", "foreground": "#137752",
"background": "#F4F4F4", "background": "#F4F4F4"
"a-decoration": "underline",
"a-prefix": "none"
} }
``` ```

18
css.js
View file

@ -53,22 +53,22 @@ export function override(options) {
styles += `--${key}:${value};`; styles += `--${key}:${value};`;
} }
return styles; return styles;
}, ""); }, " ");
} }
export function style({ css }) { export function style({ inline, css }) {
if (css === "none") return ""; if (inline || css === "none") return "";
if (css === "core") if (css === "core")
return `<style>${stringify(CORE, { compress: true })}</style>`; return `<style>${stringify(CORE, { compress: true })}</style>`;
if (css === "full") if (css === "full")
return `<style>${stringify(FULL, { compress: true })}</style>`; return `<style>${stringify(FULL, { compress: true })}</style>`;
return `<style>${stringify(resolve(css, { compress: true }))}</style>`; return `<style>${stringify(load(css, { compress: true }))}</style>`;
} }
export function inline(tag, css) { export function inline(tag, { inline, css }) {
const { stylesheet } = if (!inline || css === "full") return "";
css === "full" ? FULL : css === "core" ? CORE : resolve(css); const { stylesheet } = css === "core" ? CORE : load(css);
const styles = stylesheet.rules const styles = stylesheet.rules
.filter(({ type, selectors }) => type === "rule" && selectors.includes(tag)) .filter(({ type, selectors }) => type === "rule" && selectors.includes(tag))
.reduce((style, { declarations }) => { .reduce((style, { declarations }) => {
@ -82,9 +82,9 @@ export function inline(tag, css) {
} }
export function load(file, options) { export function load(file, options) {
if (fs.existsSync(mode)) { if (fs.existsSync(file)) {
return parse(readFileSync(path.resolve(file), "utf-8")); return parse(readFileSync(path.resolve(file), "utf-8"));
} else { } else {
throw new Error(`Cannot find file ${mode}.`); throw new Error(`Cannot find file ${file}.`);
} }
} }

7
gmi-web.1.scd
View file

@ -1,4 +1,4 @@
gmi-web(1) "1.0.10-rc.2" gmi-web(1) "1.0.11-rc.2"
# NAME # NAME
@ -49,7 +49,9 @@ gmi-web --html en \\
turned off by using --css *none*. When using --css *full* this feature is turned off by using --css *none*. When using --css *full* this feature is
unavailable. unavailable.
Pointing to a .css _FILE_ will use those styles and also works with *--inline* Pointing to a .css _FILE_ will use those styles and works with *--body* or
*--inline*. You may want to use *--schemes* to include the <meta> tag for
the light and dark schemes.
*[--image|--audio|--video]* _EXTENSIONS_ *[--image|--audio|--video]* _EXTENSIONS_
Include media extensions inline. You can provide multiple extensions per flag Include media extensions inline. You can provide multiple extensions per flag
@ -59,6 +61,7 @@ gmi-web --html en \\
gmi-web --html en \\ gmi-web --html en \\
--image jpg \\ --image jpg \\
--image png \\ --image png \\
--video mp4 \\
--audio mp3 ogg < doc.gmi --audio mp3 ogg < doc.gmi
``` ```

17
gmi.css
View file

@ -26,20 +26,19 @@ video {
} }
:root { :root {
--body-width: 48rem;
--serif: georgia, times, serif; --serif: georgia, times, serif;
--sans-serif: avenir, helvetica, arial, sans-serif; --sans-serif: avenir, helvetica, arial, sans-serif;
--mono: consolas, monaco, monospace; --mono: consolas, monaco, monospace;
--foreground: black; --foreground: black;
--background: white; --background: white;
--a-decoration: none; --a-decoration: underline;
--a-style: normal; --a-style: normal;
--a-prefix: "⇒";
--ul-bullet: "*"; --ul-bullet: "*";
--p-indent: 0rem; --p-indent: 0rem;
--quote-style: italic; --quote-style: italic;
--body-width: 48rem;
--p-size: 1.25rem; --p-size: 1.25rem;
--a-size: var(--p-size); --a-size: var(--p-size);
--pre-size: 1rem; --pre-size: 1rem;
@ -77,15 +76,6 @@ p {
line-height: var(--p-line-height); line-height: var(--p-line-height);
} }
a::before {
font-size: var(--a-size);
font-family: var(--mono);
content: var(--a-prefix);
line-height: var(--a-line-height);
padding-right: 0.25rem;
vertical-align: middle;
}
a { a {
font-size: var(--a-size); font-size: var(--a-size);
font-style: var(--a-style); font-style: var(--a-style);
@ -114,6 +104,7 @@ h3 {
} }
ul { ul {
padding-left: 0;
font-size: var(--ul-size); font-size: var(--ul-size);
font-family: var(--serif); font-family: var(--serif);
line-height: var(--ul-line-height); line-height: var(--ul-line-height);
@ -122,7 +113,7 @@ ul {
li::before { li::before {
font-size: var(--ul-size); font-size: var(--ul-size);
font-family: var(--mono); font-family: var(--serif);
content: var(--ul-bullet); content: var(--ul-bullet);
vertical-align: middle; vertical-align: middle;
padding-right: 0.5rem; padding-right: 0.5rem;

129
html.js
View file

@ -5,65 +5,9 @@ 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 GMI_REGEX = /^((=>\s?(?<href>[^\s]+)(\s(?<title>.+))?)|(?<pre>```\s?(?<alt>.+)?)|(###\s?(?<h3>.+))|(##\s?(?<h2>.+))|(#\s?(?<h1>.+))|(\*\s?(?<li>.+))|(>\s?(?<quote>.+))|(?<text>(.+)?))$/;
export function toHTML(gemtext, options) { export function block(
const tokens = gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups);
if (options.body) return body(tokens, options);
const truncate = (text, limit) =>
text.length > limit ? `${text.substring(0, limit)}...` : text;
let description =
options.descriptions > 0
? tokens.find((token) => {
return token.text && token.text !== "";
})
: false;
return `<!DOCTYPE html>
<html lang="${options.language}" dir="${options.dir}" style='${
options.inline ? CSS.inline("html", options.css) : CSS.override(options)
}'>
<head>${head(
Object.assign(options, {
title: tokens[0].h1,
description:
description && truncate(description.text, options.descriptions),
})
)}</head>
<body${options.inline ? CSS.inline("body", options.css) : ""}>
${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.schemes || options.css === "full"
? `<meta name="color-scheme" content="dark light">\n`
: ""
}${!options.inline ? CSS.style(options) : ""}
<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 block(
{ text, href, title, pre, alt, h1, h2, h3, li, quote }, { text, href, title, pre, alt, h1, h2, h3, li, quote },
{ image, audio, video, css, body, inline } = {} options = {}
) { ) {
let type = "p"; let type = "p";
let props = ""; let props = "";
@ -94,13 +38,13 @@ function block(
if (href) { if (href) {
const matchesExt = (url, exts) => const matchesExt = (url, exts) =>
exts.some((ext) => new RegExp(`\.${ext}$`).test(url)); exts.some((ext) => new RegExp(`\.${ext}$`).test(url));
if (image && matchesExt(href, image)) { if (options.image && matchesExt(href, options.image)) {
type = "img"; type = "img";
props += ` src=${href}` + alt ? ` title=${alt}` : ""; props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else if (audio && matchesExt(href, audio)) { } else if (options.audio && matchesExt(href, options.audio)) {
type = "audio"; type = "audio";
props += ` src=${href}` + alt ? ` title=${alt}` : ""; props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else if (video && matchesExt(href, video)) { } else if (options.video && matchesExt(href, options.video)) {
type = "video"; type = "video";
props += ` src=${href}` + alt ? ` title=${alt}` : ""; props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else { } else {
@ -109,7 +53,7 @@ function block(
props += ` href=${href}`; props += ` href=${href}`;
} }
} }
if (body || inline) props += CSS.inline(type, css); if (options.body || options.inline) props += CSS.inline(type, options);
return `<${type}${props}>${ return `<${type}${props}>${
content !== "<br>" ? escape(content) : content content !== "<br>" ? escape(content) : content
@ -118,7 +62,6 @@ function block(
export function body(tokens, options) { export function body(tokens, options) {
let blocks = []; let blocks = [];
let cursor = tokens.shift(); let cursor = tokens.shift();
while (tokens.length) { while (tokens.length) {
if (cursor.pre) { if (cursor.pre) {
@ -148,10 +91,68 @@ export function body(tokens, options) {
} }
cursor = tokens.shift(); cursor = tokens.shift();
} }
return blocks.join("\n"); return blocks.join("\n");
} }
export function toHTML(gemtext, options) {
const tokens = gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups);
if (options.body) return body(tokens, options);
return `<!DOCTYPE html>
<html lang="${options.language}" dir="${options.dir}" style='${
CSS.inline("html", options) + CSS.override(options)
}'>
<head>${head(
Object.assign(options, {
title: tokens[0].h1,
description: description(tokens, options),
})
)}</head>
<body${CSS.inline("body", options)}>
${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.schemes || options.css === "full"
? `<meta name="color-scheme" content="dark light">\n`
: ""
}${CSS.style(options)}
<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.descriptions > 0
? tokens.find((token) => {
return token.text && token.text !== "";
})
: false;
return description && truncate(description.text, options.descriptions);
}
export const GMI_EXT = /\.gmi$/; export const GMI_EXT = /\.gmi$/;
export function streamHTML(options) { export function streamHTML(options) {

4
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "gmi-web-cli", "name": "gmi-web-cli",
"version": "1.0.10-rc.2", "version": "1.0.11-rc.2",
"description": "A bridge between HTML and Gemini", "description": "A bridge between HTML and Gemini",
"main": "html.js", "main": "html.js",
"type": "module", "type": "module",
@ -20,7 +20,7 @@
"cli.js" "cli.js"
], ],
"scripts": { "scripts": {
"prepare": "make gmi-web.1 && prettier --write ." "prepare": "scdoc < gmi-web.1.scd > gmi-web.1 && prettier --write ."
}, },
"dependencies": { "dependencies": {
"css": "^3.0.0", "css": "^3.0.0",