| example | ||
| .editorconfig | ||
| .gitignore | ||
| .prettierignore | ||
| cli.js | ||
| css.js | ||
| gmi-web.1 | ||
| gmi-web.1.scd | ||
| gmi.css | ||
| gmi.css.5 | ||
| gmi.css.5.scd | ||
| html.js | ||
| Makefile | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| test.css | ||
| test.sh | ||
| UNLICENSE | ||
gmi-web
This repo is home to:
gmi-to-html
The converted Gemini document should exist inside the <body>. Consider if sharing the page with other HTML to put the core document inside <main>. Each available line-type may be translated using the following guide:
<p> ↔
<a> ↔ =>
<pre> ↔ ```
<h[1-3]> ↔ #[##]
<li> ↔ *
<blockquote> ↔ >
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 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
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.
<html> and <head>
When producing a complete and valid HTML5 document the first declaration is the required <!DOCTYPE html>. At the root of a document is the <html> tag which should have a lang attribute which declares the overall language of the page and if necessary should also include dir="rtl".
Additionally a <head> tag with at least the following must also be included:
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta charset="utf-8" />
<title></title>
These may also be nice to have:
<meta name="author" content="" />
<meta name="description" content="" />
<link rel="canonical" href="gemini://" />
gmi-web(1)
Currently approaching a v1 release 🎉 Would you like to help test the RC? You will need: node(1) w/ npm(1)
npm install --global gmi-web-cli
gmi-web [files..]
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
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
devices.
Any of the variables can be customized by adding a style to the <html> element.
<html style="--foreground:#555555; --background:#9EEBCF;"></html>
License
gmi-web is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.