// InternalLinkingPanel — suggests related published articles for internal linking. // // REQUIREMENTS: // - Only fetches published posts (status = 'published') // - Excludes the current post by slug // - Scores by: cluster (strongest) > category > tag overlap > title keyword overlap // - Requires at least 2 other published posts to show meaningful suggestions // // Architecture note: designed for future AI plugin replacement. // The scoring engine (scoreCandidates) is the only part that needs swapping. const BLOG_URL = 'https://blog.wablan.com'; const MAX_SUGGESTIONS = 8; // ─── Scoring engine ─────────────────────────────────────────────────────────── // Returns candidates sorted by relevance. Replace this function with an AI call. // Normalize a cluster string: lowercase + spaces → hyphens. // Handles "branding-maroc", "text 1 - text 2", "Branding Maroc" all the same way. function normalizeCluster(s) { return (s || '').toLowerCase().trim().replace(/\s+/g, '-'); } function scoreCandidates(candidates, form) { const formCategory = (form.category || '').toLowerCase(); const formCluster = normalizeCluster(form.cluster); const formTags = Array.isArray(form.tags) ? form.tags.map(t => t.toLowerCase()) : []; const formTitle = i18nOf(form.title, 'en').toLowerCase(); const formWords = formTitle.split(/\s+/).filter(w => w.length > 3); const formContent = i18nOf(form.content, 'en').toLowerCase(); const formContentWords = formContent.replace(/<[^>]+>/g, ' ').split(/\s+/).filter(w => w.length > 4); return candidates .map(c => { let score = 0; const cTitle = i18nOf(c.title, 'en').toLowerCase(); const cTags = Array.isArray(c.tags) ? c.tags.map(t => t.toLowerCase()) : []; const cCategory = (c.category || '').toLowerCase(); const cCluster = normalizeCluster(c.cluster); // normalize for flexible matching // Same cluster — strongest topical signal (handles spaces, case, dashes) if (formCluster && cCluster && formCluster === cCluster) score += 50; // Same category if (formCategory && cCategory && formCategory === cCategory) score += 30; // Tag overlap const tagOverlap = formTags.filter(t => cTags.includes(t)).length; score += tagOverlap * 15; // Title keyword overlap const titleMatches = formWords.filter(w => cTitle.includes(w)).length; score += titleMatches * 10; // Content keyword overlap (capped) const contentMatches = formContentWords.slice(0, 50).filter(w => cTitle.includes(w)).length; score += Math.min(contentMatches * 5, 20); const anchorText = i18nOf(c.title, 'en'); return { ...c, _score: score, anchorText }; }) .filter(c => c._score > 0) .sort((a, b) => b._score - a._score) .slice(0, MAX_SUGGESTIONS); } // ─── Component ──────────────────────────────────────────────────────────────── function InternalLinkingPanel({ form, onInsertLink }) { const [open, setOpen] = React.useState(false); const [suggestions, setSuggestions] = React.useState(null); // null = not fetched yet const [totalFetched, setTotalFetched] = React.useState(0); // raw published post count const [loading, setLoading] = React.useState(false); const [inserted, setInserted] = React.useState({}); // slugs marked as inserted const [copiedSlug, setCopiedSlug] = React.useState(null); const currentSlug = form.slug; const fetch = async () => { setLoading(true); const { data, error } = await db .from('blog_posts') .select('slug, title, category, tags, cluster') .eq('status', 'published') // only published posts .neq('slug', currentSlug || '__none__'); // exclude current post setLoading(false); if (error || !data) { setSuggestions([]); setTotalFetched(0); return; } setTotalFetched(data.length); setSuggestions(scoreCandidates(data, form)); }; const handleOpen = () => { setOpen(o => !o); if (!open && suggestions === null) fetch(); }; const handleRefresh = (e) => { e.stopPropagation(); setSuggestions(null); fetch(); }; const handleInsert = (c) => { const url = `${BLOG_URL}/blog/${c.slug}`; const text = c.anchorText || i18nOf(c.title, 'en'); onInsertLink(url, text); setInserted(prev => ({ ...prev, [c.slug]: true })); }; const handleCopy = (c) => { const url = `${BLOG_URL}/blog/${c.slug}`; const text = c.anchorText || i18nOf(c.title, 'en'); const html = `${text}`; navigator.clipboard.writeText(html).catch(() => { const ta = document.createElement('textarea'); ta.value = html; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); document.body.removeChild(ta); }); setCopiedSlug(c.slug); setTimeout(() => setCopiedSlug(null), 2000); }; const count = suggestions ? suggestions.length : 0; return (
{/* Header — always visible */} )}
{/* Body */} {open && (
{loading && (
Analyzing…
)} {!loading && suggestions !== null && count === 0 && totalFetched < 2 && ( // Not enough published posts to suggest anything
Internal linking needs at least 2 published articles.
Publish more related articles first.
)} {!loading && suggestions !== null && count === 0 && totalFetched >= 2 && ( // Posts exist but no category/tag/cluster match
No strong matches found.
Try matching category, tags, or cluster with other published articles.
)} {!loading && count > 0 && ( <>

{count} opportunit{count !== 1 ? 'ies' : 'y'} — click Insert to add at cursor, or Copy to paste manually.

{suggestions.map(c => (
{i18nOf(c.title, 'en')} {inserted[c.slug] && ✓ inserted}
{c.category && ( {c.category} )} {c.cluster && ( {c.cluster} )}
Anchor: "{c.anchorText}"
))}
)} {suggestions === null && !loading && ( )}
)} ); } window.InternalLinkingPanel = InternalLinkingPanel;