add react spring

.env

@@ -0,0 +1 @@
+GATSBY_PATH_PREFIX=/impresso-datalab

.github/workflows/gatsby.yml

@@ -77,8 +77,9 @@ jobs:
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Gatsby
         env:
-          PREFIX_PATHS: 'true'
-          PATH_PREFIX: '/impresso-datalab'
+          PREFIX_PATHS: "true"
+          PATH_PREFIX: "/impresso-datalab"
+          GATSBY_PATH_PREFIX: "/impresso-datalab"
         run: ${{ steps.detect-package-manager.outputs.manager }} run build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

gatsby-browser.js

@@ -1,42 +1,42 @@
-import React from 'react'
-import Layout from './src/components/Layout'
-import './src/styles/fonts.css'
-import 'bootstrap/dist/css/bootstrap.min.css'
-import './src/styles/style.css'
-import Modals from './src/components/Modals'
-import { AvailableModalsViews, useBrowserStore } from './src/store'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import PrefetchData from './src/components/PrefetchData'
+import React from "react"
+import Layout from "./src/components/Layout"
+import "./src/styles/fonts.css"
+import "bootstrap/dist/css/bootstrap.min.css"
+import "./src/styles/style.css"
+import Modals from "./src/components/Modals"
+import { AvailableModalsViews, useBrowserStore } from "./src/store"
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
+import PrefetchData from "./src/components/PrefetchData"
 
 // Logs when the client route changes
 export function onRouteUpdate({ location, prevLocation }) {
-  console.log('[Layout] render')
-  console.log('[gatsby-browser]@onRouteUpdate new pathname', location)
+  console.log("[Layout] render")
+  console.log("[gatsby-browser]@onRouteUpdate new pathname", location)
   let view = null
   let viewId = null
   // update zustand with search params, if any
   if (location.search) {
     const params = new URLSearchParams(location.search)
-    const paramView = params.get('view')
-    const paramViewId = params.get('viewId')
+    const paramView = params.get("view")
+    const paramViewId = params.get("viewId")
 
     if (AvailableModalsViews.includes(paramView)) {
-      console.log('[gatsby-browser]@onRouteUpdate view:', paramView)
+      console.log("[gatsby-browser]@onRouteUpdate view:", paramView)
       view = String(paramView)
     } else {
       console.log(
-        '[gatsby-browser]@onRouteUpdate view not recognized, close everything:',
+        "[gatsby-browser]@onRouteUpdate view not recognized, close everything:",
         paramView
       )
     }
 
     // test view id against a regex (lowercase letters and numbers, only trailing slash)
     if (paramViewId && /^[a-z0-9]+$/.test(paramViewId)) {
-      console.log('[gatsby-browser]@onRouteUpdate viewId:', paramViewId)
+      console.log("[gatsby-browser]@onRouteUpdate viewId:", paramViewId)
       viewId = String(paramViewId)
     } else {
       console.log(
-        '[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:',
+        "[gatsby-browser]@onRouteUpdate viewId not recognized, close everything:",
         paramViewId
       )
     }
@@ -51,10 +51,17 @@ export function onRouteUpdate({ location, prevLocation }) {
 
 // Create a client
 const queryClient = new QueryClient()
+console.info(
+  "Impresso datalab",
+  "\n - PATH_PREFIX:",
+  process.env.PATH_PREFIX,
+  "\n - GATSBY_PATH_PREFIX:",
+  process.env.GATSBY_PATH_PREFIX
+)
 
 // Wraps every page in a component
 export function wrapRootElement({ element, props }) {
-  console.log('[gatsby-browser]@wrapRootElement')
+  console.log("[gatsby-browser]@wrapRootElement")
   return (
     <QueryClientProvider client={queryClient}>
       <PrefetchData />

gatsby-config.js

@@ -1,14 +1,23 @@
 /**
  * @type {import('gatsby').GatsbyConfig}
  */
+
+require("dotenv").config({
+  path: [`.env.${process.env.NODE_ENV}`, ".env"],
+})
+console.log("gatsby-config")
+console.log("NODE_ENV", process.env.NODE_ENV)
+console.log("PATH_PREFIX", process.env.PATH_PREFIX)
+console.log("GATSBY_PATH_PREFIX", process.env.GATSBY_PATH_PREFIX)
+
 module.exports = {
   siteMetadata: {
     title: `impresso-datalab`,
     siteUrl: `https://impresso-project.ch/datalab`,
   },
-  pathPrefix: process.env.PATH_PREFIX || '/',
+  pathPrefix: process.env.PATH_PREFIX || "/",
   plugins: [
-    'gatsby-plugin-sitemap',
+    "gatsby-plugin-sitemap",
     // {
     //   resolve: "gatsby-source-graphql",
     //   options: {
@@ -25,51 +34,51 @@ module.exports = {
     //   }
     // },
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: "gatsby-plugin-manifest",
       options: {
-        icon: 'src/images/icon.png',
+        icon: "src/images/icon.png",
       },
     },
 
-    'gatsby-plugin-mdx',
+    "gatsby-plugin-mdx",
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'pages',
-        path: './src/pages/',
+        name: "pages",
+        path: "./src/pages/",
       },
-      __key: 'pages',
+      __key: "pages",
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'notebooks',
-        path: './src/notebooks/',
+        name: "notebooks",
+        path: "./src/notebooks/",
       },
-      __key: 'notebooks',
+      __key: "notebooks",
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'collections',
-        path: './src/collections/',
+        name: "collections",
+        path: "./src/collections/",
       },
-      __key: 'collections',
+      __key: "collections",
     },
     {
-      resolve: 'gatsby-source-filesystem',
+      resolve: "gatsby-source-filesystem",
       options: {
-        name: 'authors',
-        path: './src/authors/',
+        name: "authors",
+        path: "./src/authors/",
       },
-      __key: 'authors',
+      __key: "authors",
     },
     {
-      resolve: 'gatsby-plugin-matomo',
+      resolve: "gatsby-plugin-matomo",
       options: {
-        siteId: '7',
-        matomoUrl: 'https://journalofdigitalhistory.matomo.cloud',
-        siteUrl: 'https://impresso-project.ch/datalab',
+        siteId: "7",
+        matomoUrl: "https://journalofdigitalhistory.matomo.cloud",
+        siteUrl: "https://impresso-project.ch/datalab",
       },
     },
   ],

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "@mdx-js/react": "^3.0.0",
+    "@react-spring/web": "^9.7.3",
     "@tanstack/react-query": "^5.25.0",
     "axios": "^1.6.7",
     "bootstrap": "^5.3.2",

src/components/Background.js

@@ -1,12 +1,16 @@
 import React from "react"
 import { useRef, useEffect } from "react"
 import "./Background.css"
+import { a, config, useSpring } from "@react-spring/web"
 
 const Background = () => {
-  const dot = useRef(null)
   const windowWidth = useRef(window.innerWidth)
   const windowHeight = useRef(window.innerHeight)
-  const requestRef = useRef(null)
+  const [{ x, y }, api] = useSpring(() => ({
+    x: window.innerWidth / 2,
+    y: window.window.innerHeight / 2,
+    config: config.molasses,
+  }))
 
   const onResizeHandler = () => {
     windowWidth.current = window.innerWidth
@@ -16,17 +20,16 @@ const Background = () => {
   const mouseMoveEvent = (e) => {
     const x = e.pageX - windowWidth.current / 2
     const y = e.pageY - windowHeight.current / 2
-    // let's translate
-    dot.current.style.transform = `translate(${x}px, ${y}px)`
+    api.start({ x, y })
   }
   useEffect(() => {
     document.addEventListener("mousemove", mouseMoveEvent)
     document.addEventListener("resize", onResizeHandler)
     return () => {
       document.removeEventListener("mousemove", mouseMoveEvent)
       document.removeEventListener("resize", onResizeHandler)
-      cancelAnimationFrame(requestRef.current)
     }
+    // eslint-disable-next-line
   }, [])
 
   return (
@@ -50,10 +53,10 @@ const Background = () => {
         </defs>
       </svg>
       <div className="gradients-container">
-        {/* <div className='g1'></div>
-        <div className='g2'></div>
-        <div className='g3'></div> */}
-        <div className="interactive " ref={dot}></div>
+        {/* <div className="g1"></div>
+        <div className="g2"></div> */}
+        <div className="g3"></div>
+        <a.div className="interactive " style={{ x, y }} />
       </div>
     </div>
   )

src/components/Header.js

@@ -1,15 +1,15 @@
-import React from "react";
+import React from "react"
 import {
   Navbar,
   Container,
   Nav,
   Form,
   InputGroup,
   Button,
-} from "react-bootstrap";
-import { Link } from "gatsby";
-import "./Header.css";
-import LogoImpressoDataLab from "./_svg/LogoImpressoDataLab";
+} from "react-bootstrap"
+import { Link } from "gatsby"
+import "./Header.css"
+import LogoImpressoDataLab from "./_svg/LogoImpressoDataLab"
 
 const Header = () => {
   return (
@@ -30,7 +30,7 @@ const Header = () => {
             </Link>
           </Nav>
           <Nav className="ms-auto">
-            <Form inline>
+            <Form inline="true">
               <InputGroup>
                 <Form.Control
                   size="sm"
@@ -46,7 +46,7 @@ const Header = () => {
         </Container>
       </Navbar>
     </header>
-  );
-};
+  )
+}
 
-export default Header;
+export default Header

src/components/ModalNotebookPreview.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import ModalView from './ModalView'
-import { ModalNotebookPreviewView } from '../store'
-import { Form, Modal } from 'react-bootstrap'
+import React from "react"
+import ModalView from "./ModalView"
+import { ModalNotebookPreviewView } from "../store"
+import { Modal } from "react-bootstrap"
 
 const ModalNotebookPreview = ({ onClose, ...props }) => {
   return (
     <ModalView viewName={ModalNotebookPreviewView} onClose={onClose} {...props}>
       <Modal.Header closeButton>
-        <Modal.Title id='contained-modal-title-vcenter'>
+        <Modal.Title id="contained-modal-title-vcenter">
           Using Grid in Modal
         </Modal.Title>
       </Modal.Header>

src/components/ModalView.js

@@ -1,9 +1,8 @@
-import React from 'react'
-import Button from 'react-bootstrap/Button'
-import Modal from 'react-bootstrap/Modal'
-import { useBrowserStore } from '../store'
+import React from "react"
+import Modal from "react-bootstrap/Modal"
+import { useBrowserStore } from "../store"
 
-const ModalView = ({ viewName = '', onClose, children, ...props }) => {
+const ModalView = ({ viewName = "", onClose, children, ...props }) => {
   const view = useBrowserStore((state) => state.view)
   return (
     <Modal show={view === viewName} onHide={onClose} {...props}>

src/components/NotebookCard.js

@@ -1,13 +1,13 @@
-import React from 'react'
-import { ModalNotebookPreviewView, useDataStore } from '../store'
-import AuthorCard from './AuthorCard'
-import { Button } from 'react-bootstrap'
-import './NotebookCard.css'
-import { navigate } from 'gatsby'
-import Avatar from 'boring-avatars'
-import { ArrowRight } from 'iconoir-react'
+import React from "react"
+import { ModalNotebookPreviewView, useDataStore } from "../store"
+import AuthorCard from "./AuthorCard"
+import { Button } from "react-bootstrap"
+import "./NotebookCard.css"
+import { navigate } from "gatsby"
+import Avatar from "boring-avatars"
+import { ArrowRight } from "iconoir-react"
 
-const AvatarVariants = ['marble', 'beam', 'pixel', 'sunset', 'ring', 'bauhaus']
+// const AvatarVariants = ["marble", "beam", "pixel", "sunset", "ring", "bauhaus"]
 const NotebookCard = ({ name }) => {
   const getNotebookByName = useDataStore((state) => state.getNotebookByName)
   const notebook = getNotebookByName(name)
@@ -16,30 +16,32 @@ const NotebookCard = ({ name }) => {
   }
 
   return (
-    <div className='NotebookCard shadow-sm'>
-      <div className='p-3 d-flex align-items-center'>
+    <div className="NotebookCard shadow-sm">
+      <div className="p-3 d-flex align-items-center">
         <div>
           <Avatar
             size={40}
             name={notebook.name}
-            variant='marble'
+            variant="marble"
             square={false}
           />
         </div>
-        <div className='mx-3'>
-          <h3 onClick={navigateToNotebookPage}>{notebook?.title}</h3>
-          <ol class='NotebookCard__authors'>
+        <div className="mx-3">
+          <h3 className="m-0" onClick={navigateToNotebookPage}>
+            {notebook?.title}
+          </h3>
+          <ol className="NotebookCard__authors">
             {notebook?.authors.map((name) => (
               <li key={name}>
                 <AuthorCard name={name} />
               </li>
             ))}
           </ol>
         </div>
-        <div className='ms-auto'>
+        <div className="ms-auto">
           <Button
-            variant='secondary'
-            className='p-0'
+            variant="secondary"
+            className="p-0"
             style={{ width: 36, height: 36 }}
             onClick={navigateToNotebookPage}
           >