feat: add support for displaying comments on posts

.env.example

@@ -21,3 +21,4 @@ TELEGRAM_HOST=telegram.dog
 STATIC_PROXY=""
 GOOGLE_SEARCH_SITE=""
 TAGS=""
+COMMENTS=""

README.md

@@ -123,6 +123,9 @@ GOOGLE_SEARCH_SITE=memo.miantiao.me
 
 ## Enable tags page, separate tags with commas
 TAGS=tag1,tag2,tag3
+
+## Show comments
+COMMENTS=true
 ```
 
 ## 🙋🏻 FAQs

README.zh-cn.md

@@ -121,6 +121,9 @@ GOOGLE_SEARCH_SITE=memo.miantiao.me
 
 ## 启用标签页, 标签使用英文逗号分割
 TAGS=标签A,标签B,标签C
+
+## 展示评论
+COMMENTS=true
 ```
 
 ## 🙋🏻 常问问题

src/components/item.astro

@@ -9,7 +9,10 @@ const timezone = getEnv(import.meta.env, Astro, 'TIMEZONE')
 locale && dayjs.locale(locale)
 
 const { SITE_URL } = Astro.locals
-const { post } = Astro.props
+const { post, isItem } = Astro.props
+
+const channel = getEnv(import.meta.env, Astro, 'CHANNEL')
+const COMMENTS = getEnv(import.meta.env, Astro, 'COMMENTS')
 
 const datetime = dayjs(post.datetime).tz(timezone)
 const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) ? datetime.format('HH:mm · ll · ddd') : datetime.fromNow()
@@ -37,4 +40,20 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w')) ? datetime.format('H
       </div>
     )
   }
+
+  {
+    COMMENTS && isItem && (
+      <div class="comments">
+        <script
+          is:inline
+          async
+          src="https://telegram.org/js/telegram-widget.js"
+          data-telegram-discussion={`${channel}/${post.id}`}
+          data-comments-limit="50"
+          data-colorful="1"
+          data-color="454545"
+        />
+      </div>
+    )
+  }
 </div>

src/components/list.astro

@@ -4,7 +4,7 @@ import Header from '../components/header.astro'
 import Item from '../components/item.astro'
 
 const { SITE_URL } = Astro.locals
-const { channel, before = true, after = true } = Astro.props
+const { channel, before = true, after = true, isItem = false } = Astro.props
 const posts = channel.posts ?? []
 
 const beforeCursor = posts[posts.length - 1]?.id
@@ -17,7 +17,7 @@ const afterCursor = posts[0]?.id
     <Header channel={channel} />
   </slot>
   <div class="items">
-    {posts.map((post) => <Item post={post} />)}
+    {posts.map((post) => <Item post={post} isItem={isItem} />)}
   </div>
 
   <div class="pages-container">

src/pages/posts/[id].astro

@@ -24,7 +24,7 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
 export const prerender = false
 ---
 
-<List channel={channel} before={false} after={false}>
+<List channel={channel} before={false} after={false} isItem={true}>
   <div slot="header" id="breadcrumb">
     <img
       src={channel?.avatar?.startsWith('http') ? staticProxy + channel?.avatar : voidFile.src}