feat: enhance modal image handling and SEO improvements

- Optimized modal image dimensions for better responsiveness
- Ensured modal images maintain aspect ratio and scale appropriately
- Added eager loading for header images to improve initial load performance
- Corrected GitHub link title typo for SEO accuracy
- Enhanced post content handling by normalizing emoji styles and search link paths
- Improved cache key management for channel info requests to include type and ID
- Streamlined channel info fetching logic for efficiency
- Updated breadcrumb image handling to support static proxy and void file fallback

src/assets/global.css

@@ -41,13 +41,22 @@
 
 .modal-img {
   margin: auto;
-  max-width: calc(100% - 40px);
-  max-height: calc(100% - 40px);
+  max-width: calc(100% - 40px) !important;
+  max-height: calc(100% - 40px) !important;
   border-radius: var(--media-border-radius);
   border: 1px solid var(--border-color);
   box-shadow: var(--shadows);
   cursor: pointer;
+  object-fit: scale-down;
 }
+
+@media screen and (min-width: 600px) {
+  .modal-img {
+    max-width: calc(100% - 80px) !important;
+    max-height: calc(100% - 80px) !important;
+  }
+}
+
 .search-icon {
   position: absolute;
   top: 20px;

src/components/header.astro

@@ -27,6 +27,7 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
         ? staticProxy + channel?.avatar
         : voidFile.src}
       alt={channel?.title}
+      loading="eager"
       class="header-avatar"
     />
   </a>
@@ -73,7 +74,7 @@ const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
 
     {
       GITHUB && GITHUB.length > 0 && (
-        <a href={`https://github.com/${GITHUB}`} title="Github" target="_blank">
+        <a href={`https://github.com/${GITHUB}`} title="GitHub" target="_blank">
           <img
             {...github}
             alt={`github.com/${GITHUB}`}

src/components/item.astro

@@ -174,4 +174,12 @@ const timeago = datetime.isBefore(dayjs().subtract(1, 'w'))
       background-size: cover;
     }
   }
+
+  .content :global(.emoji) {
+    font-style: normal;
+  }
+
+  .tag-box {
+    flex-wrap: wrap;
+  }
 </style>

src/lib/telegram/index.js

@@ -55,6 +55,10 @@ function getPost($, item, { channel, staticProxy, index = 0 }) {
   $(content).find('a').each((_index, a) => {
     $(a).attr('title', $(a).text())
   })
+  $(content).find('a[href^="?q="]').each((_index, a) => {
+    $(a).attr('href', `/search/result${$(a).attr('href')}`)
+  })
+  $(content).find('.emoji').attr('style', '')
 
   return {
     id,
@@ -89,12 +93,12 @@ function getPost($, item, { channel, staticProxy, index = 0 }) {
 
 const unnessaryHeaders = ['host', 'cookie', 'origin', 'referer']
 
-export async function getChannelInfo(Astro, { before = '', after = '', q = '', id = '' } = {}) {
-  const cacheKey = JSON.stringify({ before, after, q, id })
+export async function getChannelInfo(Astro, { before = '', after = '', q = '', type = 'list', id = '' } = {}) {
+  const cacheKey = JSON.stringify({ before, after, q, type, id })
   const cachedResult = cache.get(cacheKey)
 
   if (cachedResult) {
-    console.info('Macth Cache', { before, after, q, id })
+    console.info('Macth Cache', { before, after, q, type, id })
     return JSON.parse(JSON.stringify(cachedResult))
   }
 
@@ -112,7 +116,7 @@ export async function getChannelInfo(Astro, { before = '', after = '', q = '', i
     }
   })
 
-  console.info('Fetching', url, { before, after, q, id })
+  console.info('Fetching', url, { before, after, q, type, id })
   const html = await $fetch(url, {
     headers,
     query: {

src/pages/index.astro

@@ -2,9 +2,7 @@
 import List from '../components/list.astro'
 import { getChannelInfo } from '../lib/telegram'
 
-const channel = await getChannelInfo(Astro, {
-  q: Astro.url.searchParams.get('q') || '',
-})
+const channel = await getChannelInfo(Astro)
 
 export const prerender = false
 ---

src/pages/posts/[id].astro

@@ -1,26 +1,40 @@
 ---
+import { getEnv } from '../../lib/env'
+import voidFile from '../../assets/void.png'
 import List from '../../components/list.astro'
 import { getChannelInfo } from '../../lib/telegram'
 
 const { SITE_URL } = Astro.locals
 
-const channel = await getChannelInfo(Astro)
+const channel = JSON.parse(JSON.stringify(await getChannelInfo(Astro)))
 
 const post = await getChannelInfo(Astro, {
+  type: 'post',
   id: Astro.params.id,
 })
 
 channel.posts = [post]
 channel.seo = post
 
+const staticProxy = getEnv(import.meta.env, Astro, 'STATIC_PROXY') ?? '/static/'
+
 export const prerender = false
 ---
 
 <List channel={channel} before={false} after={false}>
   <div slot="header" id="breadcrumb">
-    <img src={channel.avatar} class="breadcrumb-avatar" />
+    <img
+      src={channel?.avatar?.startsWith('http')
+        ? staticProxy + channel?.avatar
+        : voidFile.src}
+      alt={channel?.title}
+      loading="eager"
+      class="breadcrumb-avatar"
+    />
     <div class="breadcrumb-title">
-      <a href={SITE_URL} class="site-title">{channel.title}</a>
+      <a href={SITE_URL} class="site-title" title={channel?.title}>
+        {channel.title}
+      </a>
     </div>
   </div>
 </List>