update README
This commit is contained in:
Talon Poole
parent
6adcdecdef
commit
66672e530e
90
README.md
90
README.md
|
|
@ -1,90 +1,91 @@
|
|||
# gmi-web
|
||||
|
||||
|
||||
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini
|
||||
|
||||
### HTML
|
||||
## HTML spec
|
||||
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
|
||||
<ul> ↔ *
|
||||
<blockquote> ↔ >
|
||||
<pre> ↔ ```
|
||||
<a> ↔ =>
|
||||
<h[1-3]> ↔ #[##]
|
||||
<p>
|
||||
```
|
||||
Empty lines should simply be represented as `<p><br></p>`. (Some implementations use just `<br>` but this sets up `contenteditable=true` to add content to the line and also Gemini has no "empty" line-type just a line that is empty.)
|
||||
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>` and also Gemini has no "empty" line-type just a line that is empty.
|
||||
|
||||
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. If you must wrap the link it should be with a `<p>` tag and never a `<div>`. If you do not wrap the link a simple `a {display: block}` has the same effect (gmi.css uses this).
|
||||
|
||||
P, UL, BLOCKQUOTE, and PRE may also have line-breaks which should be inserted as innerHTML using the following rules:
|
||||
`<p>`, `<ul>`, `<blockquote>` and `<pre>` may also have line-breaks which should be inserted as inner HTML using the following rules:
|
||||
```
|
||||
P ↔ <br>
|
||||
BLOCKQUOTE ↔ <div><br></div>
|
||||
UL ↔ <li><br></li>
|
||||
PRE \n (or <br>)
|
||||
<p> ↔ <br>
|
||||
<blockquote> ↔ <div><br></div>
|
||||
<ul> ↔ <li><br></li>
|
||||
<pre> ↔ \n (or <br>)
|
||||
```
|
||||
These are informed by what the browser uses when `contenteditable=true` is set on the element and you hit "enter"
|
||||
|
||||
Some implementations render a series of ">" into a series of <blockquotes> which is probably fine but it is preferable to group them and insert the subsequent lines as `<div>line-breaks</div>`.
|
||||
Some implementations render a series of `>` into a series of `<blockquotes>` which is probably fine but it is semantically preferable to group them and insert the subsequent lines as `<div>line-breaks</div>`.
|
||||
|
||||
Parsers may want to be aware of potential `<br>` lines inside `<pre>` tags as that is how "enter" is handled when `contenteditable=true`. It is uncertain why the browser behaves so but they can be safely translated to \n. and you need not translate `\n → <br>` as that's implied in "preformatted".
|
||||
|
||||
* accessibility
|
||||
* pre alt text
|
||||
* inline media
|
||||
- [ ] `<head>`
|
||||
- [ ] accessibility
|
||||
- [ ] inline media
|
||||
- [ ] pre alt text
|
||||
|
||||
### CSS
|
||||
## gmi.css
|
||||
|
||||
Style your HTML generated Gemini content in a readable, predicable and mobile-friendly fashion!
|
||||
|
||||
```
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="stylesheet" href="https://talon.computer/gmi.min.css"/>
|
||||
```
|
||||
|
||||
### variables
|
||||
The following variables (shown with their defaults) can be customized using the style attribute of your document's `<html>` tag.
|
||||
|
||||
```
|
||||
:root {
|
||||
--foreground: black;
|
||||
--background: white;
|
||||
--line-height: 1.5;
|
||||
--font-size: 1.25rem;
|
||||
--mono: Consolas, monaco, monospace;
|
||||
--serif: font-family: georgia, times, serif;
|
||||
--sans-serif: -apple-system, BlinkMacSystemFont,
|
||||
'avenir next', avenir,
|
||||
helvetica, 'helvetica neue',
|
||||
ubuntu,
|
||||
roboto, noto,
|
||||
'segoe ui', arial,
|
||||
sans-serif;
|
||||
}
|
||||
--foreground: black;
|
||||
--background: white;
|
||||
--line-height: 1.5;
|
||||
--font-size: 1.25rem;
|
||||
--mono: Consolas, monaco, monospace;
|
||||
--serif: font-family: georgia, times, serif;
|
||||
--sans-serif: -apple-system, BlinkMacSystemFont,
|
||||
'avenir next', avenir,
|
||||
helvetica, 'helvetica neue',
|
||||
ubuntu,
|
||||
roboto, noto,
|
||||
'segoe ui', arial,
|
||||
sans-serif;
|
||||
```
|
||||
|
||||
You can customize these using the `<html>` tag of your document.
|
||||
gmi.css will respect system dark mode preferences by inverting `--foreground` and `--background`.
|
||||
|
||||
```
|
||||
<html style="style="--foreground:#555555; --background:#9EEBCF;">
|
||||
```
|
||||
|
||||
gmi.css will respect dark mode preferences by inverting these colors.
|
||||
### gmi.js
|
||||
|
||||
### JavaScript
|
||||
|
||||
gmi.js is made up of lines!
|
||||
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)
|
||||
```
|
||||
|
||||
now try changing the type and content and observing the effects.
|
||||
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:
|
||||
A document provides a way to handle many lines together.
|
||||
|
||||
```js
|
||||
window.gmi = new Gemini(document.body)
|
||||
window.gmi.lines = [
|
||||
|
|
@ -95,18 +96,17 @@ window.gmi.lines = [
|
|||
window.gmi.lines[0].type = "H3"
|
||||
```
|
||||
|
||||
the gemtext source is available via .source
|
||||
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
|
||||
```
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue