From f96356678d08d4e43ad406e5ffaaa5021cd5a6c8 Mon Sep 17 00:00:00 2001
From: DarkCat09 <a.chechkenev@yandex.ru>
Date: Thu, 27 Jul 2023 18:34:58 +0400
Subject: [PATCH] TG comments widget synchronizing with page colors

---
 src/components/Comments.astro            | 34 ++++++++++++++++++++++++
 src/components/ThemeModal.astro          |  2 +-
 src/content/blog/20230725-crypto-auth.md |  4 +++
 src/pages/blog/[slug].astro              |  4 ++-
 src/post-renderer.mts                    |  2 ++
 5 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 src/components/Comments.astro

diff --git a/src/components/Comments.astro b/src/components/Comments.astro
new file mode 100644
index 0000000..65d1cde
--- /dev/null
+++ b/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>
diff --git a/src/components/ThemeModal.astro b/src/components/ThemeModal.astro
index 89e7c66..41d96af 100644
--- a/src/components/ThemeModal.astro
+++ b/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
         }
diff --git a/src/content/blog/20230725-crypto-auth.md b/src/content/blog/20230725-crypto-auth.md
index 81cd972..e9cfe8a 100644
--- a/src/content/blog/20230725-crypto-auth.md
+++ b/src/content/blog/20230725-crypto-auth.md
@@ -1,3 +1,7 @@
+---
+comments: dcat09/333
+---
+
 # Способы аутентификации и TOTP
 
 Доступ к любым конфиденциальным (и не очень) данным предоставляется определённому лицу. Для их получения, редактирования, удаления необходимо пройти аутентификацию -- дать понять системе разграничения доступа, что вы имеете право читать и изменять эти данные.
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index b623381..7495bc8 100644
--- a/src/pages/blog/[slug].astro
+++ b/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>
diff --git a/src/post-renderer.mts b/src/post-renderer.mts
index 5e8517c..00c920c 100644
--- a/src/post-renderer.mts
+++ b/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,
     }
 }