gmi2html.awk : support des médias §

2021-12-03T14:12:08Z

Hop, j'ai ajouté le support basique des images et des vidéos pour mon script awk permettant de convertir du gemtext en html.

Par la même occasion, plutôt que de casser la structure et le rythme d'un texte, je préfère insérer les images et les vidéos dans un tag "<details>".

Ça a daileurs l'avantage de ne charger les images seulement lorsqu'on clique sur la ligne correspondante. Avec le lazyloading, c'est la bande passante de tous qui est contente. Vous pouvez tester avec cet ancien article :

Où trouver des fonds d'écran?

Désormais, ça ressemble surtout à un projet qui correspond exactement à mes besoins, mais je vous le partage tout de même afin de vous inviter à vous intéresser à awk.

#!/usr/bin/awk -f
# Read gemtext and output html
# modified to put img and vids in <details>

function htmlesc(s) {
    gsub("&","\\&amp;",s)
    gsub("<","\\&lt;",s)
    gsub(">","\\&gt;",s)
    gsub("\"","\\&quot;",s)
    gsub("'","\\&apos;",s)
    return s
}

/^```/ {
	if (pre) { print "</pre>"} else { print "<pre>" }
	pre = (pre + 1) % 2 # toggle pre
	next
}

/^$/ {
	if (ul == 1) { ul = 0; print "</ul>" }
	next
}

!pre && /^\*/ {
	if (ul == 0) { ul = 1; print "<ul>" }
	$1=""
	printf "<li>%s</li>\n", htmlesc($0)
	next
}

!pre && /^=>/ {
	href = htmlesc($2)
	if ( NF > 2 ) { $1 = ""; $2 = ""; title = htmlesc($0) }
	else { title = href }

	if ( match(tolower(href), "\.jpg$")  || \
	     match(tolower(href), "\.jpeg$") || \
	     match(tolower(href), "\.png$")  || \
	     match(tolower(href), "\.gif$")  || \
	     match(tolower(href), "\.svg$") ) {  \

		print "<details>"
		printf "<summary style=\"cursor:pointer\">%s</summary>\n", title
		printf "<img style=\"max-width:100%%\" \
			     src=\"%s\" alt=\"%s\"\
			     loading=\"lazy\"/>\n", href, title
		print "</details>"

	} else if ( match(tolower(href), "\.webm$") || \
		  match(tolower(href), "\.mp4$") ) {
		print "<details>"
		printf "<summary style=\"cursor:pointer\">%s</summary>\n", title
		printf "<video style=\"max-width:100%%\" controls src=\"%s\"></video>\n", href
		print "</details>"
	} else {
		printf "<a href=\"%s\">%s</a><br>\n", href, title
	}

	next
}

!pre && /^###/ { $1=""; printf "<h3>%s</h3>\n", htmlesc($0); next }
!pre && /^##/  { $1=""; printf "<h2>%s</h2>\n", htmlesc($0); next }
!pre && /^#/   { $1=""; printf "<h1>%s</h1>\n", htmlesc($0); next }
!pre && /^>/   { $1=""; printf "<blockquote>%s</blockquote>\n", htmlesc($0); next }
pre { print htmlesc($0); next}
1 { printf "<p>%s</p>\n", htmlesc($0) }

Une réaction? §

Envoyez votre commentaire par mail.

Mode d'emploi de la liste de diffusion pour recevoir les réponses.