/* global React, Common, I18n, HelpContent, HelpCommon */ // ============================================================= // HelpArticle. Renders one article based on the slug stamped on // the body via data-help-slug. Layout: 3-column on desktop // (article body in the middle, sidebar TOC on the right), single // column on mobile. Includes breadcrumb, prev/next, contextual // "in this category" rail. // ============================================================= const { Eyebrow } = Common; const { useT, useI18n } = I18n; const { HELP_CATEGORIES, HELP_ARTICLES, HELP_ARTICLE_BY_SLUG, HELP_ARTICLES_BY_CATEGORY } = HelpContent; const { HelpBlock, ArticleCard, useHelpSearch, slugify } = HelpCommon; const { useEffect, useMemo, useState, useRef } = React; const ART_COPY = { notFoundEyebrow: { en: "404", it: "404" }, notFoundTitle: { en: "Article not found", it: "Articolo non trovato" }, notFoundLead: { en: "We couldn't find an article for this URL. It may have moved or been renamed.", it: "Non abbiamo trovato un articolo per questa URL. Forse è stato spostato o rinominato.", }, backToHub: { en: "Back to Help center", it: "Torna al Centro assistenza" }, searchPlaceholder: { en: "Search help…", it: "Cerca nell'help…" }, tocTitle: { en: "On this page", it: "In questa pagina" }, inCategory: { en: "In this category", it: "In questa categoria" }, prev: { en: "Previous", it: "Precedente" }, next: { en: "Next", it: "Successivo" }, breadcrumbHome: { en: "Help", it: "Help" }, wasHelpful: { en: "Was this helpful?", it: "Ti è stato utile?" }, helpfulYes: { en: "Yes", it: "Sì" }, helpfulNo: { en: "No", it: "No" }, helpfulThanks: { en: "Thanks for the feedback.", it: "Grazie del feedback." }, helpfulIssue: { en: "Tell us what's missing on GitHub.", it: "Dicci cosa manca su GitHub.", }, lastUpdated: { en: "Last updated", it: "Ultimo aggiornamento" }, lastUpdatedDate: "2026-05-22", }; function readSlugFromDom() { if (typeof document === "undefined") return null; const body = document.body; if (body && body.dataset && body.dataset.helpSlug) return body.dataset.helpSlug; // Fallback: parse the URL. const m = (typeof window !== "undefined" ? window.location.pathname : "/").match( /^\/help\/([^/]+)\/?$/ ); return m ? m[1] : null; } function ArticleBreadcrumb({ article, category }) { const { lang } = useI18n(); const home = useT(ART_COPY.breadcrumbHome); return ( ); } function ArticleHeader({ article, category }) { const { lang } = useI18n(); const title = article.title[lang] || article.title.en; const summary = article.summary[lang] || article.summary.en; return (
{category.title[lang] || category.title.en}

{title}

{summary}

); } function ArticleToc({ blocks }) { const tocTitle = useT(ART_COPY.tocTitle); const headings = useMemo( () => (blocks || []).filter((b) => b.type === "heading"), [blocks] ); const [activeId, setActiveId] = useState(""); useEffect(() => { if (headings.length === 0) return undefined; const observers = headings.map((bl) => { const el = document.getElementById(slugify(bl.text)); if (!el) return null; const io = new IntersectionObserver( (entries) => { entries.forEach((e) => { if (e.isIntersecting) setActiveId(slugify(bl.text)); }); }, { rootMargin: "-25% 0px -65% 0px", threshold: 0 } ); io.observe(el); return io; }); return () => observers.forEach((io) => io && io.disconnect()); }, [headings]); if (headings.length === 0) return null; return ( ); } function PrevNext({ prev, next }) { const { lang } = useI18n(); const prevLabel = useT(ART_COPY.prev); const nextLabel = useT(ART_COPY.next); if (!prev && !next) return null; return ( ); } function InCategoryRail({ article, category }) { const title = useT(ART_COPY.inCategory); const siblings = (HELP_ARTICLES_BY_CATEGORY[category.id] || []).filter( (a) => a.slug !== article.slug ); if (siblings.length === 0) return null; return (

{title}

{siblings.map((a) => ( ))}
); } function HelpfulPrompt() { const title = useT(ART_COPY.wasHelpful); const yes = useT(ART_COPY.helpfulYes); const no = useT(ART_COPY.helpfulNo); const thanks = useT(ART_COPY.helpfulThanks); const issue = useT(ART_COPY.helpfulIssue); const [picked, setPicked] = useState(null); return (
{title} {picked ? ( {thanks} {picked === "no" && ( <> {" "} {issue} )} ) : ( {["yes", "no"].map((k) => ( ))} )}
); } function ArticleSearchInHeader() { const placeholder = useT(ART_COPY.searchPlaceholder); const [q, setQ] = useState(""); const search = useHelpSearch(); const results = q ? search(q).slice(0, 6) : []; const containerRef = useRef(null); const [open, setOpen] = useState(false); useEffect(() => { const onDocClick = (e) => { if (!containerRef.current) return; if (!containerRef.current.contains(e.target)) setOpen(false); }; document.addEventListener("mousedown", onDocClick); return () => document.removeEventListener("mousedown", onDocClick); }, []); return (
{ setQ(e.target.value); setOpen(true); }} onFocus={() => setOpen(true)} placeholder={placeholder} style={{ background: "transparent", border: 0, outline: "none", color: "var(--fg)", fontSize: 13, fontFamily: "var(--font-sans)", width: 220, }} />
{open && q && (
{results.length === 0 ? (
No matches. Try the Help center.
) : ( )}
)}
); } function HelpArticleNotFound() { const eb = useT(ART_COPY.notFoundEyebrow); const title = useT(ART_COPY.notFoundTitle); const lead = useT(ART_COPY.notFoundLead); const back = useT(ART_COPY.backToHub); return (
{eb}

{title}

{lead}

← {back}
); } function HelpArticle() { const { lang } = useI18n(); const slug = useMemo(readSlugFromDom, []); const article = slug ? HELP_ARTICLE_BY_SLUG[slug] : null; const category = article ? HELP_CATEGORIES.find((c) => c.id === article.category) : null; // Update document title once article resolves. useEffect(() => { if (article) { const t = article.title[lang] || article.title.en; document.title = `${t}. Dimmy Help.`; } }, [article, lang]); if (!article || !category) { return ; } const blocks = article.blocks[lang] || article.blocks.en; const idx = HELP_ARTICLES.findIndex((a) => a.slug === article.slug); const prev = idx > 0 ? HELP_ARTICLES[idx - 1] : null; const next = idx < HELP_ARTICLES.length - 1 ? HELP_ARTICLES[idx + 1] : null; return (
{/* Sub-header bar: search input next to the breadcrumb */}
← {useT(ART_COPY.backToHub)}
{blocks.map((b, i) => ( ))}
{useT(ART_COPY.lastUpdated)}: {ART_COPY.lastUpdatedDate}
); } window.HelpArticle = HelpArticle;