prepare for npm prerelease
This commit is contained in:
Talon Poole
parent
a56d44bde5
commit
be68750b3f
2
Makefile
2
Makefile
|
|
@ -10,10 +10,10 @@ gmi.css.5: gmi.css.5.scd
|
|||
scdoc < $< > $@
|
||||
|
||||
format:
|
||||
./node_modules/prettier/bin-prettier.js --write README.md
|
||||
./node_modules/prettier/bin-prettier.js --write gmi.css
|
||||
./node_modules/prettier/bin-prettier.js --write *.js !*.min.js
|
||||
|
||||
|
||||
clean:
|
||||
rm -rf gmi.min.* gmi-web.1
|
||||
|
||||
|
|
|
|||
109
README.md
109
README.md
|
|
@ -10,9 +10,10 @@ The generated HTML document must have a `<head>` tag with _at minimum_ the follo
|
|||
|
||||
```html
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta language="en"> <!-- set this accordingly! -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta charset="utf-8" />
|
||||
<meta language="en" />
|
||||
<!-- set this accordingly! -->
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
</head>
|
||||
```
|
||||
|
||||
|
|
@ -20,22 +21,22 @@ You might want to also include these (or whatever else):
|
|||
|
||||
```html
|
||||
<title></title>
|
||||
<link rel="canonical" href="gemini://">
|
||||
<meta name="description" content="">
|
||||
<link rel="canonical" href="gemini://" />
|
||||
<meta name="description" content="" />
|
||||
```
|
||||
|
||||
## `<body>`
|
||||
|
||||
The converted Gemini document should be placed inside the `<body>`. Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:
|
||||
|
||||
```
|
||||
````
|
||||
<p>
|
||||
<a> ↔ =>
|
||||
<pre> ↔ ```
|
||||
<h[1-3]> ↔ #[##]
|
||||
<li> ↔ *
|
||||
<blockquote> ↔ >
|
||||
```
|
||||
````
|
||||
|
||||
The `<a>` for a link should be presented un-wrapped without any parent elements. Many implementations use `<div>` or `<p>` to enforce "block" styling as opposed to the default "inline" which renders the link next to the previous block instead of below it. But the nested markup adds an unnecessary layer of indirection in semantics. The best way to handle this is to include `<style>a {display: block;}</style>` in the `<head>`.
|
||||
|
||||
|
|
@ -55,94 +56,66 @@ If a link is consumable by `<img>`, `<audio>` or `<video>` you may insert the re
|
|||
Without any CSS the browser renders all of this just a lil wonky. At bare minimum I recommend including the following in the `<head>` of all your generated .html files.
|
||||
|
||||
```html
|
||||
<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>
|
||||
<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)
|
||||
|
||||
A reference implementation of what has been discussed above!
|
||||
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/)
|
||||
|
||||
*You will need*:
|
||||
- [node(1) w/ npm(1)](https://nodejs.org/en/)
|
||||
Install the binary via npm.
|
||||
|
||||
```sh
|
||||
npm install --global git+https://codeberg.org/talon/gmi-web.git#v1.0.0
|
||||
man gmi-web
|
||||
npm install --global @talon/gmi-web@v1.0.0-rc1
|
||||
```
|
||||
|
||||
Render .html for all the .gmi files in the current directory
|
||||
|
||||
```sh
|
||||
gmi-web --lang "en" $(find . -name "*.gmi")
|
||||
gmi-web --lang "en" $(find . -name "*.gmi")
|
||||
```
|
||||
|
||||
See `man gmi-web` for the full manual.
|
||||
|
||||
### gmi.css
|
||||
|
||||
Optimized for readability, predictability, mobile-friendliness and
|
||||
ships with a handful of customizable variables. See `man 5 gmi.css`.
|
||||
Optimized for readability, predictability and mobile-friendliness.
|
||||
Ships with a handful of customizable variables. See `man 5 gmi.css`.
|
||||
|
||||
The `--foreground` and `--background` variables will be inverted when
|
||||
`prefers-color-scheme` is "dark" which is a system-level preference on
|
||||
The `--foreground` and `--background` variables will be inverted when
|
||||
`prefers-color-scheme` is "dark" which is a system-level preference on
|
||||
devices.
|
||||
|
||||
Any of the variables can be customized by adding a style to the `<html>` element.
|
||||
Any of the variables can be customized by adding a style to the `<html>` element.
|
||||
|
||||
```html
|
||||
<html style="--foreground:#555555; --background:#9EEBCF;">
|
||||
<html style="--foreground:#555555; --background:#9EEBCF;"></html>
|
||||
```
|
||||
|
||||
When using `gmi-web(1)` they can be customized by providing _OPTIONS_ of the same name as the CSS variable.
|
||||
When using `gmi-web(1)` they can be customized via flags on the command-line.
|
||||
|
||||
```sh
|
||||
gmi-web --lang en --foreground "#FFFFF" --background "#00000" *.gmi
|
||||
gmi-web --foreground "#FFFFF" --background "#00000" --lang "en" $(find . -name "*.gmi")
|
||||
```
|
||||
|
||||
# License
|
||||
|
||||
gmi-web is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.
|
||||
|
||||
<!-- TODO
|
||||
### gmi.js
|
||||
|
||||
Manipulate the DOM with a Gemini inspired API.
|
||||
|
||||
```js
|
||||
const line = Gemini.line("manipulate the dom\nbut like in a Gemini way\ntry it!")
|
||||
document.body.prepend(line.dom)
|
||||
```
|
||||
|
||||
Try changing the type and content and observing the effects.
|
||||
|
||||
```js
|
||||
line.type = "UL"
|
||||
line.content = "now\nit's\na\nlist"
|
||||
```
|
||||
|
||||
A document provides a way to handle many lines together.
|
||||
|
||||
```js
|
||||
window.gmi = new Gemini(document.body)
|
||||
window.gmi.lines = [
|
||||
Gemini.line("interesting", "H1"),
|
||||
Gemini.line("that's convenient"),
|
||||
Gemini.line("http://talon.computer/js/ now... take me back please", "A"),
|
||||
]
|
||||
window.gmi.lines[0].type = "H3"
|
||||
```
|
||||
|
||||
The gemtext source is available via .source
|
||||
|
||||
```js
|
||||
window.gmi.source
|
||||
```
|
||||
|
||||
All the gmi.css variables are also available as properties.
|
||||
|
||||
```js
|
||||
let foreground = window.gmi.foreground
|
||||
let background = window.gmi.background
|
||||
window.gmi.foreground = background
|
||||
window.gmi.background = foreground
|
||||
```
|
||||
-->
|
||||
|
||||
|
|
|
|||
2
cli.js
2
cli.js
|
|
@ -65,7 +65,7 @@ require("yargs")
|
|||
type: "boolean",
|
||||
default: true,
|
||||
describe:
|
||||
"gmi.css is included by default. Use --no-css to for the bare-minimum <style>",
|
||||
"gmi.css is included by default. Use --no-css for the bare minimum <style>",
|
||||
}),
|
||||
(argv) => {
|
||||
const override = GMI_CSS_VARS.reduce((style, key) => {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.nh
|
||||
.ad l
|
||||
.\" Begin generated content:
|
||||
.TH "gmi-web" "1" "2021-01-30" "1.0.0"
|
||||
.TH "gmi-web" "1" "2021-01-30" "1.0.0-rc1"
|
||||
.P
|
||||
.SH NAME
|
||||
.P
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
gmi-web(1) "1.0.0"
|
||||
gmi-web(1) "1.0.0-rc1"
|
||||
|
||||
# NAME
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
.nh
|
||||
.ad l
|
||||
.\" Begin generated content:
|
||||
.TH "gmi.css" "5" "2021-01-29" "1.0.0"
|
||||
.TH "gmi.css" "5" "2021-01-30" "1.0.0-rc1"
|
||||
.P
|
||||
.SH NAME
|
||||
.P
|
||||
|
|
@ -13,8 +13,8 @@
|
|||
.P
|
||||
.SH DESCRIPTION
|
||||
.P
|
||||
gmi.css is optimized for readability, predictability, mobile-friendliness and
|
||||
ships with a handful of customizable variables.
|
||||
gmi.css is optimized for readability, predictability. and mobile-friendliness.
|
||||
Ships with a handful of customizable variables.
|
||||
.P
|
||||
.SH VARIABLES
|
||||
.P
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
gmi.css(5) "1.0.0"
|
||||
gmi.css(5) "1.0.0-rc1"
|
||||
|
||||
# NAME
|
||||
|
||||
|
|
@ -6,8 +6,8 @@ gmi.css(5) "1.0.0"
|
|||
|
||||
# DESCRIPTION
|
||||
|
||||
gmi.css is optimized for readability, predictability, mobile-friendliness and
|
||||
ships with a handful of customizable variables.
|
||||
gmi.css is optimized for readability, predictability. and mobile-friendliness.
|
||||
Ships with a handful of customizable variables.
|
||||
|
||||
# VARIABLES
|
||||
|
||||
|
|
|
|||
2
package-lock.json
generated
2
package-lock.json
generated
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "gmi-web",
|
||||
"version": "0.1.0",
|
||||
"version": "1.0.0-rc1",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "gmi-web",
|
||||
"version": "1.0.0",
|
||||
"description": "A bridge between the HTML and Gemini",
|
||||
"name": "@talon/gmi-web",
|
||||
"version": "1.0.0-rc1",
|
||||
"description": "A bridge between HTML and Gemini",
|
||||
"main": "cli.js",
|
||||
"bin": {
|
||||
"gmi-web": "cli.js"
|
||||
|
|
|
|||
Loading…
Reference in a new issue