// linktree.js — shared React components that render the public linktree.
// Used by view.html (read-only public profile) and edit.html (live preview).
// Mirrors the original stanmaxx.html design 1:1; the only deltas are:
// • Photo + bubble thumb accept image URLs (uploaded files) and fall back to
// the original SVG placeholders when nothing is uploaded yet.
// • Cover style is locked to "stack" (per product spec — no toggle).
// • Bubble is locked to top-right rounded (per product spec).
// • Motion is locked to "lively" (~18s drift cycle).
// Exposes window.Linktree = { App, Background, Header, Identity, EventCard,
// Links, ProfileCover, BubbleSticker, PhotoPortrait, PhotoSecondary, LinkIcon }
// so other scripts can mount a preview or just reuse a piece.
const { useState, useEffect, useRef, useCallback } = React;
// ── i18n helpers ────────────────────────────────────────────────────────────
// Linktree components are mounted both on the public profile (view.html) and
// inside the editor preview (edit.html). On view.html the owner's locale is
// applied to window.i18n before this code runs. On edit.html the editor's
// own locale (= the visitor's = the owner's) is already set. So we just call
// window.i18n.t() directly.
//
// useI18n is a tiny hook that re-renders the component when the language
// changes (the i18n module dispatches "i18n:change" on window). Without it,
// React wouldn't know to re-render translated strings after setLang().
function useI18n() {
const [, setTick] = useState(0);
useEffect(() => {
const onChange = () => setTick((n) => n + 1);
window.addEventListener("i18n:change", onChange);
return () => window.removeEventListener("i18n:change", onChange);
}, []);
return useCallback((key, params, fallback) => {
if (typeof window !== "undefined" && window.i18n) {
const v = window.i18n.t(key, params);
if (v && v !== key) return v;
}
return fallback != null ? fallback : key;
}, []);
}
// ── Background ──────────────────────────────────────────────────────────────
function Background() {
return (
);
}
// ── Header ──────────────────────────────────────────────────────────────────
function Header({ rightSlot, shareUrl, housePseudo, houseEnabled, markHref }) {
const [open, setOpen] = useState(false);
const [copied, setCopied] = useState(false);
const [error, setError] = useState(false);
const wrapRef = useRef(null);
const resetRef = useRef(null);
const t = useI18n();
// The URL we share. Prefer an explicit shareUrl (passed by LinktreeApp so
// the editor's preview points at /pseudo and not /edit); fall back to the
// current page when none is provided (public profile view).
const url = shareUrl
|| (typeof location !== "undefined" ? location.href : "");
// Click-outside + Escape close the popover.
useEffect(() => {
if (!open) return;
const onDown = (e) => {
if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
};
const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
document.addEventListener("mousedown", onDown);
document.addEventListener("touchstart", onDown, { passive: true });
document.addEventListener("keydown", onKey);
return () => {
document.removeEventListener("mousedown", onDown);
document.removeEventListener("touchstart", onDown);
document.removeEventListener("keydown", onKey);
};
}, [open]);
const flash = (which) => {
if (which === "copied") { setCopied(true); setError(false); }
else { setError(true); setCopied(false); }
if (resetRef.current) clearTimeout(resetRef.current);
resetRef.current = setTimeout(() => {
setCopied(false); setError(false);
}, 1800);
};
const doCopy = async () => {
try {
if (navigator.clipboard) {
await navigator.clipboard.writeText(url);
flash("copied");
} else {
// Legacy fallback for older browsers.
const ta = document.createElement("textarea");
ta.value = url;
ta.style.position = "fixed";
ta.style.opacity = "0";
document.body.appendChild(ta);
ta.select();
try { document.execCommand("copy"); flash("copied"); }
catch { flash("error"); }
document.body.removeChild(ta);
}
} catch {
flash("error");
}
};
const doNativeShare = async () => {
if (!navigator.share) { doCopy(); return; }
try {
await navigator.share({ url, title: document.title || "stanmaxx" });
setOpen(false);
} catch (e) {
// User dismissed the native sheet — leave popover open silently.
if (e && e.name !== "AbortError") flash("error");
}
};
const canNativeShare = typeof navigator !== "undefined" && !!navigator.share;
return (
créé avec stanmaxx.com
{/* House entrance — the owner enabled a companion page, so we
offer a one-tap jump to it from the linktree header. We use
the same glass chip recipe as the share button and keep it
tucked left of share so the share button stays the right
anchor visitors know. We don't show this button on the
editor preview (rightSlot is set there), to keep the header
from getting too crowded inside the small preview pane. */}
{!rightSlot && houseEnabled && housePseudo && (
)}
{rightSlot || (
{open && (
{t("common.share_link", null, "Partager cette page")}
{url}
{canNativeShare && (
)}
)}
)}
);
}
// ── ProfileCover ────────────────────────────────────────────────────────────
// Square Liquid-Glass frame holding the profile photo, with a corner sticker
// (BubbleSticker). Click the sticker → expand its mini photo to fill the
// cover; click anywhere to collapse. The cover is locked to "stack" style
// per the product spec.
function ProfileCover({ photoUrl, storyUrl, bubbleText, expanded, onToggle }) {
return (
{photoUrl ? : }
{storyUrl ? : }
verified
);
}
// ── BubbleSticker ───────────────────────────────────────────────────────────
// Glass speech bubble pinned to the cover's top-right corner (locked by
// product spec). Holds bubble text + a small thumbnail of the secondary
// photo. Click → tells parent to expand.
function BubbleSticker({ text, storyUrl, active, onClick }) {
const corner = "tr";
const shape = "rounded";
const t = useI18n();
return (
);
}
// ── Identity ────────────────────────────────────────────────────────────────
function Identity({ displayName, handle, tagline, nameColor }) {
// The owner-picked name color (when present) overrides the default white.
// We always keep the drop-shadow so the text reads on bright gradients
// even with pale colors like ivory or soft pink. nameColor comes from
// a server-enforced allowlist, so it's safe to inject as a CSS color.
const nameStyle = nameColor ? { color: nameColor } : undefined;
return (
{displayName}{handle}
{tagline &&
{tagline}
}
);
}
// ── Event ───────────────────────────────────────────────────────────────────
function EventCard({ event }) {
const t = useI18n();
if (!event || !event.enabled) return null;
return (
);
}
// ── House entrance ───────────────────────────────────────────────────────────
// A prominent card in the body of the public profile that invites visitors
// to step into the owner's companion house. The shareable link stays unique
// (stanmaxx.com/pseudo) — this card is how a visitor who only has that one
// link discovers and reaches the house at /pseudo/house. We only render it
// when the owner has enabled their house (data.houseEnabled). Styled as a
// glass card to match EventCard, with a cozy little house glyph so it reads
// as "a place" rather than just another link.
function HouseEntrance({ pseudo, enabled }) {
const t = useI18n();
if (!enabled || !pseudo) return null;
return (
);
}
// ── Store entrance ───────────────────────────────────────────────────────────
// Sibling of HouseEntrance: a glass card on the public link page that takes a
// visitor to the owner's WhatsApp store at /:pseudo/store. Rendered only when
// the store is enabled AND the owner chose to surface it on the link page
// (storeOnLinkpage). Shows the shop's name when set, falling back to a generic
// label. The little bag/storefront glyph reads as "a shop".
function StoreEntrance({ pseudo, enabled, onLinkpage, storeName }) {
const t = useI18n();
if (!enabled || !onLinkpage || !pseudo) return null;
const title = (storeName && storeName.trim())
? storeName
: t("view.store_entrance_title", null, "Ma boutique");
return (
);
}
// ── Links ───────────────────────────────────────────────────────────────────
function Links({ items }) {
if (!items || items.length === 0) return null;
// Intercept the click so we can fire a tracking ping before navigation.
// We use sendBeacon when available — it's specifically designed for this
// case (browser keeps the request alive across navigation) and never
// blocks the user. Modifier-clicks (cmd, ctrl, shift, middle) bypass the
// tracker entirely so power users opening in new tabs aren't slowed.
const onLinkClick = (e, item) => {
// Let the browser handle "open in new tab", "open in new window",
// right-click, copy-link, etc. — these don't navigate the current page
// so we don't need to delay anything. We DO still fire a beacon so
// the click is counted even when the user opens in a new tab.
const isNewTab = e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1;
if (typeof item.id === "number" && item.id > 0) {
const body = JSON.stringify({ id: item.id });
try {
if (navigator.sendBeacon) {
navigator.sendBeacon("/api/track/click",
new Blob([body], { type: "application/json" }));
} else {
// Old browsers — fire-and-forget fetch. keepalive lets it survive
// the navigation (when supported).
fetch("/api/track/click", {
method: "POST",
headers: { "Content-Type": "application/json" },
body,
keepalive: true,
}).catch(() => {});
}
} catch { /* tracking failures must never block navigation */ }
}
// Don't preventDefault — let the native click do its thing. With
// sendBeacon the ping fires from the browser even after we unload.
void isNewTab; // documented intent above; no further action needed
};
return (
);
}
function LinkIcon({ name }) {
const wrap = (children) => (
{children}
);
switch (name) {
case "ig":
return wrap(
);
case "tk":
return wrap(
);
case "yt":
return wrap(
);
case "sp":
return wrap(
);
case "bag":
return wrap(
);
case "mail":
return wrap(
);
case "globe":
return wrap(
);
case "music":
return wrap(
);
case "video":
return wrap(
);
default:
return wrap(
);
}
}
// ── Footer ──────────────────────────────────────────────────────────────────
function Footer({ pseudo }) {
return (
);
}
// ── Photo placeholders ──────────────────────────────────────────────────────
// Two visual placeholders — primary (portrait), secondary (lifestyle).
// Each is a CSS gradient/SVG composition so the layout is convincing
// without relying on user-supplied imagery.
function PhotoPortrait() {
return (
);
}
function PhotoSecondary() {
return (
);
}
// ── App: full linktree page ─────────────────────────────────────────────────
// `data` is the public profile payload from /api/u/:pseudo (or /api/profile/me).
// `headerSlot` lets the editor inject a "Back to edit" button.
function LinktreeApp({ data, headerSlot }) {
const [expanded, setExpanded] = useState(false);
// Apply gradient settings to :root variables.
useEffect(() => {
if (!data) return;
const r = document.documentElement;
const p = data.palette || ["#FFE066", "#FF8A3D", "#FF3D7F", "#9D2BFF"];
r.style.setProperty("--c1", p[0] || "#FFE066");
r.style.setProperty("--c2", p[1] || "#FF8A3D");
r.style.setProperty("--c3", p[2] || "#FF3D7F");
r.style.setProperty("--c4", p[3] || "#9D2BFF");
r.style.setProperty("--grad-angle", (data.gradAngle ?? 180) + "deg");
r.style.setProperty("--grad-intensity",
((data.gradIntensity ?? 100) / 100).toString());
// Motion is locked to "lively" per product spec.
r.style.setProperty("--motion-dur", "18s");
// Note: we intentionally do NOT set a here.
// A flat theme-color paints Safari's URL bar and Chrome's chrome with a
// solid block of colour, which looked like an orange "band" above and
// below the gradient on mobile. Leaving theme-color absent lets the
// browser auto-detect the page colour and tint its chrome to match
// (Safari ≥ 15, Chrome ≥ 130) — when auto-detect isn't available the
// chrome falls back to a neutral translucent tone, which still reads
// cleaner than a solid orange band.
}, [data]);
if (!data) {
return (
);
}
return (
setExpanded((v) => !v)}
/>
);
}
// View tracking — called from view.html once the public profile data is
// available. Uses sendBeacon when possible so the ping doesn't block. The
// server enforces dedup per (visitor × profile) over 24h so calling this
// on every page load is safe; the counter only goes up once.
function trackView(pseudo) {
if (!pseudo || typeof pseudo !== "string") return;
try {
const body = JSON.stringify({ pseudo });
if (navigator.sendBeacon) {
navigator.sendBeacon("/api/track/view",
new Blob([body], { type: "application/json" }));
} else {
fetch("/api/track/view", {
method: "POST",
headers: { "Content-Type": "application/json" },
body,
credentials: "same-origin",
keepalive: true,
}).catch(() => {});
}
} catch { /* tracking is best-effort */ }
}
// Expose for other scripts.
window.Linktree = {
App: LinktreeApp,
Background,
Header,
Identity,
EventCard,
HouseEntrance,
StoreEntrance,
Links,
ProfileCover,
BubbleSticker,
PhotoPortrait,
PhotoSecondary,
LinkIcon,
trackView,
};
: 
: