@peristyle/emdash-plugin-instagram-to-recipe 0.1.0

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@peristyle/emdash-plugin-instagram-to-recipe",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Import Instagram post URLs as recipe drafts in the EmDash admin",
+  "publishConfig": {
+    "access": "public"
+  },
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./sandbox": {
+      "types": "./dist/sandbox-entry.d.ts",
+      "import": "./dist/sandbox-entry.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "astro": ">=6.0.0-beta.0",
+    "emdash": "^0.14.0"
+  },
+  "devDependencies": {
+    "emdash": "^0.14.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  }
+}

package/src/admin-blocks.ts

@@ -0,0 +1,145 @@
+import type { ParsedInstagramRecipe } from "./instagram-recipes.js";
+import { previewLines } from "./recipe-content.js";
+
+type Block = Record<string, unknown>;
+
+export function importFormBlocks(initialUrl = ""): Block[] {
+  return [
+    {
+      type: "header",
+      text: "Import from Instagram",
+    },
+    {
+      type: "context",
+      text: "Paste a public Instagram post URL. The caption is parsed into recipe ingredients and steps, and the post image becomes the featured image.",
+    },
+    {
+      type: "form",
+      block_id: "import-form",
+      fields: [
+        {
+          type: "text_input",
+          action_id: "instagram_url",
+          label: "Instagram post URL",
+          placeholder: "https://www.instagram.com/p/SHORTCODE/",
+          initial_value: initialUrl,
+        },
+      ],
+      submit: { label: "Convert to recipe", action_id: "convert" },
+    },
+  ];
+}
+
+export function previewBlocks(
+  recipe: ParsedInstagramRecipe,
+  options?: { existingContentId?: string },
+): Block[] {
+  const ingredientPreview = recipe.ingredients.slice(0, 8).join("\n");
+  const instructionPreview = recipe.instructions
+    .slice(0, 4)
+    .map((step, i) => `${i + 1}. ${step}`)
+    .join("\n");
+
+  const blocks: Block[] = [
+    ...importFormBlocks(recipe.source.instagram_url),
+    { type: "divider" },
+    {
+      type: "banner",
+      title: "Recipe parsed",
+      description: previewLines(recipe).join(" · "),
+      variant: "default",
+    },
+    {
+      type: "fields",
+      fields: [
+        { label: "Title", value: recipe.title },
+        { label: "Suggested slug", value: recipe.suggested_slug },
+      ],
+    },
+    {
+      type: "section",
+      text: `Excerpt: ${recipe.excerpt}`,
+    },
+    {
+      type: "section",
+      text: `Ingredients (${recipe.ingredients.length}): ${ingredientPreview || "None parsed"}${recipe.ingredients.length > 8 ? " …" : ""}`,
+    },
+    {
+      type: "section",
+      text: `Instructions (${recipe.instructions.length}): ${instructionPreview || "None parsed"}${recipe.instructions.length > 4 ? " …" : ""}`,
+    },
+  ];
+
+  if (recipe.featured_image?.url) {
+    blocks.push({
+      type: "image",
+      url: recipe.featured_image.url,
+      alt: recipe.featured_image.alt,
+      title: "Featured image preview",
+    });
+  }
+
+  if (recipe.image_notice) {
+    blocks.push({
+      type: "banner",
+      title: "No featured image",
+      description: recipe.image_notice,
+      variant: "alert",
+    });
+  }
+
+  if (recipe.featured_image?.upload_failed) {
+    blocks.push({
+      type: "banner",
+      title: "Featured image not saved to Media",
+      description:
+        "The preview loads from Instagram in your browser, but the server could not download it for the media library. You can upload an image manually on the recipe after creating the draft.",
+      variant: "alert",
+    });
+  } else if (recipe.featured_image?.emdash_media) {
+    blocks.push({
+      type: "banner",
+      title: "Featured image ready",
+      description:
+        "The post image is already in your media library and will be attached when you create the draft.",
+      variant: "default",
+    });
+  }
+
+  if (options?.existingContentId) {
+    blocks.push({
+      type: "banner",
+      title: "Already imported",
+      description: `This post was previously imported (content id: ${options.existingContentId}). Creating again will add another draft.`,
+      variant: "alert",
+    });
+  }
+
+  blocks.push({
+    type: "actions",
+    block_id: "preview-actions",
+    elements: [
+      {
+        type: "button",
+        action_id: "create_draft",
+        label: "Create draft post",
+        style: "primary",
+        value: recipe.source.shortcode,
+      },
+    ],
+  });
+
+  return blocks;
+}
+
+export function errorBlocks(message: string, initialUrl = ""): Block[] {
+  return [
+    ...importFormBlocks(initialUrl),
+    {
+      type: "banner",
+      title: "Could not import post",
+      description: message,
+      variant: "error",
+    },
+  ];
+}

