X Post Showcase
Example
Dark Mode
Component Documentation
Component Name
XPost
Builder Function Name
create_x_post_manager
Description
Embeds an X (formerly Twitter) post given its post ID, handling script loading and rendering. Supports internal and external links with optional previews and QR codes.
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| id | string or null | generated unique ID | A unique string ID for this XPost component. If not provided, a unique ID is generated automatically. |
| post_id | string | The unique identifier of the X (Twitter) post to embed. This is required for rendering the post. | |
| href | string or null | The URL associated with the post. If it starts with '/', it's treated as an internal link; otherwise, as an external link. | |
| display_text | string or null | The text to display for the link. If not provided, child content can be used instead. | |
| text_color | CSS color or null | The color of the link text. If not specified, it inherits the default styling. | |
| is_show_preview | boolean | !is_internal_link | Determines whether to show a popover preview of the post when clicked. Defaults to true for external links and false for internal links. |
| is_dark_theme | boolean | true | If true, the embedded post uses a dark theme. Otherwise, a light theme is applied. |
| height | number or null | min(40rem, 50vh) | The height of the popover containing the embedded post, specified in rem. Defaults to 'min(40rem, 50vh)' if not set. |
| width | number or null | clamp(60rem, 80vw, 100%) | The width of the popover containing the embedded post, specified in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set. |
| on_goto_external_link | function or null | Optional callback function that is invoked when an external link is opened. Receives the `href` as an argument. |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| load_script | Dynamically loads the Twitter widgets script necessary for embedding the post. Once loaded, it triggers the rendering of the embedded post. | No Params | |
| render_x_post | Embeds the X (Twitter) post into the designated container using `twttr.widgets.createTweet`. Handles theme settings and error messaging if the post fails to load. | No Params | |
| handle_a_click | Handles click events on the link. Prevents the default behavior and determines whether to navigate internally, show a preview, or open the link externally based on configuration. | No Params | |
| open_link | Opens the link associated with the post. If it's an internal link, it uses SvelteKit's `goto` for navigation. For external links, it opens the URL in a new browser tab and invokes the `on_goto_external_link` callback if provided. | No Params | |
| set_val | Updates the `val` state with a new value and re-initializes the embedded post if necessary. | No Params |
Returned Properties
| Property | Type | Description |
|---|---|---|
| post_id | string | The unique identifier of the X (Twitter) post being embedded. |
| is_dark_theme | boolean | Indicates whether the embedded post is using a dark theme. |
| theme | string | The current theme of the embedded post ('dark' or 'light'). |
| popover_manager | object | Popover manager for controlling the display of the post preview. Methods include `open()` and `close()`. |
| toggle_popover_manager | object | Button manager for toggling the popover. Manages the state and behavior of the toggle button. |
| height | string | The height of the popover container, in rem. |
| width | string | The width of the popover container, in rem. |
