astro-pure 1.2.4 → 1.2.6

package/README.md

@@ -32,6 +32,8 @@ const config = {
 export default config
 ```
 
+UnoCSS is more recommended, and TailwindCSS method will be removed soon.
+
 See [User Components](https://astro-pure.js.org/docs/integrations/components) & [Advanced Components](https://astro-pure.js.org/docs/integrations/advanced) to learn how to use.
 
 > Some part of Advanced Components may require Astro Integration config.

package/components/advanced/Comment.astro

@@ -61,18 +61,18 @@ const { class: className } = Astro.props
     /* Font size */
     --waline-font-size: 16px;
     /* Basic color */
-    --waline-white: hsl(var(--background) / var(--tw-bg-opacity, 1));
+    --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(--tw-text-opacity, 1));
-    --waline-active-color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+    --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(--tw-text-opacity, 1));
-    --waline-bg-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
-    --waline-bg-color-light: hsl(var(--input) / var(--tw-text-opacity, 1));
+    --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(--tw-border-opacity, 1));
+    --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;
@@ -82,7 +82,7 @@ const { class: className } = Astro.props
     --waline-avatar-size: 3.25rem;
     --waline-m-avatar-size: calc(var(--waline-avatar-size) * 9 / 13);
     /* Badge */
-    --waline-badge-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+    --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);

package/components/advanced/GithubCard.astro

@@ -13,7 +13,7 @@ const [owner, repoName] = repo.split('/')
   <a
     href={`https://github.com/${repo}`}
     target='_blank'
-    class='group block flex flex-col gap-y-2 rounded-xl border border-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-5 py-4 transition-colors hover:bg-muted hover:text-muted-foreground'
   >
     <div class='flex items-center justify-between'>
       <div class='flex items-center gap-x-2 text-foreground group-hover:text-primary'>
@@ -70,7 +70,7 @@ const [owner, repoName] = repo.split('/')
   .loading .gh-text {
     color: transparent;
     border-radius: calc(var(--radius) - 3px);
-    background-color: hsl(var(--primary-foreground) / var(--tw-text-opacity));
+    background-color: hsl(var(--primary-foreground) / var(--un-text-opacity));
     animation: pulsate 2s infinite linear;
     user-select: none;
   }

package/components/advanced/Quote.astro

@@ -5,9 +5,7 @@ const { class: className } = Astro.props
 ---
 
 <quote-component class={cn('not-prose inline-block', className)}>
-  <div
-    class='flex flex-row items-center gap-x-3 rounded-full border border-border px-4 py-2 text-sm shadow-sm'
-  >
+  <div class='flex flex-row items-center gap-x-3 rounded-full border px-4 py-2 text-sm shadow-sm'>
     <span class='relative flex items-center justify-center'>
       <span
         class='absolute size-2 animate-ping rounded-full border border-green-400 bg-green-400 opacity-75'

package/components/basic/Footer.astro

@@ -15,7 +15,7 @@ social.rss = {
 ---
 
 <footer class='mx-auto mb-5 mt-16'>
-  <div class='border-t border-border pt-5'>
+  <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
         class='flex items-center gap-x-4 gap-y-2 text-muted-foreground max-sm:flex-col [&_a:hover]:text-primary [&_a]:text-foreground'
@@ -24,7 +24,7 @@ social.rss = {
           footerConf.registration && (
             <a
               class='text-xs'
-              style='color:hsl(var(--muted-foreground)/var(--tw-text-opacity,1))'
+              style='color:hsl(var(--muted-foreground)/var(--un-text-opacity,1))'
               href={footerConf.registration.url}
               target='_blank'
             >

package/components/basic/Header.astro

@@ -180,8 +180,8 @@ import { Icon } from '../user'
       visibility: visible;
       bottom: -1rem;
       opacity: 1;
-      background-color: hsl(var(--muted) / var(--tw-bg-opacity, 1));
-      border-bottom-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+      background-color: hsl(var(--muted) / var(--un-bg-opacity, 1));
+      border-bottom-color: hsl(var(--border) / var(--un-border-opacity, 1));
     }
   }
 

package/components/basic/ThemeProvider.astro

@@ -30,7 +30,7 @@
     const { message } = (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 border-border shadow-lg flex items-center gap-2'
+      'animate fixed bottom-8 z-20 px-4 py-2 bg-muted text-foreground rounded-lg border shadow-lg flex items-center gap-2'
     toast.innerHTML = `<svg width='22' height='22' viewBox='0 0 24 24' fill='currentColor'>${Icons.info}</svg> <span>${message}</span>`
     document.body.appendChild(toast)
     setTimeout(() => {

package/components/pages/PFSearch.astro

@@ -56,11 +56,11 @@ import '@pagefind/default-ui/css/ui.css'
 <style>
   #site-search {
     --pagefind-ui-scale: 0.8;
-    --pagefind-ui-primary: hsl(var(--primary) / var(--tw-bg-opacity, 1));
-    --pagefind-ui-text: hsl(var(--foreground) / var(--tw-text-opacity, 1));
-    --pagefind-ui-background: hsl(var(--muted) / var(--tw-bg-opacity, 1));
-    --pagefind-ui-border: hsl(var(--border) / var(--tw-border-opacity, 1));
-    --pagefind-ui-tag: hsl(var(--muted-foreground) / var(--tw-text-opacity, 1));
+    --pagefind-ui-primary: hsl(var(--primary) / var(--un-bg-opacity, 1));
+    --pagefind-ui-text: hsl(var(--foreground) / var(--un-text-opacity, 1));
+    --pagefind-ui-background: hsl(var(--muted) / var(--un-bg-opacity, 1));
+    --pagefind-ui-border: hsl(var(--border) / var(--un-border-opacity, 1));
+    --pagefind-ui-tag: hsl(var(--muted-foreground) / var(--un-text-opacity, 1));
     --pagefind-ui-border-width: 2px;
     --pagefind-ui-border-radius: calc(var(--radius) + 2px);
     --pagefind-ui-image-border-radius: calc(var(--radius) + 2px);

package/components/pages/PostPreview.astro

@@ -22,13 +22,13 @@ const postDate = data.updatedDate ?? data.publishDate
 
 <li
   class={cn(
-    'post-preview group/card flex flex-col relative rounded-2xl border border-border bg-background transition-colors ease-in-out px-5 py-2.5 hover:bg-muted',
+    '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
   )}
   style={detailed &&
     data.heroImage?.color &&
-    `--preview-highlight:color-mix(in srgb,${data.heroImage.color} 40%,hsl(var(--foreground)/var(--tw-text-opacity,1)));
+    `--preview-highlight:color-mix(in srgb,${data.heroImage.color} 40%,hsl(var(--foreground)/var(--un-text-opacity,1)));
     --preview-highlight-bg:hsl(from ${data.heroImage.color} h s l/20%)`}
 >
   <a
@@ -131,7 +131,7 @@ const postDate = data.updatedDate ?? data.publishDate
   .post-preview {
     --preview-highlight-final: var(
       --preview-highlight,
-      hsl(var(--primary) / var(--tw-text-opacity, 1))
+      hsl(var(--primary) / var(--un-text-opacity, 1))
     );
   }
   .post-preview:hover {
@@ -139,7 +139,7 @@ const postDate = data.updatedDate ?? data.publishDate
     & .tag-list a {
       background-color: var(
         --preview-highlight-bg,
-        hsl(var(--muted) / var(--tw-bg-opacity, 1))
+        hsl(var(--muted) / var(--un-bg-opacity, 1))
       ) !important;
     }
     & > a,

package/components/pages/TOCHeading.astro

@@ -7,8 +7,10 @@ interface Props {
 }
 
 const {
-  heading: { depth, slug, subheadings, text }
+  heading: { depth, slug, subheadings, text: rawText }
 } = Astro.props
+// TODO: Temporary fix for the issue with the headings that end with link reference text
+const text = rawText.endsWith('#') ? rawText.slice(0, -1) : rawText
 ---
 
 <li>

package/components/user/Aside.astro

@@ -49,7 +49,7 @@ if (!title) {
 
 <style>
   .aside > .aside-container {
-    --tw-bg-opacity: 0.07;
+    --un-bg-opacity: 0.07;
 
     &.aside-tip {
       --primary: 234 60% 60%;

package/components/user/Button.astro

@@ -6,7 +6,7 @@ const { as: Tag = 'a', class: className, title, href, style = 'button', ...props
 
 <Tag
   class={cn(
-    'group inline-flex items-center gap-x-1 rounded-lg bg-muted border border-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-primary-foreground no-underline',
     !href && 'cursor-default',
     style === 'pill' && 'rounded-xl',
     className

package/components/user/Card.astro

@@ -6,7 +6,7 @@ const { as: Tag = 'div', class: className, href, heading, subheading, date } = A
 
 <Tag
   class={cn(
-    'not-prose block relative rounded-2xl border border-border bg-muted px-5 py-3',
+    'not-prose block relative rounded-2xl border bg-muted px-5 py-3',
     href && 'transition-all hover:border-foreground/25 hover:shadow-sm',
     className
   )}

package/components/user/CardListChildren.astro

@@ -6,7 +6,7 @@ type Props = { main?: boolean; children: CardList }
 const { main = false, children } = Astro.props
 ---
 
-<ul class={cn('flex flex-col gap-y-1', !main && 'list-disc ms-5')}>
+<ul class={cn('flex flex-col gap-y-1', !main && 'subitem list-disc ms-5')}>
   {
     children.map((child) => {
       const Tag = child.link ? 'a' : 'p'

package/components/user/Collapse.astro

@@ -10,10 +10,7 @@ const { class: className, title, ...props } = Astro.props
 
 <collapse-component class='group/expand'>
   <div
-    class={cn(
-      'rounded-xl border border-border px-3 my-4 sm:px-4 group-[.expanded]/expand:bg-muted',
-      className
-    )}
+    class={cn('rounded-xl border px-3 my-4 sm:px-4 group-[.expanded]/expand:bg-muted', className)}
     {...props}
   >
     <slot name='before' />

package/components/user/Steps.astro

@@ -45,10 +45,10 @@ const { html } = processSteps(content)
     font-size: 0.8125rem;
     font-weight: 600;
     text-align: center;
-    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
-    background-color: hsl(var(--primary-foreground) / var(--tw-bg-opacity, 1));
+    color: hsl(var(--foreground) / var(--un-text-opacity, 1));
+    background-color: hsl(var(--primary-foreground) / var(--un-bg-opacity, 1));
     border-radius: 99rem;
-    box-shadow: inset 0 0 0 1px hsl(var(--border) / var(--tw-border-opacity, 1));
+    box-shadow: inset 0 0 0 1px hsl(var(--border) / var(--un-border-opacity, 1));
   }
 
   /* Vertical guideline linking list numbers. */
@@ -60,7 +60,7 @@ const { html } = processSteps(content)
     bottom: var(--bullet-margin);
     inset-inline-start: calc((var(--bullet-size) - var(--guide-width)) / 2);
     width: var(--guide-width);
-    background-color: hsl(var(--border) / var(--tw-border-opacity, 1));
+    background-color: hsl(var(--border) / var(--un-border-opacity, 1));
   }
 
   /* Adjust first item inside a step so that it aligns vertically with the number
@@ -76,7 +76,7 @@ const { html } = processSteps(content)
     margin-top: 0;
     transform: translateY(var(--shift-y));
     margin-bottom: var(--shift-y);
-    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+    color: hsl(var(--foreground) / var(--un-text-opacity, 1));
   }
   .sl-steps > li > :first-child:where(h1, h2, h3, h4, h5, h6) {
     --lh: calc(1.2em);

package/components/user/Tabs.astro

@@ -110,7 +110,7 @@ if (isSynced) {
   [role='tablist'] {
     display: flex;
     list-style: none;
-    border-bottom: 2px solid hsl(var(--border) / var(--tw-border-opacity, 1));
+    border-bottom: 2px solid hsl(var(--border) / var(--un-border-opacity, 1));
     padding: 0;
   }
 
@@ -123,14 +123,14 @@ if (isSynced) {
     gap: 0.5rem;
     padding: 0.2rem 1.25rem;
     text-decoration: none;
-    border-bottom: 2px solid hsl(var(--border) / var(--tw-border-opacity, 1));
-    color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
+    border-bottom: 2px solid hsl(var(--border) / var(--un-border-opacity, 1));
+    color: hsl(var(--foreground) / var(--un-text-opacity, 1));
     outline-offset: -0.1875rem;
     overflow-wrap: initial;
   }
   .tab [role='tab'][aria-selected='true'] {
-    color: hsl(var(--primary) / var(--tw-text-opacity, 1));
-    border-color: hsl(var(--primary) / var(--tw-text-opacity, 1));
+    color: hsl(var(--primary) / var(--un-text-opacity, 1));
+    border-color: hsl(var(--primary) / var(--un-text-opacity, 1));
     font-weight: 600;
   }
 

package/index.ts

@@ -1,13 +1,13 @@
 import { spawn } from 'node:child_process'
-import path, { dirname, relative } from 'node:path'
+import { dirname, relative } from 'node:path'
 import { fileURLToPath } from 'node:url'
 // Astro
 import type { AstroIntegration, RehypePlugins, RemarkPlugins } from 'astro'
 // Integrations
 import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
-import tailwind from '@astrojs/tailwind'
 import rehypeExternalLinks from 'rehype-external-links'
+import UnoCSS from 'unocss/astro'
 
 import { remarkAddZoomable, remarkReadingTime } from './plugins/remark-plugins'
 import { vitePluginUserConfig } from './plugins/virtual-user-config'
@@ -23,6 +23,7 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
     hooks: {
       'astro:config:setup': async ({ config, updateConfig }) => {
         let userConfig = parseWithFriendlyErrors(
+          // @ts-ignore
           UserConfigSchema,
           opts,
           'Invalid config passed to astro-pure integration'
@@ -37,8 +38,8 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
         if (!allIntegrations.find(({ name }) => name === '@astrojs/mdx')) {
           integrations.push(mdx({ optimize: true }))
         }
-        if (!allIntegrations.find(({ name }) => name === '@astrojs/tailwind')) {
-          integrations.push(tailwind({ applyBaseStyles: false }))
+        if (!allIntegrations.find(({ name }) => name === 'unocss')) {
+          integrations.push(UnoCSS({ injectReset: true }))
         }
 
         // Add supported remark plugins based on user config.
@@ -61,8 +62,6 @@ export default function AstroPureIntegration(opts: UserInputConfig): AstroIntegr
         // integrations.push(starlightDirectivesRestorationIntegration())
 
         // Add integrations immediately after Starlight in the config array.
-        // e.g. if a user has `integrations: [starlight(), tailwind()]`, then the order will be
-        // `[starlight(), expressiveCode(), sitemap(), mdx(), tailwind()]`.
         // This ensures users can add integrations before/after Starlight and we respect that order.
         const selfIndex = config.integrations.findIndex((i) => i.name === 'astro-pure')
         config.integrations.splice(selfIndex + 1, 0, ...integrations)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-pure",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "description": "A simple, clean but powerful blog theme build by astro.",
   "type": "module",
   "author": "CWorld",
@@ -37,13 +37,12 @@
   "dependencies": {
     "@astrojs/mdx": "^4.0.3",
     "@astrojs/sitemap": "^3.2.1",
-    "@astrojs/tailwind": "^5.1.3",
     "@pagefind/default-ui": "^1.3.0",
     "astro": "^5.0.3",
     "hast-util-select": "^6.0.3",
     "node-html-parser": "^7.0.1",
     "pagefind": "^1.2.0",
     "rehype-external-links": "^3.0.0",
-    "tailwind-merge": "^2.5.5"
+    "unocss": "^65.4.3"
   }
 }

package/scripts/index.js

@@ -31,6 +31,7 @@ switch (args._[0]) {
     break
   case 'help':
     console.log('Usage:')
+    console.log('  check - Check envirionment and run corresponding adaption code')
     console.log('  new [args] - Create new post on blog collection')
     console.log('  info - Show this info message')
     console.log('  help - Show this help message')

package/types/integrations-config.ts

@@ -24,7 +24,7 @@ export const IntegrationConfigSchema = () =>
       target: z.string()
     }),
 
-    /** Tailwindcss typography */
+    /** UnoCSS typography */
     typography: z.object({
       /** The class to apply to the typography. */
       class: z

package/utils/class-merge.ts

@@ -0,0 +1,17 @@
+import { clsx, type ClassValue } from './clsx'
+
+export function simpleMerge(...classes: string[]): string {
+  const uniqueClasses = new Set<string>()
+
+  classes.forEach((cls) => {
+    if (cls) {
+      cls.split(' ').forEach((c) => uniqueClasses.add(c))
+    }
+  })
+
+  return Array.from(uniqueClasses).join(' ')
+}
+
+export function cn(...inputs: ClassValue[]) {
+  return simpleMerge(clsx(inputs))
+}

package/utils/index.ts

@@ -3,8 +3,8 @@ export { default as clsx } from './clsx'
 export { default as mdastToString } from './mdast-util-to-string'
 export { default as getReadingTime } from './reading-time'
 
-// Tailwind cn
-export { cn } from './tailwind'
+// Class merge
+export { cn } from './class-merge'
 
 // Date
 export { getFormattedDate } from './date'

package/utils/tailwind.ts

@@ -1,7 +0,0 @@
-import { twMerge } from 'tailwind-merge'
-
-import { clsx, type ClassValue } from './clsx'
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}