astro-pure 1.3.7 → 1.3.9

package/components/advanced/GithubCard.astro

@@ -29,13 +29,13 @@ const [owner, repoName] = repo.split('/')
           <div class='flex items-center gap-x-1 max-sm:flex-wrap'>
             <span class='truncate text-base transition-colors sm:text-lg'>{owner}</span>
             <span class='text-muted-foreground max-sm:hidden'>/</span>
-            <span class='truncate text-base font-bold transition-colors sm:text-lg max-sm:w-full'
+            <span class='truncate text-base font-medium transition-colors sm:text-lg max-sm:w-full'
               >{repoName}</span
             >
           </div>
         </div>
       </div>
-      <div class='flex-shrink-0 rounded-full bg-primary-foreground p-1'>
+      <div class='flex-shrink-0 rounded-full bg-card p-1'>
         <Icon name='github' />
       </div>
     </div>
@@ -83,7 +83,7 @@ const [owner, repoName] = repo.split('/')
   .loading .load-block {
     color: transparent;
     border-radius: calc(var(--radius) - 3px);
-    background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity, 1));
+    background-color: hsl(var(--card) / var(--un-bg-opacity, 1));
     animation: pulsate 2s infinite linear;
     user-select: none;
   }
@@ -94,7 +94,7 @@ const [owner, repoName] = repo.split('/')
     opacity: 0.5;
   }
   :not(.loading) #gh-avatar {
-    background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity));
+    background-color: hsl(var(--card) / var(--un-bg-opacity));
   }
 </style>
 

package/components/basic/Header.astro

@@ -8,7 +8,7 @@ import { Icon } from '../user'
   class='group sticky top-4 z-50 max-md:z-30 mb-12 flex items-center justify-between rounded-xl border border-transparent max-sm:py-1 sm:rounded-2xl'
 >
   <a
-    class='z-30 text-xl font-semibold group-[.not-top]:ms-2 sm:group-[.not-top]:ms-3'
+    class='z-30 text-xl font-medium group-[.not-top]:ms-2 sm:group-[.not-top]:ms-3'
     style='transition:margin-inline 0.3s'
     href='/'
     aria-label='Brand'>{config.title}</a

package/components/basic/ThemeProvider.astro

@@ -27,7 +27,7 @@
   listenThemeChange()
   // Listen for toast event
   document.addEventListener('toast', (e) => {
-    const { message } = (e as CustomEvent).detail
+    const { message, time } = (e as CustomEvent).detail
     const toast = document.createElement('div')
     toast.className =
       'animate fixed bottom-8 z-20 px-4 py-2 bg-muted text-foreground rounded-lg border shadow-lg flex items-center gap-2'
@@ -35,6 +35,6 @@
     document.body.appendChild(toast)
     setTimeout(() => {
       toast.remove()
-    }, 3000)
+    }, time || 3000)
   })
 </script>

package/components/pages/PostPreview.astro

@@ -1,31 +1,24 @@
 ---
 import { Image } from 'astro:assets'
 import { render, type CollectionEntry, type CollectionKey } from 'astro:content'
-import type { HTMLTag, Polymorphic } from 'astro/types'
 
 import { cn } from '../../utils'
 import { Button, FormattedDate, Icon } from '../user'
 
-type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
-  post: CollectionEntry<CollectionKey>
+type Props<T extends CollectionKey> = {
+  post: CollectionEntry<T>
   detailed?: boolean
   class?: string
 }
 
-const { as: Tag = 'div', post, detailed = false, class: className } = Astro.props
-
+const { post, detailed = false, class: className } = Astro.props
 const { id, data } = post
-
 const { remarkPluginFrontmatter } = await render(post)
 const postDate = data.updatedDate ?? data.publishDate
 ---
 
 <li
