diff --git a/README.md b/README.md index 9333730..4722efb 100644 --- a/README.md +++ b/README.md @@ -76,15 +76,16 @@ Embed a telegram discussions widget in your svelte application. ### API -| Property | Type | Default | Description | -| --------------------- | ------- | --------- | --------------------------------------------------------------------------------- | -| `link` **(Required)** | string | | Telegram discussions 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 | -| `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 | +| 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](https://core.telegram.org/widgets/discussion) You'll need to pass the same page URL as the one in `` | +| `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 diff --git a/package.json b/package.json index da660a5..e5fe93f 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "sveltegram", "description": "Reactive Telegram widgets built with svelte", - "version": "1.0.0", + "version": "1.1.0", "license": "MIT", "scripts": { "dev": "svelte-kit dev", diff --git a/src/Components/DiscussionsAPI.svelte b/src/Components/DiscussionsAPI.svelte index 0000094..7d9536a 100644 --- a/src/Components/DiscussionsAPI.svelte +++ b/src/Components/DiscussionsAPI.svelte @@ -17,6 +17,21 @@ Description: Telegram post link. You can copy it from context menu +
+ pageURL + string + + Description: As shown in + Telegram docs, you can load + comments dynamically if you have a channel that has discussions enabled and you post articles + to it, you can set the link parameter to your channel link like + https://t.me/computly and Telegram will automatically fetch the discussions + belonging to current article, you still need to pass current page full URL so the widget can + be reactive to things like theme changes, as well as setting canonical + <link> tag with current page URL. +
darkMode boolean diff --git a/src/lib/Discussions.svelte b/src/lib/Discussions.svelte index 9642373..fdcb716 100644 --- a/src/lib/Discussions.svelte +++ b/src/lib/Discussions.svelte @@ -4,6 +4,9 @@ /** @type {string}*/ export let link; + /** @type {string}*/ + export let pageURL = ''; + /** @type {string}*/ export let color = '#2f81f6'; @@ -29,7 +32,7 @@ /** @type {string}*/ let iFrameSource; $: { - iFrameSource = `${link}?embed=1&discussion=1&comments_limit=${commentsLimit}${ + iFrameSource = `${link}?embed=1&discussion=1&page_url=${pageURL}&comments_limit=${commentsLimit}${ darkMode ? '&dark=1' : '' }&color=${color.replace('#', '')}&dark_color=${colorDark.replace('#', '')}${ colorfulNames ? '&colorful=1' : ''