feat: enhance CSS processing and content rendering

- Added postcss-nesting for improved CSS nesting support
- Updated dependencies to support new CSS processing features
- Modified HTML content handling to improve accessibility and styling
- Enhanced post content parsing for better rendering and SEO

src/assets/global.css

@@ -1,7 +1,3 @@
-@view-transition {
-  navigation: auto;
-}
-
 .site-title {
   view-transition-name: site-title;
   transition: 0.2s ease;
@@ -11,8 +7,11 @@
   transition: 0.2s ease;
 }
 
-[popover]:not(:popover-open):not(dialog[open]) {
+[popover] {
   display: none;
+  &:popover-open {
+    display: block;
+  }
 }
 
 .image-preview-wrap {

src/components/header.astro

@@ -114,8 +114,8 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
 </div>
 
 {
-  channel?.description && channel?.description.length > 0 && (
-    <div class="text-box" id="site-intro" set:html={channel?.description} />
+  channel?.descriptionHTML && channel?.descriptionHTML.length > 0 && (
+    <div class="text-box" id="site-intro" set:html={channel?.descriptionHTML} />
   )
 }
 
@@ -123,6 +123,10 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
   #site-intro {
     color: var(--secondary-color);
     word-break: break-word;
+
+    & :global(.emoji) {
+      font-style: normal;
+    }
   }
 
   .social-icon {

src/layouts/base.astro

@@ -55,6 +55,11 @@ const FOOTER_INJECT = getEnv(import.meta.env, Astro, 'FOOTER_INJECT')
       title={channel?.title}
       href={origin + '/rss.xml'}
     />
+    <style is:inline>
+      @view-transition {
+        navigation: auto; /* enabled */
+      }
+    </style>
     <SEO
       charset="utf-8"
       titleTemplate={`%s | ${channel?.title}`}

src/lib/telegram/index.js

@@ -55,16 +55,20 @@ function getLinkPreview($, item, { staticProxy, index }) {
   return $.html(link)
 }
 
-function getPost($, item, { channel, staticProxy, index = 0 }) {
-  item = item ? $(item).find('.tgme_widget_message') : $('.tgme_widget_message')
-  const content = $(item).find('.tgme_widget_message_bubble > .tgme_widget_message_text')
-  const title = content?.text()?.match(/[^。\n]*(?=[。\n]|http)/g)?.[0] ?? content?.text() ?? ''
-  const id = $(item).attr('data-post')?.replace(`${channel}/`, '')
-
+function modifyHTMLContent($, content) {
   $(content).find('a')?.each((_index, a) => {
     $(a)?.attr('title', $(a)?.text())
   })
   $(content).find('.emoji')?.attr('style', '')
+  return content
+}
+
+function getPost($, item, { channel, staticProxy, index = 0 }) {
+  item = item ? $(item).find('.tgme_widget_message') : $('.tgme_widget_message')
+  const content = modifyHTMLContent($, $(item).find('.tgme_widget_message_bubble > .tgme_widget_message_text'))
+  const title = content?.text()?.match(/[^。\n]*(?=[。\n]|http)/g)?.[0] ?? content?.text() ?? ''
+  const id = $(item).attr('data-post')?.replace(`${channel}/`, '')
+
   const tags = $(content).find('a[href^="?q="]')?.each((_index, a) => {
     $(a)?.attr('href', `/search/${encodeURIComponent($(a)?.text())}`)
   })?.map((_index, a) => $(a)?.text()?.replace('#', ''))?.get()
@@ -149,7 +153,8 @@ export async function getChannelInfo(Astro, { before = '', after = '', q = '', t
   const channelInfo = {
     posts,
     title: $('.tgme_channel_info_header_title')?.text(),
-    description: $('.tgme_channel_info_description')?.html(),
+    description: $('.tgme_channel_info_description')?.text(),
+    descriptionHTML: modifyHTMLContent($, $('.tgme_channel_info_description'))?.html(),
     avatar: $('.tgme_page_photo_image img')?.attr('src'),
   }