add telegram_widget.html

assets/css/common/post-single.css

@@ -539,7 +539,8 @@ h6:hover .anchor {
     box-shadow: 0 2px 0 var(--twitter-color);
 }
 
-.disqus-container {
+.disqus-container,
+.telegram-widget-container {
     margin: calc(var(--content-gap) * 2) 0;
     background-color: var(--code-bg);
     border-radius: 10px;

layouts/partials/telegram_widget.html

@@ -1,7 +1,51 @@
 {{- with site.Params.commentSystem.telegramWidget }}
-<script async
+<div class="telegram-widget-container"></div>
-  src="https://telegram.org/js/telegram-widget.js?19"
+
-  data-telegram-discussion="{{ .channel }}"
+<script>
-  data-comments-limit="{{ .limit | default 10 }}"
+  (function() {
-  {{ with .accentColor }}data-color="{{ . }}"{{ end }}></script>
+    const attrs = {
+      'data-telegram-discussion': "{{ .channel }}",
+      'data-comments-limit': "{{ .limit | default 10 }}",
+      // prevent the <script> from loading mutiple times by InstantClick
+      'data-no-instant': '',
+    }
+    const accentColor = '{{ with .accentColor }}{{ . }}{{ end }}';
+    if (accentColor) {
+      attrs['data-color'] = accentColor;
+    }
+    if (isDarkTheme()) {
+      attrs['data-dark'] = '1'
+    }
+
+    var d = document, s = d.createElement('script');
+    s.src = "https://telegram.org/js/telegram-widget.js?19";
+    for (const key in attrs) {
+      s.setAttribute(key, attrs[key]);
+    }
+
+    const container = document.querySelector('.telegram-widget-container')
+    container.innerHTML = '';
+    container.appendChild(s);
+  })();
+</script>
+
+<script data-no-instant>
+  (function() {
+    if (!toggleThemeCallbacks) {
+      return;
+    }
+
+    toggleThemeCallbacks.push((isDark) => {
+      // console.log('window toggle-theme for telegram widget')
+      if (!window.Telegram) {
+        return;
+      }
+      if (isDark) {
+        Telegram.setWidgetOptions({'nodark': 1})
+      } else {
+        Telegram.setWidgetOptions({'dark': 1})
+      }
+    });
+  })();
+</script>
 {{- end }}