2020-12-11 23:22:09 +00:00
# gmi-web
2021-01-26 18:17:35 +00:00
2020-12-30 00:27:29 +00:00
2021-01-26 01:14:34 +00:00
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini
2021-01-26 18:17:35 +00:00
## HTML spec
2021-01-26 22:29:24 +00:00
Check out the annotated [example.html ](./example.html )!
- [ ] accessibility
- [ ] pre alt text
2021-01-26 01:14:34 +00:00
Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:
```
2021-01-26 18:17:35 +00:00
< ul > ↔ *
< blockquote > ↔ >
< pre > ↔ ```
< a > ↔ =>
< h [ 1-3 ] > ↔ #[##]
< p >
2021-01-26 01:14:34 +00:00
```
2021-01-26 22:29:24 +00:00
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).
### contenteditable
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>` .
When `contenteditable=true` , `<p>` , `<ul>` , `<blockquote>` and `<pre>` may also have line-breaks which will be represented in `.innerHTML` like so:
2021-01-26 01:14:34 +00:00
```
2021-01-26 18:17:35 +00:00
< p > ↔ < br >
< blockquote > ↔ < div > < br > < / div >
< ul > ↔ < li > < br > < / li >
< pre > ↔ \n (or < br > )
2021-01-26 01:14:34 +00:00
```
2021-01-26 22:29:24 +00:00
This is important mostly for DOM development (as opposed to static HTML generation) where it is likely to occur.
2021-01-26 01:14:34 +00:00
2021-01-26 22:29:24 +00:00
### inline media
2021-01-26 01:14:34 +00:00
2021-01-26 22:29:24 +00:00
- [ ] TODO
2021-01-26 18:17:35 +00:00
## gmi.css
2021-01-26 01:14:34 +00:00
2021-01-26 18:17:35 +00:00
Style your HTML generated Gemini content in a readable, predicable and mobile-friendly fashion!
2021-01-26 01:14:34 +00:00
```
< meta name = "color-scheme" content = "dark light" >
< link rel = "stylesheet" href = "https://talon.computer/gmi.min.css" / >
```
2021-01-26 18:17:35 +00:00
The following variables (shown with their defaults) can be customized using the style attribute of your document's `<html>` tag.
2021-01-26 01:14:34 +00:00
```
2021-01-26 18:17:35 +00:00
--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;
2021-01-26 01:14:34 +00:00
```
2021-01-26 18:17:35 +00:00
gmi.css will respect system dark mode preferences by inverting `--foreground` and `--background` .
2021-01-26 01:14:34 +00:00
```
< html style = "style=" --foreground: # 555555 ; --background: # 9EEBCF ; " >
```
2021-01-26 18:17:35 +00:00
### gmi.js
2021-01-26 01:14:34 +00:00
2021-01-26 18:17:35 +00:00
Manipulate the DOM with a Gemini inspired API.
2021-01-26 01:14:34 +00:00
```js
const line = Gemini.line("manipulate the dom\nbut like in a Gemini way\ntry it!")
document.body.prepend(line.dom)
```
2021-01-26 18:17:35 +00:00
Try changing the type and content and observing the effects.
2021-01-26 01:14:34 +00:00
```js
line.type = "UL"
line.content = "now\nit's\na\nlist"
```
2021-01-26 18:17:35 +00:00
A document provides a way to handle many lines together.
2021-01-26 01:14:34 +00:00
```js
window.gmi = new Gemini(document.body)
window.gmi.lines = [
Gemini.line("interesting", "H1"),
Gemini.line("that's convenient"),
Gemini.line("http://talon.computer/js/ now... take me back please", "A"),
]
window.gmi.lines[0].type = "H3"
```
2021-01-26 18:17:35 +00:00
The gemtext source is available via .source
2021-01-26 01:14:34 +00:00
```js
window.gmi.source
```
All the gmi.css variables are also available as properties.
2021-01-26 18:17:35 +00:00
```js
2021-01-26 01:14:34 +00:00
let foreground = window.gmi.foreground
let background = window.gmi.background
window.gmi.foreground = background
window.gmi.background = foreground
```
