astro-pure 1.4.0 → 1.4.2

package/components/advanced/QRCode.astro

@@ -19,3 +19,9 @@ const { content, class: className, ...props } = Astro.props
   if (!qrcodeContainer) throw new Error('qrcode container not found')
   loadQRcode(qrcodeContainer)
 </script>
+
+<style>
+  #qrcode-container :global(canvas) {
+    width: 100%;
+  }
+</style>

package/components/basic/Header.astro

@@ -27,6 +27,7 @@ import { Icon } from '../user'
               href={item.link}
               class='w-full flex-none grow py-2 text-right font-medium transition-none hover:text-primary sm:w-fit sm:px-3'
               aria-label='Nav menu item'
+              data-astro-prefetch
             >
               {item.title}
             </a>

package/components/pages/BackToTop.astro

@@ -5,7 +5,7 @@ const { header: headerName, content: contentName, needPercent = true } = Astro.p
 ---
 
 <div
-  class='z-10 group fixed bottom-8 end-4 transition-all flex flex-col gap-y-4 sm:end-8'
+  class='z-10 md:z-50 group fixed bottom-8 end-4 transition-all flex flex-col gap-y-4 sm:end-8'
   id='action-buttons'
 >
   <slot name='other-icons' />

package/components/pages/Copyright.astro

@@ -43,7 +43,7 @@ const shares = {
   {/* title & link */}
   <div class='flex flex-col'>
     <div class='font-medium text-foreground'>{title}</div>
-    <div class='text-sm'>{Astro.url}</div>
+    <div class='text-sm line-clamp-1'>{Astro.url}</div>
   </div>
 
   {/* common info */}
@@ -127,7 +127,7 @@ const shares = {
 <style>
   #qrcode-container.expanded {
     max-height: 11rem;
-    transform: translateY(4px);
+    transform: translateY(6px);
     opacity: 100;
   }
 </style>

package/components/pages/PostPreview.astro

@@ -139,11 +139,15 @@ const postDate = data.updatedDate ?? data.publishDate
       }
     }
     .cover-image {
+      -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+      -webkit-mask-image: linear-gradient(to right, 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%);
     }
 
     @media (max-width: 768px) {
       .cover-image {
+        -webkit-mask-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+        -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
         mask-image: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
       }
     }

package/index.ts

@@ -3,13 +3,14 @@ import { dirname, relative } from 'node:path'
 import { fileURLToPath } from 'node:url'
 // Astro
 import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro'
-import { AstroError } from 'astro/errors'
 // Integrations
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
+import { AstroError } from 'astro/errors'
 import UnoCSS from 'unocss/astro'
 
 import rehypeExternalLinks from './plugins/rehype-external-links'
+import rehypeImageCaption from './plugins/rehype-image-caption'
 import rehypeTable from './plugins/rehype-table'
 import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins'
 import { vitePluginUserConfig } from './plugins/virtual-user-config'
@@ -64,6 +65,8 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
         ])
         // Make table scrollable on overflow
         rehypePlugins.push(rehypeTable)
+        // Add image caption support
+        if (userConfig.content.imageCaption) rehypePlugins.push(rehypeImageCaption)
 
         // 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

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.4.0",
+  "version": "1.4.2",
   "homepage": "https://astro-pure.js.org/",
   "author": "CWorld",
   "license": "Apache-2.0",
@@ -37,14 +37,14 @@
     "./libs": "./libs/index.ts"
   },
   "dependencies": {
-    "@astrojs/mdx": "^4.3.13",
-    "@astrojs/sitemap": "^3.6.0",
-    "@pagefind/default-ui": "^1.4.0",
-    "@unocss/reset": "^66.5.10",
-    "astro": "^5.16.6",
+    "@astrojs/mdx": "5.0.3",
+    "@astrojs/sitemap": "3.7.2",
+    "@pagefind/default-ui": "^1.5.0",
+    "@unocss/reset": "^66.6.7",
+    "astro": "6.1.3",
     "hast-util-select": "^6.0.4",
-    "node-html-parser": "^7.0.1",
-    "pagefind": "^1.4.0",
-    "unocss": "^66.5.10"
+    "node-html-parser": "^7.1.0",
+    "pagefind": "^1.5.0",
+    "unocss": "^66.6.7"
   }
 }

package/plugins/rehype-image-caption.ts

@@ -0,0 +1,42 @@
+// https://github.com/Saramanda9988/blog-pure/blob/luna-pure/packages/pure/plugins/rehype-image-caption.ts
+import type { Element, Root } from 'hast'
+import type { Plugin } from 'unified'
+import { visit } from 'unist-util-visit'
+
+/**
+ * Rehype plugin to wrap images with alt text in a figure element with figcaption
+ */
+const rehypeImageCaption: Plugin<[], Root> = () => {
+  return (tree) => {
+    visit(tree, 'element', (node, index, parent) => {
+      // Only process <img> elements that have alt text
+      if (
+        node.tagName === 'img' &&
+        typeof node.properties?.alt === 'string' &&
+        node.properties.alt.trim() !== '' &&
+        parent &&
+        typeof index === 'number'
+      ) {
+        const altText = node.properties.alt as string
+        // Create figcaption element
+        const figcaption: Element = {
+          type: 'element',
+          tagName: 'figcaption',
+          properties: {},
+          children: [{ type: 'text', value: altText }]
+        }
+        // Create figure element wrapping the image
+        const figure: Element = {
+          type: 'element',
+          tagName: 'figure',
+          properties: { style: 'text-align:center' },
+          children: [node, figcaption]
+        }
+        // Replace the img node with the figure node
+        parent.children[index] = figure
+      }
+    })
+  }
+}
+
+export default rehypeImageCaption

package/scripts/libs/minimist.cjs

@@ -144,7 +144,8 @@ module.exports = (args, opts) => {
       argv,
       key.split('.'),
       value
-    )(aliases[key] || []).forEach((x) => {
+    )
+    ;(aliases[key] || []).forEach((x) => {
       setKey(argv, x.split('.'), value)
     })
   }

package/scripts/new.mjs

@@ -111,9 +111,9 @@ export default function main(args) {
   }
 
   let content = `---
-title: ${postTitle}
+title: '${postTitle}'
 description: 'Write your description here.'
-publishDate: ${getDate()}
+publishDate: '${getDate()}'
 `
   content += parsedArgs.draft ? 'draft: true\n' : ''
   content += parsedArgs.lang ? `lang: ${parsedArgs.lang}\n` : ''

package/types/theme-config.ts

@@ -184,7 +184,10 @@ export const ThemeConfigSchema = () =>
       blogPageSize: z.number().optional().default(8),
 
       /** Share buttons to show */
-      share: ShareSchema()
+      share: ShareSchema(),
+
+      /** Enable image captions (default false) */
+      imageCaption: z.boolean().default(false).describe('Enable image captions')
     })
   })
 

package/utils/theme.ts

@@ -3,7 +3,8 @@ export function getTheme() {
 }
 
 export function listenThemeChange(theme?: string) {
-  if (theme && theme !== 'system') return // if theme is specified, no need to listen window theme change
+  // If theme is specified, no need to listen window theme change
+  if (theme && theme !== 'system') return
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
     setTheme(e.matches ? 'dark' : 'light')
   })