Embed Components

This page is the first pass at bringing the antfu.me embedding workflow into this site: keep the page itself in Markdown, then drop in small Vue components only when the content actually benefits from richer presentation.

AppLink #

Use AppLink for links that might be internal or external. Internal links stay on the router, external links open in a new tab.

TextCopy #

TextCopy is useful for shell commands, package names, route paths, handles, or any small chunk of text that readers are likely to reuse.

GitHubRepoCard #

For projects, tools, and references, a repo card carries more weight than a plain inline link.

YouTubeEmbed #

When the article needs a real video instead of a plain link, embed it directly and keep the surrounding prose short.

BilibiliEmbed #

The same pattern applies to Bilibili so Chinese-language content can stay first-class instead of being pushed out to a plain hyperlink.

Why This Matters #

This is the pattern worth learning from antfu.me:

• Markdown remains the default authoring surface.
• Components are small, focused, and content-driven.
• Rich embeds stay reusable instead of being rewritten per post.
• Heavier interactive demos can come later, once the lightweight embed layer is solid.