From ed549aaa423f10d15171c678303fea679d997220 Mon Sep 17 00:00:00 2001
From: Paul Buetow <paul@buetow.org>
Date: Sun, 21 Jun 2026 09:45:21 +0300
Subject: Fix W3C HTML validation errors in generated pages; release 0.10.1

Every shuriken-generated page failed W3C validation. Fixed across the
templates and the bash thumbnail builders so all page categories (splash,
gallery, photo view, details, stats overview, stats filter mini-albums and
redirect stubs) validate cleanly:

- Add <!DOCTYPE html>, <html lang="en"> and <meta charset="utf-8"> to the
  header, splash and redirect templates.
- Drop the obsolete type="text/css" on <style> and border='0' on <img>.
- Fix invalid CSS "margin: 2 auto" -> "margin: 2px auto".
- Add required alt attributes to every <img> (splash, thumbnails, views).
- Replace the obsolete name attribute on <a> thumbnail anchors with id (in
  album-render.source.sh and stats-filter-album.source.sh, where the markup
  is actually built, plus preview.tmpl for consistency).
- Give redirect stubs a <title>; drop trailing slashes on void elements.

Updated the affected cli.sh assertions and rebuilt bin/shuriken.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 share/templates/default/details.tmpl  | 4 ++--
 share/templates/default/footer.tmpl   | 2 +-
 share/templates/default/header.tmpl   | 8 +++++---
 share/templates/default/preview.tmpl  | 4 ++--
 share/templates/default/redirect.tmpl | 5 ++++-
 share/templates/default/splash.tmpl   | 8 +++++---
 share/templates/default/view.tmpl     | 4 ++--
 7 files changed, 21 insertions(+), 14 deletions(-)

(limited to 'share')
diff --git a/share/templates/default/details.tmpl b/share/templates/default/details.tmpl
index f8e09d3..cd70328 100644
--- a/share/templates/default/details.tmpl
+++ b/share/templates/default/details.tmpl
@@ -9,12 +9,12 @@ cat <<END
     <div class="details-layout">
         <div class="details-photo-column">
             <a class="details-photo-link" href="${render_page_num_html}-${render_view_next_html}-details.html">
-                <img class='view details-photo ${render_animation_class_html}' border='0' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'${render_exif_tooltip_attr} />
+                <img class='view details-photo ${render_animation_class_html}' alt='${render_photo_html}' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'${render_exif_tooltip_attr}>
             </a>
             <div class="navigator details-navigator">
                 <a href="${render_page_num_html}-${render_view_prev_html}-details.html" class="arrow">&lArr;</a>
                 <a href="${render_page_num_html}-${render_preview_num_html}.html">Image view</a> |
-                <a href ='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a>
+                <a href='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a>
                 <a href="${render_page_num_html}-${render_view_next_html}-details.html" class="arrow">&rArr;</a>
             </div>
         </div>
diff --git a/share/templates/default/footer.tmpl b/share/templates/default/footer.tmpl
index c9906a5..3b8865c 100644
--- a/share/templates/default/footer.tmpl
+++ b/share/templates/default/footer.tmpl
@@ -1,7 +1,7 @@
 if [ "${render_tarball_include}" = 'yes' ]; then
 cat <<END
 <div class="footer">
-    Download all photos in original size <a href='${render_backhref_html}/${render_tarball_name_html}'>here</a><br /><br />
+    Download all photos in original size <a href='${render_backhref_html}/${render_tarball_name_html}'>here</a><br><br>
 </div>
 END
 fi
diff --git a/share/templates/default/header.tmpl b/share/templates/default/header.tmpl
index 37c3559..4ba159e 100644
--- a/share/templates/default/header.tmpl
+++ b/share/templates/default/header.tmpl
@@ -1,9 +1,11 @@
 cat <<END
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>${render_title_html}</title>
     <link rel="icon" href="${render_backhref_html}/favicon.ico" type="image/x-icon">
