templates: allow for alt-text on profile photo

Fixes accessibility issue and allows non-sighted users to learn how
your profile picture looks.

Generating alt-text with AI might be a nice idea, except I don't know
how to integrate this yet.

1 files changed, 18 insertions, 0 deletions

diff --git a/kittybox-rs/templates/src/mf2.rs b/kittybox-rs/templates/src/mf2.rs
index eaac621..893cf7b 100644
--- a/kittybox-rs/templates/src/mf2.rs
+++ b/kittybox-rs/templates/src/mf2.rs
@@ -36,6 +36,12 @@ markup::define! {
                     a."u-author"[href=author["properties"]["uid"][0].as_str().unwrap()] {
                         @if let Some(photo) = author["properties"]["photo"][0].as_str() {
                             img[src=photo, loading="lazy"];
+                        } else if author["properties"]["photo"][0].is_object() {
+                            img[
+                                src=author["properties"]["photo"][0]["value"].as_str().unwrap(),
+                                alt=author["properties"]["photo"][0]["alt"].as_str().unwrap(),
+                                loading="lazy"
+                            ];
                         }
                         @author["properties"]["name"][0].as_str().unwrap()
                     }
@@ -92,7 +98,14 @@ markup::define! {
                         a.larger."u-author"[href=author["properties"]["uid"][0].as_str().unwrap()] {
                             @if let Some(photo) = author["properties"]["photo"][0].as_str() {
                                 img[src=photo, loading="lazy"];
+                            } else if let Some(photo) = author["properties"]["photo"][0].as_object() {
+                                img[
+                                    src=photo["value"].as_str().unwrap(),
+                                    alt=photo["alt"].as_str().unwrap(),
+                                    loading="lazy"
+                                ];
                             }
+
                             @author["properties"]["name"][0].as_str().unwrap()
                         }
                     }
@@ -262,6 +275,11 @@ markup::define! {
         article."h-card" {
             @if card["properties"]["photo"][0].is_string() {
                 img."u-photo"[src=card["properties"]["photo"][0].as_str().unwrap()];
+            } else if card["properties"]["photo"][0].is_object() {
+                img."u-photo"[
+                    src=card["properties"]["photo"][0]["value"].as_str().unwrap(),
+                    alt=card["properties"]["photo"][0]["alt"].as_str().unwrap()
+                ];
             }
             h1 {
                 a."u-url"."u-uid"."p-name"[href=card["properties"]["uid"][0].as_str().unwrap()] {