TG comments widget synchronizing with page colors

src/components/Comments.astro

@@ -0,0 +1,34 @@
+---
+export interface Props {
+    tgpost: string;
+}
+
+const { tgpost } = Astro.props;
+---
+
+<section id="comments" data-tgpost={tgpost}></section>
+
+<script>
+    function loadComments() {
+        const tgscript = document.createElement('script')
+
+        tgscript.async = true
+        tgscript.src = 'https://telegram.org/js/telegram-widget.js?22'
+        tgscript.dataset.commentsLimit = '3'
+
+        const container = document.getElementById('comments')
+
+        tgscript.dataset.telegramDiscussion = container.dataset.tgpost
+        tgscript.dataset.dark = document.body.dataset.dark || '1'
+        tgscript.dataset.color = getCssVariableValue('--accent-fg')
+
+        container.append(tgscript)
+    }
+
+    function getCssVariableValue(name: string) {
+        const val = getComputedStyle(document.body).getPropertyValue(name)
+        return val.replace('!important', '').trimEnd()
+    }
+
+    setTimeout(loadComments, 200)
+</script>

src/components/ThemeModal.astro

@@ -262,7 +262,7 @@ import TextBox from "./TextBox.astro";
 
     function reloadTheme() {
         if (!lessLoaded) {
-            setTimeout(reloadTheme, 150)
+            setTimeout(reloadTheme, 100)
             lessLoaded = true
             return
         }

src/content/blog/20230725-crypto-auth.md

@@ -1,3 +1,7 @@
+---
+comments: dcat09/333
+---
+
 # Способы аутентификации и TOTP
 
 Доступ к любым конфиденциальным (и не очень) данным предоставляется определённому лицу. Для их получения, редактирования, удаления необходимо пройти аутентификацию -- дать понять системе разграничения доступа, что вы имеете право читать и изменять эти данные.

src/pages/blog/[slug].astro

@@ -6,6 +6,7 @@ import { getCollection } from "astro:content";
 
 import postRenderer from "../../post-renderer.mjs";
 import { postType } from "../../post-renderer.mjs";
+import Comments from "../../components/Comments.astro";
 
 export async function getStaticPaths() {
     const posts = await getCollection("blog");
@@ -20,7 +21,7 @@ export async function getStaticPaths() {
 const post: postType = Astro.props.post;
 const {
     PostContent, title, description,
-    readingTime, date, image,
+    readingTime, date, image, comments,
 } = await postRenderer(post);
 ---
 
@@ -46,6 +47,7 @@ const {
         date={date}
         image={image}
     />
+    <Comments tgpost={comments} />
 </BlogLayout>
 
 <style lang="less" is:global>

src/post-renderer.mts

@@ -22,6 +22,7 @@ export default async function postRenderer(post: postType) {
     const title = postObj.headings[0]?.text || ''
     const description: string = fm.description
     const readingTime: number = fm.readingTime
+    const comments: string = fm.comments || 'dcat09/1'
 
     const dateStr = post.slug.split("-", 1)[0]
     let date: Date | undefined
@@ -42,5 +43,6 @@ export default async function postRenderer(post: postType) {
         readingTime: readingTime,
         date: date,
         image: image,
+        comments: comments,
     }
 }