astro-accelerator 6.1.2 → 6.1.3

package/package.json

@@ -1,5 +1,5 @@
 {
-    "version": "6.1.2",
+    "version": "6.1.3",
     "author": "Steve Fenton",
     "name": "astro-accelerator",
     "description": "A super-lightweight, accessible, SEO-friendly starter project for Astro",

package/public/css/main.css

@@ -1078,10 +1078,19 @@ figure:focus .magnify-button {
 @media (prefers-reduced-motion: no-preference) {
 
     .magnify-icon,
-    .copy-button,
-    .anim-show-parent .list-item img,
-    .anim-show-parent .list-item {
+    .copy-button {
+        transition: all 0.2s ease-in;
+    }
+
+    .anim-show-parent .list-item img {
         transition: all 0.2s ease-in;
+    }
+
+    
+    .anim-show-parent .list-item {
+        transition-duration: 0.2s;
+        transition-timing-function: ease-in;
+        transition-property: transform, filter, box-shadow, background-color, color, opacity;
         scale: calc(0.75 + (var(--shown, 1) * 0.25));
     }
 }

package/public/js/modules/animation.js

@@ -12,8 +12,7 @@ import { qsa } from './query.js';
 /**
  * Assists animation by setting "--shown" CSS property
  *
- * When an item is visible in the viewport, it will have --shown: 1
- * Otherwise it will be --shown: 0
+ * As an item enters/exits the viewport, --shown moves from 0..1
  * This allows CSS transitions and calculated properties to animate elements
  *
  * Example
@@ -25,15 +24,16 @@ import { qsa } from './query.js';
 function addIntersectionObserver(listItemQuery) {
     function handleIntersection(entries, observer) {
         for (let entry of entries) {
-            const value = entry.isIntersecting ? 1 : 0;
+            const value = entry.isIntersecting ? entry.intersectionRatio : 0;
             entry.target.style.setProperty('--shown', value);
         }
     }
 
+    const thresholds = Array.from({ length: 21 }, (_, i) => i / 20);
     const options = {
         root: null,
         rootMargin: '0px',
-        threshold: 0,
+        threshold: thresholds,
     };
 
     const observer = new IntersectionObserver(handleIntersection, options);
@@ -44,8 +44,7 @@ function addIntersectionObserver(listItemQuery) {
 /**
  * Assists animation by setting "--shown" CSS property
  *
- * When an item is visible in the viewport, it will have --shown: 1
- * Otherwise it will be --shown: 0
+ * As an item enters/exits the viewport, --img-shown moves from 0..1
  * This allows CSS transitions and calculated properties to animate elements
  *
  * Example
@@ -57,15 +56,16 @@ function addIntersectionObserver(listItemQuery) {
 function addListImageIntersectionObserver(imgItemQuery) {
     function handleIntersection(entries, observer) {
         for (let entry of entries) {
-            const value = entry.isIntersecting ? 1 : 0;
+            const value = entry.isIntersecting ? entry.intersectionRatio : 0;
             entry.target.style.setProperty('--img-shown', value);
         }
     }
 
+    const thresholds = Array.from({ length: 21 }, (_, i) => i / 20);
     const options = {
         root: null,
         rootMargin: '0px',
-        threshold: 0.5,
+        threshold: thresholds,
     };
 
     const observer = new IntersectionObserver(handleIntersection, options);

package/src/themes/accelerator/components/RecentlyPublished.astro

@@ -0,0 +1,38 @@
+---
+// warning: This file is overwritten by Astro Accelerator
+
+import { PostOrdering, PostFiltering, Accelerator } from 'astro-accelerator-utils';
+import { SITE } from '@config';
+import ArticleList from '@components/ArticleList.astro';
+
+const accelerator = new Accelerator(SITE);
+const stats = new accelerator.statistics('accelerator/components/RecentlyPublished.astro');
+stats.start();
+
+// Properties
+type Props = {
+  lang?: string;
+  count: number;
+  path?: string;
+};
+const { lang = SITE.default.lang, count, path } = Astro.props satisfies Props;
+
+// Logic
+const allPages = accelerator.posts.all();
+const normalizedPath = path
+  ? `/${path.replace(/^\/+/, '').replace(/\/+$/, '')}`
+  : null;
+const pages = allPages
+  .filter(PostFiltering.hasDate)
+  .filter(PostFiltering.isListable)
+  .filter((post) => {
+    if (!normalizedPath) return true;
+    const postUrl = post.url || '';
+    return postUrl === normalizedPath || postUrl.startsWith(`${normalizedPath}/`);
+  })
+  .sort(PostOrdering.sortByPubDateDesc)
+  .slice(0, count);
+
+stats.stop();
+---
+<ArticleList lang={lang} posts={pages} />