astro-pure 1.2.7 → 1.2.9

package/components/basic/Header.astro

@@ -5,12 +5,8 @@ import { Icon } from '../user'
 ---
 
 <header-component
-  class='group sticky top-4 z-30 mb-12 flex items-center justify-between rounded-xl border border-transparent max-sm:py-1 sm:rounded-2xl [&.not-top]:border-border [&.not-top]:bg-background [&.not-top]:px-1.5 dark:[&.not-top]:bg-muted'
+  class='group sticky top-4 z-30 mb-12 flex items-center justify-between rounded-xl border border-transparent max-sm:py-1 sm:rounded-2xl'
 >
-  <!-- <div
-      class='absolute -left-4 -top-8 -z-10 box-content hidden h-20 w-[calc(100%+2rem)] !duration-0 max-sm:group-[.expanded]:block max-sm:group-[.expanded.not-top]:hidden max-sm:group-[.expanded]:bg-white dark:max-sm:group-[.expanded]:bg-muted'
-    >
-    </div> -->
   <a
     class='z-30 text-xl font-semibold group-[.not-top]:ms-2 sm:group-[.not-top]:ms-3'
     style='transition:margin-inline 0.3s'
@@ -45,7 +41,7 @@ import { Icon } from '../user'
       </div>
     </div>
 
-    <!-- buttons -->
+    {/* buttons */}
     <div class='z-30 flex gap-x-4 group-[.not-top]:gap-x-2' style='transition:gap 0.3s'>
       <button
         id='toggleDarkMode'
@@ -125,6 +121,12 @@ import { Icon } from '../user'
       background-color 0.15s;
 
     &.not-top {
+      --un-border-opacity: 1;
+      border-color: hsl(var(--border) / var(--un-border-opacity));
+      --un-bg-opacity: 1;
+      background-color: hsl(var(--background) / var(--un-bg-opacity));
+      padding-left: 0.375rem;
+      padding-right: 0.375rem;
       box-shadow:
         rgb(255, 255, 255) 0px 0px 0px 0px,
         rgba(24, 24, 27, 0.08) 0px 0px 0px 1px,
@@ -140,6 +142,9 @@ import { Icon } from '../user'
       margin-inline: 8%;
     }
   }
+  :global(.dark) header-component.not-top {
+    background-color: hsl(var(--muted) / var(--un-bg-opacity));
+  }
 
   /* header menu */
   @media (max-width: 640px) {

package/components/pages/BackToTop.astro

@@ -4,25 +4,28 @@ import { Icon } from '../user'
 const { header: headerName, content: contentName, needPercent = true } = Astro.props
 ---
 
-<button
-  aria-label='Back to Top'
-  class='z-90 group fixed bottom-8 end-4 flex h-10 w-10 translate-y-28 items-center justify-center rounded-full border-2 border-transparent bg-muted text-muted-foreground opacity-0 transition-all duration-300 hover:border-border/75 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12'
-  data-show='false'
-  id='to-top-btn'
+<div
+  class='z-10 group fixed bottom-8 end-4 transition-all flex flex-col gap-y-4 sm:end-8'
+  id='action-buttons'
 >
-  <div
-    class='absolute bottom-0 end-0 start-0 top-0 flex items-center justify-center transition-opacity group-hover:opacity-0 group-[.ended]:opacity-0'
+  <slot name='other-icons' />
+  <button
+    aria-label='Back to Top'
+    class='relative size-10 flex items-center justify-center rounded-full border-2 border-transparent bg-muted text-muted-foreground duration-300 hover:border-border/75 sm:size-12 opacity-0'
+    id='to-top-btn'
   >
-    <span class='text'>10</span>
-    <span class='text-xs'>%</span>
-  </div>
-  <Icon
-    name='up'
-    class='opacity-0 transition-opacity group-hover:opacity-100 group-[.ended]:opacity-100'
-  />
-</button>
+    <div
+      class='top-text absolute bottom-0 end-0 start-0 top-0 flex items-center justify-center group-[.ended]:opacity-0'
+    >
+      <span class='text'>10</span>
+      <span class='text-xs'>%</span>
+    </div>
+    <Icon name='up' class='top-icon group-[.ended]:opacity-100' />
+  </button>
+</div>
 
 <script is:inline define:vars={{ headerName, contentName, needPercent }}>
+  const actionBtns = document.getElementById('action-buttons')
   const scrollBtn = document.getElementById('to-top-btn')
   const scrollPercentEl = scrollBtn.children[0].children[0]
   const targetHeader = document.getElementById(headerName)
@@ -31,8 +34,8 @@ const { header: headerName, content: contentName, needPercent = true } = Astro.p
   // scroll to top
   function callback(entries) {
     entries.forEach((entry) => {
-      // only show the scroll to top button when the heading is out of view
-      scrollBtn.dataset.show = (!entry.isIntersecting).toString()
+      // only show the action buttons when the heading is out of view
+      actionBtns.classList.toggle('show', !entry.isIntersecting)
     })
   }
   scrollBtn.addEventListener('click', () => {
@@ -44,7 +47,6 @@ const { header: headerName, content: contentName, needPercent = true } = Astro.p
   } else {
     console.error(`Element with ID ${headerName} not found.`)
   }
-
   if (needPercent) {
     // scroll percentage
     const scrollHeight = articleElement.scrollHeight // total height
@@ -63,9 +65,46 @@ const { header: headerName, content: contentName, needPercent = true } = Astro.p
       scrollPercentEl.innerText = scrollPercent.toString()
 
       // If percent is 100, percent won't need to show
-      scrollBtn.classList.toggle('ended', scrollPercent > 100)
+      actionBtns.classList.toggle('ended', scrollPercent > 100)
     })
   } else {
-    scrollBtn.classList.add('ended')
+    actionBtns.classList.add('ended')
   }
 </script>
