Added pageURL property to Discussions widget

amr3k · Jun 23, 2022 · c9a5f79 · c9a5f79
1 parent 3215fd6
commit c9a5f79
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 11 deletions.
diff --git 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 `<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

diff --git 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
@@ -17,6 +17,21 @@
 		<span />
 		<span><strong>Description: </strong>Telegram post link. You can copy it from context menu</span>
 	</div>
+	<div class="row">
+		<span>pageURL</span>
+		<span>string</span>
+		<span />
+		<span
+			><strong>Description: </strong>As shown in
+			<a href="https://core.telegram.org/widgets/discussion">Telegram docs</a>, you can load
+			comments dynamically if you have a channel that has discussions enabled and you post articles
+			to it, you can set the <code>link</code> parameter to your channel link like
+			<code>https://t.me/computly</code> 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
+			<code>&lt;link&gt;</code> tag with current page URL.</span
+		>
+	</div>
 	<div class="row">
 		<span>darkMode</span>
 		<span>boolean</span>

diff --git 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' : ''