@peristyle/emdash-plugin-instagram-to-recipe 0.1.2 → 0.1.3

package/dist/index.js

@@ -2,7 +2,7 @@
 function instagramToRecipePlugin(options = {}) {
   return {
     id: "peristyle-instagram-to-recipe",
-    version: "0.1.2",
+    version: "0.1.3",
     format: "standard",
     entrypoint: "@peristyle/emdash-plugin-instagram-to-recipe/sandbox",
     options,

package/dist/sandbox-entry.d.ts

@@ -24,6 +24,8 @@ type ParsedInstagramRecipe = {
             id: string;
             src: string;
             mimeType?: string;
+            width?: number;
+            height?: number;
             meta?: {
                 storageKey: string;
             };

package/dist/sandbox-entry.js

@@ -466,6 +466,72 @@ function buildParsedRecipeFromPostLenient(post) {
   return recipe;
 }
 
+// src/image-dimensions.ts
+function decodeImageDimensions(buffer) {
+  const b = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+  if (b.length >= 24 && b[0] === 137 && b[1] === 80 && b[2] === 78 && b[3] === 71) {
+    return valid(view.getUint32(16), view.getUint32(20));
+  }
+  if (b.length >= 10 && b[0] === 71 && b[1] === 73 && b[2] === 70) {
+    return valid(view.getUint16(6, true), view.getUint16(8, true));
+  }
+  if (b.length >= 30 && b[0] === 82 && b[1] === 73 && b[2] === 70 && b[3] === 70 && b[8] === 87 && b[9] === 69 && b[10] === 66 && b[11] === 80) {
+    const fourcc = String.fromCharCode(b[12], b[13], b[14], b[15]);
+    if (fourcc === "VP8X") {
+      const w = 1 + (b[24] | b[25] << 8 | b[26] << 16);
+      const h = 1 + (b[27] | b[28] << 8 | b[29] << 16);
+      return valid(w, h);
+    }
+    if (fourcc === "VP8 ") {
+      if (b[23] === 157 && b[24] === 1 && b[25] === 42) {
+        return valid(
+          view.getUint16(26, true) & 16383,
+          view.getUint16(28, true) & 16383
+        );
+      }
+      return null;
+    }
+    if (fourcc === "VP8L") {
+      if (b[20] !== 47) return null;
+      const bits = view.getUint32(21, true);
+      return valid((bits & 16383) + 1, (bits >> 14 & 16383) + 1);
+    }
+    return null;
+  }
+  if (b.length >= 4 && b[0] === 255 && b[1] === 216) {
+    let off = 2;
+    while (off + 9 < b.length) {
+      if (b[off] !== 255) {
+        off++;
+        continue;
+      }
+      const marker = b[off + 1];
+      if (marker === 255) {
+        off++;
+        continue;
+      }
+      if (marker === 1 || marker >= 208 && marker <= 217) {
+        off += 2;
+        continue;
+      }
+      const len = view.getUint16(off + 2);
+      if (len < 2) return null;
+      const isSOF = marker >= 192 && marker <= 207 && marker !== 196 && marker !== 200 && marker !== 204;
+      if (isSOF) {
+        if (off + 9 > b.length) return null;
+        return valid(view.getUint16(off + 7), view.getUint16(off + 5));
+      }
+      off += 2 + len;
+    }
+    return null;
+  }
+  return null;
+}
+function valid(width, height) {
+  return width > 0 && height > 0 ? { width, height } : null;
+}
+
 // src/instagram-profile-image.ts
 var IG_APP_ID = "936619743392459";
 var BROWSER_UA = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36";
@@ -1028,12 +1094,14 @@ async function uploadFeaturedImageBytes(ctx, recipe, bytes, contentType) {
     return void 0;
   }
   const filename = recipe.featured_image.filename || `${recipe.suggested_slug}.jpg`;
+  const dims = decodeImageDimensions(bytes);
   const uploaded = await ctx.media.upload(filename, contentType, bytes);
   return {
     provider: "local",
     id: uploaded.mediaId,
     src: uploaded.url,
     mimeType: contentType,
+    ...dims ?? {},
     meta: { storageKey: uploaded.storageKey }
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peristyle/emdash-plugin-instagram-to-recipe",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "type": "module",
   "description": "Import Instagram post URLs as recipe drafts in the EmDash admin",
   "publishConfig": {
@@ -21,6 +21,15 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "preversion": "pnpm typecheck",
+    "version": "pnpm build",
+    "postversion": "git push --follow-tags",
+    "prepublishOnly": "pnpm build"
+  },
   "peerDependencies": {
     "astro": ">=6.0.0-beta.0",
     "emdash": "^0.14.0"
@@ -29,13 +38,5 @@
     "emdash": "^0.14.0",
     "tsup": "^8.0.0",
     "typescript": "^5.0.0"
-  },
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "preversion": "pnpm typecheck",
-    "version": "pnpm build",
-    "postversion": "git push --follow-tags"
   }
-}
+}

package/src/image-dimensions.ts

@@ -0,0 +1,113 @@
+/**
+ * Decode intrinsic pixel dimensions from raw image bytes.
+ *
+ * Sandboxed plugins can't use sharp or canvas, so this reads the container
+ * headers directly. Supports the formats Instagram serves (JPEG) plus PNG,
+ * GIF, and WebP for robustness. Returns null for anything it can't parse —
+ * callers should treat dimensions as best-effort metadata.
+ */
+export function decodeImageDimensions(
+  buffer: ArrayBuffer,
+): { width: number; height: number } | null {
+  const b = new Uint8Array(buffer);
+  const view = new DataView(buffer);
+
+  // PNG: 8-byte signature, then IHDR chunk — width/height at offsets 16/20
+  if (
+    b.length >= 24 &&
+    b[0] === 0x89 &&
+    b[1] === 0x50 &&
+    b[2] === 0x4e &&
+    b[3] === 0x47
+  ) {
+    return valid(view.getUint32(16), view.getUint32(20));
+  }
+
+  // GIF87a / GIF89a: little-endian u16 logical screen size at offsets 6/8
+  if (b.length >= 10 && b[0] === 0x47 && b[1] === 0x49 && b[2] === 0x46) {
+    return valid(view.getUint16(6, true), view.getUint16(8, true));
+  }
+
+  // WebP: RIFF container with WEBP form type
+  if (
+    b.length >= 30 &&
+    b[0] === 0x52 &&
+    b[1] === 0x49 &&
+    b[2] === 0x46 &&
+    b[3] === 0x46 &&
+    b[8] === 0x57 &&
+    b[9] === 0x45 &&
+    b[10] === 0x42 &&
+    b[11] === 0x50
+  ) {
+    const fourcc = String.fromCharCode(b[12], b[13], b[14], b[15]);
+    if (fourcc === "VP8X") {
+      // Extended header: 24-bit little-endian canvas size minus one
+      const w = 1 + (b[24] | (b[25] << 8) | (b[26] << 16));
+      const h = 1 + (b[27] | (b[28] << 8) | (b[29] << 16));
+      return valid(w, h);
+    }
+    if (fourcc === "VP8 ") {
+      // Lossy: frame start code 9d 01 2a, then 14-bit dimensions
+      if (b[23] === 0x9d && b[24] === 0x01 && b[25] === 0x2a) {
+        return valid(
+          view.getUint16(26, true) & 0x3fff,
+          view.getUint16(28, true) & 0x3fff,
+        );
+      }
+      return null;
+    }
+    if (fourcc === "VP8L") {
+      // Lossless: signature byte 0x2f, then 14+14 bits, each minus one
+      if (b[20] !== 0x2f) return null;
+      const bits = view.getUint32(21, true);
+      return valid((bits & 0x3fff) + 1, ((bits >> 14) & 0x3fff) + 1);
+    }
+    return null;
+  }
+
+  // JPEG: scan markers for a start-of-frame (SOF0–SOF15, excluding
+  // DHT/JPG/DAC which share the 0xC0 range but aren't frames)
+  if (b.length >= 4 && b[0] === 0xff && b[1] === 0xd8) {
+    let off = 2;
+    while (off + 9 < b.length) {
+      if (b[off] !== 0xff) {
+        off++;
+        continue;
+      }
+      const marker = b[off + 1];
+      if (marker === 0xff) {
+        off++;
+        continue;
+      }
+      // Standalone markers (no length field)
+      if (marker === 0x01 || (marker >= 0xd0 && marker <= 0xd9)) {
+        off += 2;
+        continue;
+      }
+      const len = view.getUint16(off + 2);
+      if (len < 2) return null;
+      const isSOF =
+        marker >= 0xc0 &&
+        marker <= 0xcf &&
+        marker !== 0xc4 &&
+        marker !== 0xc8 &&
+        marker !== 0xcc;
+      if (isSOF) {
+        if (off + 9 > b.length) return null;
+        return valid(view.getUint16(off + 7), view.getUint16(off + 5));
+      }
+      off += 2 + len;
+    }
+    return null;
+  }
+
+  return null;
+}
+
+function valid(
+  width: number,
+  height: number,
+): { width: number; height: number } | null {
+  return width > 0 && height > 0 ? { width, height } : null;
+}

package/src/instagram-recipes.ts

@@ -31,6 +31,8 @@ export type ParsedInstagramRecipe = {
       id: string;
       src: string;
       mimeType?: string;
+      width?: number;
+      height?: number;
       meta?: { storageKey: string };
     };
     /** True when convert could not upload the image to media library. */

package/src/recipe-content.ts

@@ -71,6 +71,8 @@ export type RecipePostWriteData = {
     alt?: string;
     filename?: string;
     mimeType?: string;
+    width?: number;
+    height?: number;
     meta?: { storageKey: string };
   };
   difficulty?: string;

package/src/sandbox-entry.ts

@@ -16,6 +16,7 @@ import {
   buildParsedRecipeFromPostLenient,
   type InstagramPostForRecipes,
 } from "./instagram-recipes.js";
+import { decodeImageDimensions } from "./image-dimensions.js";
 import {
   fetchInstagramPost,
   instagramBrowserUserAgent,
@@ -163,6 +164,11 @@ async function uploadFeaturedImageBytes(
   const filename =
     recipe.featured_image.filename || `${recipe.suggested_slug}.jpg`;
 
+  // Decode intrinsic dimensions before upload so the MediaValue stored in
+  // content carries width/height — the site needs them for aspect-ratio
+  // (CLS protection) and responsive srcset generation.
+  const dims = decodeImageDimensions(bytes);
+
   const uploaded = await ctx.media.upload(filename, contentType, bytes);
 
   return {
@@ -170,6 +176,7 @@ async function uploadFeaturedImageBytes(
     id: uploaded.mediaId,
     src: uploaded.url,
     mimeType: contentType,
+    ...(dims ?? {}),
     meta: { storageKey: uploaded.storageKey },
   };
 }