feat: factor out remove-react-images for lightgallery (#270)

This PR swaps out **react-images** with
[**lightgallery**](https://www.lightgalleryjs.com/). The former
dependency has a README that says, "Don't use this in a new project.
This package hasn't been properly maintained in a long time and there
are much better options available."

theme/README.md

@@ -45,7 +45,7 @@ Widget code is in the [`./src/components/widgets/`](./src/components/widgets/) d
 
 ###### Instagram
 
-**Instagram** renders your total post count and the last 8 photos posted. It also uses [`react-images`](https://www.npmjs.com/package/react-images) to provide a fullscreen carousel when photo thumbnails are interacted with.
+**Instagram** renders your total post count and a collection of your recent posts, which open in a [lightGallery](https://www.lightgalleryjs.com/) component.
 
 ![Screenshot: Instagram](https://raw.githubusercontent.com/chrisvogt/gatsby-theme-chrisvogt/master/theme/assets/widget-instagram.jpg)
 

theme/gatsby-browser.js

@@ -3,4 +3,9 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 import './src/styles/global.css'
 
+import 'lightgallery/css/lightgallery.css'
+import 'lightgallery/css/lg-thumbnail.css'
+import 'lightgallery/css/lg-zoom.css'
+import 'prismjs/themes/prism-solarizedlight.css'
+
 export { default as wrapRootElement } from './wrapRootElement'

theme/package.json

@@ -98,7 +98,6 @@
     "react": "^18",
     "react-dark-mode-toggle-2": "^2.1.1",
     "react-dom": "^18",
-    "react-images": "^1.2.0-beta.7",
     "react-photo-gallery": "^8.0.0",
     "react-placeholder": "^4.1.0",
     "react-redux": "^9.1.2",

theme/src/components/widgets/instagram/instagram-widget.js

@@ -5,18 +5,19 @@ import { Grid } from '@theme-ui/components'
 import { RectShape } from 'react-placeholder/lib/placeholders'
 import { useCallback, useState, useEffect, useRef } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import LightGallery from 'lightgallery/react'
+import lgAutoplay from 'lightgallery/plugins/autoplay'
 import lgThumbnail from 'lightgallery/plugins/thumbnail'
-import lgZoom from 'lightgallery/plugins/zoom'
 import lgVideo from 'lightgallery/plugins/video'
-import lgAutoplay from 'lightgallery/plugins/autoplay'
+import lgZoom from 'lightgallery/plugins/zoom'
+import LightGallery from 'lightgallery/react'
+import ReactPlaceholder from 'react-placeholder'
+import VanillaTilt from 'vanilla-tilt'
+
 import 'lightgallery/css/lightgallery.css'
 import 'lightgallery/css/lg-thumbnail.css'
 import 'lightgallery/css/lg-zoom.css'
 import 'lightgallery/css/lg-video.css'
 import 'lightgallery/css/lg-autoplay.css'
-import ReactPlaceholder from 'react-placeholder'
-import VanillaTilt from 'vanilla-tilt'
 
 import fetchDataSource from '../../../actions/fetchDataSource'
 import { getInstagramUsername, getInstagramWidgetDataSource } from '../../../selectors/metadata'

theme/src/styles/global.css

@@ -37,11 +37,6 @@ article.c1v0-blog-post img.solid-background {
   padding: 16px;
 }
 
-/* NOTE(cvogt): overrides the default react-photo-gallery footer style */
-.react-images__footer.react-images__footer--isModal {
-  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)) !important;
-}
-
 /* See https://webaim.org/techniques/css/invisiblecontent/ */
 .sr-only {
   position: absolute;

www.chrisvogt.me/components/PhotoGallery.js

@@ -1,40 +1,47 @@
 /** @jsx jsx */
 import { jsx } from 'theme-ui'
-import { useState, useCallback } from 'react'
+import { useRef, useCallback } from 'react'
+
+import 'lightgallery/css/lg-thumbnail.css'
+import 'lightgallery/css/lg-zoom.css'
+import 'lightgallery/css/lightgallery.css'
 import Gallery from 'react-photo-gallery'
-import Carousel, { Modal, ModalGateway } from 'react-images'
+import lgThumbnail from 'lightgallery/plugins/thumbnail'
+import lgZoom from 'lightgallery/plugins/zoom'
+import LightGallery from 'lightgallery/react'
 
 export const PhotoGallery = ({ photos }) => {
-  const [currentImage, setCurrentImage] = useState(0)
-  const [viewerIsOpen, setViewerIsOpen] = useState(false)
+  const lightGalleryRef = useRef(null)
 
   const openLightbox = useCallback((event, { index }) => {
-    setCurrentImage(index)
-    setViewerIsOpen(true)
+    const instance = lightGalleryRef.current
+    if (instance) {
+      instance.openGallery(index)
+    } else {
+      console.error('LightGallery instance is not initialized')
+    }
   }, [])
 
-  const closeLightbox = () => {
-    setCurrentImage(0)
-    setViewerIsOpen(false)
-  }
-
   return (
     <div sx={{ mb: 4 }}>
+      {/* Render photo gallery */}
       <Gallery photos={photos} onClick={openLightbox} />
-      <ModalGateway>
-        {viewerIsOpen ? (
-          <Modal onClose={closeLightbox}>
-            <Carousel
-              currentIndex={currentImage}
-              views={photos.map(x => ({
-                ...x,
-                srcset: x.srcSet,
-                caption: x.title
-              }))}
-            />
-          </Modal>
-        ) : null}
-      </ModalGateway>
+
+      {/* Initialize LightGallery */}
+      <LightGallery
+        onInit={ref => {
+          lightGalleryRef.current = ref.instance
+        }}
+        plugins={[lgThumbnail, lgZoom]}
+        download={false}
+        dynamic
+        dynamicEl={photos.map(photo => ({
+          src: photo.src,
+          thumb: photo.src,
+          subHtml: photo.title || ''
+        }))}
+        speed={1000}
+      />
     </div>
   )
 }