-    <style type="text/css">
+    <style>
         body {
             background-color: #000000;
             color: #ffffff;
@@ -36,7 +38,7 @@ cat <<END
             border: 3px solid #ffffff;
             padding: 3px;
             max-width: 400px;
-            margin: 2 auto;
+            margin: 2px auto;
         }
 
         div.details-panel {
diff --git a/share/templates/default/preview.tmpl b/share/templates/default/preview.tmpl
index a57cb06..f5fdb57 100644
--- a/share/templates/default/preview.tmpl
+++ b/share/templates/default/preview.tmpl
@@ -1,5 +1,5 @@
 cat <<END
-<a name='${render_photo_html}' href='${render_page_num_html}-${render_preview_num_html}.html'>
-  <img class='thumb ${render_animation_class_html}' src='${render_backhref_html}/${render_thumbs_dir_html}/${render_photo_html}' />
+<a id='${render_photo_html}' href='${render_page_num_html}-${render_preview_num_html}.html'>
+  <img class='thumb ${render_animation_class_html}' alt='${render_photo_html}' src='${render_backhref_html}/${render_thumbs_dir_html}/${render_photo_html}'>
 </a>
 END
diff --git a/share/templates/default/redirect.tmpl b/share/templates/default/redirect.tmpl
index b7119aa..4aeb22d 100644
--- a/share/templates/default/redirect.tmpl
+++ b/share/templates/default/redirect.tmpl
@@ -1,6 +1,9 @@
 cat <<END
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="utf-8">
+    <title>Redirecting</title>
     <link rel="icon" href="./favicon.ico" type="image/x-icon">
     <meta http-equiv='refresh' content='0; url=${render_redirect_page_html}.html'>
 </head>
diff --git a/share/templates/default/splash.tmpl b/share/templates/default/splash.tmpl
index 5363978..de5837a 100644
--- a/share/templates/default/splash.tmpl
+++ b/share/templates/default/splash.tmpl
@@ -1,9 +1,11 @@
 cat <<END
-<html>
+<!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="utf-8">
     <title>${render_title_html}</title>
     <link rel="icon" href="${render_backhref_html}/favicon.ico" type="image/x-icon">
-    <style type="text/css">
+    <style>
         body {
             background-color: #000000;
             color: #ffffff;
@@ -68,7 +70,7 @@ cat <<END
     <main class="splash">
         <h1>${render_title_html}</h1>
         <a href="${render_enter_page_html}.html">
-            <img class="splash-photo" src="${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}" />
+            <img class="splash-photo" alt="${render_title_html}" src="${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}">
         </a>
         <p class="enter">
             <a href="${render_enter_page_html}.html">Enter album</a>
diff --git a/share/templates/default/view.tmpl b/share/templates/default/view.tmpl
index c6a0e7e..b1e6c79 100644
--- a/share/templates/default/view.tmpl
+++ b/share/templates/default/view.tmpl
@@ -9,13 +9,13 @@ fi
 cat <<END
 <div class='view'>
     <a href="${render_page_num_html}-${render_view_next_html}.html">
-        <img class='view ${render_animation_class_html}' border='0' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'${render_exif_tooltip_attr} />
+        <img class='view ${render_animation_class_html}' alt='${render_photo_html}' src='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'${render_exif_tooltip_attr}>
     </a>
     <div class="navigator">
         <a href="${render_page_num_html}-${render_view_prev_html}.html" class="arrow">&lArr;</a>
         <a href="page-${render_page_num_html}.html#${render_photo_html}">Thumbnails</a> |
         <a href="${render_page_num_html}-${render_preview_num_html}-details.html">Details</a> |
-        <a href ='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a>
+        <a href='${render_backhref_html}/${render_photos_dir_html}/${render_photo_html}'>Direct link</a>
         <a href="${render_page_num_html}-${render_view_next_html}.html" class="arrow">&rArr;</a>
     </div>
 </div>
-- 
cgit v1.2.3

