Add inline image support

go.mod

@@ -1,8 +1,13 @@
 module git.sr.ht/~sircmpwn/kineto
 
-go 1.16
+go 1.21
 
 require (
 	git.sr.ht/~adnano/go-gemini v0.1.17
 	git.sr.ht/~sircmpwn/getopt v0.0.0-20191230200459-23622cc906b3
 )
+
+require (
+	golang.org/x/net v0.0.0-20210119194325-5f4716e94777 // indirect
+	golang.org/x/text v0.3.3 // indirect
+)

main.go

@@ -10,6 +10,7 @@ import (
 	"net/http"
 	"net/url"
 	"os"
+	"slices"
 	"strings"
 	"time"
 	"unicode"
@@ -99,6 +100,21 @@ var gemtextPage = template.Must(template.
 				return nil
 			}
 		},
+		"is_image": func(s string) bool {
+			u, err := url.Parse(s)
+
+			if err != nil {
+				return false
+			}
+
+			parts := strings.Split(u.Path, ".")
+			extension := parts[len(parts)-1]
+
+			// Source: https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
+			knownExtensions := []string{"apng", "png", "avif", "gif", "jpg", "jpeg", "jfif", "pjpeg", "pjp", "png", "svg", "webp", "bmp", "ico", "cur", "tif", "tiff"}
+
+			return slices.Contains(knownExtensions, extension)
+		},
 		"url": func(ctx *GemtextContext, s string) template.URL {
 			u, err := url.Parse(s)
 
@@ -173,7 +189,9 @@ var gemtextPage = template.Must(template.
 <article{{if .Lang}} lang="{{.Lang}}"{{end}}>
 	{{ $ctx := . -}}
 	{{- $isList := false -}}
+
 	{{- range .Lines -}}
+
 	{{- if and $isList (not (. | li)) }}
 	</ul>
 	{{- $isList = false -}}
@@ -187,10 +205,18 @@ var gemtextPage = template.Must(template.
 	{{- with . | link }}
 	{{- $isList = false -}}
 	<p>
+	{{- if ( .URL | is_image) -}}
+	<img
+		src="{{.URL | url $ctx}}"
+		{{if .Name}}alt="{{.Name}}" title="{{.Name}}"{{end}}
+	>
+	{{- else -}}
 	<a
 		href="{{.URL | url $ctx}}"
 	>{{if .Name}}{{.Name}}{{else}}{{.URL}}{{end}}</a>
 	{{- end -}}
+	</p>
+	{{- end -}}
 
 	{{- with . | quote }}
 	{{- $isList = false -}}
@@ -216,7 +242,7 @@ var gemtextPage = template.Must(template.
 
 	{{- with . | text }}
 	{{- $isList = false }}
-	<p>{{.}}
+	<p>{{.}}</p>
 	{{- end -}}
 
 	{{- with . | li }}
@@ -318,6 +344,10 @@ li:not(:last-child) {
 	margin-bottom: 0.5rem;
 }
 
+img {
+	max-width: 100%;
+}
+
 a {
 	position: relative;
 }