合并主分支

Author: CatCodeMe

packages/pure/components/advanced/GithubCard.astro

@@ -21,7 +21,7 @@ const [owner, repoName] = repo.split('/')
       >
         <div
           id='gh-avatar'
-          class='gh-text me-2 size-7 flex-shrink-0 bg-cover sm:size-8'
+          class='load-block me-2 size-7 flex-shrink-0 bg-cover sm:size-8'
           style='border-radius:999px'
         >
         </div>
@@ -39,9 +39,9 @@ const [owner, repoName] = repo.split('/')
         <Icon name='github' />
       </div>
     </div>
-    <p id='gh-description' class='gh-text text-sm sm:text-base'>Waiting for api.github.com...</p>
+    <p id='gh-description' class='load-block text-sm sm:text-base'>Waiting for api.github.com...</p>
     <div class='flex items-center justify-between gap-x-2'>
-      <div class='gh-text flex flex-wrap items-center gap-x-3 gap-y-1 sm:gap-x-5'>
+      <div class='load-block flex flex-wrap items-center gap-x-3 gap-y-1 sm:gap-x-5'>
         <div class='flex items-center gap-x-1.5 sm:gap-x-2'>
           {/* mingcute:star-line */}
           <!-- prettier-ignore -->
@@ -63,8 +63,7 @@ const [owner, repoName] = repo.split('/')
           <span id='gh-license' class='text-sm leading-tight sm:text-base'>???</span>
         </div>
       </div>
-
-      <span id='gh-language' class='gh-text text-sm leading-tight sm:text-base'>?????</span>
+      <span id='gh-language' class='load-block text-sm leading-tight sm:text-base'>?????</span>
     </div>
   </a>
 </github-card>
@@ -81,19 +80,22 @@ const [owner, repoName] = repo.split('/')
       opacity: 1;
     }
   }
-  .loading .gh-text {
+  .loading .load-block {
     color: transparent;
     border-radius: calc(var(--radius) - 3px);
     background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity, 1));
     animation: pulsate 2s infinite linear;
     user-select: none;
   }
-  .loading .gh-text:nth-child(2) {
+  .loading .load-block:nth-child(2) {
     animation-delay: 1s;
   }
   .no-license {
     opacity: 0.5;
   }
+  :not(.loading) #gh-avatar {
+    background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity));
+  }
 </style>
 
 <script>
@@ -134,26 +136,22 @@ const [owner, repoName] = repo.split('/')
       try {
         const data = await this.fetchGithub(this.dataset.repo)
         if (!data) return
-        ;(this.querySelector('#gh-stars') as HTMLElement).textContent = this.numberFormat(
-          data.stargazers_count
-        )
-        ;(this.querySelector('#gh-forks') as HTMLElement).textContent = this.numberFormat(
-          data.forks
-        )
-        ;(this.querySelector('#gh-language') as HTMLElement).textContent = data.language || 'N/A'
-        ;(this.querySelector('#gh-description') as HTMLElement).textContent =
+        // Update stats
+        this.updateElement('#gh-stars', this.numberFormat(data.stargazers_count))
+        this.updateElement('#gh-forks', this.numberFormat(data.forks))
+        this.updateElement('#gh-language', data.language || 'N/A')
+        // Update description
+        const description =
           typeof data.description === 'string'
             ? data.description.replace(/:[a-zA-Z0-9_]+:/g, '')
             : 'Description not set'
-
+        this.updateElement('#gh-description', description)
+        // Update license
+        const licenseText = data.license?.spdx_id || 'N/A'
         const licenseEl = this.querySelector('#gh-license') as HTMLElement
-        if (data.license?.spdx_id) {
-          licenseEl.textContent = data.license.spdx_id
-        } else {
-          licenseEl.textContent = 'N/A'
-          licenseEl.classList.add('no-license')
-        }
-
+        licenseEl.textContent = licenseText
+        licenseEl.classList.toggle('no-license', licenseText === 'N/A')
+        // Update avatar
         const avatarEl = this.querySelector('#gh-avatar') as HTMLElement
         if (avatarEl) {
           avatarEl.style.backgroundImage = `url(${data.owner.avatar_url})`
@@ -162,7 +160,14 @@ const [owner, repoName] = repo.split('/')
         this.classList.remove('loading')
       } catch (e) {
         console.error('Error setting Github data:', e)
-        ;(this.querySelector('#gh-description') as HTMLElement).textContent = 'Failed to fetch data'
+        this.updateElement('#gh-description', 'Failed to fetch data')
+      }
+    }
+
+    private updateElement(selector: string, text: string) {
+      const element = this.querySelector(selector) as HTMLElement
+      if (element) {
+        element.textContent = text
       }
     }
   }

packages/pure/components/advanced/Quote.astro

