specter/gmi-web
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

readme

Browse source
This commit is contained in:
Talon Poole 2021-01-29 07:03:10 +00:00
parent d77cc84a06
commit 405e34fafc
2 changed files with 22 additions and 90 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
README.md
View file

@ -2,14 +2,12 @@
**Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini. **Vision**: Provide the lowest common denominator between HTML/CSS/JS and Gemini.
## HTML spec # HTML spec
Check out the annotated [example.html](https://gmi.eattherich.club/example.html)!
Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard: Due to the ambiguity of HTML several translations from Gemini exist in the wild. I propose the following standard:
``` ```
<ul><li></ul> ↔ * <li> ↔ *
<blockquote> ↔ > <blockquote> ↔ >
<pre> ↔ ``` <pre> ↔ ```
<a> ↔ => <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>`. 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 ## 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"> <meta name="color-scheme" content="dark light">
<link rel="stylesheet" href="gmi.min.css"/> <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](./gmi.css) for your customizing enjoyment!
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`.
```html ```html
<html style="--foreground:#555555; --background:#9EEBCF;"> <html style="--foreground:#555555; --background:#9EEBCF;">
@ -87,6 +78,10 @@ Options:
--css Include gmi.css [boolean] [default: true] --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 <!-- TODO
### gmi.js ### 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
View file

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