Skip to content

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

Open

Description

@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”.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions