setCommentName(e.target.value)}
aria-label="Your name"
maxLength={60}
/>
✚
{file ? `Attached: ${file}` : "Attach your draft or photos (optional)"}
{err &&
{err}
}
Send to the Editors
)}
);
}
// ── Gul-Lala Footer — three columns: brand (left), copyright (centre),
// sitemap (right).
function GLFooter({ onSubmit, onAbout, onOpenCategory, onGotoPodcast }) {
const cats = window.CATEGORIES.filter(c => c.id !== "home" && c.id !== "podcast");
return (
);
}
// ── Gul-Lala About page — long-form essay page with tulip field footer band
function GLAboutPage({ onGotoStories }) {
useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, []);
return (
G ul-lala is the tulip — the flower Persian and
Urdu poets kept returning to, generation after generation, because nothing else quite
carried what they wanted to say. Colour that stops you where you stand. A bloom that
needs no ornament to be remarkable, because it already is.
The flower the poets kept returning to.
Colour that stops you where you stand. A bloom that needs no ornament to be remarkable,
because it already is.
That felt exactly right for this blog. Bohra women have been building, teaching,
healing, trading, hosting, leading, and holding families and communities together for
generations — often without anyone thinking to write it down. Not because the work was
small, but because it was so familiar to us that we forgot to look. And when you do
look, it’s everywhere, and it’s extraordinary.
Gul-Lala is where we look, and where we tell those stories.
Read the Stories
);
}
// ── Gul-Lala Podcast page — big now-playing player + full episode list
function GLPodcastPage() {
const rawEps = window.PODCAST_EPISODES || [];
const episodes = rawEps.map(ep => {
const [mmStr] = String(ep.durationStr || "").match(/\d+/) || ["34"];
const mins = parseInt(mmStr, 10) || 34;
const number = typeof ep.number === "number" ? ep.number : 1;
const palette = ["#E5C79A", "#A9BC98", "#C98D82", "#E4A9A9", "#DE9E93", "#9FB3C4", "#C0A3BE"];
return {
id: number,
title: ep.title || `Ep ${number}`,
section: ep.guest || ep.date || "",
mins,
color: palette[number % palette.length],
baseLikes: 30 + (number * 3) % 60,
};
});
const [currentId, setCurrentId] = useState(episodes[0] ? episodes[0].id : null);
const [playing, setPlaying] = useState(false);
const [elapsed, setElapsed] = useState(0);
const [likes, setLikes] = useState({});
const [shared, setShared] = useState(null);
const tick = useRef(null);
useEffect(() => { window.scrollTo({ top: 0, behavior: "instant" }); }, []);
const cur = episodes.find(e => e.id === currentId) || episodes[0];
const totalSec = cur ? cur.mins * 60 : 0;
useEffect(() => {
if (playing) {
tick.current = setInterval(() => {
setElapsed(v => {
if (v + 1 >= totalSec) { setPlaying(false); return totalSec; }
return v + 1;
});
}, 1000);
return () => clearInterval(tick.current);
}
}, [playing, totalSec]);
useEffect(() => () => clearInterval(tick.current), []);
if (!cur) {
return (
New episodes coming soon.
);
}
const fmt = (sec) => {
const m = Math.floor(sec / 60);
return m + ":" + String(Math.max(0, Math.floor(sec % 60))).padStart(2, "0");
};
const shareEp = (ep) => {
const url = window.location.href.split("#")[0] + "#category/podcast";
if (navigator.clipboard) navigator.clipboard.writeText(`${ep.title} — ${url}`).catch(() => {});
setShared(ep.id);
setTimeout(() => setShared(null), 1800);
};
const curLiked = !!likes[cur.id];
return (
The Gul-Lala Podcast
Voices from the majlis, the kitchen, and the road.
{episodes.length} {episodes.length === 1 ? "episode" : "episodes"} · a new one every other Friday
Now Playing
{cur.title}
{cur.section} · {cur.mins} min
{fmt(elapsed)}
{fmt(totalSec)}
setElapsed(v => Math.max(0, v - 15))}
aria-label="Back 15 seconds">↺15
setPlaying(p => !p)}
aria-label={playing ? "Pause" : "Play"}>
{playing ? "❚❚" : "▶"}
setElapsed(v => Math.min(totalSec, v + 30))}
aria-label="Forward 30 seconds">30↻
setLikes(x => ({ ...x, [cur.id]: !x[cur.id] }))}
aria-label="Like episode">
{curLiked ? "♥" : "♡"} {cur.baseLikes + (curLiked ? 1 : 0)}
shareEp(cur)}
aria-label="Share episode">
{shared === cur.id ? "Copied ✓" : "↗ Share"}
All Episodes
{episodes.map(ep => {
const isCur = ep.id === cur.id;
const liked = !!likes[ep.id];
return (
{
if (isCur) { setPlaying(p => !p); }
else { setCurrentId(ep.id); setElapsed(0); setPlaying(true); }
}}
aria-label={(isCur && playing ? "Pause " : "Play ") + ep.title}
>
{isCur && playing ? "❚❚" : "▶"}
{ep.title}
{ep.section ? `${ep.section} · ` : ""}{ep.mins} min
setLikes(x => ({ ...x, [ep.id]: !x[ep.id] }))}
aria-label="Like">
{liked ? "♥" : "♡"} {ep.baseLikes + (liked ? 1 : 0)}
shareEp(ep)}
aria-label="Share">
{shared === ep.id ? "Copied ✓" : "↗"}
);
})}
);
}
// ── Gul-Lala Home — the whole landing page composition
function GLLandingHome({ query, onSearch, activeCat, tagFilter, onOpenCategory, onOpen, onSubmit, onGotoPodcast, featured }) {
// Hero rotates through the top featured articles (or the most recent if
// none are featured). Every slide points at a real story and shows its
// real image — no "garden of stories" placeholder any more.
const buildSlides = () => {
const articles = window.ARTICLES || [];
// An article "has an image" for hero purposes if we can resolve one —
// either the CMS gave us featured_image, or we override the slug locally.
const withImg = articles.filter(a => !!glResolveImage(a));
const featuredFirst = [
...withImg.filter(a => a.featured),
...withImg.filter(a => !a.featured),
];
const pick = featuredFirst.slice(0, 3);
// Fallback to the base featured object even if the array is empty.
const src = pick.length ? pick : (featured ? [featured] : []);
return src.map((a) => ({
kicker: `Featured · ${labelFor(a.category)}`,
title: a.title,
body: a.excerpt || a.subtitle || "",
cta: "Read This Story",
href: `#article/${a.id}`,
onClick: () => onOpen(a),
imgSrc: glResolveImage(a),
imgAlt: a.imageAlt || a.title,
dotLabel: a.title,
}));
};
const slides = useMemo(buildSlides, [featured && featured.id, activeCat, (window.ARTICLES || []).length]);
const isSearching = !!(query && query.trim());
const isTagFilter = !!tagFilter;
const isCategory = activeCat !== "home";
// Filter-only view: skip hero / about / podcast / submit; show stories only.
const filterOnly = isSearching || isTagFilter || isCategory;
return (
{!filterOnly && (
<>
{
const el = document.getElementById("stories");
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}}
onSubmit={onSubmit}
/>
);
}
Object.assign(window, {
Icon, Plate, Rule, Asterism, SectionHead, Logo, Mark, Motif,
HeaderBrand, SearchBar, Masthead, Hero, ArticleCard, PullQuote,
CategoryHero, SubmitStoryTeaser, SubmitStoryModal,
ArticleEngagement, ArticlePage, Gallery, SiteFoot,
PodcastCover, PlayButton, EpisodeRow, PodcastStrip, PodcastPage,
labelFor,
// Gul-Lala
TulipIcon, GLNav, GLHero, GLAbout, GLStories, GLPodcast, GLSubmit, GLFooter, GLLandingHome,
GLAboutPage, GLPodcastPage,
});
}
{!src && photograph}