/* recipes.jsx — RecipesIndex (section) + RecipeDetail + CookMode */
(function () {
const { useState, useMemo, useEffect, useRef } = React;
const { cx, fmtTime, fmtDate, scaleAmount, Difficulty, Stat, SmartImg, useReveal } = window;
// ==================================================================
// Recipes index (filterable grid)
// ==================================================================
function RecipesIndex({ go }) {
const { RecipeCard } = window;
const ref = useReveal();
const all = window.RECIPES;
const categories = ["All", ...Array.from(new Set(all.map((r) => r.category)))];
const [cat, setCat] = useState("All");
const [sort, setSort] = useState("new");
const filtered = useMemo(() => {
let list = all.filter((r) => cat === "All" || r.category === cat);
list = [...list].sort((a, b) =>
sort === "new" ? new Date(b.date) - new Date(a.date)
: sort === "quick" ? a.total - b.total
: a.title.localeCompare(b.title));
return list;
}, [cat, sort]);
return (
{filtered.length} of {all.length} recipes
Recipes
{window.SECTIONS.recipes.blurb}
{/* filter bar */}
{categories.map((c) => (
))}
Sort
{[["new", "Newest"], ["quick", "Quickest"], ["az", "A–Z"]].map(([k, l]) => (
))}
{filtered.length === 0
?
No recipes match these filters.
:
{filtered.map((r, idx) => )}
}
);
}
// ==================================================================
// Ingredient list (checkable + scaled)
// ==================================================================
function IngredientList({ recipe, factor, checked, toggle }) {
return (
{recipe.ingredients.map((ing, i) => (
))}
);
}
function ServingStepper({ value, unit, onChange, base }) {
const { Minus, Plus, RotateCcw, Users } = window.Icons;
return (
{unit === "loaf" ? "Batch" : "Servings"}
{value !== base && (
)}
{value} {unit === "loaf" ? (value === 1 ? "loaf" : "loaves") : "portions"}
);
}
// ==================================================================
// Cook mode (fullscreen, step by step)
// ==================================================================
function CookMode({ recipe, onExit, factor = 1, checked, toggle }) {
const { X, ChevronLeft, ChevronRight, Check } = window.Icons;
const [step, setStep] = useState(0);
const [localChecked, setLocalChecked] = useState(checked || new Set());
const [onlyStep, setOnlyStep] = useState(true);
const [stepChecked, setStepChecked] = useState(new Set());
const chk = checked || localChecked;
const toggleChk = toggle || ((i) => setLocalChecked((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; }));
const toggleStepChk = (k) => setStepChecked((s) => { const n = new Set(s); n.has(k) ? n.delete(k) : n.add(k); return n; });
const total = recipe.steps.length;
const wakeRef = useRef(null);
// Ingredients shown in the left panel: just this step's, or the whole list.
const shown = onlyStep
? recipe.steps[step].ingredients.map((ing, i) => ({ ing, key: step + ":" + i, on: stepChecked.has(step + ":" + i), toggle: () => toggleStepChk(step + ":" + i) }))
: recipe.ingredients.map((ing, i) => ({ ing, key: i, on: chk.has(i), toggle: () => toggleChk(i) }));
useEffect(() => {
let released = false;
(async () => {
try { if (navigator.wakeLock) { wakeRef.current = await navigator.wakeLock.request("screen"); } } catch (e) {}
})();
const onKey = (e) => {
if (e.key === "Escape") onExit();
else if (e.key === "ArrowRight") setStep((s) => Math.min(s + 1, total - 1));
else if (e.key === "ArrowLeft") setStep((s) => Math.max(s - 1, 0));
};
window.addEventListener("keydown", onKey);
return () => { window.removeEventListener("keydown", onKey); try { wakeRef.current && wakeRef.current.release(); } catch (e) {} };
}, [total, onExit]);
const last = step === total - 1;
return (
Cook mode
{recipe.title}
Step {step + 1} / {total}
{/* left half — ingredients */}
{/* right half — current instruction */}
{step + 1}
Step {step + 1} of {total}
{recipe.steps[step].text}
{last
?
: }
);
}
// ==================================================================
// Recipe detail
// ==================================================================
function RecipeDetail({ slug, go, recipeLayout }) {
const recipe = window.RECIPES.find((r) => r.slug === slug);
const ref = useReveal();
const { ChevronLeft, Clock, Timer, Printer, ChefHat, Check, Utensils } = window.Icons;
const { MD } = window;
const baseServings = recipe.servings || 1;
const [servings, setServings] = useState(baseServings);
const [checked, setChecked] = useState(new Set());
const [doneSteps, setDoneSteps] = useState(new Set());
const [cook, setCook] = useState(false);
const factor = servings / baseServings;
useEffect(() => { window.scrollTo(0, 0); }, [slug]);
const toggleCheck = (i) => setChecked((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; });
const toggleStep = (i) => setDoneSteps((s) => { const n = new Set(s); n.has(i) ? n.delete(i) : n.add(i); return n; });
const related = window.RECIPES.filter((r) => r.slug !== slug && r.category === recipe.category).slice(0, 3);
const relatedFinal = (related.length ? related : window.RECIPES.filter((r) => r.slug !== slug)).slice(0, 3);
const isLinear = recipeLayout === "linear";
const isSplit = recipeLayout === "split";
// ---- ingredients panel (reused in layouts) ----
const IngredientsPanel = (
Ingredients
{recipe.ingredients.length}
{checked.size > 0 && (
)}
);
const StepsPanel = (
Method
{doneSteps.size}/{recipe.steps.length} done
{recipe.steps.map((s, i) => (
{s.text}
))}
{recipe.notes && recipe.notes.length > 0 && (
Notes
{recipe.notes.map((n, i) => - {n}
)}
)}
);
return (
{cook &&
setCook(false)} factor={factor} checked={checked} toggle={toggleCheck} />}
{/* breadcrumb */}
{/* hero */}
{recipe.category}
{recipe.title}
{recipe.summary}
{fmtTime(recipe.active)} active
{fmtTime(recipe.total)} total
{/* equipment */}
{recipe.equipment && recipe.equipment.length > 0 && (
You'll need
{recipe.equipment.map((e, i) => {e})}
)}
{/* body */}
{isLinear ? (
{IngredientsPanel}
{StepsPanel}
) : (
)}
{recipe.gallery.map((g, i) => (
))}
)}
{/* related */}
More to cook
{relatedFinal.map((r, idx) => )}