@@ -34,7 +34,7 @@ const { class: className } = Astro.props
 
     connectedCallback() {
       // Because virtual:config can only be accessed using json string, function cannot work, so we need to use new Function
-      const targetFunction = new Function('return ' + quote.target)()
+      const targetFunction = new Function('data', 'return (' + quote.target + ')(data)')
       fetch(quote.server)
         .then((response) => response.json())
         .then((data) => this.render(targetFunction(data)))

packages/pure/components/user/Spoiler.astro

@@ -1,14 +1,27 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+
 import { cn } from '../../utils'
 
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  class?: string
+}
+
 const { as: Tag = 'span', class: className } = Astro.props
 ---
 
 <Tag
   class={cn(
-    'bg-muted rounded text-transparent hover:text-inherit px-1 transition-colors',
+    'spoiler bg-muted rounded text-transparent hover:text-inherit px-1 transition-colors',
     className
   )}
 >
   <slot />
 </Tag>
+
+<style>
+  .spoiler:not(:hover) :global(*) {
+    color: inherit !important;
+    background-color: transparent !important;
+  }
+</style>

src/components/home/ProjectCard.astro

@@ -14,11 +14,11 @@ const {
   altText
 } = Astro.props
 const images = import.meta.glob<{ default: ImageMetadata }>(
-  '/src/assets/projects/*.{jpeg,jpg,png,gif,avif.webp}'
+  '/src/assets/projects/*.{jpeg,jpg,png,gif,avif,webp}'
 )
 if (!images[imagePath])
   throw new Error(
-    `"${imagePath}" does not exist in glob: "src/assets/projects/*.{jpeg,jpg,png,gif,avif.webp}"`
+    `"${imagePath}" does not exist in glob: "src/assets/projects/*.{jpeg,jpg,png,gif,avif,webp}"`
   )
 ---
 

src/pages/docs/rss.xml.ts

@@ -14,7 +14,7 @@ import { getBlogCollection, sortMDByDate } from 'astro-pure/server'
 
 // Get dynamic import of images as a map collection
 const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
-  '/src/content/docs/**/*.{jpeg,jpg,png,gif,avif.webp}' // add more image formats if needed
+  '/src/content/docs/**/*.{jpeg,jpg,png,gif,avif,webp}' // add more image formats if needed
 )
 
 const renderContent = async (post: CollectionEntry<'docs'>, site: URL) => {

src/pages/index.astro

@@ -122,11 +122,20 @@ const highlightColor = getHighlightColor()
             {
               allPostsByDate.map((post, index) => (
                 <a href={`/blog/${post.data.slug}`} class='block no-underline group relative z-10'>
-                  <article class='grid grid-cols-[32px_1fr] gap-3 md:grid-cols-[40px_1fr] md:gap-5 py-2.5 md:py-3 border-b border-border last:border-b-0 transition-colors hover:bg-muted/50 cursor-pointer'>
-                    <div class='text-sm md:text-xl font-light text-muted-foreground/90 tabular-nums self-start leading-none'>
+                  <article class='relative grid grid-cols-[32px_1fr] gap-3 md:grid-cols-[40px_1fr] md:gap-5 py-2.5 md:py-3 border-b border-border last:border-b-0 transition-colors hover:bg-muted/50 cursor-pointer'>
+                    {/* Hero Image - 桌面端右侧渐变显示 */}
+                    {'heroImage' in post.data && post.data.heroImage && (
+                      <Image
+                        alt={post.data.heroImage.alt || post.data.title}
+                        class='cover-image-home hidden md:block absolute end-0 top-0 z-0 h-full w-3/5 object-cover opacity-50 transition-opacity duration-300 group-hover:opacity-70'
+                        loading='lazy'
+                        {...post.data.heroImage}
+                      />
+                    )}
+                    <div class='text-sm md:text-xl font-light text-muted-foreground/90 tabular-nums self-start leading-none relative z-10'>
                       {String(index + 1).padStart(2, '0')}
                     </div>
-                    <div class='flex flex-col gap-1 md:gap-1.5'>
+                    <div class='flex flex-col gap-1 md:gap-1.5 relative z-10 md:me-[40%]'>
                       <div class='flex flex-col gap-0.5 md:gap-1'>
                         <time class='text-xs text-muted-foreground tabular-nums'>
                           {new Date(
@@ -378,5 +387,16 @@ const highlightColor = getHighlightColor()
         min-height: 1.1em;
       }
     }
+
+    /* Hero Image 渐变遮罩 - 桌面端右侧渐变 */
+    .cover-image-home {
+      mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+      -ms-mask-image: -ms-linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+      -webkit-mask-image: -webkit-linear-gradient(
+        to right,
+        rgba(0, 0, 0, 0) 0%,
+        rgba(0, 0, 0, 1) 100%
+      );
+    }
   </style>
 </PageLayout>

src/pages/rss.xml.ts

@@ -14,7 +14,7 @@ import { getBlogCollection, sortMDByDate } from 'astro-pure/server'
 
 // Get dynamic import of images as a map collection
 const imagesGlob = import.meta.glob<{ default: ImageMetadata }>(
-  '/src/content/blog/**/*.{jpeg,jpg,png,gif,avif.webp}' // add more image formats if needed
+  '/src/content/blog/**/*.{jpeg,jpg,png,gif,avif,webp}' // add more image formats if needed
 )
 
 const renderContent = async (post: CollectionEntry<'blog'>, site: URL) => {