astro-pure 1.3.2 → 1.3.3

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,19 @@ 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));
     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;
+  }
 </style>
 
 <script>
@@ -122,25 +133,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.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})`
@@ -150,7 +158,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
       }
     }
   }

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/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.3",
   "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/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)

package/components/advanced/Comment.astro

@@ -1,148 +0,0 @@
----
-import config from 'virtual:config'
-
-import '@waline/client/style'
-
-import { cn } from '../../utils'
-
-const { class: className } = Astro.props
----
-
-{
-  config.integ.waline.enable && (
-    <comment-component>
-      <div id='waline' class={cn('not-prose', className)}>
-        Comment seems to stuck. Try to refresh?✨
-      </div>
-    </comment-component>
-  )
-}
-
-<script>
-  import { init as walineInit } from '@waline/client'
-  import type { WalineEmojiPresets } from '@waline/client'
-  import config from 'virtual:config'
-
-  const walineConfig = config.integ.waline
-
-  class Comment extends HTMLElement {
-    constructor() {
-      super()
-    }
-
-    connectedCallback() {
-      // Prevent Vue log errors
-      ;(globalThis as unknown as { __VUE_OPTIONS_API__: boolean }).__VUE_OPTIONS_API__ = true
-      ;(globalThis as unknown as { __VUE_PROD_DEVTOOLS__: boolean }).__VUE_PROD_DEVTOOLS__ = false
-      ;(
-        globalThis as unknown as { __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: boolean }
-      ).__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ = false
-
-      const emoji = walineConfig.emoji?.map(
-        (preset) => `${config.npmCDN}/@waline/emojis@1.2.0/${preset}` as WalineEmojiPresets
-      )
-
-      walineInit({
-        el: '#waline',
-        serverURL: walineConfig.server || '',
-        emoji,
-        reaction: ['/icons/heart-item.svg'],
-        ...walineConfig.additionalConfigs
-      })
-    }
-  }
-
-  if (walineConfig.enable) customElements.define('comment-component', Comment)
-</script>
-
-<style>
-  /* Basic theme */
-  #waline {
-    /* Font size */
-    --waline-font-size: 16px;
-    /* Basic color */
-    --waline-white: hsl(var(--background) / var(--un-bg-opacity, 1));
-    --waline-light-grey: #999;
-    --waline-dark-grey: #666;
-    /* Theme color */
-    --waline-theme-color: hsl(var(--foreground) / var(--un-text-opacity, 1));
-    --waline-active-color: hsl(var(--primary) / var(--un-text-opacity, 1));
-    /* Layout */
-    --waline-color: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
-    --waline-bg-color: hsl(var(--muted) / var(--un-bg-opacity, 1));
-    --waline-bg-color-light: hsl(var(--input) / var(--un-text-opacity, 1));
-    --waline-bg-color-hover: #f0f0f0;
-    --waline-border-color: hsl(var(--border) / var(--un-border-opacity, 1));
-    --waline-disable-bg-color: #f8f8f8;
-    --waline-disable-color: #bbb;
-    --waline-code-bg-color: #282c34;
-    /* Special */
-    --waline-bq-color: #f0f0f0;
-    /* Avatar */
-    --waline-avatar-size: 3.25rem;
-    --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
-    /* Badge */
-    --waline-badge-color: hsl(var(--border) / var(--un-border-opacity, 1));
-    --waline-badge-font-size: 0.775em;
-    /* Info */
-    --waline-info-bg-color: var(--waline-bg-color-light);
-    --waline-info-color: var(--waline-color);
-    --waline-info-font-size: 0.625em;
-    /* Render selection */
-    --waline-border: 1px solid var(--waline-border-color);
-    --waline-avatar-radius: 50%;
-    --waline-box-shadow: none;
-  }
-
-  /* Reaction buttons */
-  #waline :global(.wl-reaction-title, .wl-reaction-text) {
-    display: none;
-  }
-  #waline :global(.wl-reaction) {
-    overflow: visible;
-    margin-bottom: 0.5em;
-  }
-  #waline :global(.wl-reaction-img) {
-    width: auto;
-    display: flex;
-    height: 35px;
-    align-items: center;
-    column-gap: 0.4rem;
-  }
-  #waline :global(.wl-reaction-votes) {
-    position: inherit;
-    top: inherit;
-    min-width: inherit;
-    inset-inline-end: inherit;
-    display: flex;
-    font-weight: normal;
-    border: none;
-    background: none;
-    color: inherit;
-    padding: 0.2rem 0.4rem;
-    border-radius: 6px;
-  }
-  #waline :global(.wl-reaction-loading) {
-    position: inherit;
-    top: inherit;
-    min-width: inherit;
-  }
-  #waline :global(.wl-reaction-item.active .wl-reaction-votes) {
-    background: var(--waline-theme-color);
-    color: var(--waline-bg-color);
-  }
-
-  #waline :global(.wl-reaction-votes:after) {
-    margin-left: 0.25em;
-    content: 'Like(s)';
-    display: inline-block;
-    clear: both;
-    border: 0;
-  }
-  #waline :global(.wl-reaction img) {
-    filter: invert(25%);
-  }
-  :global(.dark) #waline :global(.wl-reaction img) {
-    filter: invert(75%);
-  }
-</style>

package/components/pages/PageInfo.astro

@@ -1,18 +0,0 @@
----
-import { cn } from '../../utils'
-
-const { class: className, hideComment, ...props } = Astro.props
-
-const path = Astro.url.pathname
----
-
-<div class={cn('text-base text-sm text-muted-foreground', className)} {...props}>
-  <span class='waline-pageview-count' data-path={path}></span> views
-  {
-    !hideComment && (
-      <a href='#waline'>
-        | <span class='waline-comment-count' data-path={path} /> comments
-      </a>
-    )
-  }
-</div>