Merge remote-tracking branch 'origin/master' into copilot/add-google-analytics-key-events-tracking

README.md

@@ -6,6 +6,7 @@ A fully local, open-source multi-board emulator. Write Arduino C++ or Python, co
 
 **19 boards · 5 CPU architectures**: AVR8 (ATmega / ATtiny), ARM Cortex-M0+ (RP2040), RISC-V RV32IMC/EC (ESP32-C3 / CH32V003), Xtensa LX6/LX7 (ESP32 / ESP32-S3 via QEMU), and ARM Cortex-A53 (Raspberry Pi 3 Linux via QEMU).
 
+![Visitors](https://visitor-badge.laobi.icu/badge?page_id=davidmonterocrespo24/velxio)
 [![Live Demo](https://img.shields.io/badge/Live%20Demo-velxio.dev-007acc?style=for-the-badge)](https://velxio.dev)
 [![Docker Image](https://img.shields.io/badge/Docker-ghcr.io%2Fdavidmonterocrespo24%2Fvelxio-2496ED?style=for-the-badge&logo=docker&logoColor=white)](https://github.com/davidmonterocrespo24/velxio/pkgs/container/velxio)
 [![GitHub stars](https://img.shields.io/github/stars/davidmonterocrespo24/velxio?style=for-the-badge)](https://github.com/davidmonterocrespo24/velxio/stargazers)

frontend/nginx.conf

@@ -18,9 +18,24 @@ server {
         proxy_set_header X-Forwarded-Proto $scheme;
     }
 
-    # Cache static assets
+    # Cache JS/CSS/fonts
-    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
+    location ~* \.(js|css|woff|woff2|ttf|eot)$ {
         expires 1y;
         add_header Cache-Control "public, immutable";
     }
+
+    # Serve WebP automatically when browser supports it
+    location = /image.png {
+        expires 30d;
+        add_header Cache-Control "public";
+        add_header Vary Accept;
+        if ($http_accept ~* "webp") {
+            rewrite ^ /image.webp break;
+        }
+    }
+
+    location ~* \.(png|jpg|jpeg|gif|ico|svg|webp)$ {
+        expires 30d;
+        add_header Cache-Control "public";
+    }
 }

frontend/src/pages/LandingPage.tsx

@@ -509,7 +509,10 @@ export const LandingPage: React.FC = () => {
 
         </div>
         <div className="hero-right">
-          <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" />
+          <picture>
+            <source srcSet="/image.webp" type="image/webp" />
+            <img src="/image.png" alt="Velxio simulator preview" className="hero-preview-img" loading="lazy" />
+          </picture>
         </div>
       </section>