package/src/index.ts

@@ -0,0 +1,41 @@
+import type { PluginDescriptor } from "emdash";
+
+export type InstagramToRecipePluginOptions = {
+  /** Content collection slug for imported recipes (default: posts). */
+  collection?: string;
+  /**
+   * Instagram username for web_profile_info (e.g. cookingwithashhhh).
+   * When omitted, the post page's owner username is used automatically.
+   */
+  instagramHandle?: string;
+};
+
+export function instagramToRecipePlugin(
+  options: InstagramToRecipePluginOptions = {},
+): PluginDescriptor<InstagramToRecipePluginOptions> {
+  return {
+    id: "peristyle-instagram-to-recipe",
+    version: "0.1.0",
+    format: "standard",
+    entrypoint: "@peristyle/emdash-plugin-instagram-to-recipe/sandbox",
+    options,
+    capabilities: [
+      "content:read",
+      "content:write",
+      "media:write",
+      "network:request",
+    ],
+    allowedHosts: [
+      "www.instagram.com",
+      "*.cdninstagram.com",
+      "*.fbcdn.net",
+    ],
+    adminPages: [
+      {
+        path: "/import",
+        label: "Import from Instagram",
+        icon: "link",
+      },
+    ],
+  };
+}

package/src/instagram-curl-profile.ts

@@ -0,0 +1,120 @@
+import { execFile } from "node:child_process";
+import { promisify } from "node:util";
+
+const execFileAsync = promisify(execFile);
+
+const 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";
+
+const IG_APP_ID = "936619743392459";
+
+export type InstagramCurlProfileResult =
+  | { ok: true; user: unknown; httpStatus: number }
+  | { ok: false; message: string; httpStatus?: number };
+
+function cookieJarPath(handle: string): string {
+  return `/tmp/emdash-ig-${handle.toLowerCase()}.cookies.txt`;
+}
+
+/**
+ * Same curl + cookie-jar flow as init-brand-resources brand-bootstrap.
+ * Used when fetch() to web_profile_info fails (often HTTP 429).
+ */
+export async function fetchInstagramProfileViaCurl(
+  handle: string,
+): Promise<InstagramCurlProfileResult> {
+  const profileUrl = `https://www.instagram.com/${handle}/`;
+  const apiUrl = `https://www.instagram.com/api/v1/users/web_profile_info/?username=${encodeURIComponent(handle)}`;
+  const jar = cookieJarPath(handle);
+
+  try {
+    await execFileAsync(
+      "curl",
+      [
+        "-sL",
+        "-c",
+        jar,
+        "-b",
+        jar,
+        "-A",
+        BROWSER_UA,
+        profileUrl,
+        "-o",
+        "/dev/null",
+        "-w",
+        "%{http_code}",
+      ],
+      { timeout: 30_000 },
+    );
+
+    const { stdout } = await execFileAsync(
+      "curl",
+      [
+        "-sS",
+        "-b",
+        jar,
+        "-A",
+        BROWSER_UA,
+        "-H",
+        `X-IG-App-ID: ${IG_APP_ID}`,
+        "-H",
+        "X-Requested-With: XMLHttpRequest",
+        "-H",
+        `Referer: ${profileUrl}`,
+        "-w",
+        "\n__HTTP__:%{http_code}",
+        apiUrl,
+      ],
+      { timeout: 30_000, maxBuffer: 8 * 1024 * 1024 },
+    );
+
+    const marker = stdout.lastIndexOf("\n__HTTP__:");
+    const body = marker >= 0 ? stdout.slice(0, marker) : stdout;
+    const httpStatus = marker >= 0 ? Number(stdout.slice(marker + 10)) : 0;
+
+    if (!httpStatus || httpStatus >= 400) {
+      return {
+        ok: false,
+        httpStatus: httpStatus || undefined,
+        message: `curl API HTTP ${httpStatus || "?"}`,
+      };
+    }
+
+    let payload: unknown;
+    try {
+      payload = JSON.parse(body);
+    } catch {
+      return { ok: false, httpStatus, message: "curl response was not JSON" };
+    }
+
+    const user = (payload as { data?: { user?: unknown } })?.data?.user;
+    if (!user) {
+      return {
+        ok: false,
+        httpStatus,
+        message: `profile not found for @${handle}`,
+      };
+    }
+
+    return { ok: true, user, httpStatus };
+  } catch (e) {
+    const message = e instanceof Error ? e.message : String(e);
+    return { ok: false, message: `curl fallback failed: ${message}` };
+  }
+}
+
+export function shouldTryInstagramCurlFallback(): boolean {
+  const v = process.env.INSTAGRAM_USE_CURL?.trim();
+  if (v === "0") return false;
+  if (v === "1") return true;
+  return true;
+}
+
+export async function curlAvailable(): Promise<boolean> {
+  try {
+    await execFileAsync("curl", ["--version"], { timeout: 5000 });
+    return true;
+  } catch {
+    return false;
+  }
+}

