spark-html-image 0.1.0 → 0.1.2

package/README.md

@@ -61,3 +61,29 @@ It runs in `closeBundle` (order `post`), after
 [`spark-prerender`](https://www.npmjs.com/package/spark-prerender) has written
 its per-route HTML — so prerendered pages are optimized too. Conversion uses
 [sharp](https://sharp.pixelplumbing.com/).
+
+## The Spark family
+
+Small, single-purpose packages that share one philosophy: no compiler, no
+virtual DOM, no build step required. Add only what you use.
+
+| Package | What it does |
+|---|---|
+| [`spark-html`](https://www.npmjs.com/package/spark-html) | The runtime — components, reactivity, stores, forms, scoped styles. 13 kB gzip, 0 deps. |
+| [`spark-html-router`](https://www.npmjs.com/package/spark-html-router) | `<template route>` routing — nested routes/layouts, `route.query`, active links. |
+| [`spark-html-theme`](https://www.npmjs.com/package/spark-html-theme) | Dark/light/system theming in one line — persisted, no flash. |
+| [`spark-html-head`](https://www.npmjs.com/package/spark-html-head) | Reactive `<title>`/`<meta>` per route + a `head` store. |
+| [`spark-html-motion`](https://www.npmjs.com/package/spark-html-motion) | Enter/leave transitions on if/each blocks — `transition="fade|slide|scale"`. |
+| [`spark-html-devtools`](https://www.npmjs.com/package/spark-html-devtools) | In-page devtools — live stores, component tree, patch activity. |
+| [`spark-html-query`](https://www.npmjs.com/package/spark-html-query) | Declarative async data — a self-fetching store (`loading`/`error`/`data`/`refetch`). |
+| [`spark-html-persist`](https://www.npmjs.com/package/spark-html-persist) | Persist stores to localStorage/sessionStorage in one line. |
+| [`spark-html-websocket`](https://www.npmjs.com/package/spark-html-websocket) | A WebSocket as a reactive store — auto-reconnect, JSON, `send()`. |
+| [`spark-prerender`](https://www.npmjs.com/package/spark-prerender) | Build-time SEO prerender + sitemap/robots — no SSR server. |
+| [`spark-html-image`](https://www.npmjs.com/package/spark-html-image) | Build-time image optimization — webp/avif + responsive `srcset`, zero config. |
+| [`spark-html-font`](https://www.npmjs.com/package/spark-html-font) | Font loading optimizer — preload + size-adjusted fallbacks, no FOUT. |
+| [`spark-html-manifest`](https://www.npmjs.com/package/spark-html-manifest) | PWA manifest + icons + head tags (and optional service worker) from one config. |
+| [`spark-html-offline`](https://www.npmjs.com/package/spark-html-offline) | Offline URL imports — a service worker that caches CDN components. |
+| [`spark-html-sri`](https://www.npmjs.com/package/spark-html-sri) | Subresource Integrity — hash + verify assets and remote components. |
+| [`create-spark-html-app`](https://www.npmjs.com/package/create-spark-html-app) | Scaffold a Vite + spark-html app in one command. |
+| [`prettier-plugin-spark`](https://www.npmjs.com/package/prettier-plugin-spark) | Prettier for components — formats `<script>`/`<style>`, markup stays byte-for-byte. |
+| [`spark-html-language-server`](https://www.npmjs.com/package/spark-html-language-server) | LSP — diagnostics, go-to-definition, prop autocomplete, hover docs. |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spark-html-image",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Build-time image optimization for spark-html sites — a Vite plugin that converts <img> references to webp/avif with responsive srcset, zero config.",
   "type": "module",
   "main": "./src/index.js",

package/src/index.js

@@ -121,7 +121,15 @@ export default function sparkImage(options = {}) {
           let m = meta.get(file);
           if (!m) {
             const info = await sharp(file).metadata();
-            m = { width: info.width || 0, height: info.height || 0 };
+            // EXIF orientations 5–8 display the image rotated 90° — the
+            // metadata reports the SENSOR dimensions, so swap to get the
+            // dimensions the page actually renders (and that the rotated
+            // variants below will have).
+            const swap = (info.orientation || 1) >= 5;
+            m = {
+              width: (swap ? info.height : info.width) || 0,
+              height: (swap ? info.width : info.height) || 0,
+            };
             meta.set(file, m);
           }
           // Widths strictly below the intrinsic width, plus the intrinsic
@@ -138,7 +146,10 @@ export default function sparkImage(options = {}) {
                 const dest = destUrl.startsWith('/')
                   ? join(root, destUrl.slice(1))
                   : join(dirname(file), posix.basename(destUrl));
-                let img = sharp(file);
+                // .rotate() with no args bakes the EXIF orientation into the
+                // pixels — webp/avif output drops the EXIF tag, so without
+                // this every phone photo would render sideways.
+                let img = sharp(file).rotate();
                 if (w) img = img.resize({ width: w });
                 await img[format]({ quality }).toFile(dest);
                 converted.set(key, url);