gmi-web

Vision: Provide the lowest common denominator between HTML/CSS/JS and Gemini.

HTML spec

Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:

<li>  ↔ *
<blockquote>   ↔ >
<pre>          ↔ ```
<a>            ↔ =>
<h[1-3]>       ↔ #[##]
<p>

The <a> for a link should be presented without any parent elements. Many implementations use <div> 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 and when parsing. <a style="display: block;"> has the same effect (gmi.css uses this).

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>.

Much like the lines of a <pre>, the lines of <li>list items</li> need to be wrapped in <ul>.

head

The generated HTML document must have a <head> tag with at minimum the following:

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">

It is recommended to also include a <title> tag and <meta|link> tags for language, the canonical gemini url and description.

Optional: inline media

If a link is consumable by <img>, <audio> or <video> you may insert the media inline. 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 for videos and audio. <audio> tags require display: block; just like <a>.

gmi.css

Style your HTML generated Gemini content in a readable, predictable and mobile-friendly fashion!

<meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="gmi.min.css"/>

gmi.css will respect system dark mode preferences by inverting --foreground and --background. And also exposes many other variables for your customizing enjoyment!

<html style="--foreground:#555555; --background:#9EEBCF;">

gmi-web(1)

A reference implementation of what has been discussed above.

You will need:

node(1) w/ npm(1)

npm install -g git+https://codeberg.org/talon/gmi-web.git

gmi-web [--css] [files..]

Convert .gmi to .html. See gmi-web(1) for more details.

Positionals:
  files  The *.gmi files to convert                                   [required]

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]
  --images   Include images                           [boolean] [default: false]
  --audio    Include audio                            [boolean] [default: false]
  --video    Include video                            [boolean] [default: false]
  --css      Include gmi.css                           [boolean] [default: true]

License

gmi-web is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.

4 KiB Raw Blame History