feat: integrate PhotoSwipe lightbox, enhance scrollbar functionality, and update layout components

- Added a new PhotoSwipe component for image lightbox functionality in the layout.
- Enhanced scrollbar component with an auto-hide delay feature.
- Updated global styles to improve scrollbar appearance and added styles for PhotoSwipe.
- Included new Head layout component for better SEO and meta tag management.
- Added images to existing posts for improved visual content.

This commit improves user experience with enhanced image viewing and layout consistency.

src/components/PhotoSwipe.astro

@@ -0,0 +1,52 @@
+<script>
+  import PhotoSwipeLightbox from 'photoswipe/lightbox'
+  import 'photoswipe/style.css'
+
+  // Store lightbox instance for later use
+  let lightbox: PhotoSwipeLightbox | null = null
+  const pswp = import('photoswipe')
+
+  // Initialize PhotoSwipe lightbox with custom configuration
+  function createPhotoSwipe() {
+    lightbox = new PhotoSwipeLightbox({
+      gallery: 'article img',
+      pswpModule: () => pswp,
+      closeSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z"/></svg>',
+      zoomSVG: '<svg xmlns="http://www.w3.org/2000/svg" height="2.4rem" viewBox="0 -960 960 960" width="3.8rem" fill="#A0A09F"><path d="M340-540h-40q-17 0-28.5-11.5T260-580q0-17 11.5-28.5T300-620h40v-40q0-17 11.5-28.5T380-700q17 0 28.5 11.5T420-660v40h40q17 0 28.5 11.5T500-580q0 17-11.5 28.5T460-540h-40v40q0 17-11.5 28.5T380-460q-17 0-28.5-11.5T340-500v-40Zm40 220q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l224 224q11 11 11 28t-11 28q-11 11-28 11t-28-11L532-372q-30 24-69 38t-83 14Zm0-80q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z"/></svg>',
+      wheelToZoom: true,
+      arrowPrev: false,
+      arrowNext: false,
+      imageClickAction: 'close',
+      tapAction: 'close',
+      doubleTapAction: 'zoom',
+    })
+
+    // Add custom filter to handle image data and dimensions
+    lightbox.addFilter('domItemData', (itemData: any, element: Element) => {
+      if (element instanceof HTMLImageElement) {
+        itemData.src = element.src
+        itemData.w = Number(element.naturalWidth || window.innerWidth)
+        itemData.h = Number(element.naturalHeight || window.innerHeight)
+        itemData.msrc = element.src
+      }
+      return itemData
+    })
+
+    lightbox.init()
+  }
+
+  // Cleanup function to destroy lightbox instance
+  function cleanup() {
+    if (lightbox) {
+      lightbox.destroy()
+      lightbox = null
+    }
+  }
+
+  // Initialize PhotoSwipe when DOM is ready
+  document.addEventListener('DOMContentLoaded', () => {
+    createPhotoSwipe()
+  })
+
+  document.addEventListener('astro:before-swap', cleanup)
+  </script>