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

wip

Browse source
This commit is contained in:
Talon Poole 2021-02-12 01:59:02 +00:00
parent ddaf0c5ada
commit 9887c03769
6 changed files with 72 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
README.md
View file

@ -10,17 +10,17 @@ The generated HTML document must have a `<head>` tag with _at minimum_ the follo
```html
<head>
<meta charset="utf-8" />
<!-- set this accordingly! -->
<meta language="en" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!-- set these accordingly -->
<meta charset="utf-8" />
<meta language="en" />
<title></title>
</head>
```
You might want to also include these (or whatever else):
```html
<title></title>
<link rel="canonical" href="gemini://" />
<meta name="description" content="" />
```
@ -38,17 +38,23 @@ The converted Gemini document should be placed inside the `<body>`. Due to the a
<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>`.
- [ ] is the <br> required or desired?
Much like the lines of a `<pre>`, the lines of `<li>list items</li>` need to be wrapped in `<ul>`, indention here is not significant. Sometimes a list item is empty: `<li><br></li>`.
Empty lines should simply be represented as `<p><br></p>` this sets up `contenteditable=true` to add content to the line compared to just `<br>`.
Take care to render `<pre>` blocks with their original formatting, DO NOT indent the generated
HTML for these tags.
Much like the lines of a `<pre>`, the lines of `<li>list items</li>` need to be wrapped in `<ul>`, indention here is not significant. Sometimes a list item is empty: `<li><br></li>`.
- [ ] block vs inline elements
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>`.
### Optional: inline media
- [ ] what media can I inline?
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. `<audio>` tags require `display: block;` just like `<a>`.
### Basic `<style>`
@ -81,19 +87,60 @@ Without any CSS the browser renders all of this just a lil wonky. At bare minimu
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/)
Install the binary via npm.
```sh
npm install --global gmi-web-cli
```
Render .html for all the .gmi files in the current directory
```sh
gmi-web --lang "en" $(find . -name "*.gmi")
```
gmi-web [files..]
See `man gmi-web` for the full manual.
Convert text/gemini to text/html.
Core:
--html, --language, --lang [string]
--css [choices: "gmi.css", "base", "none"] [default: "gmi.css"]
--body [boolean]
gmi.css:
--body-width
--foreground
--background
--p-size
--p-indent
--p-line-height
--a-size
--pre-size
--pre-line-height
--h1-size
--h2-size
--h3-size
--heading-line-height
--ul-size
--ul-line-height
--blockquote-size
--blockquote-line-height
--mono
--serif
--sans-serif
Inline Media:
--image [array]
--audio [array]
--video [array]
Options:
--version Show version number [boolean]
--config Path to JSON config file
--help Show help [boolean]
Examples:
gmi-web --html en $(find ~/my-capsule -name '*.gmi')
gmi-web --foreground '#000000' --background '#EEEEEE' --html en < doc.gmi
gmi-web --body < ~/my-capsule/index.gmi
gmi-web --image jpg --audio mp3 --image png --body < doc.gmi
See the gmi-web(1) man page for more information
```
### gmi.css

11
cli.js
View file

@ -25,6 +25,11 @@ const cli = yargs(process.argv.slice(2))
type: "string",
requiresArg: true,
},
charset: {
type: "string",
default: "utf-8",
requiresArg: true,
},
css: {
choices: ["gmi.css", "base", "none"],
default: "gmi.css",
@ -100,7 +105,7 @@ if (argv.css === "gmi.css") {
path.dirname(new URL(import.meta.url).pathname),
"./gmi.css"
),
"utf8"
"utf-8"
)
).styles;
} else if (argv.css === "base") {
@ -120,8 +125,8 @@ if (!argv.files) {
try {
gemtext = readFileSync(process.stdin.fd);
} catch (e) {
console.error(`Either send a file to this program from stdin or provide [files..]
See --help or read gmi-web(1) for usage details.`);
cli.showHelp();
console.error("\nMissing files: pipe from stdin or provide [files..]");
cli.exit(1);
}
console.log(html({ contents: gemtext }, argv));

2
gmi-web.1.scd
View file

@ -1,4 +1,4 @@
gmi-web(1) "1.0.7-rc.1"
gmi-web(1) "1.0.0-rc.2"
# NAME

2
gmi.css.5.scd
View file

@ -1,4 +1,4 @@
gmi.css(5) "1.0.7-rc.1"
gmi.css(5) "1.0.0-rc.2"
# NAME

2
html.js
View file

@ -15,7 +15,7 @@ export function html(file, options) {
<head>${head(
Object.assign(options, {
title: tokens[0].h1,
charset: "utf-8",
// TODO: description, canonical
})
)}</head>
<body>

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "gmi-web-cli",
"version": "1.0.7-rc.1",
"version": "1.0.0-rc.2",
"description": "A bridge between HTML and Gemini",
"main": "html.js",
"type": "module",