gmi-web

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

HTML spec

Check out the annotated example.html!

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

<ul>         ↔ *
<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).

inline media

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

contenteditable

Empty lines should simply be represented as   this sets up contenteditable=true to add content to the line compared to just  .

When contenteditable=true, , <ul>, <blockquote> and <pre> may also have line-breaks which will be represented in .innerHTML like so:

<p>          ↔ <br>
<blockquote> ↔ <div><br></div>
<ul>         ↔ <li><br></li>
<pre>        ↔ \n (or <br>)

This is important mostly for DOM development (as opposed to static HTML generation) where it is likely to occur.

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="https://talon.computer/gmi.min.css"/>

The following variables (shown with their defaults) can be customized using the style attribute of your document's <html> tag.

  --foreground: black;
  --background: white;
  --p-size: 1.25rem;
  --p-indent: 0rem;
  --a-size: var(--p-size);
  --pre-size: 1rem;
  --h1-size: 3rem;
  --h2-size: 2.25rem;
  --h3-size: 1.5rem;
  --ul-size: var(--p-size);
  --blockquote-size: var(--p-size);
  --mono: Consolas, monaco, monospace;
  --serif: georgia, times, serif;
  --sans-serif: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, helvetica, 'helvetica neue', ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;

gmi.css will respect system dark mode preferences by inverting --foreground and --background.

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

gmi-web(1)

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

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

Positionals:
  files  .gmi files to convert to .html                               [required]

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]
  --css      Toggle inclusion of gmi.css.              [boolean] [default: true]

You will need:

node(1) (w/ npm(1)) (to build/run the cli)
scdoc(1) (for the man pages)

make install

License

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

4.4 KiB Raw Blame History