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

fix inline media src and title

Browse source
This commit is contained in:
Talon Poole 2021-02-24 19:57:59 +00:00
parent 7d1ce07a63
commit 427bcecefd
3 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
example.gmi
View file

@ -23,8 +23,8 @@ but even simpler
### inline media ### inline media
=> video.mp4 video => video.mp4 video
=> image.jpg image => image.jpg image
=> audio.mp3 audio => audio.mp3 audio
=> video-no-title.mp4 => video-no-title.mp4
=> image-no-title.mp4 => image-no-title.mp4
=> audio-no-title.mp4 => audio-no-title.mp4

9
html.js
View file

@ -42,13 +42,16 @@ export function block(
exts.some((ext) => new RegExp(`\.${ext}$`).test(url)); exts.some((ext) => new RegExp(`\.${ext}$`).test(url));
if (options.image && matchesExt(href, options.image)) { if (options.image && matchesExt(href, options.image)) {
type = "img"; type = "img";
props += ` src="${href}"` + alt ? ` title="${alt}"` : ""; props += ` src="${href}"`
props += title ? ` title="${title}"` : "";
} else if (options.audio && matchesExt(href, options.audio)) { } else if (options.audio && matchesExt(href, options.audio)) {
type = "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)) { } else if (options.video && matchesExt(href, options.video)) {
type = "video"; type = "video";
props += ` controls src="${href}"` + alt ? ` title="${alt}"` : ""; props += ` controls src="${href}"`
props += title ? ` title="${title}"` : "";
} else { } else {
type = "a"; type = "a";
content = title || href; content = title || href;

46
spec.js
View file

@ -33,8 +33,8 @@ test("--body", () => {
<p></p> <p></p>
<h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3> <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=\\"video.mp4\\" style=\\"display:block;\\">video</a>
<a href=\\"image.jpg\\" style=\\"display:block;\\">image </a> <a href=\\"image.jpg\\" style=\\"display:block;\\">image</a>
<a href=\\"audio.mp3\\" style=\\"display:block;\\">audio </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; 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; image-no-title.mp4 </p>
<p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; audio-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> <p></p>
<h3>inline media</h3> <h3>inline media</h3>
<a href=\\"video.mp4\\">video</a> <a href=\\"video.mp4\\">video</a>
<a href=\\"image.jpg\\">image </a> <a href=\\"image.jpg\\">image</a>
<a href=\\"audio.mp3\\">audio </a> <a href=\\"audio.mp3\\">audio</a>
<p>=&gt; video-no-title.mp4 </p> <p>=&gt; video-no-title.mp4 </p>
<p>=&gt; image-no-title.mp4 </p> <p>=&gt; image-no-title.mp4 </p>
<p>=&gt; audio-no-title.mp4 </p>" <p>=&gt; audio-no-title.mp4 </p>"
@ -122,8 +122,8 @@ test("--html en", () => {
<p></p> <p></p>
<h3>inline media</h3> <h3>inline media</h3>
<a href=\\"video.mp4\\">video</a> <a href=\\"video.mp4\\">video</a>
<a href=\\"image.jpg\\">image </a> <a href=\\"image.jpg\\">image</a>
<a href=\\"audio.mp3\\">audio </a> <a href=\\"audio.mp3\\">audio</a>
<p>=&gt; video-no-title.mp4 </p> <p>=&gt; video-no-title.mp4 </p>
<p>=&gt; image-no-title.mp4 </p> <p>=&gt; image-no-title.mp4 </p>
<p>=&gt; audio-no-title.mp4 </p> <p>=&gt; audio-no-title.mp4 </p>
@ -142,15 +142,15 @@ test("--image, --audio, --video", () => {
audio: ["mp3"], audio: ["mp3"],
}) })
).toMatchInlineSnapshot(` ).toMatchInlineSnapshot(`
"<h1>gmi-web</h1> "<h1 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">gmi-web</h1>
<blockquote>a bridge between HTML and Gemini</blockquote> <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\\">https://codeberg.org/talon/gmi-web</a> <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\\">on NPM </a> <a href=\\"https://www.npmjs.com/package/gmi-web-cli\\" style=\\"display:block;\\">on NPM </a>
<p></p> <p></p>
<h2>line-types</h2> <h2 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">line-types</h2>
<p></p> <p></p>
<p>gmi-web makes writing HTML documents as simple as learning the handful of Gemini line-types:</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> <ul style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">
<li>paragraphs </li> <li>paragraphs </li>
<li>preformatted blocks </li> <li>preformatted blocks </li>
<li>lists</li> <li>lists</li>
@ -158,7 +158,7 @@ test("--image, --audio, --video", () => {
<li>headings </li> <li>headings </li>
</ul> </ul>
<p></p> <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 if you are
familiar with markdown familiar with markdown
it's kinda like that it's kinda like that
@ -167,13 +167,13 @@ test("--image, --audio, --video", () => {
but even simpler but even simpler
</pre> </pre>
<p></p> <p></p>
<h3>inline media</h3> <h3 style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">inline media</h3>
<video title=\\"undefined\\"></video> <video controls src=\\"video.mp4\\" title=\\"video\\"></video>
<img title=\\"undefined\\"></img> <img src=\\"image.jpg\\" title=\\"image\\"></img>
<audio title=\\"undefined\\"></audio> <audio controls src=\\"audio.mp3\\" title=\\"audio\\"></audio>
<p>=&gt; video-no-title.mp4 </p> <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; video-no-title.mp4 </p>
<p>=&gt; image-no-title.mp4 </p> <p style=\\"margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\">=&gt; image-no-title.mp4 </p>
<p>=&gt; audio-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 { Object {
"href": "image.jpg", "href": "image.jpg",
"title": "image ", "title": "image",
}, },
Object { Object {
"href": "audio.mp3", "href": "audio.mp3",
"title": "audio ", "title": "audio",
}, },
Object { Object {
"text": "=> video-no-title.mp4 ", "text": "=> video-no-title.mp4 ",