astro-pure 1.3.2 → 1.3.4

package/components/advanced/GithubCard.astro

@@ -13,49 +13,57 @@ const [owner, repoName] = repo.split('/')
   <a
     href={`https://github.com/${repo}`}
     target='_blank'
-    class='group block flex flex-col gap-y-1.5 rounded-xl border px-5 py-4 transition-colors hover:bg-muted hover:text-muted-foreground'
+    class='group block flex flex-col gap-y-2 rounded-xl border px-4 py-3 transition-colors hover:bg-muted hover:text-muted-foreground sm:px-5 sm:py-4'
   >
-    <div class='flex items-center justify-between'>
-      <div class='flex items-center gap-x-2 text-foreground group-hover:text-primary'>
+    <div class='flex items-center justify-between gap-x-2'>
+      <div
+        class='flex min-w-0 flex-1 items-center gap-x-2 text-foreground group-hover:text-primary'
+      >
         <div
           id='gh-avatar'
-          class='gh-text me-2 size-7'
-          style='border-radius:999px;background-size:cover'
+          class='load-block me-2 size-7 flex-shrink-0 bg-cover sm:size-8'
+          style='border-radius:999px'
         >
         </div>
-        <span class='text-lg transition-colors'>{owner}</span>
-        <span class='text-muted-foreground'>/</span>
-        <span class='text-lg font-bold transition-colors'>{repoName}</span>
+        <div class='min-w-0 flex-1'>
+          <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'
+              >{repoName}</span
+            >
+          </div>
+        </div>
       </div>
-      <div class='rounded-full bg-primary-foreground p-1'>
+      <div class='flex-shrink-0 rounded-full bg-primary-foreground p-1'>
         <Icon name='github' />
       </div>
     </div>
-    <p id='gh-description' class='gh-text'>Waiting for api.github.com...</p>
-    <div class='text-sm flex items-center justify-between mt-0.5'>
-      <div class='gh-text flex flex-wrap items-center gap-x-5'>
-        <div class='flex items-center gap-x-2'>
+    <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='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 -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176zM12 4.987L9.687 8.959a1.25 1.25 0 0 1-.816.592l-4.492.973l3.062 3.427c.234.262.347.61.312.959l-.463 4.573l4.206-1.854a1.25 1.25 0 0 1 1.008 0l4.206 1.854l-.463-4.573a1.25 1.25 0 0 1 .311-.959l3.063-3.427l-4.492-.973a1.25 1.25 0 0 1-.816-.592z"/></g></svg>
-          <span id='gh-stars' class='leading-tight'>???</span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="sm:w-[22px] sm:h-[22px]"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M10.92 2.868a1.25 1.25 0 0 1 2.16 0l2.795 4.798l5.428 1.176a1.25 1.25 0 0 1 .667 2.054l-3.7 4.141l.56 5.525a1.25 1.25 0 0 1-1.748 1.27L12 19.592l-5.082 2.24a1.25 1.25 0 0 1-1.748-1.27l.56-5.525l-3.7-4.14a1.25 1.25 0 0 1 .667-2.055l5.428-1.176zM12 4.987L9.687 8.959a1.25 1.25 0 0 1-.816.592l-4.492.973l3.062 3.427c.234.262.347.61.312.959l-.463 4.573l4.206-1.854a1.25 1.25 0 0 1 1.008 0l4.206 1.854l-.463-4.573a1.25 1.25 0 0 1 .311-.959l3.063-3.427l-4.492-.973a1.25 1.25 0 0 1-.816-.592z"/></g></svg>
+          <span id='gh-stars' class='text-sm leading-tight sm:text-base'>???</span>
         </div>
 
