feat: rich markdown embeds for GitHub, YouTube, X, CodePen, gists, CodeSandbox

[kingRayhan]

Summary

Enhance markdown rendering so that certain external URLs become rich embeds (not just plain links). Domains/services to prioritize:

• GitHub (repos, issues, PRs, files, gists as on github.com)
• YouTube (already partially supported via Markdoc {% youtube %} — extend to bare youtube.com / youtu.be URLs if desired)
• X (Twitter) (posts, profiles — subject to embed API / oEmbed limits)
• CodePen
• TechDiary gists (/gists/:id or full URL)
• CodeSandbox (sandboxes / devbox links)

Motivation

• Readers see context (preview, player, or runnable embed) without leaving the page.
• Reduces friction compared to generic “link preview cards” only.

Approach (suggested)

Detection

• In Markdoc transform or a post-processing pass on the AST/render tree: detect link nodes whose href matches allowed host + path patterns.

Rendering

• iframe embeds where safe and allowed by CSP (may need frame-src updates for CodePen, CodeSandbox, YouTube, X).
• GitHub: prefer official embed or oEmbed if available; fallback to compact card (title, repo) if iframe not viable.
• gist: TechDiary native gist pages might use an internal embed component; GitHub gists may use GitHub’s embed script or card.

Security & performance

• Allowlist only — no arbitrary URL iframes.
• SSRF: not applicable to client-only embeds; if any server-side fetch is added for metadata, reuse strict URL policies (similar prior link-preview ideas).
• Lazy load iframes (intersection observer or loading="lazy" where valid).

Prior art in repo

• {% youtube %} tag in src/lib/markdown/markdoc-parser.tsx / markdown-tags/youtube.tsx.
• Markdoc tokenizer with linkify in src/lib/markdown/markdoc-tokenizer.ts.

Acceptance criteria (draft)

• Documented list of supported URL patterns per provider.
• Bare URLs in article/markdown body render as embeds (or card) for each supported provider.
• Unsupported URLs remain normal links (optionally still styled).
• CSP / security reviewed for each new iframe origin.
• RSS / email surfaces: define behavior (strip embeds, keep link only, or summary) — TBD.

Non-goals (initial)

• Generic Open Graph link preview for every domain (can be a separate issue).
• Editing experience WYSIWYG for embeds beyond “paste URL → preview in reader”.