Add unpic

Author: nikoshell

astro.config.mjs

@@ -10,6 +10,7 @@ import metaTags from "astro-meta-tags";
 import pagefind from "astro-pagefind";
 import deleteUnusedImages from "astro-delete-unused-images";
 import serviceWorker from "astrojs-service-worker";
+import { imageService } from "@unpic/astro/service";
 import { execSync } from "node:child_process";
 
 import compress from "astro-compress";
@@ -116,6 +117,7 @@ export default defineConfig({
       enableInDevelopment: true,
     }),
     compress({
+      Images: false,
       SVG: false,
     }),
     dontDie(),
@@ -127,6 +129,9 @@ export default defineConfig({
   image: {
     remotePatterns: [{ protocol: "https" }],
     domains: ["programme.europython.eu", "placehold.co"],
+    service: imageService({
+      placeholder: "blurhash",
+    }),
   },
   prefetch: {
     prefetchAll: true,

package.json

@@ -18,6 +18,7 @@
     "@astrojs/tailwind": "^5.1.5",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "@tailwindcss/typography": "^0.5.16",
+    "@unpic/astro": "^1.0.0",
     "astro": "^5.7.5",
     "astro-compress": "^2.3.8",
     "astro-delete-unused-images": "^1.0.3",

pnpm-lock.yaml

@@ -1,4 +1,5 @@
 ---
+import { ClientRouter } from "astro:transitions";
 interface Props {
   title: string;
   description: string;
@@ -26,6 +27,8 @@ const { title, description, image = "/social-card.png" } = Astro.props;
 <!-- Canonical URL -->
 <link rel="canonical" href={canonicalURL} />
 
+<ClientRouter />
+
 <!-- Primary Meta Tags -->
 <title>{title}</title>
 <meta name="title" content={title} />

public/sw2.js

@@ -70,102 +70,93 @@ const sectionSubtitle = "Meet some of our amazing speakers";
 </Section>
 
 <script>
-  document.addEventListener('DOMContentLoaded', () => {
-    const track = document.querySelector('.speakers-track') as HTMLElement;
-    const slides = document.querySelectorAll('.speaker-slide');
-    const totalOriginalSlides = slides.length / 2;
-
-    if (!track || slides.length === 0) return;
-
-    let currentPosition = 0;
-    const scrollSpeed = 4000;
-    let slidingInterval: ReturnType<typeof setInterval> | null = null;
-
-    // Function to determine slides per view based on window width
-    function getSlidesPerView() {
-      const width = window.innerWidth;
-      if (width <= 480) return 1;
-      if (width <= 640) return 2;
-      if (width <= 768) return 3;
-      if (width <= 1024) return 4;
-      return 5;
-    }
+document.addEventListener('DOMContentLoaded', () => {
+  const track = document.querySelector('.speakers-track') as HTMLElement;
+  const slides = document.querySelectorAll('.speaker-slide');
+  const totalOriginalSlides = slides.length / 2;
+
+  if (!track || slides.length === 0) return;
+
+  let currentPosition = 0;
+  const scrollSpeed = 4000;
+  let slidingInterval: number | null = null;
+
+  function getSlidesPerView() {
+    const width = window.innerWidth;
+    if (width <= 480) return 1;
+    if (width <= 640) return 2;
+    if (width <= 768) return 3;
+    if (width <= 1024) return 4;
+    return 5;
+  }
 
-    function updateCarouselSettings() {
-      const slidesPerView = getSlidesPerView();
-      const slideWidth = 100 / slidesPerView;
+  function updateCarouselSettings() {
+    const slidesPerView = getSlidesPerView();
+    const slideWidth = 100 / slidesPerView;
 
-      // Reset position when breakpoint changes
-      currentPosition = 0;
-      track.style.transition = 'none';
-      track.style.transform = `translateX(0)`;
+    currentPosition = 0;
+    track.style.transition = 'none';
+    track.style.transform = `translateX(0)`;
 
-      // Clear and restart animation
-      if (slidingInterval !== null) {
-        clearInterval(slidingInterval);
-      }
-      startAnimation(slideWidth);
+    if (slidingInterval !== null) {
+      clearInterval(slidingInterval);
     }
+    startAnimation(slideWidth);
+  }
+
+  function startAnimation(slideWidth: number) {
+    moveCarousel();
+    slidingInterval = window.setInterval(moveCarousel, scrollSpeed);
 
-    function startAnimation(slideWidth: number) {
-      // Initial setup
-      moveCarousel();
-      slidingInterval = setInterval(moveCarousel, scrollSpeed);
+    function moveCarousel() {
+      currentPosition += slideWidth;
 
-      function moveCarousel() {
-        currentPosition += slideWidth;
+      track.style.transition = 'transform 1000ms linear';
+      track.style.transform = `translateX(-${currentPosition}%)`;
 
-        track.style.transition = 'transform 1000ms linear';
-        track.style.transform = `translateX(-${currentPosition}%)`;
+      if (currentPosition >= slideWidth * totalOriginalSlides) {
+        setTimeout(() => {
+          track.style.transition = 'none';
+          currentPosition = 0;
+          track.style.transform = `translateX(0)`;
 
-        // Reset when we've scrolled through the original set of slides
-        if (currentPosition >= slideWidth * totalOriginalSlides) {
           setTimeout(() => {
-            track.style.transition = 'none';
-            currentPosition = 0;
-            track.style.transform = `translateX(0)`;
-
-            setTimeout(() => {
-              track.style.transition = 'transform 1000ms linear';
-            }, 20);
-          }, 1000);
-        }
+            track.style.transition = 'transform 1000ms linear';
+          }, 20);
+        }, 1000);
       }
     }
+  }
 
-    // Start the carousel
+  updateCarouselSettings();
+
+  window.addEventListener('resize', () => {
     updateCarouselSettings();
+  });
 
-    // Update on window resize
-    window.addEventListener('resize', () => {
-      updateCarouselSettings();
-    });
+  const carouselContainer = document.querySelector('.speakers-carousel-container');
+  carouselContainer?.addEventListener('mouseenter', () => {
+    if (slidingInterval !== null) {
+      clearInterval(slidingInterval);
+      slidingInterval = null;
+    }
+  });
 
-    // Pause on hover
-    const carouselContainer = document.querySelector('.speakers-carousel-container');
-    carouselContainer?.addEventListener('mouseenter', () => {
+  carouselContainer?.addEventListener('mouseleave', () => {
+    updateCarouselSettings();
+  });
+
+  document.addEventListener('visibilitychange', () => {
+    if (document.hidden) {
       if (slidingInterval !== null) {
         clearInterval(slidingInterval);
         slidingInterval = null;
       }
-    });
-
-    carouselContainer?.addEventListener('mouseleave', () => {
+    } else {
       updateCarouselSettings();
-    });
-
-    // Pause when tab is not visible
-    document.addEventListener('visibilitychange', () => {
-      if (document.hidden) {
-        if (slidingInterval !== null) {
-          clearInterval(slidingInterval);
-          slidingInterval = null;
-        }
-      } else {
-        updateCarouselSettings();
-      }
-    });
+    }
   });
+});
 </script>
 
 <style>

src/components/BaseHead.astro

@@ -23,7 +23,7 @@ const externalDomain = new URL(Astro.site || "").hostname;
 ---
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" transition:name="root" transition:animate="initial">
   <head>
     <BaseHead title={title} description={description} />
     <slot name="head" />

src/components/sections/speakers.astro

@@ -93,6 +93,7 @@ function getGitHosting(url: string): string | undefined {
                   <div class="flex items-start">
                     <div class="border-4 border-white rounded-lg shadow-lg inline-block mb-10">
           <Image
+            transition:animate="fade"
             src={entry.data.avatar}
             alt={entry.data.name}
             height={400}

src/layouts/Layout.astro

@@ -81,6 +81,7 @@ const description = "Our conference speakers organized alphabetically";
                     {speaker.data.avatar ? (
 
           <Image
+            transition:animate="fade"
             src={speaker.data.avatar}
             alt={`${speaker.data.name}'s profile picture`}
             height={250}

src/pages/speaker/[slug].astro

@@ -31,10 +31,6 @@
   z-index: 9999;
 }
 
-html {
-  scroll-behavior: smooth;
-}
-
 body {
   @apply bg-body-background text-text;
 }