From 427bcecefd726434e83aaed0e11d5f0d17140967 Mon Sep 17 00:00:00 2001
From: Talon Poole <code@talon.computer>
Date: Wed, 24 Feb 2021 19:57:59 +0000
Subject: [PATCH] fix inline media src and title

---
 example.gmi |  4 ++--
 html.js     |  9 ++++++---
 spec.js     | 46 +++++++++++++++++++++++-----------------------
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/example.gmi b/example.gmi
index 0c9bac4..df4aacc 100644
--- a/example.gmi
+++ b/example.gmi
@@ -23,8 +23,8 @@ but even simpler
 
 ### inline media
 => video.mp4 video
-=> image.jpg image 
-=> audio.mp3 audio 
+=> image.jpg image
+=> audio.mp3 audio
 => video-no-title.mp4 
 => image-no-title.mp4 
 => audio-no-title.mp4 
diff --git a/html.js b/html.js
index 4005f39..60f3942 100644
--- a/html.js
+++ b/html.js
@@ -42,13 +42,16 @@ export function block(
       exts.some((ext) => new RegExp(`\.${ext}$`).test(url));
     if (options.image && matchesExt(href, options.image)) {
       type = "img";
-      props += ` src="${href}"` + alt ? ` title="${alt}"` : "";
+      props += ` src="${href}"` 
+      props += title ? ` title="${title}"` : "";
     } else if (options.audio && matchesExt(href, options.audio)) {
       type = "audio";
-      props += ` controls src="${href}"` + alt ? ` title="${alt}"` : "";
+      props += ` controls src="${href}"`
+      props += title ? ` title="${title}"` : "";
     } else if (options.video && matchesExt(href, options.video)) {
       type = "video";
-      props += ` controls src="${href}"` + alt ? ` title="${alt}"` : "";
+      props += ` controls src="${href}"`
+      props += title ? ` title="${title}"` : "";
     } else {
       type = "a";
       content = title || href;
diff --git a/spec.js b/spec.js
index 6363724..ee767b6 100644
--- a/spec.js
+++ b/spec.js
@@ -33,8 +33,8 @@ test("--body", () => {
     <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>
+    <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>"
@@ -67,8 +67,8 @@ test("--body", () => {
     <p></p>
     <h3>inline media</h3>
     <a href=\\"video.mp4\\">video</a>
-    <a href=\\"image.jpg\\">image </a>
-    <a href=\\"audio.mp3\\">audio </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>"
@@ -122,8 +122,8 @@ test("--html en", () => {
     <p></p>
     <h3>inline media</h3>
     <a href=\\"video.mp4\\">video</a>
-    <a href=\\"image.jpg\\">image </a>
-    <a href=\\"audio.mp3\\">audio </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>
@@ -142,15 +142,15 @@ test("--image, --audio, --video", () => {
       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>
+    "<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>line-types</h2>
+    <h2 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">line-types</h2>
     <p></p>
-    <p>gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</p>
-    <ul>
+    <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>
@@ -158,7 +158,7 @@ test("--image, --audio, --video", () => {
     <li>headings </li>
     </ul>
     <p></p>
-    <pre title=\\"if you are familiar with markdown it's kinda like that but even simpler\\">
+    <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
@@ -167,13 +167,13 @@ test("--image, --audio, --video", () => {
     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>"
+    <h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3>
+    <video controls src=\\"video.mp4\\" title=\\"video\\"></video>
+    <img src=\\"image.jpg\\" title=\\"image\\"></img>
+    <audio controls src=\\"audio.mp3\\" title=\\"audio\\"></audio>
+    <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>"
   `);
 });
 
@@ -260,11 +260,11 @@ test("tokenize", () => {
       },
       Object {
         "href": "image.jpg",
-        "title": "image ",
+        "title": "image",
       },
       Object {
         "href": "audio.mp3",
-        "title": "audio ",
+        "title": "audio",
       },
       Object {
         "text": "=> video-no-title.mp4 ",