2021-02-24 19:50:41 +00:00
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 < / h 1 >
< blockquote style = \ \ "margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\" > a bridge between HTML and Gemini < / b l o c k q u o t e >
< 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 < / h 2 >
< 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 < / l i >
< li > preformatted blocks < / l i >
< li > lists < / l i >
< li > quotes < / l i >
< li > headings < / l i >
< / u l >
< 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
< / p r e >
< p > < / p >
< h3 style = \ \ "margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\" > inline media < / h 3 >
2021-02-24 20:13:41 +00:00
< a href = \ \ "video.mp4\\" style = \ \ "display:block;\\" > video with title prop < / a >
< a href = \ \ "image.jpg\\" style = \ \ "display:block;\\" > image with title prop < / a >
< a href = \ \ "audio.mp3\\" style = \ \ "display:block;\\" > audio with title prop < / a >
< a href = \ \ "video-with-no-title.mp4\\" style = \ \ "display:block;\\" > video - with - no - title . mp4 < / a >
< a href = \ \ "image-with-no-title.jpg\\" style = \ \ "display:block;\\" > image - with - no - title . jpg < / a >
< a href = \ \ "audio-with-no-title.mp3\\" style = \ \ "display:block;\\" > audio - with - no - title . mp3 < / a > "
2021-02-24 19:50:41 +00:00
` );
expect ( toHTML ( gemtext , { body : true , css : "none" } ) ) . toMatchInlineSnapshot ( `
" < h1 > gmi - web < / h 1 >
< blockquote > a bridge between HTML and Gemini < / b l o c k q u o t e >
< 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 < / h 2 >
< p > < / p >
< p > gmi - web makes writing HTML documents as simple as learning the handful of Gemini line - types : < / p >
< ul >
< li > paragraphs < / l i >
< li > preformatted blocks < / l i >
< li > lists < / l i >
< li > quotes < / l i >
< li > headings < / l i >
< / u l >
< 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
< / p r e >
< p > < / p >
< h3 > inline media < / h 3 >
2021-02-24 20:13:41 +00:00
< a href = \ \ "video.mp4\\" > video with title prop < / a >
< a href = \ \ "image.jpg\\" > image with title prop < / a >
< a href = \ \ "audio.mp3\\" > audio with title prop < / a >
< a href = \ \ "video-with-no-title.mp4\\" > video - with - no - title . mp4 < / a >
< a href = \ \ "image-with-no-title.jpg\\" > image - with - no - title . jpg < / a >
< a href = \ \ "audio-with-no-title.mp3\\" > audio - with - no - title . mp3 < / a > "
2021-02-24 19:50:41 +00:00
` );
} ) ;
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 : 20 px ; } a { display : block ; } pre { overflow - y : auto ; } img , audio , video { display : block ; max - width : 100 % ; } body { margin : 0 auto ; padding : 0.5 rem ; max - width : 48 rem ; hyphens : manual ; } p { font - family : georgia , times , serif ; font - size : 1.25 rem ; line - height : 1.5 ; text - indent : 0 rem ; } a { font - size : 1.25 rem ; font - style : normal ; font - family : georgia , times , serif ; line - height : 1.5 ; text - decoration : underline ; } pre { padding : 1 rem ; font - family : consolas , monaco , monospace ; font - size : 1 rem ; line - height : 1 ; } h1 { font - family : avenir , helvetica , arial , sans - serif ; font - size : 3 rem ; line - height : 1.25 ; } h2 { font - family : avenir , helvetica , arial , sans - serif ; font - size : 2.25 rem ; line - height : 1.25 ; } h3 { font - family : avenir , helvetica , arial , sans - serif ; font - size : 1.5 rem ; line - height : 1.25 ; } ul { padding - left : 1 rem ; list - style - type : circle ; font - size : 1.25 rem ; font - family : georgia , times , serif ; line - height : 1.25 ; } blockquote { margin - left : 0 ; margin - right : 0 ; padding - left : 0.5 rem ; border - left - width : 0.5 rem ; border - left - style : solid ; font - family : georgia , times , serif ; font - size : 1.25 rem ; 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 ; } } < / s t y l e >
< title > gmi - web < / t i t l e >
< meta name = \ \ "author\\" content = \ \ "anon\\" >
< meta name = \ \ "description\\" content = \ \ "g...\\" >
< / h e a d >
< body >
< h1 > gmi - web < / h 1 >
< blockquote > a bridge between HTML and Gemini < / b l o c k q u o t e >
< 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 < / h 2 >
< p > < / p >
< p > gmi - web makes writing HTML documents as simple as learning the handful of Gemini line - types : < / p >
< ul >
< li > paragraphs < / l i >
< li > preformatted blocks < / l i >
< li > lists < / l i >
< li > quotes < / l i >
< li > headings < / l i >
< / u l >
< 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
< / p r e >
< p > < / p >
< h3 > inline media < / h 3 >
2021-02-24 20:13:41 +00:00
< a href = \ \ "video.mp4\\" > video with title prop < / a >
< a href = \ \ "image.jpg\\" > image with title prop < / a >
< a href = \ \ "audio.mp3\\" > audio with title prop < / a >
< a href = \ \ "video-with-no-title.mp4\\" > video - with - no - title . mp4 < / a >
< a href = \ \ "image-with-no-title.jpg\\" > image - with - no - title . jpg < / a >
< a href = \ \ "audio-with-no-title.mp3\\" > audio - with - no - title . mp3 < / a >
2021-02-24 19:50:41 +00:00
< / b o d y >
< / h t m l >
"
` );
} ) ;
test ( "--image, --audio, --video" , ( ) => {
expect (
toHTML ( gemtext , {
body : true ,
image : [ "jpg" ] ,
video : [ "mp4" ] ,
audio : [ "mp3" ] ,
} )
) . toMatchInlineSnapshot ( `
2021-02-24 19:57:59 +00:00
"<h1 style=\\" margin - top : 0 ; margin - bottom : 0 ; overflow - wrap : break - word ; \ \ " > gmi - web < / h 1 >
< blockquote style = \ \ "margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\" > a bridge between HTML and Gemini < / b l o c k q u o t e >
< 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 >
2021-02-24 19:50:41 +00:00
< p > < / p >
2021-02-24 19:57:59 +00:00
< h2 style = \ \ "margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\" > line - types < / h 2 >
2021-02-24 19:50:41 +00:00
< p > < / p >
2021-02-24 19:57:59 +00:00
< 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;\\" >
2021-02-24 19:50:41 +00:00
< li > paragraphs < / l i >
< li > preformatted blocks < / l i >
< li > lists < / l i >
< li > quotes < / l i >
< li > headings < / l i >
< / u l >
< p > < / p >
2021-02-24 19:57:59 +00:00
< 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;\\" >
2021-02-24 19:50:41 +00:00
if you are
familiar with markdown
it ' s kinda like that
but even simpler
< / p r e >
< p > < / p >
2021-02-24 19:57:59 +00:00
< h3 style = \ \ "margin-top:0;margin-bottom:0;overflow-wrap:break-word;\\" > inline media < / h 3 >
2021-02-24 20:13:41 +00:00
< video controls src = \ \ "video.mp4\\" title = \ \ "video with title prop\\" > < / v i d e o >
< img src = \ \ "image.jpg\\" title = \ \ "image with title prop\\" > < / i m g >
< audio controls src = \ \ "audio.mp3\\" title = \ \ "audio with title prop\\" > < / a u d i o >
< video controls src = \ \ "video-with-no-title.mp4\\" > < / v i d e o >
< img src = \ \ "image-with-no-title.jpg\\" > < / i m g >
< audio controls src = \ \ "audio-with-no-title.mp3\\" > < / a u d i o > "
2021-02-24 19:50:41 +00:00
` );
} ) ;
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" ,
2021-02-24 20:13:41 +00:00
"title" : "video with title prop" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
"href" : "image.jpg" ,
2021-02-24 20:13:41 +00:00
"title" : "image with title prop" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
"href" : "audio.mp3" ,
2021-02-24 20:13:41 +00:00
"title" : "audio with title prop" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
2021-02-24 20:13:41 +00:00
"href" : "video-with-no-title.mp4" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
2021-02-24 20:13:41 +00:00
"href" : "image-with-no-title.jpg" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
2021-02-24 20:13:41 +00:00
"href" : "audio-with-no-title.mp3" ,
2021-02-24 19:50:41 +00:00
} ,
Object {
"text" : "" ,
} ,
]
` );
} ) ;