-  class={cn(
-    'post-preview group/card flex flex-col relative rounded-2xl border bg-background transition-colors ease-in-out px-5 py-2.5 hover:bg-muted',
-    detailed && 'max-sm:px-4 sm:py-5',
-    className
-  )}
+  class={cn('post-preview', className)}
   style={detailed &&
     data.heroImage?.color &&
     `--preview-highlight:color-mix(in srgb,${data.heroImage.color} 40%,hsl(var(--foreground)/var(--un-text-opacity,1)));
@@ -33,8 +26,8 @@ const postDate = data.updatedDate ?? data.publishDate
 >
   <a
     class={cn(
-      'group/link w-full flex flex-col transition-all hover:text-primary',
-      !detailed && 'sm:flex-row',
+      'block w-full relative group rounded-2xl border bg-background transition-colors ease-in-out px-5 py-2.5 hover:bg-muted hover:text-primary',
+      detailed && 'max-sm:px-4 sm:py-5',
       detailed && data.heroImage && 'max-md:pt-24'
     )}
     href={`/blog/${id}`}
@@ -44,18 +37,20 @@ const postDate = data.updatedDate ?? data.publishDate
       detailed && data.heroImage && (
         <Image
           alt={data.heroImage.alt || data.title}
-          class='cover-image absolute end-0 top-0 z-0 h-2/3 w-full rounded-2xl object-cover opacity-50 transition-opacity duration-300 group-hover/card:opacity-70 md:h-full md:w-3/5'
+          class='cover-image absolute end-0 top-0 z-0 h-2/3 w-full rounded-2xl object-cover opacity-50 transition-opacity duration-300 group-hover:opacity-70 md:h-full md:w-3/5'
           loading='eager'
           {...data.heroImage}
         />
       )
     }
+    <div
+      class={cn('relative flex flex-col gap-1', !detailed && 'sm:flex-row sm:items-center')}
+      style='z-index:1'
+    >
+      <FormattedDate class='min-w-[95px] text-xs' date={postDate} />
 
-    <FormattedDate class='min-w-[95px] py-1 text-xs' date={postDate} />
-
-    <Tag class='z-10 flex-grow'>
       {/* title */}
-      <div class='flex justify-between'>
+      <div class='flex justify-between flex-grow'>
         <div class={detailed && 'font-medium'}>
           {data.draft && <span class='text-red-500'>(Draft) </span>}
           {data.title}
@@ -69,16 +64,16 @@ const postDate = data.updatedDate ?? data.publishDate
           stroke-width='2.5'
           stroke-linecap='round'
           stroke-linejoin='round'
-          class='preview-redirect my-1 stroke-muted-foreground group-hover/link:stroke-primary'
+          class='preview-redirect my-1 stroke-muted-foreground group-hover:stroke-primary'
           ><line
             x1='5'
             y1='12'
             x2='19'
             y2='12'
-            class='translate-x-4 scale-x-0 transition-all duration-300 ease-in-out group-hover/link:translate-x-1 group-hover/link:scale-x-100'
+            class='translate-x-4 scale-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1 group-hover:scale-x-100'
           ></line><polyline
             points='12 5 19 12 12 19'
-            class='translate-x-0 transition-all duration-300 ease-in-out group-hover/link:translate-x-1'
+            class='translate-x-0 transition-all duration-300 ease-in-out group-hover:translate-x-1'
           ></polyline></svg
         >
       </div>
@@ -88,13 +83,13 @@ const postDate = data.updatedDate ?? data.publishDate
             {/* desc */}
             <p
               class={cn(
-                'line-clamp-2 pt-1 text-sm text-muted-foreground sm:line-clamp-3',
+                'line-clamp-2 text-sm text-muted-foreground sm:line-clamp-3',
                 data.heroImage && 'sm:me-24'
               )}
             >
               {data.description}
             </p>
-            <div class='flex items-center gap-2 py-1.5 text-sm italic leading-4 text-muted-foreground sm:py-3'>
+            <div class='py-2 flex items-center gap-2 text-sm italic leading-4 text-muted-foreground'>
               {/* reading time */}
               <span class='flex items-center gap-1'>
                 <Icon name='time' class='size-4' />
@@ -108,67 +103,66 @@ const postDate = data.updatedDate ?? data.publishDate
                 </span>
               )}
             </div>
+            {data.tags.length > 0 && (
+              <object>
+                <ul class='tag-list mt-1 flex gap-2'>
+                  {data.tags.map((tag: string) => (
+                    <li>
+                      <Button as='a' title={tag} href={`/tags/${tag}`} variant='pill' />
+                    </li>
+                  ))}
+                </ul>
+              </object>
+            )}
           </>
         )
       }
-    </Tag>
+    </div>
   </a>
-  <!-- tags -->
-  {
-    detailed && data.tags && (
-      <ul class='tag-list mt-1 flex flex-wrap gap-2'>
-        {data.tags.map((tag: string) => (
-          <li>
-            <Button title={tag} href={`/tags/${tag}`} variant='pill' />
-          </li>
-        ))}
-      </ul>
-    )
-  }
-</li>
 
-<style>
-  .post-preview {
-    --preview-highlight-final: var(
-      --preview-highlight,
-      hsl(var(--primary) / var(--un-text-opacity, 1))
-    );
-  }
-  .post-preview:hover {
-    &,
-    & .tag-list a {
-      background-color: var(
-        --preview-highlight-bg,
-        hsl(var(--muted) / var(--un-bg-opacity, 1))
-      ) !important;
-    }
-    & > a,
-    & .tag-list a:hover {
-      color: var(--preview-highlight-final) !important;
+  <style>
+    .post-preview {
+      --preview-highlight-final: var(
+        --preview-highlight,
+        hsl(var(--primary) / var(--un-text-opacity, 1))
+      );
     }
-    & > a .preview-redirect {
-      stroke: var(--preview-highlight-final) !important;
+    .post-preview:hover {
+      & > a,
+      & .tag-list a {
+        background-color: var(
+          --preview-highlight-bg,
+          hsl(var(--muted) / var(--un-bg-opacity, 1))
+        ) !important;
+      }
+      & > a,
+      & .tag-list a:hover {
+        color: var(--preview-highlight-final) !important;
+      }
+      & > a .preview-redirect {
+        stroke: var(--preview-highlight-final) !important;
+      }
     }
-  }
-  .cover-image {
-    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%
-    );
-  }
-
-  @media (max-width: 768px) {
     .cover-image {
-      mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
-      -ms-mask-image: -ms-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+      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 top,
+        to right,
         rgba(0, 0, 0, 0) 0%,
         rgba(0, 0, 0, 1) 100%
       );
     }
-  }
-</style>
+
+    @media (max-width: 768px) {
+      .cover-image {
+        mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+        -ms-mask-image: -ms-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+        -webkit-mask-image: -webkit-linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0) 0%,
+          rgba(0, 0, 0, 1) 100%
+        );
+      }
+    }
+  </style>
+</li>

package/components/pages/TOC.astro

@@ -16,8 +16,8 @@ const toc = generateToc(headings)
 ---
 
 <toc-heading class={className} {...props}>
-  <h2 class='font-semibold'>TABLE OF CONTENTS</h2>
-  <ul class='mt-4 text-card-foreground'>
+  <h2 class='font-medium'>TABLE OF CONTENTS</h2>
+  <ul class='mt-4'>
     {toc.map((heading) => <TOCHeading heading={heading} />)}
   </ul>
 </toc-heading>

package/components/pages/TOCHeading.astro

@@ -16,12 +16,12 @@ const text = rawText.endsWith('#') ? rawText.slice(0, -1) : rawText
 <li>
   <div class='relative'>
     <span
-      class='absolute top-[5%] w-[2px] rounded transition-colors duration-300 [&.highlight-bg]:bg-primary [&.is-read]:bg-input'
+      class='absolute top-[5%] w-[2px] rounded transition-colors duration-300 [&.highlight-bg]:bg-primary [&.is-read]:bg-border'
     ></span>
     <a
       aria-label={`Scroll to section: ${text}`}
       class={cn(
-        'toc-item line-clamp-2 px-3 py-1 ms-2 text-foreground/75 transition-all hover:text-foreground [&.highlight]:font-medium [&.highlight]:text-primary [&.is-read]:text-input [&.highlight-bg-translucent]:bg-muted',
+        'toc-item line-clamp-2 px-3 py-1 ms-2 text-foreground/75 transition-all hover:text-foreground [&.highlight]:font-medium [&.highlight]:text-primary [&.highlight-bg-translucent]:bg-muted',
         depth > 2 && 'ps-7'
       )}
       href={`#${slug}`}>{text}</a

package/components/user/Button.astro

@@ -17,7 +17,7 @@ const { as: Tag = 'a', class: className, title, href, variant = 'button', ...pro
 
 <Tag
   class={cn(
-    'group inline-flex items-center gap-x-1 rounded-lg bg-muted border px-2 py-1 text-sm text-muted-foreground transition-all hover:bg-primary-foreground no-underline',
+    'group inline-flex items-center gap-x-1 rounded-lg bg-muted border px-2 py-1 text-sm text-muted-foreground transition-all hover:bg-card no-underline',
     !href && 'cursor-default',
     variant === 'pill' && 'rounded-xl',
     className

package/components/user/MdxRepl.astro

@@ -19,8 +19,8 @@ const { width } = Astro.props
   .mdx-repl {
     background: linear-gradient(
       135deg,
-      hsl(var(--primary) / 0.05) 0%,
-      hsl(var(--muted) / 0.2) 100%
+      hsl(var(--primary) / 0.1) 0%,
+      hsl(var(--background) / 1) 100%
     );
   }
 

package/components/user/Steps.astro

@@ -46,7 +46,7 @@ const { html } = processSteps(content)
     font-weight: 600;
     text-align: center;
     color: hsl(var(--foreground) / var(--un-text-opacity, 1));
-    background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity, 1));
+    background-color: hsl(var(--card) / var(--un-bg-opacity, 1));
     border-radius: 99rem;
     box-shadow: inset 0 0 0 1px hsl(var(--border) / var(--un-border-opacity, 1));
   }

package/components/user/Timeline.astro

@@ -24,7 +24,7 @@ const { class: className, events, ...props } = Astro.props
             />
           )}
           <div class='flex gap-2 max-sm:flex-col'>
