Replaced bespoke Swiper and Leaflet integration with Astro Swiper and

Astro Leaflet

Author: ChristineTham

README.md

@@ -56,8 +56,8 @@ This project initially started as a bare bones port of [hello-gatsby-starter](ht
 - Display map at geo coordinates and zoom level using `Map` component (need to also include `extra: ['map']` is frontmatter to load CSS/JS assets for page)
 - Calculates and show reading time for blog posts
 - CSS/JS assets of external libraries loaded only when needed on a per page and per package basis - no unnecessary bloat
-- Masonry Photo gallery and lightbox using PhotoSwipe (including display of EXIF tags)
-- Carousel component using Swiper
+- Masonry Photo gallery and lightbox using [PhotoSwipe](https://photoswipe.com) (including display of EXIF tags)
+- Carousel component using [Swiper](https://swiperjs.com/)
 - Documentation pages (modelled after astro docs starter but using Tailwind)
 
 ## External Packages
@@ -78,11 +78,11 @@ The start uses the following external packages:
 - Local full text search using [Lunr](https://lunrjs.com)
 - Math equations using [KaTeX](https://katex.org) via [remark-math and rehype-katex](https://github.com/remarkjs/remark-math)
 - Diagrams using [Mermaid](https://mermaid-js.github.io/mermaid/#/), [Markmap](https://markmap.js.org) and [PlantUML](https://plantuml.com)
-- Open Street Map using [Leaflet](https://leafletjs.com/)
+- Open Street Map using [Leaflet](https://leafletjs.com/) via [Astro Leaflet](https://github.com/pascal-brand38/astro-leaflet)
 - [reading-time](https://github.com/ngryman/reading-time)
 - [PhotoSwipe](https://photoswipe.com)
 - [exifr](https://mutiny.cz/exifr/)
-- [Swiper](https://swiperjs.com/)
+- [Swiper](https://swiperjs.com/) via [Astro Swiper](https://github.com/pascal-brand38/astro-swiper)
 - [Remark Emoji](https://github.com/rhysd/remark-emoji)
 - Masonry layout using [Astro Masonry](https://github.com/OlivierEstevez/astro-masonry)
 
@@ -266,3 +266,5 @@ All commands are run from the root of the project, from a terminal:
   - Improved photoswipe implementation
   - replaced TailwindCSS masonry with astro-masonry
   - Updated Katex CSS to 0.16.23
+  - Replaced bespoke leaflet integration with [Astro Leaflet](https://github.com/pascal-brand38/astro-leaflet)
+  - Replaced bespoke Swiper integration with [Astro Swiper](https://github.com/pascal-brand38/astro-swiper)

package.json

@@ -22,7 +22,6 @@
     "@tailwindcss/forms": "^0.5.10",
     "@tailwindcss/typography": "^0.5.19",
     "@types/alpinejs": "^3.13.11",
-    "@types/leaflet": "^1.9.20",
     "@typescript-eslint/parser": "^8.45.0",
     "alpinejs": "^3.15.0",
     "astro": "5.14.1",
@@ -58,19 +57,16 @@
     "@tailwindcss/vite": "^4.1.14",
     "astro-geo-map": "^2.0.0",
     "astro-icon": "^1.1.5",
+    "astro-leaflet": "^1.8.1",
     "astro-masonry": "^1.2.2",
     "astro-mermaid": "^1.1.0",
     "astro-plantuml": "^0.1.4",
     "astro-seo": "^0.8.4",
+    "astro-swiper": "^1.1.0",
     "hero-patterns": "^2.1.0",
-    "katex": "^0.16.23",
-    "leaflet": "^1.9.4",
     "lunr": "^2.3.9",
-    "mermaid": "^11.12.0",
     "photoswipe": "^5.4.4",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
-    "playwright": "^1.55.1",
-    "swiper": "^12.0.2",
     "tailwindcss": "^4.1.14"
   },
   "packageManager": "[email protected]+sha512.e804f889f1cecc40d572db084eec3e4881739f8dec69c0ff10d2d1beff9a4e309383ba27b5b750059d7f4c149535b6cd0d2cb1ed3aeb739239a4284a68f40cfa"

pnpm-lock.yaml

@@ -1,5 +1,32 @@
 ---
-import 'swiper/css/bundle'
+import { Swiper, SwiperWrapper, SwiperSlide } from 'astro-swiper'
+import { SwiperButtonPrev, SwiperButtonNext, SwiperPagination } from 'astro-swiper'
+import type { AstroSwiperType } from 'astro-swiper'
+import type { ImageMetadata } from 'astro'
+
+const astroSwiperOptions: AstroSwiperType = {
+  options: {
+    cssMode: true,
+    loop: true,
+    spaceBetween: 30,
+    centeredSlides: true,
+    autoplay: {
+      delay: 5000,
+      disableOnInteraction: false,
+      waitForTransition: false
+    },
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true
+    },
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev'
+    },
+    mousewheel: true,
+    keyboard: true
+  }
+}
 
 export interface Props {
   pages: {
@@ -21,17 +48,15 @@ const folderFiles = Object.keys(imageFiles).filter((image) => imagepaths.include
 const images = folderFiles.map((image) => imageFiles[image])
 ---
 
-<div
+<Swiper
+  options={astroSwiperOptions.options}
   style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"
-  class:list={[
-    'swiper mySwiper not-prose mx-auto w-full max-w-(--breakpoint-xl) rounded-lg',
-    `h-[500px]`
-  ]}
+  class="not-prose mx-auto h-[500px] w-full max-w-(--breakpoint-xl) rounded-lg"
 >
-  <div class="swiper-wrapper">
+  <SwiperWrapper>
     {
       pages.map((page, i) => (
-        <div class="swiper-slide relative">
+        <SwiperSlide class="relative">
           <div class="absolute bottom-0 left-0 z-10 h-full w-full bg-linear-to-t from-gray-800 opacity-25 xl:rounded-lg" />
           <img
             src={images[i].src}
@@ -43,39 +68,11 @@ const images = folderFiles.map((image) => imageFiles[image])
             {page.description && <p class="text-base text-gray-300 italic">{page.description}</p>}
             <slot />
           </div>
-        </div>
+        </SwiperSlide>
       ))
     }
-  </div>
-  <div class="swiper-button-next"></div>
-  <div class="swiper-button-prev"></div>
-  <div class="swiper-pagination"></div>
-</div>
-
-<!-- Swiper JS -->
-<script>
-  // @ts-ignore
-  import Swiper from 'swiper/bundle'
-
-  new Swiper('.mySwiper', {
-    cssMode: true,
-    // lazy: true,
-    loop: true,
-    spaceBetween: 30,
-    centeredSlides: true,
-    autoplay: {
-      delay: 5000,
-      disableOnInteraction: false
-    },
-    pagination: {
-      el: '.swiper-pagination',
-      clickable: true
-    },
-    navigation: {
-      nextEl: '.swiper-button-next',
-      prevEl: '.swiper-button-prev'
-    },
-    mousewheel: true,
-    keyboard: true
-  })
-</script>
+  </SwiperWrapper>
+  <SwiperButtonPrev />
+  <SwiperButtonNext />
+  <SwiperPagination />
+</Swiper>

src/components/carousel.astro

@@ -1,39 +1,20 @@
 ---
+import { Leaflet } from 'astro-leaflet'
+
 export interface Props {
   text?: string
   loc: [number, number]
   zoom: number
 }
 
 const { text, loc, zoom } = Astro.props
-
-// import 'leaflet/dist/leaflet.css'
 ---
 
-<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" crossorigin="" />
-<map-inner data-text={text} data-lat={loc[0]} data-lng={loc[1]} data-zoom={zoom}></map-inner>
-<div id="map" class="mb-3 h-96"></div>
-<script>
-  import L from 'leaflet'
-
-  class MapInner extends HTMLElement {
-    constructor() {
-      super()
-
-      const loc: [number, number] = [Number(this.dataset.lat), Number(this.dataset.lng)]
-
-      const map = L.map('map', { scrollWheelZoom: false }).setView(loc, Number(this.dataset.zoom))
-      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        maxZoom: 19,
-        attribution:
-          '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-      }).addTo(map)
-      const marker = L.marker(loc).addTo(map)
-      if (this.dataset.text) {
-        marker.bindPopup(this.dataset.text || 'Location').openPopup()
-      }
-    }
-  }
-
-  customElements.define('map-inner', MapInner)
-</script>
+<Leaflet
+  options={{
+    tileByName: 'OSM',
+    center: loc,
+    zoom: zoom,
+    markers: [{ latlng: loc, options: { title: text } }]
+  }}
+/>

src/components/map.astro

@@ -24,4 +24,4 @@ The above title is a variable declared in MDX.
 
 The following is the Map component defined in this starter
 
-<Map loc={[37.33214, -122.02992]} zoom={17} />
+<Map loc={[37.33214, -122.02992]} zoom={17} text="Apple" />