-        <div class='flex items-center gap-x-2'>
+        <div class='flex items-center gap-x-1.5 sm:gap-x-2'>
           {/* mingcute:git-branch-line */}
           <!-- prettier-ignore -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M18 3a3 3 0 0 1 1 5.83V9a4 4 0 0 1-4 4H9a2 2 0 0 0-2 2v.17a3.001 3.001 0 1 1-2 0V8.83a3.001 3.001 0 1 1 2 0v2.705A4 4 0 0 1 9 11h6a2 2 0 0 0 2-2v-.17A3.001 3.001 0 0 1 18 3M6 17a1 1 0 1 0 0 2a1 1 0 0 0 0-2M6 5a1 1 0 1 0 0 2a1 1 0 0 0 0-2m12 0a1 1 0 1 0 0 2a1 1 0 0 0 0-2"/></g></svg>
-          <span id='gh-forks' class='leading-tight'>???</span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="sm:w-[22px] sm:h-[22px]"><g fill="none"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M18 3a3 3 0 0 1 1 5.83V9a4 4 0 0 1-4 4H9a2 2 0 0 0-2 2v.17a3.001 3.001 0 1 1-2 0V8.83a3.001 3.001 0 1 1 2 0v2.705A4 4 0 0 1 9 11h6a2 2 0 0 0 2-2v-.17A3.001 3.001 0 0 1 18 3M6 17a1 1 0 1 0 0 2a1 1 0 0 0 0-2M6 5a1 1 0 1 0 0 2a1 1 0 0 0 0-2m12 0a1 1 0 1 0 0 2a1 1 0 0 0 0-2"/></g></svg>
+          <span id='gh-forks' class='text-sm leading-tight sm:text-base'>???</span>
         </div>
 
-        <div class='flex items-center gap-x-2'>
+        <div class='flex items-center gap-x-1.5 sm:gap-x-2'>
           {/* mingcute:balance-line */}
           <!-- prettier-ignore -->
-          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v1h.764a2 2 0 0 1 .894.211L16.236 6H20a1 1 0 1 1 0 2h-.382l2.276 4.553c.07.139.106.292.106.447a4 4 0 0 1-8 0c0-.155.036-.308.106-.447L16.382 8h-.146a2 2 0 0 1-.894-.211L13.764 7H13v12h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V7h-.764l-1.578.789A2 2 0 0 1 7.764 8h-.146l2.276 4.553A1 1 0 0 1 10 13a4 4 0 0 1-8 0a1 1 0 0 1 .106-.447L4.382 8H4a1 1 0 0 1 0-2h3.764l1.578-.789A2 2 0 0 1 10.236 5H11V4a1 1 0 0 1 1-1M6 9.236l-1.989 3.977a2 2 0 0 0 3.978 0zm12 0l-1.989 3.977a2 2 0 0 0 3.955.157l.023-.156z"/></g></svg>
-          <span id='gh-license' class='leading-tight'>???</span>
+          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" class="sm:w-[22px] sm:h-[22px]"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 3a1 1 0 0 1 1 1v1h.764a2 2 0 0 1 .894.211L16.236 6H20a1 1 0 1 1 0 2h-.382l2.276 4.553c.07.139.106.292.106.447a4 4 0 0 1-8 0c0-.155.036-.308.106-.447L16.382 8h-.146a2 2 0 0 1-.894-.211L13.764 7H13v12h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V7h-.764l-1.578.789A2 2 0 0 1 7.764 8h-.146l2.276 4.553A1 1 0 0 1 10 13a4 4 0 0 1-8 0a1 1 0 0 1 .106-.447L4.382 8H4a1 1 0 0 1 0-2h3.764l1.578-.789A2 2 0 0 1 10.236 5H11V4a1 1 0 0 1 1-1M6 9.236l-1.989 3.977a2 2 0 0 0 3.978 0zm12 0l-1.989 3.977a2 2 0 0 0 3.955.157l.023-.156z"/></g></svg>
+          <span id='gh-license' class='text-sm leading-tight sm:text-base'>???</span>
         </div>
       </div>
-      <span id='gh-language' class='gh-text leading-tight'>?????</span>
+      <span id='gh-language' class='load-block text-sm leading-tight sm:text-base'>?????</span>
     </div>
   </a>
 </github-card>