-            <samp class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-primary-foreground max-sm:px-2 sm:min-w-[82px] sm:text-right'>
+            <samp class='w-fit grow-0 rounded-md py-1 text-sm max-sm:bg-card max-sm:px-2 sm:min-w-[82px] sm:text-right'>
               {event.date}
             </samp>
             <div>

package/package.json

@@ -2,7 +2,7 @@
   "name": "astro-pure",
   "type": "module",
   "description": "A simple, clean but powerful blog theme build by astro.",
-  "version": "1.3.7",
+  "version": "1.3.9",
   "homepage": "https://astro-pure.js.org/",
   "author": "CWorld",
   "license": "Apache-2.0",
@@ -40,11 +40,11 @@
     "@astrojs/mdx": "^4.3.12",
     "@astrojs/sitemap": "^3.6.0",
     "@pagefind/default-ui": "^1.4.0",
-    "@unocss/reset": "^66.5.9",
-    "astro": "^5.16.0",
+    "@unocss/reset": "^66.5.10",
+    "astro": "^5.16.3",
     "hast-util-select": "^6.0.4",
     "node-html-parser": "^7.0.1",
     "pagefind": "^1.4.0",
-    "unocss": "^66.5.9"
+    "unocss": "^66.5.10"
   }
 }

package/types/theme-config.ts

@@ -172,11 +172,7 @@ export const ThemeConfigSchema = () =>
     content: z.object({
       externalLinks: z.object({
         /** Content to show for external links */
-        content: z
-          .string()
-          .optional()
-          .default(' ↗')
-          .describe('Content to show for external links'),
+        content: z.string().optional().default(' ↗').describe('Content to show for external links'),
         /** Properties for the external links element */
         properties: z
           .record(z.string())