Add photos

ethb3rlin · Aug 31, 2024 · 5007503 · 5007503
1 parent a3d7dc1
commit 5007503
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 18 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,15 +28,15 @@
     "gatsby-transformer-sharp": "^4.18.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-grid-gallery": "^1.0.0",
+    "react-grid-gallery": "^1.0.1",
     "react-helmet": "^6.1.0",
     "react-icons": "^5.2.1",
     "react-image-crop": "^11.0.5",
     "react-modal": "^3.15.1",
     "react-random-reveal": "^2.0.0",
     "react-responsive": "^9.0.0-beta.10",
     "typewriter-effect": "^2.21.0",
-    "yet-another-react-lightbox": "^2.2.2"
+    "yet-another-react-lightbox": "^2.6.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.7",

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
@@ -21,6 +21,10 @@ const Sidebar = ({ className }) => {
         {" "}
         &lt;&lt;<span className="text-berlin-red">M</span>&lt;ANIFESTO
       </a>
+      <a className="my-2" href="/gallery">
+        {" "}
+        &lt;&lt;<span className="text-berlin-red">G</span>&lt;ALLERY
+      </a>
       <a className="my-2" href="/hacker-manual">
         {" "}
         &lt;&lt;<span className="text-berlin-red">H</span>&lt;ACKER MANUAL

diff --git a/src/html.js b/src/html.js
@@ -66,6 +66,9 @@ export default function HTML(props) {
                     case 'b':
                         window.location.href= "https://blog.dod.ngo/";
                         break;
+                    case 'g':
+                        window.location.href= "/gallery";
+                        break;
                     default:
                         // If key doesn't match any case, do nothing
                         break;

diff --git a/src/pages/gallery.jsx b/src/pages/gallery.jsx
@@ -0,0 +1,98 @@
+import Layout from "../components/Layout";
+import React, { useEffect, useState } from "react";
+import { Gallery } from "react-grid-gallery";
+import Lightbox from "yet-another-react-lightbox";
+import "yet-another-react-lightbox/styles.css";
+import Zoom from "yet-another-react-lightbox/plugins/zoom";
+
+///////////////////////
+//// MAIN COMPONENT ///
+///////////////////////
+
+const Photos = () => {
+  const [index, setIndex] = useState(-1);
+  const [images, setImages] = useState(null);
+
+  useEffect(() => {
+    const fetchImages = async () => {
+      try {
+        const response = await fetch(
+          "https://raw.githubusercontent.com/department-of-decentralization/ethberlin-4-photos/main/images.json"
+        );
+        const data = await response.json();
+        setImages(data);
+      } catch (error) {
+        console.error("Error fetching images:", error);
+      }
+    };
+
+    fetchImages();
+  }, []);
+
+  if (!images) {
+    return (
+      <Layout>
+        <div>Fetching image list...</div>
+      </Layout>
+    );
+  }
+
+  const handleClick = (index, item) => setIndex(index);
+
+  const thumbswithSrc = images.map((image) => {
+    return {
+      ...image,
+      src: `https://raw.githubusercontent.com/Department-of-Decentralization/ethberlin-4-photos/main/images/thumbnails/${image.name}`,
+    };
+  });
+
+  const imagesWithSrc = images.map((image) => {
+    return {
+      src: `https://raw.githubusercontent.com/Department-of-Decentralization/ethberlin-4-photos/main/images/${image.name}`,
+    };
+  });
+
+  return (
+    <Layout>
+      <h1 className="my-4 underline text-secondary">(g)allery</h1>
+
+      <div>
+        <Gallery
+          images={thumbswithSrc}
+          onClick={handleClick}
+          enableImageSelection={false}
+          rowHeight={240}
+          margin={4}
+        />
+      </div>
+      <Lightbox
+        slides={imagesWithSrc}
+        open={index >= 0}
+        index={index}
+        close={() => setIndex(-1)}
+        animation={{ fade: 330, swipe: 250 }}
+        carousel={{
+          finite: false,
+          preload: 1,
+          padding: "16px",
+          spacing: "30%",
+          imageFit: "contain",
+        }}
+        plugins={[Zoom]}
+        zoom={{
+          maxZoomPixelRatio: 1,
+          zoomInMultiplier: 2,
+          doubleTapDelay: 300,
+          doubleClickDelay: 500,
+          doubleClickMaxStops: 2,
+          keyboardMoveDistance: 50,
+          wheelZoomDistanceFactor: 150,
+          pinchZoomDistanceFactor: 150,
+          scrollToZoom: false,
+        }}
+      />
+    </Layout>
+  );
+};
+
+export default Photos;
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
@@ -162,8 +162,12 @@ const Home = () => {
             </p>
 
             <p>
-              You can find the projects that emerged during the hackathon 
-              <a href="https://projects.ethberlin.org/submissions/results"> here</a>.
+              You can find the projects that emerged during the hackathon
+              <a href="https://projects.ethberlin.org/submissions/results">
+                {" "}
+                here
+              </a>
+              .
             </p>
 
             <p>
@@ -190,6 +194,14 @@ const Home = () => {
               .
             </p>
 
+            <p>
+              To see the photos from the hackathon, press{" "}
+              <span className="font-ocra text-sm">
+                &lt;&lt;<span className="text-berlin-red">G</span>&lt;
+              </span>
+              .
+            </p>
+
             <p>
               ETHBerlin is not a conference but a hackathon. Every attendee
               played an active role in the event.{" "}