Encode recap images as webp instead of png

Author: paviro

assets/recap.js

@@ -166,7 +166,7 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 
     // Handle share/download button clicks
-    document.querySelectorAll('.share-png-btn').forEach(btn => {
+    document.querySelectorAll('.share-webp-btn').forEach(btn => {
       btn.addEventListener('click', async () => {
         const url = btn.dataset.shareUrl;
         const filename = btn.dataset.shareFilename;
@@ -177,11 +177,11 @@ document.addEventListener('DOMContentLoaded', () => {
             // Fetch the image and convert to a File object
             const response = await fetch(url);
             const blob = await response.blob();
-            const file = new File([blob], filename, { type: 'image/png' });
+            const file = new File([blob], filename, { type: 'image/webp' });
 
             // Check if we can share this file
             if (navigator.canShare({ files: [file] })) {
-              // Extract year from filename (e.g., "koshelf_2024_story.png" -> "2024")
+              // Extract year from filename (e.g., "koshelf_2024_story.webp" -> "2024")
               const yearMatch = filename.match(/koshelf_(\d{4})_/);
               const year = yearMatch ? yearMatch[1] : new Date().getFullYear();
 

src/share_image.rs

@@ -40,12 +40,12 @@ impl ShareFormat {
         }
     }
 
-    /// Get the PNG filename for this format
+    /// Get the WebP filename for this format
     pub fn filename(&self) -> &'static str {
         match self {
-            ShareFormat::Story => "share_story.png",
-            ShareFormat::Square => "share_square.png",
-            ShareFormat::Banner => "share_banner.png",
+            ShareFormat::Story => "share_story.webp",
+            ShareFormat::Square => "share_square.webp",
+            ShareFormat::Banner => "share_banner.webp",
         }
     }
 
@@ -90,12 +90,12 @@ pub fn generate_share_image(
     // Render SVG to pixmap
     resvg::render(&tree, resvg::tiny_skia::Transform::default(), &mut pixmap.as_mut());
 
-    // Encode as PNG and write to file
-    let png_data = pixmap.encode_png()
-        .context("Failed to encode PNG")?;
+    // Encode as WebP and write to file
+    let encoder = webp::Encoder::from_rgba(pixmap.data(), width, height);
+    let webp_data = encoder.encode(90.0); // 90% quality for good balance of size/quality
 
-    std::fs::write(output_path, png_data)
-        .context("Failed to write PNG file")?;
+    std::fs::write(output_path, &*webp_data)
+        .context("Failed to write WebP file")?;
 
     // Also generate SVG file
     let svg_path = output_path.with_extension("svg");

templates/recap/recap_year.html

@@ -103,7 +103,7 @@ <h2 class="hidden lg:block text-2xl font-bold text-gray-900 dark:text-white">Rec
     </header>
 
     <!-- Share Modal -->
-    <div id="shareModal" class="fixed inset-0 z-50 hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4">
+    <div id="shareModal" class="fixed inset-0 z-[60] hidden items-center justify-center bg-black/50 backdrop-blur-sm p-4">
         <div class="bg-gray-100 dark:bg-dark-900 rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto border border-gray-200/70 dark:border-dark-700/50">
             <!-- Modal Header -->
             <div class="flex items-center justify-between p-4 border-b border-gray-200/70 dark:border-dark-700/50">
@@ -131,8 +131,8 @@ <h3 id="shareModalTitle" class="text-lg font-bold text-gray-900 dark:text-white"
                         </div>
                     </div>
                     <div class="flex gap-2">
-                        <button data-share-url="/recap/{{ year }}/share_story.png" data-share-filename="koshelf_{{ year }}_story.png" class="share-png-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-purple-100 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-purple-300 dark:hover:border-purple-700/50">
-                            <span class="share-btn-text">Download PNG</span>
+                        <button data-share-url="/recap/{{ year }}/share_story.webp" data-share-filename="koshelf_{{ year }}_story.webp" class="share-webp-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-purple-100 dark:hover:bg-purple-900/30 text-gray-700 dark:text-gray-200 hover:text-purple-700 dark:hover:text-purple-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-purple-300 dark:hover:border-purple-700/50">
+                            <span class="share-btn-text">Download</span>
                         </button>
                         <a href="/recap/{{ year }}/share_story.svg" download="koshelf_{{ year }}_story.svg" class="px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-purple-100 dark:hover:bg-purple-900/30 text-gray-600 dark:text-gray-400 hover:text-purple-700 dark:hover:text-purple-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-purple-300 dark:hover:border-purple-700/50">
                             SVG
@@ -154,8 +154,8 @@ <h3 id="shareModalTitle" class="text-lg font-bold text-gray-900 dark:text-white"
                         </div>
                     </div>
                     <div class="flex gap-2">
-                        <button data-share-url="/recap/{{ year }}/share_square.png" data-share-filename="koshelf_{{ year }}_square.png" class="share-png-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 hover:text-blue-700 dark:hover:text-blue-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-blue-300 dark:hover:border-blue-700/50">
-                            <span class="share-btn-text">Download PNG</span>
+                        <button data-share-url="/recap/{{ year }}/share_square.webp" data-share-filename="koshelf_{{ year }}_square.webp" class="share-webp-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-700 dark:text-gray-200 hover:text-blue-700 dark:hover:text-blue-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-blue-300 dark:hover:border-blue-700/50">
+                            <span class="share-btn-text">Download</span>
                         </button>
                         <a href="/recap/{{ year }}/share_square.svg" download="koshelf_{{ year }}_square.svg" class="px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-blue-100 dark:hover:bg-blue-900/30 text-gray-600 dark:text-gray-400 hover:text-blue-700 dark:hover:text-blue-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-blue-300 dark:hover:border-blue-700/50">
                             SVG
@@ -177,8 +177,8 @@ <h3 id="shareModalTitle" class="text-lg font-bold text-gray-900 dark:text-white"
                         </div>
                     </div>
                     <div class="flex gap-2">
-                        <button data-share-url="/recap/{{ year }}/share_banner.png" data-share-filename="koshelf_{{ year }}_banner.png" class="share-png-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-green-100 dark:hover:bg-green-900/30 text-gray-700 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-green-300 dark:hover:border-green-700/50">
-                            <span class="share-btn-text">Download PNG</span>
+                        <button data-share-url="/recap/{{ year }}/share_banner.webp" data-share-filename="koshelf_{{ year }}_banner.webp" class="share-webp-btn flex-1 px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-green-100 dark:hover:bg-green-900/30 text-gray-700 dark:text-gray-200 hover:text-green-700 dark:hover:text-green-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-green-300 dark:hover:border-green-700/50">
+                            <span class="share-btn-text">Download</span>
                         </button>
                         <a href="/recap/{{ year }}/share_banner.svg" download="koshelf_{{ year }}_banner.svg" class="px-4 py-2 text-sm font-medium text-center bg-gray-100 dark:bg-dark-700 hover:bg-green-100 dark:hover:bg-green-900/30 text-gray-600 dark:text-gray-400 hover:text-green-700 dark:hover:text-green-300 rounded-lg transition-colors border border-gray-200/70 dark:border-dark-600/50 hover:border-green-300 dark:hover:border-green-700/50">
                             SVG