Add XCard tweet embeds for markdown content#207
Open
VAIBHAVSING wants to merge 8 commits into
Open
Conversation
Standalone X/Twitter URLs on their own line in markdown content are automatically rendered as rich tweet cards at build time via a remark plugin. The component is also exported for direct use in Svelte pages. - src/lib/utils/x-api.js: tweet fetch utility using Twitter syndication API - src/lib/components/XCard.svelte: Svelte 4 component with loading/error states - src/lib/cms/remark-x-card.js: remark plugin for auto-detecting standalone X URLs - src/lib/cms/content-processor.js: integrate remark-x-card into mdsvex pipeline - src/lib/index.ts: export XCard component - templates/default/content/docs/x-card.md: documentation
- Fix remark-x-card.js: import visit as default export (v2 is CJS, module.exports = visit directly, named ESM import fails under Vite SSR) - Update components.md: use subpath imports (statue-ssg/components/*) instead of barrel imports; add LinkPreview and TagList docs; remove deprecated ContentGrid/ImageGridElement/CaptionedGridElement sections Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
VAIBHAVSING
force-pushed
the
emdash/x-card-7op
branch
from
d28224e to
18cac3f
Compare
- Create src/lib/embeds/ with provider registry (runtime.js), X provider (providers/x.js), and embedEnhancer Svelte action (action.js) - Export embeds via statue-ssg/embeds/* in package.json - Templates use `use:embedEnhancer` on content wrappers instead of manual $effect + tick + enhanceEmbeds boilerplate - MutationObserver in the action auto-enhances embeds on content changes - Remove X-specific video hooks from ContentBody and DocsContent - Add data-embed-provider attribute to x-card HTML output - Adding a new embed provider only requires a provider file + registration
ben-fultz
reviewed
Mar 18, 2026
| */ | ||
| export async function fetchTweet(id) { | ||
| const token = generateToken(id); | ||
| const url = `https://cdn.syndication.twimg.com/tweet-result?id=${id}&token=${token}&features=${encodeURIComponent(SYNDICATION_FEATURES)}`; |
Contributor
There was a problem hiding this comment.
Does this actually work? Searching online indicates this in an unofficial/internal API that has not supported stable request patterns over the past few years.
Contributor
Author
There was a problem hiding this comment.
I have taken this from https://react-tweet.vercel.app/
And I confirm this is working on local system and most of people are still using this approach.
If you have any other approach I would like to work on those
Contributor
|
Could we refactor this to put the data gathering/enrichment logic in the component file itself? As a general principle we want these components to be portable outside of Statue, and I don't think that adding patterns like src/lib/embeds or src/lib/utils will help us maintain that. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
XCardcomponent for rendering rich X/Twitter tweet embeds in Svelte pages