From adb7fd16afb35c34588dfdeec4da9e1a3c2e19d1 Mon Sep 17 00:00:00 2001 From: Dennis Thiessen Date: Sat, 15 Mar 2025 23:03:53 +0100 Subject: [PATCH] updated to v5 --- .gitea/workflows/workflow.yaml | 7 +- .nvrmc | 1 + gatsby-config.js | 2 +- package.json | 2 +- src/components/Gallery.js | 140 ++++++++++----------------------- src/pages/index.js | 12 +-- 6 files changed, 57 insertions(+), 107 deletions(-) create mode 100644 .nvrmc diff --git a/.gitea/workflows/workflow.yaml b/.gitea/workflows/workflow.yaml index 61e2022..b062c86 100644 --- a/.gitea/workflows/workflow.yaml +++ b/.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: | diff --git a/.nvrmc b/.nvrmc new file mode 100644 index 0000000..0828ab7 --- /dev/null +++ b/.nvrmc @@ -0,0 +1 @@ +v18 \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 5902f35..1a883e5 100644 --- a/gatsby-config.js +++ b/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', diff --git a/package.json b/package.json index 8327aa6..5465d74 100644 --- a/package.json +++ b/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" diff --git a/src/components/Gallery.js b/src/components/Gallery.js index a8184b6..3983152 100644 --- a/src/components/Gallery.js +++ b/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 ( -
- this.openLightbox(i, e)} - > - {obj.caption}/ - - -

{obj.caption}

-

{obj.description}

-
- ); - }); - - return ( -
- {gallery} -
- ); - } - render () { - return ( -
- {this.renderGallery()} + return ( + <> + {isOpen && ( setIsOpen(false)} + index={photoIndex} + slides={images.map(img => ({ + src: img.src, + title: img.caption, + description: img.description + }))} /> + )} +
+ {images.map((obj, i) => ( + + ))}
- ); - } + + ) } -Gallery.displayName = 'Gallery'; -Gallery.propTypes = { - images: PropTypes.array -}; - -export default Gallery; \ No newline at end of file +export default Gallery diff --git a/src/pages/index.js b/src/pages/index.js index 902ba83..00d81a8 100644 --- a/src/pages/index.js +++ b/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);