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
This repo is home to:
- [a gmi-to-html specification](#gmi-to-html)
- [the gmi-web(1) command-line tool](#gmi-web-1)
- [a gmi.css stylesheet](#gmi-css)
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).
# 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
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
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>`
@ -51,10 +47,9 @@ These may also be nice to have:
# 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
npm install --global gmi-web-cli
gmi-web --help
```
```
@ -78,18 +73,17 @@ Inline Media:
--video [array]
CSS:
--body-width [default: "48rem"]
--serif [default: "georgia, times, serif"]
--sans-serif [default: "avenir, helvetica, arial, sans-serif"]
--mono [default: "consolas, monaco, monospace"]
--foreground [default: "black"]
--background [default: "white"]
--a-decoration [default: "none"]
--a-decoration [default: "underline"]
--a-style [default: "normal"]
--a-prefix [default: ""⇒""]
--ul-bullet [default: ""*""]
--p-indent [default: "0rem"]
--quote-style [default: "italic"]
--body-width [default: "48rem"]
--p-size [default: "1.25rem"]
--a-size [default: "var(--p-size)"]
--pre-size [default: "1rem"]
@ -108,6 +102,7 @@ CSS:
Options:
--version Show version number [boolean]
--config Path to JSON config file
--inline [boolean]
--help Show help [boolean]
Examples:
@ -117,9 +112,10 @@ Examples:
gmi-web --image jpg --audio mp3 --image png --body < doc.gmi
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...
```json
@ -127,9 +123,7 @@ A JSON file can be passed to `--config` for conveniently applying any option wit
"html": "en",
"descriptions": 200,
"foreground": "#137752",
"background": "#F4F4F4",
"a-decoration": "underline",
"a-prefix": "none"
"background": "#F4F4F4"
}
```

16
css.js
View file

@ -56,19 +56,19 @@ export function override(options) {
}, " ");
}
export function style({ css }) {
if (css === "none") return "";
export function style({ inline, css }) {
if (inline || css === "none") return "";
if (css === "core")
return `<style>${stringify(CORE, { compress: true })}</style>`;
if (css === "full")
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) {
const { stylesheet } =
css === "full" ? FULL : css === "core" ? CORE : resolve(css);
export function inline(tag, { inline, css }) {
if (!inline || css === "full") return "";
const { stylesheet } = css === "core" ? CORE : load(css);
const styles = stylesheet.rules
.filter(({ type, selectors }) => type === "rule" && selectors.includes(tag))
.reduce((style, { declarations }) => {
@ -82,9 +82,9 @@ export function inline(tag, css) {
}
export function load(file, options) {
if (fs.existsSync(mode)) {
if (fs.existsSync(file)) {
return parse(readFileSync(path.resolve(file), "utf-8"));
} 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
@ -49,7 +49,9 @@ gmi-web --html en \\
turned off by using --css *none*. When using --css *full* this feature is
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_
Include media extensions inline. You can provide multiple extensions per flag
@ -59,6 +61,7 @@ gmi-web --html en \\
gmi-web --html en \\
--image jpg \\
--image png \\
--video mp4 \\
--audio mp3 ogg < doc.gmi
```

17
gmi.css
View file

@ -26,20 +26,19 @@ video {
}
:root {
--body-width: 48rem;
--serif: georgia, times, serif;
--sans-serif: avenir, helvetica, arial, sans-serif;
--mono: consolas, monaco, monospace;
--foreground: black;
--background: white;
--a-decoration: none;
--a-decoration: underline;
--a-style: normal;
--a-prefix: "⇒";
--ul-bullet: "*";
--p-indent: 0rem;
--quote-style: italic;
--body-width: 48rem;
--p-size: 1.25rem;
--a-size: var(--p-size);
--pre-size: 1rem;
@ -77,15 +76,6 @@ p {
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 {
font-size: var(--a-size);
font-style: var(--a-style);
@ -114,6 +104,7 @@ h3 {
}
ul {
padding-left: 0;
font-size: var(--ul-size);
font-family: var(--serif);
line-height: var(--ul-line-height);
@ -122,7 +113,7 @@ ul {
li::before {
font-size: var(--ul-size);
font-family: var(--mono);
font-family: var(--serif);
content: var(--ul-bullet);
vertical-align: middle;
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 function toHTML(gemtext, options) {
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(
export function block(
{ text, href, title, pre, alt, h1, h2, h3, li, quote },
{ image, audio, video, css, body, inline } = {}
options = {}
) {
let type = "p";
let props = "";
@ -94,13 +38,13 @@ function block(
if (href) {
const matchesExt = (url, exts) =>
exts.some((ext) => new RegExp(`\.${ext}$`).test(url));
if (image && matchesExt(href, image)) {
if (options.image && matchesExt(href, options.image)) {
type = "img";
props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else if (audio && matchesExt(href, audio)) {
} else if (options.audio && matchesExt(href, options.audio)) {
type = "audio";
props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else if (video && matchesExt(href, video)) {
} else if (options.video && matchesExt(href, options.video)) {
type = "video";
props += ` src=${href}` + alt ? ` title=${alt}` : "";
} else {
@ -109,7 +53,7 @@ function block(
props += ` href=${href}`;
}
}
if (body || inline) props += CSS.inline(type, css);
if (options.body || options.inline) props += CSS.inline(type, options);
return `<${type}${props}>${
content !== "<br>" ? escape(content) : content
@ -118,7 +62,6 @@ function block(
export function body(tokens, options) {
let blocks = [];
let cursor = tokens.shift();
while (tokens.length) {
if (cursor.pre) {
@ -148,10 +91,68 @@ export function body(tokens, options) {
}
cursor = tokens.shift();
}
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 function streamHTML(options) {

4
package.json
View file

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