{"id":14962530,"url":"https://github.com/ryoppippi/sveltweet","last_synced_at":"2025-10-24T22:32:34.808Z","repository":{"id":250756981,"uuid":"835398852","full_name":"ryoppippi/sveltweet","owner":"ryoppippi","description":"Svelte/SvelteKit version of react-tweet","archived":false,"fork":false,"pushed_at":"2025-02-05T18:46:17.000Z","size":1150,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-05T19:54:43.587Z","etag":null,"topics":["svelte","svetlekit","tweet"],"latest_commit_sha":null,"homepage":"https://sveltweet.vercel.app","language":"Svelte","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ryoppippi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yaml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ryoppippi"}},"created_at":"2024-07-29T18:52:06.000Z","updated_at":"2025-01-31T11:43:09.000Z","dependencies_parsed_at":"2024-09-09T03:27:07.129Z","dependency_job_id":"cad9635e-d99a-4d92-a56b-9e1b80a48b53","html_url":"https://github.com/ryoppippi/sveltweet","commit_stats":{"total_commits":328,"total_committers":4,"mean_commits":82.0,"dds":"0.35365853658536583","last_synced_commit":"f8c24811df53466fd383deb6133053abdca89230"},"previous_names":["ryoppippi/sveltekit-tweet","ryoppippi/svelte-tweet","ryoppippi/sveltweet"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryoppippi%2Fsveltweet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryoppippi%2Fsveltweet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryoppippi%2Fsveltweet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ryoppippi%2Fsveltweet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ryoppippi","download_url":"https://codeload.github.com/ryoppippi/sveltweet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238043943,"owners_count":19407117,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["svelte","svetlekit","tweet"],"created_at":"2024-09-24T13:29:54.745Z","updated_at":"2025-10-24T22:32:34.803Z","avatar_url":"https://github.com/ryoppippi.png","language":"Svelte","funding_links":["https://github.com/sponsors/ryoppippi"],"categories":["Svelte"],"sub_categories":[],"readme":"# Sveltweet (__Svelte + Tweet__)\n\n[![npm version](https://img.shields.io/npm/v/sveltweet?color=yellow)](https://npmjs.com/package/sveltweet)\n[![npm downloads](https://img.shields.io/npm/dm/sveltweet?color=yellow)](https://npmjs.com/package/sveltweet)\n\n\nThe best way to embed tweets in your Svelte app, supporting both SSR and static prerendering modes.\n\n- The tweet is loaded in the server-side.\n- No need for any additional client-side scripts.\n- No need for any loading UI, the tweet is available immediately.\n- Supports both SSR and prerendering.\n\n\u003e This package is a Svelte version of [vercel/react-tweet](https://github.com/vercel/react-tweet) licensed under MIT License, many thanks to the original authors for making it possible!\n\n\u003e This repo is fork of [fayez-nazzal/sveltekit-tweet](https://github.com/fayez-nazzal/sveltekit-tweet)\n\n## Requirements\n- Svelte 5.16.0 or later ( This library uses [`runes`](https://svelte-5-preview.vercel.app/docs/runes) )\n\n## Installation\n\n```bash\nnpx nypm add sveltweet\n```\n\n## Usage\n\n### SvelteKit\n\n#### Recommended: Using Remote Functions\n\nThe simplest way to embed tweets is using [SvelteKit's remote functions](https://svelte.dev/docs/kit/remote-functions). This approach allows you to fetch tweet data directly inside your components without setting up separate server files.\n\n1. Create a remote function to fetch tweet data:\n\n    ```ts\n    // src/lib/tweet.remote.ts\n    import { query } from '@sveltejs/kit';\n    import { getTweet } from 'sveltweet/api';\n\n    export const getTweetData = query(async (id: string) =\u003e getTweet(id));\n    ```\n\n2. Use it directly in your component:\n\n    Recommended way to use the `Tweet` component with remote functions:\n    ```svelte\n    \u003cscript lang='ts'\u003e\n        import { Tweet } from 'sveltweet';\n        import { getTweetData } from '$lib/tweet.remote';\n    \u003c/script\u003e\n\n    \u003c!-- Recommended: Using await directly --\u003e\n    \u003csvelte:boundary\u003e\n        \u003cTweet tweet={await getTweetData(tweetId)} /\u003e\n        {#snippet pending()}\n            \u003cTweetSkeleton /\u003e\n        {/snippet}\n        {#snippet failed()}\n            \u003cTweetNotFound /\u003e\n        {/snippet}\n    \u003c/svelte:boundary\u003e\n    ```\n\n    Or, if you prefer to handle loading states manually:\n    ```svelte\n    \u003cscript lang='ts'\u003e\n        import { Tweet } from 'sveltweet';\n        import { getTweetData } from '$lib/tweet.remote';\n\n        const tweetId = '1234567890';\n        const tweet = getTweetData(tweetId);\n    \u003c/script\u003e\n\n    \u003c!-- Alternative: Using {#if} block for loading states --\u003e\n    {#if tweet.error}\n        \u003cp\u003eError loading tweet: {tweet.error.message}\u003c/p\u003e\n    {:else if tweet.loading}\n        \u003cp\u003eLoading tweet...\u003c/p\u003e\n    {:else if tweet.ready}\n        \u003cTweet tweet={tweet.current} /\u003e \n    {/if}\n    ```\n\n\u003e [!NOTE]\n\u003e Remote functions and await syntax require configuration. See the [SvelteKit remote functions documentation](https://svelte.dev/docs/kit/remote-functions) and [Svelte await expressions documentation](https://svelte.dev/docs/svelte/await-expressions) for setup instructions.\n\n\u003e [!IMPORTANT]\n\u003e When using `await` directly, make sure to wrap your component with `\u003csvelte:boundary\u003e` for error handling. See the [Svelte boundary documentation](https://svelte.dev/docs/svelte/svelte-boundary) for details.\n\n#### Alternative: Using Traditional Loaders\n\nIf you prefer the traditional approach or need more control over data loading:\n\n1.  Go to the tweet you want to embed. You will find the URL\n2.  Use the `getTweet` function in your `+page.server.ts` file to fetch the tweet data.\n\n    ```ts\n    import { getTweet } from 'sveltweet/api';\n    import { error } from '@sveltejs/kit';\n    import type { RequestEvent } from './$types';\n\n    export async function load({ params }: RequestEvent) {\n        const { id } = params;\n        try {\n            const tweet = await getTweet(id);\n\n            return { tweet };\n        }\n        catch {\n            return error(500, 'Could not load tweet');\n        }\n    }\n\n    ```\n\n3.  Use the `Tweet` component in your `+page.svelte` file to render the tweet.\n\n    ```svelte\n    \u003cscript lang='ts'\u003e\n    \timport { Tweet } from 'sveltweet';\n    \timport type { PageData } from './$types';\n\n        const { data }: { data: PageData } = $props()\n    \u003c/script\u003e\n\n    \u003cTweet tweet={data.tweet} /\u003e\n    ```\n\n### Svelte\n\n```svelte\n\u003cscript lang='ts'\u003e\n    import { Tweet } from 'sveltweet';\n    import { getTweet } from 'sveltweet/api';\n\n    const id = '';\n\u003c/script\u003e\n\n{#await getTweet(id) then tweet}\n    \u003cTweet tweet={data.tweet} /\u003e\n{/await}\n```\n\n## Customisation\n\n`Tweet` shares the same CSS file with [`react-tweet`](https://react-tweet.vercel.app/). \nSo, refer to the [`Custom Theme`](https://react-tweet.vercel.app/custom-theme) section in the `react-tweet` documentation to customise the tweet appearance.\n\n# License\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryoppippi%2Fsveltweet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fryoppippi%2Fsveltweet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fryoppippi%2Fsveltweet/lists"}