package/src/instagram-image-url.ts

@@ -0,0 +1,48 @@
+function decodeInstagramEfgTag(url: string): string | undefined {
+  const match = /[?&]efg=([^&]+)/i.exec(url);
+  if (!match?.[1]) return undefined;
+  try {
+    const padded = match[1].replace(/-/g, "+").replace(/_/g, "/");
+    return atob(padded);
+  } catch {
+    return undefined;
+  }
+}
+
+/** Reel/video permalink posters — play icon baked in, portrait, not feed thumbnails. */
+export function isInstagramVideoCoverUrl(url: string): boolean {
+  const efg = decodeInstagramEfgTag(url);
+  if (efg && /video_default_cover_frame|cover_frame/i.test(efg)) return true;
+  if (/video_default_cover_frame|cover_frame/i.test(url)) return true;
+  if (/t51\.71878-15\//.test(url) && /dst-jpg_e15/i.test(url)) return true;
+  if (/c0\.\d+\.\d+x\d+a_/i.test(url)) return true;
+  return false;
+}
+
+/** Prefer feed-style display_url (1080) over OG share-card images with play buttons. */
+export function scoreInstagramImageUrl(
+  url: string,
+  opts?: { width?: number; height?: number },
+): number {
+  if (/\.mp4(\?|$)|video\//i.test(url)) return -1;
+  if (isInstagramVideoCoverUrl(url)) return -1;
+
+  let score = 0;
+  if (url.includes("p1080x1080")) score += 10_000;
+  else if (url.includes("p750x750")) score += 7_500;
+  else if (url.includes("p640x640")) score += 4_000;
+  if (url.includes("dst-jpg_e35")) score += 800;
+  if (url.includes("dst-jpg")) score += 500;
+  if (/\/s\d+x\d+\//.test(url)) score -= 2_000;
+  if (url.includes("thumbnail")) score -= 1_000;
+
+  const w = opts?.width;
+  const h = opts?.height;
+  if (w && h) {
+    if (h > w) score -= 5_000;
+    score += Math.min(w * h, 2_000_000);
+  }
+
+  score += Math.min(url.length, 500);
+  return score;
+}

package/src/instagram-profile-image.ts

@@ -0,0 +1,190 @@
+const IG_APP_ID = "936619743392459";
+
+const 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";
+
+type TimelineNode = {
+  shortcode?: string;
+  display_url?: string;
+};
+
+type WebProfileUser = {
+  edge_owner_to_timeline_media?: {
+    edges?: Array<{ node?: TimelineNode }>;
+  };
+};
+
+export function normalizeInstagramHandle(raw: string): string {
+  let s = raw.trim();
+  const urlMatch = /instagram\.com\/([A-Za-z0-9._]+)/i.exec(s);
+  if (urlMatch) s = urlMatch[1]!;
+  if (s.startsWith("@")) s = s.slice(1);
+  s = s.replace(/\/+$/, "").trim();
+  if (!/^[A-Za-z0-9._]{1,30}$/.test(s)) {
+    throw new Error("Invalid Instagram handle.");
+  }
+  return s.toLowerCase();
+}
+
+/** Owner username from Instagram's embedded post payload. */
+export function extractOwnerUsername(html: string): string | undefined {
+  const ownerMatch = /"owner":\{[^}]*"username":"([A-Za-z0-9._]+)"/.exec(html);
+  if (ownerMatch?.[1]) return ownerMatch[1].toLowerCase();
+
+  const userMatch = /"user":\{[^}]*"username":"([A-Za-z0-9._]+)"/.exec(html);
+  if (userMatch?.[1]) return userMatch[1].toLowerCase();
+
+  return undefined;
+}
+
+/** Same field brand-bootstrap uses: node.display_url from the profile grid. */
+export function displayUrlFromProfileUser(
+  user: unknown,
+  shortcode: string,
+): string | undefined {
+  const edges =
+    (user as WebProfileUser)?.edge_owner_to_timeline_media?.edges ?? [];
+
+  for (const edge of edges) {
+    const node = edge.node;
+    if (node?.shortcode === shortcode && node.display_url) {
+      return node.display_url;
+    }
+  }
+
+  return undefined;
+}
+
+function profileApiHeaders(handle: string): HeadersInit {
+  const profileUrl = `https://www.instagram.com/${handle}/`;
+  return {
+    Accept: "*/*",
+    "Accept-Language": "en-US,en;q=0.9",
+    "User-Agent": BROWSER_UA,
+    "X-IG-App-ID": IG_APP_ID,
+    "X-Requested-With": "XMLHttpRequest",
+    Referer: profileUrl,
+    Origin: "https://www.instagram.com",
+  };
+}
+
+const PROFILE_FETCH_RETRIES = 2;
+const PROFILE_RETRY_DELAY_MS = 2500;
+
+function sleep(ms: number): Promise<void> {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export type ProfileDisplayUrlResult = {
+  url?: string;
+  httpStatus?: number;
+  rateLimited?: boolean;
+  shortcodeMissing?: boolean;
+};
+
+/**
+ * Resolve display_url via web_profile_info — same API and field as
+ * init-brand-resources brand-bootstrap (postsFromProfile → displayUrl).
+ */
+async function fetchProfileUserOnce(
+  fetchFn: (url: string, init?: RequestInit) => Promise<Response>,
+  handle: string,
+): Promise<
+  | { ok: true; user: unknown; httpStatus: number }
+  | { ok: false; httpStatus?: number; retryable?: boolean }
+> {
+  const username = normalizeInstagramHandle(handle);
+  const apiUrl = `https://www.instagram.com/api/v1/users/web_profile_info/?username=${encodeURIComponent(username)}`;
+
+  const res = await fetchFn(apiUrl, {
+    method: "GET",
+    redirect: "follow",
+    headers: profileApiHeaders(username),
+  });
+
+  const httpStatus = res.status;
+  if (!res.ok) {
+    return {
+      ok: false,
+      httpStatus,
+      retryable: httpStatus === 429 || httpStatus === 503,
+    };
+  }
+
+  let payload: unknown;
+  try {
+    payload = await res.json();
+  } catch {
+    return { ok: false, httpStatus };
+  }
+
+  const user = (payload as { data?: { user?: unknown } })?.data?.user;
+  if (!user) {
+    return { ok: false, httpStatus };
+  }
+
+  return { ok: true, user, httpStatus };
+}
+
+export async function fetchProfileDisplayUrl(
+  fetchFn: (url: string, init?: RequestInit) => Promise<Response>,
+  handle: string,
+  shortcode: string,
+): Promise<ProfileDisplayUrlResult> {
+  const username = normalizeInstagramHandle(handle);
+  let lastHttpStatus: number | undefined;
+  let rateLimited = false;
+
+  for (let attempt = 0; attempt <= PROFILE_FETCH_RETRIES; attempt++) {
+    if (attempt > 0) {
+      await sleep(PROFILE_RETRY_DELAY_MS * attempt);
+    }
+
+    const result = await fetchProfileUserOnce(fetchFn, username);
+    if (result.ok) {
+      const url = displayUrlFromProfileUser(result.user, shortcode);
+      if (url) {
+        return { url, httpStatus: result.httpStatus };
+      }
+      return { httpStatus: result.httpStatus, shortcodeMissing: true };
+    }
+
+    lastHttpStatus = result.httpStatus;
+    if (result.httpStatus === 429 || result.httpStatus === 503) {
+      rateLimited = true;
+    }
+    if (!result.retryable) break;
+  }
+
+  if (
+    typeof process !== "undefined" &&
+    process.versions?.node
+  ) {
+    try {
+      const { shouldTryInstagramCurlFallback, curlAvailable, fetchInstagramProfileViaCurl } =
+        await import("./instagram-curl-profile.js");
+
+      if (shouldTryInstagramCurlFallback() && (await curlAvailable())) {
+        const curlResult = await fetchInstagramProfileViaCurl(username);
+        if (curlResult.ok) {
+          const url = displayUrlFromProfileUser(curlResult.user, shortcode);
+          if (url) {
+            return { url, httpStatus: curlResult.httpStatus };
+          }
+          return {
+            httpStatus: curlResult.httpStatus,
+            shortcodeMissing: true,
+          };
+        }
+      }
+    } catch {
+      // Fall through.
+    }
+  }
+
+  return {
+    httpStatus: lastHttpStatus,
+    rateLimited,
+    shortcodeMissing: false,
+  };
+}