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

package/dist/index.js

@@ -2,7 +2,7 @@
 function instagramToRecipePlugin(options = {}) {
   return {
     id: "peristyle-instagram-to-recipe",
-    version: "0.1.2",
+    version: "0.1.4",
     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

@@ -349,26 +349,51 @@ function extractTitleFromCaption(caption) {
   }
   return titleCase(firstSentence.slice(0, 68).trim());
 }
+var _QTY_UNIT_SPLIT = new RegExp(
+  String.raw`(?<=\s)(?=(?:\d[\d/.\s]*|[¼½¾⅓⅔⅛]\s*)(?:lbs?|pounds?|cups?|tsp|tbsp|teaspoons?|tablespoons?|oz|ounces?|cloves?|ears?|heads?|cans?|bunch(?:es)?|sticks?|pinch|dash|g|kg|ml|l)\b)` + String.raw`|(?<=\s)(?=(?:zest|juice)\s+of\b)` + String.raw`|(?<=\s)(?<!\b(?:of|about|around|approx)\s)(?=[\d¼½¾⅓⅔⅛][\d/.¼½¾⅓⅔⅛]*\s+[a-zA-Z])`,
+  "giu"
+);
+function looksCollapsed(line) {
+  const starts = line.split(_QTY_UNIT_SPLIT);
+  return line.split(/\s+/).length > 8 && starts.length >= 3;
+}
+function resplitCollapsedIngredientLine(line) {
+  if (!looksCollapsed(line)) return [line];
+  return line.split(_QTY_UNIT_SPLIT).map((part) => part.trim()).filter(Boolean);
+}
 function parseIngredientsFromCaption(caption) {
   const match = caption.match(/what you['']ll need:?|ingredients\s*:/i);
   if (!match || match.index == null) return [];
   const afterHeader = caption.slice(match.index + match[0].length);
   const stepsMatch = afterHeader.match(/(?:^|\n)\s*\d+\.\s+/);
-  const ingredientsBlock = stepsMatch?.index ? afterHeader.slice(0, stepsMatch.index) : afterHeader;
+  let ingredientsBlock = stepsMatch?.index ? afterHeader.slice(0, stepsMatch.index) : afterHeader;
+  const instructionsHeader = ingredientsBlock.match(
+    /\b(?:instructions|directions|steps|method)\s*:/i
+  );
+  if (instructionsHeader?.index) {
+    ingredientsBlock = ingredientsBlock.slice(0, instructionsHeader.index);
+  }
   const lines = ingredientsBlock.split(/\n/);
   const ingredients = [];
   for (const raw of lines) {
-    const line = raw.trim();
-    if (!line) continue;
-    if (/^\[[^\]]+\]$/.test(line)) continue;
-    if (/^recipe below/i.test(line)) continue;
-    ingredients.push(line);
+    for (const piece of resplitCollapsedIngredientLine(raw)) {
+      const line = piece.trim();
+      if (!line) continue;
+      if (/^\[[^\]]+\]$/.test(line)) continue;
+      if (/^recipe below/i.test(line)) continue;
+      ingredients.push(line);
+    }
   }
   return ingredients;
 }
 function parseInstructionsFromCaption(caption) {
   const matches = [...caption.matchAll(/(?:^|\n)\s*(\d+)\.\s*([^\n]+)/g)];
-  return matches.map((m) => m[2]?.trim()).filter((s) => Boolean(s && s.length > 3));
+  const steps = matches.map((m) => m[2]?.trim()).filter((s) => Boolean(s && s.length > 3));
+  if (steps.length > 0) return steps;
+  const header = caption.match(/\b(?:instructions|directions|steps|method)\s*:/i);
+  if (!header || header.index == null) return [];
+  const block = caption.slice(header.index + header[0].length);
+  return block.split(/(?=\b\d{1,2}\.\s)/).map((s) => s.replace(/^\d{1,2}\.\s*/, "").trim()).filter((s) => s.length > 3);
 }
 function parseRecipeCaption(caption) {
   if (!isLikelyRecipeCaption(caption)) return null;
@@ -466,6 +491,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 +1119,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.4",
   "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. */
@@ -115,25 +117,69 @@ export function extractTitleFromCaption(caption: string): string {
   return titleCase(firstSentence.slice(0, 68).trim());
 }
 
+// A quantity token starting a new ingredient: "1 lb", "1/3 cup", "½ tsp", "3
+// cloves"... Used to re-split caption lines whose newlines were lost upstream
+// (Instagram's og:description meta tag flattens single line breaks, so a whole
+// ingredient section can arrive as one long line).
+const _QTY_UNIT_SPLIT = new RegExp(
+  String.raw`(?<=\s)(?=(?:\d[\d/.\s]*|[¼½¾⅓⅔⅛]\s*)(?:lbs?|pounds?|cups?|tsp|tbsp|teaspoons?|tablespoons?|oz|ounces?|cloves?|ears?|heads?|cans?|bunch(?:es)?|sticks?|pinch|dash|g|kg|ml|l)\b)` +
+    String.raw`|(?<=\s)(?=(?:zest|juice)\s+of\b)` +
+    String.raw`|(?<=\s)(?<!\b(?:of|about|around|approx)\s)(?=[\d¼½¾⅓⅔⅛][\d/.¼½¾⅓⅔⅛]*\s+[a-zA-Z])`,
+  "giu",
+);
+
+/** Count of quantity-like tokens — how many ingredients a line appears to hold. */
+function looksCollapsed(line: string): boolean {
+  const starts = line.split(_QTY_UNIT_SPLIT);
+  return line.split(/\s+/).length > 8 && starts.length >= 3;
+}
+
+/**
+ * Split a line that holds several ingredients back into one line each.
+ *
+ * Lossy-input recovery only: applied when a line clearly contains multiple
+ * quantity tokens (see ``looksCollapsed``), never to normal one-ingredient
+ * lines. A trailing "Section name:" prefix is kept as its own line so the
+ * downstream header filters can drop it.
+ */
+export function resplitCollapsedIngredientLine(line: string): string[] {
+  if (!looksCollapsed(line)) return [line];
+  return line
+    .split(_QTY_UNIT_SPLIT)
+    .map((part) => part.trim())
+    .filter(Boolean);
+}
+
 export function parseIngredientsFromCaption(caption: string): string[] {
   const match = caption.match(/what you['']ll need:?|ingredients\s*:/i);
   if (!match || match.index == null) return [];
 
   const afterHeader = caption.slice(match.index + match[0].length);
   const stepsMatch = afterHeader.match(/(?:^|\n)\s*\d+\.\s+/);
-  const ingredientsBlock = stepsMatch?.index
+  let ingredientsBlock = stepsMatch?.index
     ? afterHeader.slice(0, stepsMatch.index)
     : afterHeader;
+  // With a collapsed caption the numbered steps carry no leading newline, so
+  // the cut above misses. Cut again at an explicit instructions header so the
+  // steps can't leak into the ingredient list.
+  const instructionsHeader = ingredientsBlock.match(
+    /\b(?:instructions|directions|steps|method)\s*:/i,
+  );
+  if (instructionsHeader?.index) {
+    ingredientsBlock = ingredientsBlock.slice(0, instructionsHeader.index);
+  }
 
   const lines = ingredientsBlock.split(/\n/);
   const ingredients: string[] = [];
 
   for (const raw of lines) {
-    const line = raw.trim();
-    if (!line) continue;
-    if (/^\[[^\]]+\]$/.test(line)) continue;
-    if (/^recipe below/i.test(line)) continue;
-    ingredients.push(line);
+    for (const piece of resplitCollapsedIngredientLine(raw)) {
+      const line = piece.trim();
+      if (!line) continue;
+      if (/^\[[^\]]+\]$/.test(line)) continue;
+      if (/^recipe below/i.test(line)) continue;
+      ingredients.push(line);
+    }
   }
 
   return ingredients;
@@ -141,9 +187,19 @@ export function parseIngredientsFromCaption(caption: string): string[] {
 
 export function parseInstructionsFromCaption(caption: string): string[] {
   const matches = [...caption.matchAll(/(?:^|\n)\s*(\d+)\.\s*([^\n]+)/g)];
-  return matches
+  const steps = matches
     .map((m) => m[2]?.trim())
     .filter((s): s is string => Boolean(s && s.length > 3));
+  if (steps.length > 0) return steps;
+  // Collapsed caption (og:description strips newlines): fall back to slicing
+  // the text after an instructions header on the "1." "2." markers themselves.
+  const header = caption.match(/\b(?:instructions|directions|steps|method)\s*:/i);
+  if (!header || header.index == null) return [];
+  const block = caption.slice(header.index + header[0].length);
+  return block
+    .split(/(?=\b\d{1,2}\.\s)/)
+    .map((s) => s.replace(/^\d{1,2}\.\s*/, "").trim())
+    .filter((s) => s.length > 3);
 }
 
 export function parseRecipeCaption(caption: string): {

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 },
   };
 }