+
+<style>
+  #action-buttons {
+    transform: translateY(4rem);
+    &.show {
+      transform: translateY(0);
+      & #to-top-btn {
+        opacity: 1;
+      }
+    }
+
+    /* To top button status change */
+    & #to-top-btn {
+      & .top-text,
+      & .top-icon {
+        transition-property: opacity;
+        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        transition-duration: 150ms;
+      }
+      & .top-text {
+        opacity: 1;
+      }
+      & .top-icon {
+        opacity: 0;
+      }
+    }
+    &.ended #to-top-btn,
+    & #to-top-btn:hover {
+      & .top-text {
+        opacity: 0;
+      }
+      & .top-icon {
+        opacity: 1;
+      }
+    }
+  }
+</style>

package/components/pages/Hero.astro

@@ -45,7 +45,7 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
         fetchpriority='high'
         loading='eager'
         id='blurImage'
-        class='absolute end-0 top-4 z-0 mt-0 h-full max-w-[65ch] rounded-3xl opacity-60 blur-xl transition-opacity duration-300'
+        class='absolute end-0 top-4 z-0 mt-0 h-full max-w-[65ch] rounded-3xl opacity-60 transition-opacity duration-300'
         {...heroImage}
       />
     </div>
@@ -148,3 +148,10 @@ const dateTimeOptions: Intl.DateTimeFormatOptions = {
     })
   }
 </script>
+
+<style>
+  #blurImage {
+    --un-blur: blur(24px);
+    filter: var(--un-blur);
+  }
+</style>

package/components/pages/TOC.astro

@@ -126,3 +126,9 @@ const toc = generateToc(headings)
 
   customElements.define('toc-heading', TOC)
 </script>
+
+<style>
+  toc-heading :global(.toc-item) {
+    display: flow-root;
+  }
+</style>

package/components/pages/TOCHeading.astro

@@ -21,7 +21,7 @@ const text = rawText.endsWith('#') ? rawText.slice(0, -1) : rawText
     <a
       aria-label={`Scroll to section: ${text}`}
       class={cn(
-        'line-clamp-2 px-3 py-1 ms-2 flex-1 text-foreground/75 transition-all hover:text-foreground [&.highlight]:font-medium [&.highlight]:text-primary [&.readed]: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 [&.readed]:text-input [&.highlight-bg-translucent]:bg-muted',
         depth > 2 && 'ps-7'
       )}
       href={`#${slug}`}>{text}</a

package/libs/icons.ts

@@ -103,6 +103,8 @@ export const BuiltInIcons = {
   // mingcute:tag-2-line
   'tag-2':
     '<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="M10.238 4.827a3 3 0 0 1 2.122.878l6.485 6.486a3 3 0 0 1 0 4.242l-4.243 4.243a3 3 0 0 1-4.242 0l-6.486-6.485a3 3 0 0 1-.878-2.122V7.327a2.5 2.5 0 0 1 2.5-2.5zm0 2H5.496a.5.5 0 0 0-.5.5v4.742a1 1 0 0 0 .292.707l6.486 6.486a1 1 0 0 0 1.414 0l4.243-4.243a1 1 0 0 0 0-1.414L10.945 7.12a1 1 0 0 0-.707-.293M7.531 9.362a1.5 1.5 0 1 1 2.121 2.122a1.5 1.5 0 0 1-2.121-2.122M11.652 2a3 3 0 0 1 2.122.878l7.192 7.193a1 1 0 0 1-1.414 1.414L12.36 4.29a1 1 0 0 0-.708-.29H7a1 1 0 0 1 0-2z"/></g>',
+  // mingcute:list-check-line
+  list: '<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="M4.5 17.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3M20 18a1 1 0 1 1 0 2H9a1 1 0 1 1 0-2zM4.5 10.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3M20 11a1 1 0 0 1 .117 1.993L20 13H9a1 1 0 0 1-.117-1.993L9 11zM4.5 3.5a1.5 1.5 0 1 1 0 3a1.5 1.5 0 0 1 0-3M20 4a1 1 0 0 1 .117 1.993L20 6H9a1 1 0 0 1-.117-1.993L9 4z"/></g>',
 
   // === Project ===
   'github-circle':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-pure",
-  "version": "1.2.7",
+  "version": "1.2.9",
   "description": "A simple, clean but powerful blog theme build by astro.",
   "type": "module",
   "author": "CWorld",

package/bunfig.toml

@@ -1,2 +0,0 @@
-[install]
-registry = "https://registry.npmmirror.com/"