From 5276282bc1c07a6a3f26c226398594aadc56ada4 Mon Sep 17 00:00:00 2001 From: Daniele Guido Date: Sun, 10 Mar 2024 15:50:47 +0100 Subject: [PATCH] add react spring --- .env | 1 + .github/workflows/gatsby.yml | 5 ++- gatsby-browser.js | 43 +++++++++++-------- gatsby-config.js | 59 +++++++++++++++----------- package.json | 1 + src/components/Background.js | 21 +++++---- src/components/Header.js | 18 ++++---- src/components/ModalNotebookPreview.js | 10 ++--- src/components/ModalView.js | 9 ++-- src/components/NotebookCard.js | 38 +++++++++-------- src/components/PrefetchData.js | 28 ++++++------ src/pages/index.jsx | 20 ++++----- src/styles/fonts.css | 16 +++---- yarn.lock | 39 +++++++++++++++++ 14 files changed, 186 insertions(+), 122 deletions(-) create mode 100644 .env diff --git a/.env b/.env new file mode 100644 index 0000000..2810d83 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +GATSBY_PATH_PREFIX=/impresso-datalab \ No newline at end of file diff --git a/.github/workflows/gatsby.yml b/.github/workflows/gatsby.yml index f078b58..391fefa 100644 --- a/.github/workflows/gatsby.yml +++ b/.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 diff --git a/gatsby-browser.js b/gatsby-browser.js index d4a550f..6daf383 100644 --- a/gatsby-browser.js +++ b/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 ( diff --git a/gatsby-config.js b/gatsby-config.js index f4dae92..03f3a6b 100644 --- a/gatsby-config.js +++ b/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", }, }, ], diff --git a/package.json b/package.json index ffb0ec0..3eb267b 100644 --- a/package.json +++ b/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", diff --git a/src/components/Background.js b/src/components/Background.js index 7568397..1a0ff9b 100644 --- a/src/components/Background.js +++ b/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,8 +20,7 @@ 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) @@ -25,8 +28,8 @@ const Background = () => { return () => { document.removeEventListener("mousemove", mouseMoveEvent) document.removeEventListener("resize", onResizeHandler) - cancelAnimationFrame(requestRef.current) } + // eslint-disable-next-line }, []) return ( @@ -50,10 +53,10 @@ const Background = () => {
- {/*
-
-
*/} -
+ {/*
+
*/} +
+
) diff --git a/src/components/Header.js b/src/components/Header.js index efa7244..775e0cb 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,4 +1,4 @@ -import React from "react"; +import React from "react" import { Navbar, Container, @@ -6,10 +6,10 @@ import { 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 = () => {