Giter VIP home page Giter VIP logo

sveltegram's Introduction

Stand With Palestine

Sveltegram

This package allows you to embed telegram widgets in your svelte web application.

Library size is 96 bytes (min+gzipped). bundlephobia

StandWithPalestine Demo GitHub branch checks state Rate this package

LICENSE GitHub code size in bytes Hits-of-Code

Post widget

Embed a telegram post widget in your svelte application.

How to use

<script>
  import { Post } from 'sveltegram';
</script>

<Post link="https://t.me/computly/188" />

API

Property Type Default Description
link (Required) string Telegram post link (You can find it in context menu)
color string #2f81f6 Accent color
colorDark string #89baff Accent color in dark mode
darkMode boolean false Enable dark mode

Discussions widget

Embed a telegram discussions widget in your svelte application.

How to use

<script>
  import { Discussions } from 'sveltegram';
</script>

<Discussions link="https://t.me/contest/198" />

API

Property Type Default Description
link (Required) string Telegram discussions link (You can find it in context menu)
pageURL string If you want to auto load comments from your channel as explained in Telegram documentation You'll need to pass the same page URL as the one in <link rel="canonical">
color string #2f81f6 Accent color
colorDark string #89baff Accent color in dark mode
darkMode boolean false Enable dark mode
colorfulNames boolean false Use different color for usernames
commentsLimit number 5 Number of comments to show
height number Height of the widget, The default value is 'auto' which is determined by Telegram

Login widget

Embed a telegram login button in your svelte application.

How to use

<script>
  import { Login } from 'sveltegram';
</script>

<Login username="ComputlyBot" />

API

Property Type Default Description
username (Required) string Your telegram bot username
authType string callback How to authenticate users? Choices are [callback, redirect]
redirectURL Required if authType = redirect string In case you chose redirect as an authentication method, you must set this property
requestAccess boolean false Whether you want to send messages to the user in the future
size string medium Login button size. choices are [small, medium,large]
buttonRadius number 10 Login button radius (in pixels)

Content Security Policy

If you are using CSP, you'll need to allow scripts and iFrames coming from Telegram domains as follows:

script-src https://telegram.org;
frame-src https://t.me;

Limitations

  • Can't use the same widget more than once due to telegram script assigning a unique id to each widget.

Development

Install

git clone https://github.com/amr3k/sveltegram.git
cd sveltegram

Then install dependencies:

pnpm install

TODO

License

MIT

sveltegram's People

Contributors

amr3k avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

dazeb ti-rudin

sveltegram's Issues

Question about CSP

Hey, I tried to get the login widget working - sadly without success because of CSP errors.

Like stated in the readme, I started with the following svelte.config with your added CSP values:

const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
			routes: {
				include: ['/*'],
				exclude: ['<all>']
			}
		}),
		alias: {
			$components: 'src/lib/components',
			'$components/*': 'src/lib/components/*'
		},
		csp: {
			directives: {
				'script-src': ['self', 'https://telegram.org'],
				'frame-src': ['self', 'https://t.me']
			}
		}
	},
};
export default config;

Sadly with these changes I still got errors, it started with "oauth.telegram.org" so I added that too:

csp: {
			directives: {
				'script-src': ['self', 'https://telegram.org', 'https://oauth.telegram.org'],
				'frame-src': ['self', 'https://t.me', 'https://oauth.telegram.org']
			}
		}

After that I ran into frame ancestors csp errors, also tried to add changes there but I couldn't figure it out. Somehow I feel like I am doing something wrong.

Do you see the problem?

Greetings

Login Telegram widget

Hi there. Thanks for all your work integrating my favorite two tools. Any ways to implement a telegram login widget ?

I am planning to use Telegram in my Svelte app as auth provider.
Best regards

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.