Fixed asset loading issue with base

Author: ChristineTham

README.md

@@ -150,4 +150,5 @@ All commands are run from the root of the project, from a terminal:
   personal blog, including Next/Prev links, photo gallery support in Markdown,
   and improved pagination control.
 - 2.2.0: Fixed lint errors, reimplemented map, lightbox and carousel to use
-  leaflet, photoswipe and swiper packages instead of relying on external CDN.
+  leaflet, photoswipe and swiper packages instead of relying on external CDN.
+- 2.2.1: Update to astro 2.0.10, fixed asset loading issue with base

astro.config.mjs

@@ -17,6 +17,7 @@ export default defineConfig({
   vite: {
     ssr: {
       external: ['svgo'],
+      noExternal: ['swiper', 'leaflet'],
     },
   },
   site: 'https://hellotham.github.io',

package.json

@@ -14,7 +14,7 @@
   "devDependencies": {
     "@akebifiky/remark-simple-plantuml": "^1.0.2",
     "@astrojs/alpinejs": "^0.1.3",
-    "@astrojs/image": "^0.14.0",
+    "@astrojs/image": "^0.14.1",
     "@astrojs/mdx": "^0.16.0",
     "@astrojs/sitemap": "^1.0.1",
     "@astrojs/tailwind": "^3.0.1",
@@ -26,16 +26,16 @@
     "@types/leaflet": "^1.9.0",
     "@types/photoswipe": "^4.1.2",
     "alpinejs": "^3.11.1",
-    "astro": "2.0.6",
-    "astro-robots-txt": "^0.3.11",
+    "astro": "^2.0.10",
+    "astro-robots-txt": "^0.3.12",
     "exifr": "^7.1.3",
     "mdast-util-to-string": "^3.1.1",
     "prettier-plugin-astro": "^0.8.0",
     "reading-time": "^1.5.0",
     "rehype-katex": "^6.0.2",
     "remark-math": "^5.1.1",
     "schema-dts": "^1.1.0",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.2.6",
     "unist-util-visit": "^4.1.2"
   },
   "dependencies": {
@@ -49,6 +49,6 @@
     "mermaid": "^9.3.0",
     "photoswipe": "^5.3.5",
     "photoswipe-dynamic-caption-plugin": "^1.2.7",
-    "swiper": "^9.0.3"
+    "swiper": "^9.0.4"
   }
 }

src/components/carousel.astro

@@ -1,4 +1,6 @@
 ---
+import 'swiper/css/bundle'
+
 export interface Props {
   pages: {
     name: string
@@ -44,6 +46,7 @@ const images = folderFiles.map(image => imageFiles[image])
 
   // import Swiper styles
   import 'swiper/css/bundle'
+
   var swiper = new Swiper('.mySwiper', {
     cssMode: true,
     lazy: true,

src/components/lightbox.astro

@@ -1,5 +1,6 @@
 ---
-
+import 'photoswipe/style.css'
+import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css'
 import { Image } from '@astrojs/image/components'
 import exifr from 'exifr'
 
@@ -13,16 +14,14 @@ const { id, images } = Astro.props
 const imageFiles = import.meta.glob<ImageMetadata>('../images/**/*.{png,webp,jpg,jpeg}', { import: 'default', eager: true })
 const imageSrcs = images.map(image => imageFiles[image])
 const imagetitles = images.map(image => image.slice(0, image.lastIndexOf('.')).slice(image.lastIndexOf('/') + 1))
-// console.log(images)
 const exifs = [] as Record<string, any>[]
 for (let i in images) {
   const exif = await exifr.parse(images[i].replace('../', './src/'))
   exifs.push(exif)
 }
-// console.log(exifs)
 
 ---
-<style is:inline>
+<style>
   .gallery {
       width: 100%;
       display: block;
@@ -101,8 +100,6 @@ for (let i in images) {
             ))}
 </lightbox-inner>
 <script>
-  import 'photoswipe/style.css'
-  import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css'
   import PhotoSwipeLightbox from 'photoswipe/lightbox'
   import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin'
 

src/components/map.astro

@@ -1,4 +1,5 @@
 ---
+// import 'leaflet/dist/leaflet.css'
 export interface Props {
   loc: [number, number]
   zoom: number
@@ -13,7 +14,13 @@ crossorigin=""/>
 <div id="map" class="mb-3 h-96"></div>
 <script>
   import L from 'leaflet'
+  // delete L.Icon.Default.prototype._getIconUrl;
 
+  // L.Icon.Default.mergeOptions({
+  //   iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+  //   iconUrl: require('leaflet/dist/images/marker-icon.png'),
+  //   shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+  // });
   class MapInner extends HTMLElement {
     constructor() {
       super()