@@ -72,16 +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-text-opacity));
+    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>
@@ -122,35 +136,38 @@ 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.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})`
-          avatarEl.style.backgroundColor = 'transparent'
         }
 
         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
       }
     }
   }

package/components/advanced/index.ts

@@ -6,6 +6,3 @@ export { default as LinkPreview } from './LinkPreview.astro'
 // Data transformer
 export { default as QRCode } from './QRCode.astro'
 export { default as MediumZoom } from './MediumZoom.astro'
-
-// Individual server integration
-export { default as Comment } from './Comment.astro'

package/components/basic/Footer.astro

@@ -15,7 +15,7 @@ social.rss = {
 const footerLink1 = footerConf.links?.filter(({ pos }) => pos === 1) || []
 ---
 
-<footer class='mx-auto mb-5 mt-16'>
+<footer class='mx-auto mb-5 mt-16 w-full'>
   <div class='border-t pt-5'>
     <div class='flex items-center gap-y-3 max-sm:flex-col sm:justify-between sm:gap-y-0'>
       <div

package/components/basic/Header.astro

@@ -5,7 +5,7 @@ import { Icon } from '../user'
 ---
 
 <header-component
-  class='group sticky top-4 z-30 md:z-50 mb-12 flex items-center justify-between rounded-xl border border-transparent max-sm:py-1 sm:rounded-2xl'
+  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'

package/components/pages/Copyright.astro

@@ -104,8 +104,7 @@ const shares = {
       }
     </div>
     <QRCode
-      aria-expanded='false'
-      class='absolute z-10 -mt-2 box-content max-h-0 max-w-44 overflow-hidden rounded-xl border bg-muted p-4 opacity-0 transition-all duration-300 ease-in-out aria-expanded:max-h-44 aria-expanded:translate-y-4 aria-expanded:opacity-100'
+      class='absolute z-10 -mt-2 box-content max-h-0 max-w-44 overflow-hidden rounded-xl border bg-muted p-4 opacity-0 transition-all duration-300 ease-in-out'
     />
   </div>
 </div>
@@ -121,6 +120,14 @@ const shares = {
   </a>
 </div>
 
+<style>
+  #qrcode-container.expanded {
+    max-height: 11rem;
+    transform: translateY(4px);
+    opacity: 100;
+  }
+</style>
+
 <script>
   import { showToast } from '../../utils'
 
@@ -135,12 +142,5 @@ const shares = {
   // QRCode
   const getQRCode = document.getElementById('get-qrcode')
   const qrcodeContainer = document.getElementById('qrcode-container')
-  if (!qrcodeContainer) throw new Error('qrcode container not found')
-  getQRCode?.addEventListener('click', () => {
-    if (qrcodeContainer.ariaExpanded === 'true') {
-      qrcodeContainer.ariaExpanded = 'false'
-    } else {
-      qrcodeContainer.ariaExpanded = 'true'
-    }
-  })
+  getQRCode?.addEventListener('click', () => qrcodeContainer?.classList.toggle('expanded'))
 </script>

package/components/pages/Hero.astro

@@ -2,7 +2,6 @@
 import { Image } from 'astro:assets'
 import type { InferEntrySchema } from 'astro:content'
 
-import { PageInfo } from '.'
 import { FormattedDate, Icon } from '../user'
 
 interface Props {
@@ -11,17 +10,7 @@ interface Props {
 }
 
 const {
-  data: {
-    title,
-    description,
-    draft,
-    heroImage,
-    publishDate,
-    updatedDate,
-    comment: enableComment,
-    tags,
-    language
-  },
+  data: { title, description, draft, heroImage, publishDate, updatedDate, tags, language },
   remarkPluginFrontmatter
 } = Astro.props
 
@@ -119,12 +108,12 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
 
   <div class='mt-3 italic'>
     <blockquote class='text-sm text-muted-foreground'><q>{description}</q></blockquote>
-    {!draft && enableComment && <PageInfo class='mt-1' />}
+    <slot name='description' />
   </div>
 </div>
 
 {/* Dividing line */}
-<div class='mt-4 w-1/2 border-t max-lg:mx-auto sm:mt-6 sm:w-1/3'></div>
+<div class='mt-4 w-1/2 border-t max-md:mx-auto sm:mt-6 sm:w-1/3'></div>
 
 <script>
   const viewportHeight = window.innerHeight

package/components/pages/index.ts

@@ -2,7 +2,6 @@ export { default as ArticleBottom } from './ArticleBottom.astro'
 export { default as BackToTop } from './BackToTop.astro'
 export { default as Copyright } from './Copyright.astro'
 export { default as Hero } from './Hero.astro'
-export { default as PageInfo } from './PageInfo.astro'
 export { default as Paginator } from './Paginator.astro'
 export { default as PostPreview } from './PostPreview.astro'
 export { default as TOC } from './TOC.astro'

package/components/user/Button.astro

@@ -1,11 +1,14 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+
 import { cn } from '../../utils'
 
-interface Props {
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
   as?: string
   title?: string
   href?: string
   variant?: 'button' | 'pill' | 'back' | 'ahead'
+  target?: string
   class?: string
 }
 

package/components/user/Card.astro

@@ -1,6 +1,15 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+
 import { cn } from '../../utils'
 
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  heading?: string
+  subheading?: string
+  date?: string
+  class?: string
+}
+
 const { as: Tag = 'div', class: className, href, heading, subheading, date } = Astro.props
 ---
 

package/components/user/CardListChildren.astro

@@ -1,14 +1,19 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+
 import type { CardList } from '../../types'
 import { cn } from '../../utils'
 
-type Props = { main?: boolean; children: CardList }
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  main?: boolean
+  children: CardList
+}
 const { main = false, children } = Astro.props
 ---
 
 <ul class={cn('flex flex-col gap-y-1', !main && 'subitem list-disc ms-5')}>
   {
-    children.map((child) => {
+    children.map((child: CardList[number]) => {
       const Tag = child.link ? 'a' : 'p'
       return (
         <li>

package/components/user/Label.astro

@@ -1,6 +1,13 @@
 ---
+import type { HTMLTag, Polymorphic } from 'astro/types'
+
 import { cn } from '../../utils'
 
+type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
+  title: string
+  href?: string
+  class?: string
+}
 const { class: className, as: Tag = 'div', title, href, ...props } = Astro.props
 ---
 

package/components/user/Spoiler.astro

@@ -1,6 +1,12 @@
 ---
+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
 ---
 

package/index.ts

@@ -6,9 +6,10 @@ import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro'
 // Integrations
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
-import rehypeExternalLinks from 'rehype-external-links'
 import UnoCSS from 'unocss/astro'
 
+import rehypeExternalLinks from './plugins/rehype-external-links'
+import rehypeTable from './plugins/rehype-table'
 import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins'
 import { vitePluginUserConfig } from './plugins/virtual-user-config'
 import { UserConfigSchema, type UserInputConfig } from './types/user-config'
@@ -51,11 +52,14 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
         rehypePlugins.push([
           rehypeExternalLinks,
           {
-            content: { type: 'text', value: userConfig.content.externalLinksContent },
-            target: '_blank',
-            rel: ['nofollow', 'noopener', 'noreferrer']
+            content: {
+              type: 'text',
+              value: userConfig.content.externalLinks.content
+            },
+            contentProperties: userConfig.content.externalLinks.properties
           }
         ])
+        rehypePlugins.push(rehypeTable)
         // Add Starlight directives restoration integration at the end of the list so that remark
         // plugins injected by Starlight plugins through Astro integrations can handle text and
         // leaf directives before they are transformed back to their original form.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-pure",
-  "version": "1.3.2",
+  "version": "1.3.4",
   "description": "A simple, clean but powerful blog theme build by astro.",
   "type": "module",
   "author": "CWorld",
@@ -35,11 +35,11 @@
     "./libs": "./libs/index.ts"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/mdx": "^4.3.1",
     "@astrojs/sitemap": "^3.4.1",
     "@pagefind/default-ui": "^1.3.0",
     "@unocss/reset": "^66.3.3",
-    "astro": "^5.11.1",
+    "astro": "^5.12.0",
     "hast-util-select": "^6.0.4",
     "node-html-parser": "^7.0.1",
     "pagefind": "^1.3.0",

package/{utils → plugins}/rehype-external-links.ts

@@ -1,9 +1,10 @@
 // https://github.com/rehypejs/rehype-external-links
 
 import type { Element, ElementContent, Root } from 'hast'
-import isAbsoluteUrl from 'is-absolute-url'
 import { visit } from 'unist-util-visit'
 
+import isAbsoluteUrl from '../utils/is-absolute-url'
+
 export interface ExternalLinkOptions {
   content?: ElementContent | ElementContent[]
   contentProperties?: Record<string, unknown>

package/plugins/rehype-table.ts

@@ -0,0 +1,37 @@
+import type { Element, Root } from 'hast'
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Rehype plugin that wraps direct table children of #content in a scrollable div
+ */
+const rehypeWrapContentTables: Plugin<[], Root> = () => {
+  return (tree) => {
+    // console.log('tree', tree)
+    // Find all tables and check their parent
+    visit(tree, 'element', (node: Element, index: number | undefined, parent?: Element | Root) => {
+      if (
+        // Check if this is a table element
+        node.tagName === 'table' &&
+        // Verify it has a parent
+        parent &&
+        typeof index === 'number'
+      ) {
+        // Create wrapper div with appropriate classes
+        const wrapper: Element = {
+          type: 'element',
+          tagName: 'div',
+          properties: {
+            className: ['overflow-x-auto', 'w-full', 'flex', 'justify-center']
+          },
+          children: [node] // Place the table inside the wrapper
+        }
+
+        // Replace the table with the wrapper (that contains the table)
+        parent.children.splice(index, 1, wrapper)
+      }
+    })
+  }
+}
+
+export default rehypeWrapContentTables

package/scripts/new.mjs

@@ -7,6 +7,7 @@
  *   -l, --lang <en|zh>   Set the language (default: en)
  *   -d, --draft          Create a draft post (default: false)
  *   -m, --mdx            Use MDX format (default: false)
+ *   -f, --folder         Create the post in a folder (default: false)
  *   -h, --help           Show this help message
  *
  * Example:
@@ -32,6 +33,7 @@ function getDate() {
   return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
 }
 
+/** get blog title slug */
 function getPostSlug(postTitle) {
   let slug = slugify(postTitle).toLocaleLowerCase()
   if (slug === '') {
@@ -46,6 +48,7 @@ Options:
   -l, --lang           Set the language (default: null)
   -d, --draft          Create a draft post (default: false)
   -m, --mdx            Use MDX format (default: false)
+  -f, --folder         Create the post in a folder (default: false)
   -h, --help           Show this help message
 
 Example:
@@ -57,17 +60,19 @@ const TARGET_DIR = 'src/content/blog/'
 export default function main(args) {
   const parsedArgs = minimist(args, {
     string: ['lang'],
-    boolean: ['draft', 'mdx', 'help'],
+    boolean: ['draft', 'mdx', 'help', 'folder'],
     default: {
       lang: null,
       draft: false,
-      mdx: false
+      mdx: false,
+      folder: false
     },
     alias: {
       l: 'lang',
       d: 'draft',
       m: 'mdx',
-      h: 'help'
+      h: 'help',
+      f: 'folder'
     }
   })
 
@@ -84,7 +89,20 @@ export default function main(args) {
 
   const fileExtension = parsedArgs.mdx ? '.mdx' : '.md'
   const fileName = getPostSlug(postTitle) + fileExtension
-  const fullPath = path.join(TARGET_DIR, fileName)
+  
+  let fullPath
+  if (parsedArgs.folder) {
+    const folderName = getPostSlug(postTitle);
+    const folderPath = path.join(TARGET_DIR, folderName);
+    if (!fs.existsSync(folderPath)) {
+      fs.mkdirSync(folderPath, { recursive: true });
+    }
+    const fileName = 'index' + fileExtension;
+    fullPath = path.join(folderPath, fileName);
+  } else {
+    fullPath = path.join(TARGET_DIR, fileName);
+  }
+  
 
   console.log('Full path:', fullPath)
 
@@ -100,7 +118,9 @@ publishDate: ${getDate()}
 `
   content += parsedArgs.draft ? 'draft: true\n' : ''
   content += parsedArgs.lang ? `lang: ${parsedArgs.lang}\n` : ''
