// recipes
the grimoire
-
tap any to open. tap the mushroom to pin it for the next ai meal plan run.
+
tap any to open. mushroom 🍄 pins it for the household plan.
+
sort
+ {% for s in [('newest','newest'), ('made','recent'), ('az','a–z'), ('updated','updated')] %}
+
{{ s[1] }}
+ {% endfor %}
+
{% for r in recipes %}
{% include "_recipe_card.html" %}
@@ -30,13 +47,14 @@
const search = document.getElementById('search');
const sentinel = document.getElementById('sentinel');
+ const initialSort = {{ sort|tojson }};
+ const initialCat = {{ (category or '')|tojson }};
let nextPage = {{ 2 if pages > 1 else 0 }};
let total = {{ total }};
let q = '';
let loading = false;
let aborter = null;
- // ✦ mushroom SVG used in pick toggle
const SHROOM = `
`;
+ function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
+ function escapeAttr(s) { return escapeHtml(s); }
+
function renderCard(r) {
const tags = (r.tags || []).slice(0, 3).map(t => `
${escapeHtml(t.name)}`).join('');
const meta = [
@@ -60,13 +81,10 @@
${meta}
${tags ? `
${tags}
` : ''}
-
+
`;
}
- function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c])); }
- function escapeAttr(s) { return escapeHtml(s); }
-
async function loadMore(reset=false) {
if (loading) return;
if (!reset && !nextPage) return;
@@ -74,9 +92,11 @@
if (aborter) aborter.abort();
aborter = new AbortController();
state.classList.remove('done', 'error');
- state.textContent = 'loading…';
+ state.textContent = '…';
const page = reset ? 1 : nextPage;
- const url = `/api/recipes.json?page=${page}` + (q ? `&q=${encodeURIComponent(q)}` : '');
+ const url = `/api/recipes.json?page=${page}&sort=${encodeURIComponent(initialSort)}`
+ + (initialCat ? `&cat=${encodeURIComponent(initialCat)}` : '')
+ + (q ? `&q=${encodeURIComponent(q)}` : '');
try {
const r = await fetch(url, { signal: aborter.signal });
if (!r.ok) throw new Error(r.status);
@@ -86,7 +106,7 @@
grid.insertAdjacentHTML('beforeend', renderCard(item));
}
total = data.total ?? total;
- count.textContent = `${total} ${q ? 'matching' : 'total'}`;
+ count.textContent = `${total}`;
nextPage = data.next || 0;
state.textContent = nextPage ? '' : '— end —';
if (!nextPage) state.classList.add('done');
@@ -100,7 +120,6 @@
}
}
- // Pick toggle (event delegation)
grid.addEventListener('click', async (e) => {
const btn = e.target.closest('.pick-btn');
if (!btn) return;
@@ -109,7 +128,6 @@
const name = btn.dataset.name;
const card = btn.closest('.recipe-card');
const wasOn = btn.classList.contains('on');
- // optimistic flip
btn.classList.toggle('on');
if (card) card.classList.toggle('picked');
try {
@@ -120,13 +138,11 @@
});
if (!r.ok) throw new Error(r.status);
} catch (err) {
- // rollback on failure
btn.classList.toggle('on');
if (card) card.classList.toggle('picked');
}
});
- // Debounced search
let searchTimer = null;
search.addEventListener('input', () => {
clearTimeout(searchTimer);
@@ -136,10 +152,9 @@
}, 250);
});
- // Infinite scroll
const io = new IntersectionObserver((entries) => {
if (entries.some(e => e.isIntersecting)) loadMore();
- }, { rootMargin: '200px 0px' });
+ }, { rootMargin: '300px 0px' });
io.observe(sentinel);
})();