testing WIP

2021-02-24 19:50:41 +00:00 · 2021-02-24 19:50:41 +00:00 · 7d1ce07a63
parent cae50a7a93
commit 7d1ce07a63
5 changed files with 4435 additions and 3 deletions
--- a/example.gmi
+++ b/example.gmi
@ -0,0 +1,30 @@
+# gmi-web
+> a bridge between HTML and Gemini
+=> https://codeberg.org/talon/gmi-web
+=> https://www.npmjs.com/package/gmi-web-cli on NPM 
+
+## line-types
+
+gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:
+* paragraphs 
+* preformatted blocks 
+* lists
+* quotes 
+* headings 
+
+```if you are familiar with markdown it's kinda like that but even simpler
+if you are
+   familiar with markdown
+it's        kinda like that
+
+
+but even simpler
+```
+
+### inline media
+=> video.mp4 video
+=> image.jpg image 
+=> audio.mp3 audio 
+=> video-no-title.mp4 
+=> image-no-title.mp4 
+=> audio-no-title.mp4 
--- a/html.js
+++ b/html.js
@ -5,7 +5,7 @@ import * as CSS from "./css.js";

 export const GMI_REGEX = /^((=>\s?(?<href>[^\s]+)(\s(?<title>.+))?)|(?<pre>```\s?(?<alt>.+)?)|(###\s?(?<h3>.+))|(##\s?(?<h2>.+))|(#\s?(?<h1>.+))|(\*\s?(?<li>.+))|(>\s?(?<quote>.+))|(?<text>(.+)?))$/;
 export const tokenize = (gemtext) =>
-  gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups);
+  JSON.parse(JSON.stringify(gemtext.split("\n").map((line) => GMI_REGEX.exec(line).groups)));

 export function block(
  { text, href, title, pre, alt, h1, h2, h3, li, quote },
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -22,7 +22,10 @@
    "cli.js"
  ],
  "scripts": {
-    "prepare": "scdoc < gmi-web.1.scd > gmi-web.1 && prettier --write ."
+    "test": "NODE_OPTIONS=--experimental-vm-modules jest",
+    "test:watch": "NODE_OPTIONS=--experimental-vm-modules jest --watch",
+    "test:update": "NODE_OPTIONS=--experimental-vm-modules jest --updateSnapshot",
+    "prepare": "scdoc < gmi-web.1.scd > gmi-web.1 && prettier --write . && npm run test"
  },
  "dependencies": {
    "css": "^3.0.0",
@ -32,6 +35,7 @@
    "yargs": "^16.2.0"
  },
  "devDependencies": {
+    "jest": "^26.6.3",
    "prettier": "^2.2.1"
  },
  "repository": {
--- a/spec.js
+++ b/spec.js
@ -0,0 +1,283 @@
+import { readFileSync } from "fs";
+import { resolve } from "path";
+import { tokenize, toHTML } from "./html.js";
+
+const gemtext = readFileSync(resolve("./example.gmi"), "utf-8");
+
+test("--body", () => {
+  expect(toHTML(gemtext, { body: true })).toMatchInlineSnapshot(`
+    "<h1 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">gmi-web</h1>
+    <blockquote style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">a bridge between HTML and Gemini</blockquote>
+    <a href=\\"https://codeberg.org/talon/gmi-web\\" style=\\"display:block;\\">https://codeberg.org/talon/gmi-web</a>
+    <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\" style=\\"display:block;\\">on NPM </a>
+    <p></p>
+    <h2 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">line-types</h2>
+    <p></p>
+    <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
+    <ul style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">
+    <li>paragraphs </li>
+    <li>preformatted blocks </li>
+    <li>lists</li>
+    <li>quotes </li>
+    <li>headings </li>
+    </ul>
+    <p></p>
+    <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\" style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;overflow-y:auto;\\">
+    if you are
+       familiar with markdown
+    it's        kinda like that
+
+
+    but even simpler
+    </pre>
+    <p></p>
+    <h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3>
+    <a href=\\"video.mp4\\" style=\\"display:block;\\">video</a>
+    <a href=\\"image.jpg\\" style=\\"display:block;\\">image </a>
+    <a href=\\"audio.mp3\\" style=\\"display:block;\\">audio </a>
+    <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; video-no-title.mp4 </p>
+    <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; image-no-title.mp4 </p>
+    <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; audio-no-title.mp4 </p>"
+  `);
+  expect(toHTML(gemtext, { body: true, css: "none" })).toMatchInlineSnapshot(`
+    "<h1>gmi-web</h1>
+    <blockquote>a bridge between HTML and Gemini</blockquote>
+    <a href=\\"https://codeberg.org/talon/gmi-web\\">https://codeberg.org/talon/gmi-web</a>
+    <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\">on NPM </a>
+    <p></p>
+    <h2>line-types</h2>
+    <p></p>
+    <p>gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
+    <ul>
+    <li>paragraphs </li>
+    <li>preformatted blocks </li>
+    <li>lists</li>
+    <li>quotes </li>
+    <li>headings </li>
+    </ul>
+    <p></p>
+    <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\">
+    if you are
+       familiar with markdown
+    it's        kinda like that
+
+
+    but even simpler
+    </pre>
+    <p></p>
+    <h3>inline media</h3>
+    <a href=\\"video.mp4\\">video</a>
+    <a href=\\"image.jpg\\">image </a>
+    <a href=\\"audio.mp3\\">audio </a>
+    <p>=&gt; video-no-title.mp4 </p>
+    <p>=&gt; image-no-title.mp4 </p>
+    <p>=&gt; audio-no-title.mp4 </p>"
+  `);
+});
+
+test("--html en", () => {
+  expect(
+    toHTML(gemtext, {
+      html: "en",
+      author: "anon",
+      descriptions: true,
+    })
+  ).toMatchInlineSnapshot(`
+    "<!DOCTYPE html>
+    <html lang=\\"en\\" dir=\\"undefined\\" style=''>
+    <head>
+    <meta charset=\\"undefined\\">
+    <meta name=\\"viewport\\" content=\\"width=device-width,initial-scale=1\\">
+    <meta name=\\"color-scheme\\" content=\\"dark light\\">
+    <style>p,pre,ul,blockquote,h1,h2,h3{margin-top:0;margin-bottom:0;overflow-wrap:break-word;}p:empty{padding-bottom:20px;}a{display:block;}pre{overflow-y:auto;}img,audio,video{display:block;max-width:100%;}body{margin:0 auto;padding:0.5rem;max-width:48rem;hyphens:manual;}p{font-family:georgia, times, serif;font-size:1.25rem;line-height:1.5;text-indent:0rem;}a{font-size:1.25rem;font-style:normal;font-family:georgia, times, serif;line-height:1.5;text-decoration:underline;}pre{padding:1rem;font-family:consolas, monaco, monospace;font-size:1rem;line-height:1;}h1{font-family:avenir, helvetica, arial, sans-serif;font-size:3rem;line-height:1.25;}h2{font-family:avenir, helvetica, arial, sans-serif;font-size:2.25rem;line-height:1.25;}h3{font-family:avenir, helvetica, arial, sans-serif;font-size:1.5rem;line-height:1.25;}ul{padding-left:1rem;list-style-type:circle;font-size:1.25rem;font-family:georgia, times, serif;line-height:1.25;}blockquote{margin-left:0;margin-right:0;padding-left:0.5rem;border-left-width:0.5rem;border-left-style:solid;font-family:georgia, times, serif;font-size:1.25rem;font-style:italic;line-height:1.25;}html,body,h1,h2,h3,p,a,ul,blockquote,pre::selection{color:black;background-color:white;}blockquote{border-color:black;}pre,::selection,a:hover{color:white;background-color:black;}@media (prefers-color-scheme: dark){html,body,h1,h2,h3,p,a,ul,blockquote,pre::selection{color:white;background-color:black;}blockquote{border-color:white;}pre,::selection,a:hover{color:black;background-color:white;}}</style>
+    <title>gmi-web</title>
+    <meta name=\\"author\\" content=\\"anon\\">
+    <meta name=\\"description\\" content=\\"g...\\">
+    </head>
+    <body>
+    <h1>gmi-web</h1>
+    <blockquote>a bridge between HTML and Gemini</blockquote>
+    <a href=\\"https://codeberg.org/talon/gmi-web\\">https://codeberg.org/talon/gmi-web</a>
+    <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\">on NPM </a>
+    <p></p>
+    <h2>line-types</h2>
+    <p></p>
+    <p>gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
+    <ul>
+    <li>paragraphs </li>
+    <li>preformatted blocks </li>
+    <li>lists</li>
+    <li>quotes </li>
+    <li>headings </li>
+    </ul>
+    <p></p>
+    <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\">
+    if you are
+       familiar with markdown
+    it's        kinda like that
+
+
+    but even simpler
+    </pre>
+    <p></p>
+    <h3>inline media</h3>
+    <a href=\\"video.mp4\\">video</a>
+    <a href=\\"image.jpg\\">image </a>
+    <a href=\\"audio.mp3\\">audio </a>
+    <p>=&gt; video-no-title.mp4 </p>
+    <p>=&gt; image-no-title.mp4 </p>
+    <p>=&gt; audio-no-title.mp4 </p>
+    </body>
+    </html>
+    "
+  `);
+});
+
+test("--image, --audio, --video", () => {
+  expect(
+    toHTML(gemtext, {
+      body: true,
+      image: ["jpg"],
+      video: ["mp4"],
+      audio: ["mp3"],
+    })
+  ).toMatchInlineSnapshot(`
+    "<h1>gmi-web</h1>
+    <blockquote>a bridge between HTML and Gemini</blockquote>
+    <a href=\\"https://codeberg.org/talon/gmi-web\\">https://codeberg.org/talon/gmi-web</a>
+    <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\">on NPM </a>
+    <p></p>
+    <h2>line-types</h2>
+    <p></p>
+    <p>gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
+    <ul>
+    <li>paragraphs </li>
+    <li>preformatted blocks </li>
+    <li>lists</li>
+    <li>quotes </li>
+    <li>headings </li>
+    </ul>
+    <p></p>
+    <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\">
+    if you are
+       familiar with markdown
+    it's        kinda like that
+
+
+    but even simpler
+    </pre>
+    <p></p>
+    <h3>inline media</h3>
+    <video title=\\"undefined\\"></video>
+    <img title=\\"undefined\\"></img>
+    <audio title=\\"undefined\\"></audio>
+    <p>=&gt; video-no-title.mp4 </p>
+    <p>=&gt; image-no-title.mp4 </p>
+    <p>=&gt; audio-no-title.mp4 </p>"
+  `);
+});
+
+test("tokenize", () => {
+  expect(tokenize(gemtext, { body: true })).toMatchInlineSnapshot(`
+    Array [
+      Object {
+        "h1": "gmi-web",
+      },
+      Object {
+        "quote": "a bridge between HTML and Gemini",
+      },
+      Object {
+        "href": "https://codeberg.org/talon/gmi-web",
+      },
+      Object {
+        "href": "https://www.npmjs.com/package/gmi-web-cli",
+        "title": "on NPM ",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "h2": "line-types",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "text": "gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:",
+      },
+      Object {
+        "li": "paragraphs ",
+      },
+      Object {
+        "li": "preformatted blocks ",
+      },
+      Object {
+        "li": "lists",
+      },
+      Object {
+        "li": "quotes ",
+      },
+      Object {
+        "li": "headings ",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "alt": "if you are familiar with markdown it's kinda like that but even simpler",
+        "pre": "\`\`\`if you are familiar with markdown it's kinda like that but even simpler",
+      },
+      Object {
+        "text": "if you are",
+      },
+      Object {
+        "text": "   familiar with markdown",
+      },
+      Object {
+        "text": "it's        kinda like that",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "text": "but even simpler",
+      },
+      Object {
+        "pre": "\`\`\`",
+      },
+      Object {
+        "text": "",
+      },
+      Object {
+        "h3": "inline media",
+      },
+      Object {
+        "href": "video.mp4",
+        "title": "video",
+      },
+      Object {
+        "href": "image.jpg",
+        "title": "image ",
+      },
+      Object {
+        "href": "audio.mp3",
+        "title": "audio ",
+      },
+      Object {
+        "text": "=> video-no-title.mp4 ",
+      },
+      Object {
+        "text": "=> image-no-title.mp4 ",
+      },
+      Object {
+        "text": "=> audio-no-title.mp4 ",
+      },
+      Object {
+        "text": "",
+      },
+    ]
+  `);
+});