add banner image helper and use it in the pages list

Author: emad-elsaid

helpers.go

@@ -7,6 +7,9 @@ import (
 	"slices"
 	"strings"
 	"time"
+
+	"github.com/yuin/goldmark/ast"
+	gast "github.com/yuin/goldmark/ast"
 )
 
 var helpers = template.FuncMap{
@@ -19,6 +22,7 @@ var helpers = template.FuncMap{
 	"isFontAwesome":  IsFontAwesome,
 	"includeJS":      includeJS,
 	"scripts":        scripts,
+	"banner":         Banner,
 }
 
 var ErrHelperRegistered = errors.New("Helper already registered")
@@ -132,3 +136,27 @@ func scripts() template.HTML {
 func IsFontAwesome(i string) bool {
 	return strings.HasPrefix(i, "fa")
 }
+
+func Banner(p Page) string {
+	_, a := p.AST()
+	if a == nil {
+		return ""
+	}
+
+	paragraph := a.FirstChild()
+	if paragraph == nil || paragraph.Kind() != gast.KindParagraph {
+		return ""
+	}
+
+	img := paragraph.FirstChild()
+	if img == nil || img.Kind() != gast.KindImage {
+		return ""
+	}
+
+	image, ok := img.(*ast.Image)
+	if !ok {
+		return ""
+	}
+
+	return string(image.Destination)
+}

templates/pages.html

@@ -1,14 +1,21 @@
 <aside class="menu" dir="auto">
   <div class="menu-list" dir="auto">
     {{- range . -}}
-    <a href="/{{.Name}}" dir="auto">
+
+    <a href="/{{.Name}}" dir="auto" class="is-clearfix">
+
+      {{ with banner . }}
+      <img src="{{.}}" class="mr-3 is-pulled-left" style="display: block; border-radius: 0.5em; object-fit: cover; object-position: 0 50%; max-height: 3em; width: 6em;" />
+      {{ end }}
+
       <span class="is-block">
         {{ .Emoji }}
         {{ $props := properties . }}
         {{ with $props.title }} {{ .Value }} {{ else }} {{ .Name }} {{ end }}
       </span>
       <time class="has-text-grey is-size-7" dir="auto">{{ ago .ModTime }}</time>
-      </a>
+    </a>
+
     {{- end -}}
   </div>
 </aside>