readme
This commit is contained in:
Talon Poole
parent
d77cc84a06
commit
405e34fafc
52
README.md
52
README.md
|
|
@ -2,14 +2,12 @@
|
|||
|
||||
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini.
|
||||
|
||||
## HTML spec
|
||||
|
||||
Check out the annotated [example.html](https://gmi.eattherich.club/example.html)!
|
||||
# HTML spec
|
||||
|
||||
Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:
|
||||
|
||||
```
|
||||
<ul><li></ul> ↔ *
|
||||
<li> ↔ *
|
||||
<blockquote> ↔ >
|
||||
<pre> ↔ ```
|
||||
<a> ↔ =>
|
||||
|
|
@ -21,9 +19,22 @@ The `<a>` for a link should be presented without any parent elements. Many imple
|
|||
|
||||
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>`.
|
||||
|
||||
### inline media
|
||||
Much like the lines of a `<pre>`, the lines of `<li>list items</li>` need to be wrapped in `<ul>`.
|
||||
|
||||
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>`.
|
||||
### 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
|
||||
|
||||
|
|
@ -33,27 +44,7 @@ Style your HTML generated Gemini content in a readable, predictable and mobile-f
|
|||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="stylesheet" href="gmi.min.css"/>
|
||||
```
|
||||
|
||||
The following variables (shown with their defaults) can be customized using the style attribute of your document's `<html>` tag.
|
||||
|
||||
```css
|
||||
--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`.
|
||||
gmi.css will respect system dark mode preferences by inverting `--foreground` and `--background`. And also exposes [many other variables](./gmi.css) for your customizing enjoyment!
|
||||
|
||||
```html
|
||||
<html style="--foreground:#555555; --background:#9EEBCF;">
|
||||
|
|
@ -87,6 +78,10 @@ Options:
|
|||
--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.
|
||||
|
||||
<!-- TODO
|
||||
### gmi.js
|
||||
|
||||
|
|
@ -132,6 +127,3 @@ window.gmi.background = foreground
|
|||
```
|
||||
-->
|
||||
|
||||
### License
|
||||
|
||||
gmi-web is free and unencumbered public domain software. For more information, see http://unlicense.org/ or the accompanying UNLICENSE file.
|
||||
|
|
|
|||
60
example.html
60
example.html
|
|
@ -1,60 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
<link rel="stylesheet" href="gmi.min.css">
|
||||
</head>
|
||||
<body contenteditable="false">
|
||||
<h1>gmi-web</h1>
|
||||
<h2>example.html</h2>
|
||||
<h3>a reference</h3>
|
||||
<!--
|
||||
Presenting an empty line this way enables flipping contenteditable="true"
|
||||
to possibly add content to it. This is not true for a regular <br>.
|
||||
-->
|
||||
<p><br></p>
|
||||
<p>While not strictly necessary I'd recommend keeping lines on the same line in the markup unless it's a preformatted (or you're rendering the newlines as contenteditable might which is NOT recommended.)</p>
|
||||
<p><br></p>
|
||||
<a href="https://codeberg.org/talon/gmi-web">gmi-web on codeberg.org</a>
|
||||
<blockquote>DO NOT wrap "a" tags in anything. Use "display: block;" to fix layout issues (gmi.css does this)</blockquote>
|
||||
<p><br></p>
|
||||
<pre>
|
||||
be sure to render preformatted text as is
|
||||
including newlines
|
||||
and leading spaces!
|
||||
(rendering the html sans indention is recommended)
|
||||
</pre>
|
||||
<p><br></p>
|
||||
<ul>
|
||||
<li>milk</li>
|
||||
<li></li> <!-- empty list item -->
|
||||
<li>bread</li>
|
||||
</ul>
|
||||
<p><br></p>
|
||||
<p>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".</p>
|
||||
<img src="https://www.learningcontainer.com/wp-content/uploads/2020/08/Large-Sample-png-Image-download-for-Testing.png"/>
|
||||
<video controls src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4"></video>
|
||||
<audio controls src="https://www.learningcontainer.com/wp-content/uploads/2020/02/Kalimba.mp3"></audio>
|
||||
<p><br></p>
|
||||
<h3>contenteditable</h3>
|
||||
<p>
|
||||
While Gemini does not support newlines on a regular text line when editing a "p" tag in the browser
|
||||
<br>
|
||||
the default behavior for "enter" will create a "br" and not a new "p".
|
||||
</p>
|
||||
<p><br></p>
|
||||
<blockquote>
|
||||
<div>The same is also true for ">" lines except in the browser with "blockquote" tags</div>
|
||||
<div>the default behavior for "enter" will create a "div" and not a new "p".</div>
|
||||
</blockquote>
|
||||
<p><br></p>
|
||||
<pre>
|
||||
Newlines are respected by "pre" tags however also when you are editing one in a brower
|
||||
<br>
|
||||
the default behavior for "enter" will create a "br".
|
||||
</pre>
|
||||
</body>
|
||||
<!-- <script src="gmi.min.js></script> -->
|
||||
</html>
|
||||
Loading…
Reference in a new issue