-  content += `tags: ['tag1', 'tag2']
+  content += `tags:
+  - Example
+  - Technology
 ---
 
 Write your content here.

package/types/theme-config.ts

@@ -162,14 +162,23 @@ export const ThemeConfigSchema = () =>
     }),
 
     content: z.object({
-      externalLinksContent: z.string().optional().default(' ↗'),
+      externalLinks: z.object({
+        /** 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())
+          .optional()
+          .describe('Properties for the external links element')
+      }),
 
       /** Blog page size for pagination */
       blogPageSize: z.number().optional().default(8),
 
-      /** Show external link arrow */
-      externalLinkArrow: z.boolean().optional().default(true),
-
       /** Share buttons to show */
       share: ShareSchema()
     })

package/utils/index.ts

@@ -2,6 +2,7 @@
 export { default as clsx } from './clsx'
 export { default as mdastToString } from './mdast-util-to-string'
 export { default as getReadingTime } from './reading-time'
+export { default as isAbsoluteUrl } from './is-absolute-url'
 
 // Class merge
 export { cn } from './class-merge'

package/utils/is-absolute-url.ts

@@ -0,0 +1,35 @@
+// https://github.com/sindresorhus/is-absolute-url
+
+// Scheme: https://tools.ietf.org/html/rfc3986#section-3.1
+// Absolute URL: https://tools.ietf.org/html/rfc3986#section-4.3
+const ABSOLUTE_URL_REGEX = /^[a-zA-Z][a-zA-Z\d+\-.]*?:/
+
+// Windows paths like `c:\`
+const WINDOWS_PATH_REGEX = /^[a-zA-Z]:\\/
+
+/**
+ * Check if a URL is absolute.
+ * @param url - The URL to check.
+ * @example
+ * ```
+ * import isAbsoluteUrl from 'is-absolute-url';
+ *
+ * isAbsoluteUrl('http://sindresorhus.com/foo/bar');
+ * //=> true
+ *
+ * isAbsoluteUrl('//sindresorhus.com');
+ * //=> false
+ *
+ * isAbsoluteUrl('foo/bar');
+ * //=> false
+ * ```
+ */
+export default function isAbsoluteUrl(url: string): boolean {
+  if (typeof url !== 'string') {
+    throw new TypeError(`Expected a \`string\`, got \`${typeof url}\``)
+  }
+  if (WINDOWS_PATH_REGEX.test(url)) {
+    return false
+  }
+  return ABSOLUTE_URL_REGEX.test(url)
+}

package/utils/mdast-util-to-string.ts

@@ -3,6 +3,19 @@ type Options = {
   includeHtml?: boolean
 }
 
+/**
+ * Get the text content of a node or list of nodes.
+ *
+ * Prefers the node’s plain-text fields, otherwise serializes its children,
+ * and if the given value is an array, serialize the nodes in it.
+ *
+ * @param {unknown} [value]
+ *   Thing to serialize, typically `Node`.
+ * @param {Options | null | undefined} [options]
+ *   Configuration (optional).
+ * @returns {string}
+ *   Serialized `value`.
+ */
 export default function toString(value: unknown, options?: Options): string {
   const { includeImageAlt = true, includeHtml = true } = options || {}
   return serialize(value, includeImageAlt, includeHtml)