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

package.json

@@ -37,6 +37,7 @@
     "eslint-plugin-astro": "^1.2.3",
     "eslint-plugin-format": "^0.1.2",
     "lint-staged": "^15.2.8",
+    "postcss-nesting": "^13.0.0",
     "prettier-plugin-astro": "^0.14.1",
     "simple-git-hooks": "^2.11.1",
     "std-env": "^3.7.0"

pnpm-lock.yaml

@@ -69,6 +69,9 @@ importers:
       lint-staged:
         specifier: ^15.2.8
         version: 15.2.8
+      postcss-nesting:
+        specifier: ^13.0.0
+        version: 13.0.0(postcss@8.4.40)
       prettier-plugin-astro:
         specifier: ^0.14.1
         version: 0.14.1
@@ -344,6 +347,18 @@ packages:
     resolution: {integrity: sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==}
     engines: {node: '>=12'}
 
+  '@csstools/selector-resolve-nested@2.0.0':
+    resolution: {integrity: sha512-oklSrRvOxNeeOW1yARd4WNCs/D09cQjunGZUgSq6vM8GpzFswN+8rBZyJA29YFZhOTQ6GFzxgLDNtVbt9wPZMA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^6.1.0
+
+  '@csstools/selector-specificity@4.0.0':
+    resolution: {integrity: sha512-189nelqtPd8++phaHNwYovKZI0FOzH1vQEE3QhHHkNIGrg5fSs9CbYP3RvfEH5geztnIA9Jwq91wyOIwAW5JIQ==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss-selector-parser: ^6.1.0
+
   '@dprint/formatter@0.3.0':
     resolution: {integrity: sha512-N9fxCxbaBOrDkteSOzaCqwWjso5iAe+WJPsHC021JfHNj2ThInPNEF13ORDKta3llq5D1TlclODCvOvipH7bWQ==}
 
@@ -2180,7 +2195,7 @@ packages:
     engines: {node: '>= 6'}
 
   cssesc@3.0.0:
-    resolution: {integrity: sha1-N3QZGZA7hoVl4cCep0dEXNGJg+4=}
+    resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
 
@@ -3739,6 +3754,12 @@ packages:
     peerDependencies:
       postcss: ^8.4.31
 
+  postcss-nesting@13.0.0:
+    resolution: {integrity: sha512-TCGQOizyqvEkdeTPM+t6NYwJ3EJszYE/8t8ILxw/YoeUvz2rz7aM8XTAmBWh9/DJjfaaabL88fWrsVHSPF2zgA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      postcss: ^8.4
+
   postcss-normalize-charset@7.0.0:
     resolution: {integrity: sha512-ABisNUXMeZeDNzCQxPxBCkXexvBrUHV+p7/BXOY+ulxkcjUZO0cp8ekGBwvIh2LbCwnWbyMPNJVtBSdyhM2zYQ==}
     engines: {node: ^18.12.0 || ^20.9.0 || >=22.0}
@@ -4445,7 +4466,7 @@ packages:
     engines: {node: '>=6.14.2'}
 
   util-deprecate@1.0.2:
-    resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=}
+    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
   validate-npm-package-license@3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -5107,6 +5128,14 @@ snapshots:
     dependencies:
       '@jridgewell/trace-mapping': 0.3.9
 
+  '@csstools/selector-resolve-nested@2.0.0(postcss-selector-parser@6.1.1)':
+    dependencies:
+      postcss-selector-parser: 6.1.1
+
+  '@csstools/selector-specificity@4.0.0(postcss-selector-parser@6.1.1)':
+    dependencies:
+      postcss-selector-parser: 6.1.1
+
   '@dprint/formatter@0.3.0': {}
 
   '@dprint/markdown@0.17.2': {}
@@ -8853,6 +8882,13 @@ snapshots:
       postcss: 8.4.40
       postcss-selector-parser: 6.1.1
 
+  postcss-nesting@13.0.0(postcss@8.4.40):
+    dependencies:
+      '@csstools/selector-resolve-nested': 2.0.0(postcss-selector-parser@6.1.1)
+      '@csstools/selector-specificity': 4.0.0(postcss-selector-parser@6.1.1)
+      postcss: 8.4.40
+      postcss-selector-parser: 6.1.1
+
   postcss-normalize-charset@7.0.0(postcss@8.4.40):
     dependencies:
       postcss: 8.4.40

postcss.config.cjs

@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    // require('postcss-nesting'),
     require('autoprefixer'),
     require('cssnano'),
   ],

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'),
   }