{"id":15288422,"url":"https://github.com/amr3k/sveltegram","last_synced_at":"2025-10-05T20:32:16.635Z","repository":{"id":41184623,"uuid":"483103154","full_name":"amr3k/sveltegram","owner":"amr3k","description":"Reactive Telegram widgets built with svelte","archived":false,"fork":false,"pushed_at":"2025-04-30T22:56:34.000Z","size":1018,"stargazers_count":32,"open_issues_count":2,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-07-12T02:13:27.397Z","etag":null,"topics":["javascript","npm","package","svelte","svelte-component","svelte5","sveltejs","sveltekit","telegram","widget"],"latest_commit_sha":null,"homepage":"https://sveltegram.a3k.me","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/amr3k.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"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,"zenodo":null}},"created_at":"2022-04-19T05:07:42.000Z","updated_at":"2025-06-04T19:04:50.000Z","dependencies_parsed_at":"2023-02-09T11:31:53.945Z","dependency_job_id":"88dfc686-df4f-438f-afab-7e59adac1444","html_url":"https://github.com/amr3k/sveltegram","commit_stats":{"total_commits":59,"total_committers":1,"mean_commits":59.0,"dds":0.0,"last_synced_commit":"4c2ffa18c10eedaeb3a7dc23ddf6d579da550efa"},"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"purl":"pkg:github/amr3k/sveltegram","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr3k%2Fsveltegram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr3k%2Fsveltegram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr3k%2Fsveltegram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr3k%2Fsveltegram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/amr3k","download_url":"https://codeload.github.com/amr3k/sveltegram/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/amr3k%2Fsveltegram/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271455687,"owners_count":24762775,"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","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","npm","package","svelte","svelte-component","svelte5","sveltejs","sveltekit","telegram","widget"],"created_at":"2024-09-30T15:48:45.219Z","updated_at":"2025-10-05T20:32:11.604Z","avatar_url":"https://github.com/amr3k.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sveltegram\n\nThis package allows you to embed telegram widgets in your svelte web application.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./images/Logo.svg\" width=\"256px\"\u003e\n\n## [Demo \u0026 Documentation](https://sveltegram.a3k.me)\n\n\u003c/div\u003e\n\n[![Demo](https://img.shields.io/website?label=Demo\u0026url=https%3A%2F%2Fsveltegram.a3k.me)](https://sveltegram.a3k.me)\n![GitHub branch checks state](https://img.shields.io/github/checks-status/amr3k/sveltegram/main)\n\n\u003c!-- ![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/sveltegram) --\u003e\n\u003c!-- ![npm](https://img.shields.io/npm/dw/sveltegram) --\u003e\n\u003c!-- ![GitHub commit activity](https://img.shields.io/github/commit-activity/m/amr3k/sveltegram?color=8e4700) --\u003e\n\n![LICENSE](https://img.shields.io/github/license/amr3k/sveltegram?style=flat\u0026color=fcdaff)\n![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/amr3k/sveltegram?color=fffc35\u0026label=Repo%20size)\n[![Hits-of-Code](https://hitsofcode.com/github/amr3k/sveltegram?branch=main)](https://hitsofcode.com/github/amr3k/sveltegram/view?branch=main)\n\n- [Sveltegram](#sveltegram)\n  - [Demo \\\u0026 Documentation](#demo--documentation)\n  - [Post widget](#post-widget)\n    - [How to use](#how-to-use)\n    - [API](#api)\n  - [Discussions widget](#discussions-widget)\n    - [How to use](#how-to-use-1)\n    - [API](#api-1)\n  - [Login widget](#login-widget)\n    - [How to use](#how-to-use-2)\n    - [API](#api-2)\n- [Content Security Policy](#content-security-policy)\n- [Limitations](#limitations)\n- [Development](#development)\n  - [Install](#install)\n- [TODO](#todo)\n- [License](#license)\n\n## Post widget\n\nEmbed a telegram post widget in your svelte application.\n\n### How to use\n\n```js\n\u003cscript\u003e\n  import { Post } from 'sveltegram';\n\u003c/script\u003e\n\n\u003cPost link=\"https://t.me/computly/439\" /\u003e\n```\n\n### API\n\n| Property              | Type    | Default   | Description                                            |\n| --------------------- | ------- | --------- | ------------------------------------------------------ |\n| `link` **(Required)** | string  |           | Telegram post link (_You can find it in context menu_) |\n| `color`               | string  | `#2f81f6` | Accent color                                           |\n| `colorDark`           | string  | `#89baff` | Accent color in dark mode                              |\n| `darkMode`            | boolean | `false`   | Enable dark mode                                       |\n\n## Discussions widget\n\nEmbed a telegram discussions widget in your svelte application.\n\n### How to use\n\n```js\n\u003cscript\u003e\n  import { Discussions } from 'sveltegram';\n\u003c/script\u003e\n\n\u003cDiscussions link=\"https://t.me/contest/198\" /\u003e\n```\n\n### API\n\n| Property              | Type    | Default   | Description                                                                                                                                                                                                             |\n| --------------------- | ------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `link` **(Required)** | string  |           | Telegram discussions link (_You can find it in context menu_)                                                                                                                                                           |\n| `pageURL`             | string  |           | If you want to auto load comments from your channel as explained in [Telegram documentation](https://core.telegram.org/widgets/discussion) You'll need to pass the same page URL as the one in `\u003clink rel=\"canonical\"\u003e` |\n| `color`               | string  | `#2f81f6` | Accent color                                                                                                                                                                                                            |\n| `colorDark`           | string  | `#89baff` | Accent color in dark mode                                                                                                                                                                                               |\n| `darkMode`            | boolean | `false`   | Enable dark mode                                                                                                                                                                                                        |\n| `colorfulNames`       | boolean | `false`   | Use different color for usernames                                                                                                                                                                                       |\n| `commentsLimit`       | number  | `5`       | Number of comments to show                                                                                                                                                                                              |\n| `height`              | number  |           | Height of the widget, The default value is 'auto' which is determined by Telegram                                                                                                                                       |\n\n## Login widget\n\nEmbed a telegram login button in your svelte application.\n\n### How to use\n\n```js\n\u003cscript\u003e\n  import { Login } from 'sveltegram';\n\u003c/script\u003e\n\n\u003cLogin username=\"ComputlyBot\" /\u003e\n```\n\n### API\n\n| Property                                            | Type     | Default    | Description                                                                        |\n| --------------------------------------------------- | -------- | ---------- | ---------------------------------------------------------------------------------- |\n| `username` **(Required)**                           | string   |            | Your telegram bot username                                                         |\n| `authType`                                          | string   | `callback` | How to authenticate users? Choices are [callback, redirect]                        |\n| `redirectURL` **Required if `authType = redirect`** | string   |            | In case you chose redirect as an authentication method, you must set this property |\n| `requestAccess`                                     | boolean  | `false`    | Whether you want to send messages to the user in the future                        |\n| `size`                                              | string   | `medium`   | Login button size. choices are [small, medium,large]                               |\n| `buttonRadius`                                      | number   | `10`       | Login button radius (in pixels)                                                    |\n| `onauth` **(Required) if `authType = callback`**    | Function |            | Callback function responsible for handling successful authentication               |\n\n# Content Security Policy\n\nIf you are using CSP, you'll need to allow scripts and iFrames coming from Telegram domains as follows:\n\n```js\nscript-src https://telegram.org;\nframe-src https://t.me;\n```\n\n# Limitations\n\n- Can't use the same widget more than once due to telegram script assigning a unique id to each widget.\n\n# Development\n\n## Install\n\n```sh\ngit clone https://github.com/amr3k/sveltegram.git\ncd sveltegram\n```\n\nThen install dependencies:\n\n```sh\npnpm install\n```\n\n# TODO\n\n- [x] Add login widget\n- [x] Migrate to svelte 5\n- [x] Deploy demo to cloudflare\n- [ ] Add [Share button widget](https://core.telegram.org/widgets/share)\n- [ ] Publish to [jsr.io](https://jsr.io)\n\n# License\n\n[MIT](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famr3k%2Fsveltegram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Famr3k%2Fsveltegram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Famr3k%2Fsveltegram/lists"}