updated to v5

.gitea/workflows/workflow.yaml

@@ -19,7 +19,12 @@ jobs:
           node-version: 18
 
       - name: Install Dependencies
-        run: npm install
+        run: |
+          npm install --legacy-peer-deps
+          npm install -g gatsby-cli
+
+      - name: Clean Gatsby cache
+        run: gatsby clean
 
       - name: Build Gatsby Site
         run: |

.nvrmc

@@ -0,0 +1 @@
+v18

gatsby-config.js

@@ -15,7 +15,7 @@ module.exports = {
         background_color: '#663399',
         theme_color: '#663399',
         display: 'minimal-ui',
-        icon: 'src/assets/images/website-icon-dt.png', // This path is relative to the root of the site.
+        icon: 'src/assets/images/website-icon-dt.png',
       },
     },
     'gatsby-plugin-sass',

package.json

@@ -13,7 +13,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-images": "^1.2.0-beta.7"
+    "yet-another-react-lightbox": "^3.15.6"
   },
   "keywords": [
     "gatsby"

src/components/Gallery.js

@@ -1,106 +1,50 @@
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-import Lightbox from 'react-images';
+import React, { useState } from 'react'
+import Lightbox from "yet-another-react-lightbox"
+import "yet-another-react-lightbox/styles.css"
 
-class Gallery extends Component {
-    constructor () {
-        super();
+const Gallery = ({ images }) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const [photoIndex, setPhotoIndex] = useState(0)
 
-        this.state = {
-            lightboxIsOpen: false,
-            currentImage: 0,
-        };
+    const openLightbox = (index) => {
+        setPhotoIndex(index)
+        setIsOpen(true)
+    }
 
-        this.closeLightbox = this.closeLightbox.bind(this);
-        this.gotoNext = this.gotoNext.bind(this);
-        this.gotoPrevious = this.gotoPrevious.bind(this);
-        this.gotoImage = this.gotoImage.bind(this);
-        this.handleClickImage = this.handleClickImage.bind(this);
-        this.openLightbox = this.openLightbox.bind(this);
-    }
-    openLightbox (index, event) {
-        event.preventDefault();
-        this.setState({
-            currentImage: index,
-            lightboxIsOpen: true,
-        });
-    }
-    closeLightbox () {
-        this.setState({
-            currentImage: 0,
-            lightboxIsOpen: false,
-        });
-    }
-    gotoPrevious () {
-        this.setState({
-            currentImage: this.state.currentImage - 1,
-        });
-    }
-    gotoNext () {
-        this.setState({
-            currentImage: this.state.currentImage + 1,
-        });
-    }
-    gotoImage (index) {
-        this.setState({
-            currentImage: index,
-        });
-    }
-    handleClickImage () {
-        if (this.state.currentImage === this.props.images.length - 1) return;
-
-        this.gotoNext();
-    }
-    renderGallery () {
-        const { images } = this.props;
-
-        if (!images) return;
-
-        const gallery = images.map((obj, i) => {
     return (
+        <>
+            {isOpen && (
+                <Lightbox
+                    open={isOpen}
+                    close={() => setIsOpen(false)}
+                    index={photoIndex}
+                    slides={images.map(img => ({
+                        src: img.src,
+                        title: img.caption,
+                        description: img.description
+                    }))}
+                />
+            )}
+            <div className="row">
+                {images.map((obj, i) => (
                     <article className="6u 12u$(xsmall) work-item" key={i}>
                         <a
                             className="image fit thumb"
+                            onClick={(e) => {
+                                e.preventDefault()
+                                openLightbox(i)
+                            }}
                             href={obj.src}
-                        onClick={(e) => this.openLightbox(i, e)}
                         >
-                        <img src={obj.thumbnail} alt={obj.caption}/>
+                            <img src={obj.thumbnail} alt={obj.caption} />
                         </a>
-
                         <h3>{obj.caption}</h3>
                         <p>{obj.description}</p>
                     </article>
-            );
-        });
-
-        return (
-            <div className="row">
-                {gallery}
+                ))}
             </div>
-        );
-    }
-    render () {
-        return (
-            <div>
-                {this.renderGallery()}
-                <Lightbox
-                    currentImage={this.state.currentImage}
-                    images={this.props.images}
-                    isOpen={this.state.lightboxIsOpen}
-                    onClickImage={this.handleClickImage}
-                    onClickNext={this.gotoNext}
-                    onClickPrev={this.gotoPrevious}
-                    onClickThumbnail={this.gotoImage}
-                    onClose={this.closeLightbox}
-                />
-            </div>
-        );
-    }
+        </>
+    )
 }
 
-Gallery.displayName = 'Gallery';
-Gallery.propTypes = {
-    images: PropTypes.array
-};
-
-export default Gallery;
+export default Gallery

src/pages/index.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import { Helmet } from 'react-helmet'
 
 import Layout from '../components/layout'
 // import Lightbox from 'react-images'
@@ -39,11 +39,11 @@ class HomeIndex extends React.Component {
         super();
 
         this.state = {
-            lightboxIsOpen: false,
-            currentImage: 0,
-        };
-	
-	    this.handleSubmit = this.handleSubmit.bind(this);
+            invalid: false,
+            displayErrors: false,
+            res: null
+        }
+        this.handleSubmit = this.handleSubmit.bind(this)
         this.closeLightbox = this.closeLightbox.bind(this);
         this.gotoNext = this.gotoNext.bind(this);
         this.gotoPrevious = this.gotoPrevious.bind(this);