Updating dependencies (#78)

* Update react and next * Update three.js * Update MDX * Fix missing type * Fix type error See: DefinitelyTyped/DefinitelyTyped#59765 * Revert to Google fonts Because of missing arrow characters
mikeheddes · Dec 26, 2022 · cdcf8db · cdcf8db · vercel · Dec 26, 2022
1 parent 758c1e1
commit cdcf8db
Show file tree

Hide file tree

Showing 18 changed files with 1,328 additions and 950 deletions.
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,5 @@
 const withMDX = require("@next/mdx")({
-  extension: /\.(md|mdx)$/,
+  extension: /\.mdx?$/,
   options: {
     // `gatsby-remark-prismjs`,
     // `gatsby-remark-katex`,

diff --git a/package.json b/package.json
@@ -15,39 +15,41 @@
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.1.3",
-    "@mdx-js/loader": "^2.0.0",
-    "@mdx-js/react": "^2.0.0",
-    "@next/mdx": "^12.0.9",
-    "@react-spring/three": "^9.3.2",
-    "@react-spring/web": "^9.3.2",
-    "@react-three/drei": "^8.10.4",
-    "@react-three/fiber": "^7.0.24",
-    "@types/three": "^0.137.0",
+    "@mdx-js/loader": "^2.2.1",
+    "@mdx-js/react": "^2.2.1",
+    "@next/font": "^13.1.1",
+    "@next/mdx": "^13.1.1",
+    "@react-spring/three": "^9.6.1",
+    "@react-spring/web": "^9.6.1",
+    "@react-three/drei": "^9.48.1",
+    "@react-three/fiber": "^8.9.1",
+    "@types/three": "^0.146.0",
     "@use-gesture/react": "^10.2.4",
-    "katex": "^0.15.2",
-    "next": "^12.1.0",
-    "onnxruntime-web": "^1.10.0",
-    "polished": "^4.1.4",
-    "prismjs": "^1.20.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "sharp": "^0.30.5",
-    "styled-components": "^5.3.3",
-    "three": "^0.137.5",
+    "katex": "^0.16.4",
+    "next": "^13.1.1",
+    "onnxruntime-web": "^1.13.1",
+    "polished": "^4.2.2",
+    "prismjs": "^1.29.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sharp": "^0.31.3",
+    "styled-components": "^5.3.6",
+    "three": "^0.148.0",
     "youtube-player": "^5.5.2"
   },
   "devDependencies": {
-    "@types/mdx": "^2.0.1",
-    "@types/node": "^17.0.5",
-    "@types/react": "^17.0.38",
-    "@types/styled-components": "^5.1.19",
-    "eslint": "^8.5.0",
-    "eslint-config-next": "^12.1.0",
-    "eslint-config-prettier": "^8.3.0",
-    "prettier": "^2.5.1",
-    "typescript": "^4.5.4"
+    "@types/mdx": "^2.0.3",
+    "@types/node": "^18.11.17",
+    "@types/react": "^18.0.26",
+    "@types/styled-components": "^5.1.26",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "^13.1.1",
+    "eslint-config-prettier": "^8.5.0",
+    "prettier": "^2.8.1",
+    "typescript": "^4.9.4"
   },
   "resolutions": {
-    "styled-components": "^5"
+    "styled-components": "^5.3.6",
+    "@types/react": "^18.0.26"
   }
 }
diff --git a/src/blog/music/carousel.tsx b/src/blog/music/carousel.tsx
@@ -75,8 +75,8 @@ function Album({ src, alt, priority, title }: AlbumProps) {
           <Image
             src={src}
             alt={alt}
-            layout="fill"
-            objectFit="cover"
+            fill
+            style={{objectFit: "cover"}}
             placeholder="blur"
             priority={priority}
           />

diff --git a/src/blog/post.ts b/src/blog/post.ts
@@ -1,3 +1,5 @@
+import { StaticImageData } from "next/image"
+
 export type PostType = {
   slug: string;
   title: string;

diff --git a/src/blog/posts.ts b/src/blog/posts.ts
@@ -7,4 +7,11 @@ import music from "./music/meta";
 import dcgp from "./dcgp/meta";
 import optimize from "./optimize/meta";
 
-export default [optimize, dcgp, jetFighter, music, gtocX, gridFin] as PostType[];
+export default [
+  optimize,
+  dcgp,
+  jetFighter,
+  music,
+  gtocX,
+  gridFin,
+] as PostType[];
diff --git a/src/blog/settlers-of-the-galaxy/animation.tsx b/src/blog/settlers-of-the-galaxy/animation.tsx
@@ -34,7 +34,7 @@ function easeInOutQuart(t: number): number {
   return t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t;
 }
 
-const Wrapper = styled.a`
+const Wrapper = styled(Link)`
   display: block;
   width: 100%;
   position: relative;
@@ -116,25 +116,25 @@ export function Stars({ dataUrl }: { dataUrl: string }) {
     <points material={material}>
       <bufferGeometry attach="geometry" ref={geometryRef}>
         <bufferAttribute
-          attachObject={["attributes", "position"]}
+          attach="attributes-position"
           count={NUMBER_OF_STARS}
           array={positions}
           itemSize={3}
         />
         <bufferAttribute
-          attachObject={["attributes", "star"]}
+          attach="attributes-star"
           count={NUMBER_OF_STARS}
           array={stars}
           itemSize={4}
         />
         <bufferAttribute
-          attachObject={["attributes", "angularVelocity"]}
+          attach="attributes-angularVelocity"
           count={NUMBER_OF_STARS}
           array={angularVelocities}
           itemSize={1}
         />
         <bufferAttribute
-          attachObject={["attributes", "starIndex"]}
+          attach="attributes-starIndex"
           count={NUMBER_OF_STARS}
           array={starIndices}
           itemSize={1}
@@ -206,22 +206,20 @@ const Button = styled(ButtonComp)`
 
 export default function Animation() {
   return (
-    <Link href="/playground/gtocx-galaxy" passHref>
-      <Wrapper>
-        <Head>
-          <link rel="prefetch" href="/stars.min" />
-        </Head>
-        <Filler>
-          <Canvas style={{ position: "absolute", top: 0, left: 0 }}>
-            <Camera />
-            <Stars dataUrl="/stars.min" />
-          </Canvas>
-        </Filler>
-        <Button>
-          <Hand style={{ marginRight: 15 }} />
-          Click to interact
-        </Button>
-      </Wrapper>
-    </Link>
+    <Wrapper href="/playground/gtocx-galaxy">
+      <Head>
+        <link rel="prefetch" href="/stars.min" />
+      </Head>
+      <Filler>
+        <Canvas style={{ position: "absolute", top: 0, left: 0 }}>
+          <Camera />
+          <Stars dataUrl="/stars.min" />
+        </Canvas>
+      </Filler>
+      <Button>
+        <Hand style={{ marginRight: 15 }} />
+        Click to interact
+      </Button>
+    </Wrapper>
   );
 }
diff --git a/src/blog/spacex-grid-fin-design/animation.tsx b/src/blog/spacex-grid-fin-design/animation.tsx
@@ -12,7 +12,7 @@ import ButtonComp from "../../components/button";
 import Hand from "../../icons/hand/draw/fill";
 import { useGLTF } from "@react-three/drei";
 
-const Wrapper = styled.a`
+const Wrapper = styled(Link)`
   display: block;
   width: 100%;
   position: relative;
@@ -58,29 +58,27 @@ const Button = styled(ButtonComp)`
 
 export default function Animation() {
   return (
-    <Link href="/playground/grid-fin" passHref>
-      <Wrapper>
-        <Filler>
-          <Head>
-            <link rel="prefetch" href="/grid-fin.glb" />
-          </Head>
-          <Canvas style={{ position: "absolute", top: 0, left: 0 }}>
-            <Suspense fallback={null}>
-              <GridFin dataUrl="/grid-fin.glb" />
-            </Suspense>
-            <TrackballControl
-              initialPosition={[2, 0, 0]}
-              autoRotationSpeed={[0, 0.4, 0]}
-              cameraUp={[0, 1, 0]}
-            />
-            <directionalLight intensity={0.1} position={[-4, 0, 0]} />
-          </Canvas>
-        </Filler>
-        <Button>
-          <Hand style={{ marginRight: 15 }} />
-          Click to interact
-        </Button>
-      </Wrapper>
-    </Link>
+    <Wrapper href="/playground/grid-fin">
+      <Filler>
+        <Head>
+          <link rel="prefetch" href="/grid-fin.glb" />
+        </Head>
+        <Canvas style={{ position: "absolute", top: 0, left: 0 }}>
+          <Suspense fallback={null}>
+            <GridFin dataUrl="/grid-fin.glb" />
+          </Suspense>
+          <TrackballControl
+            initialPosition={[2, 0, 0]}
+            autoRotationSpeed={[0, 0.4, 0]}
+            cameraUp={[0, 1, 0]}
+          />
+          <directionalLight intensity={0.1} position={[-4, 0, 0]} />
+        </Canvas>
+      </Filler>
+      <Button>
+        <Hand style={{ marginRight: 15 }} />
+        Click to interact
+      </Button>
+    </Wrapper>
   );
 }
diff --git a/src/components/markdown.tsx b/src/components/markdown.tsx
@@ -124,7 +124,12 @@ function Image(props) {
   return (
     <Figure>
       <ImageSize ratio={props.ratio}>
-        <NextImage alt={props.alt} layout="fill" objectFit="cover" {...props} />
+        <NextImage
+          alt={props.alt}
+          fill
+          style={{ objectFit: "cover" }}
+          {...props}
+        />
       </ImageSize>
       <Caption>{props.alt}</Caption>
     </Figure>

diff --git a/src/components/navigation.tsx b/src/components/navigation.tsx
@@ -15,7 +15,7 @@ const Wrapper = styled.nav`
   }
 `;
 
-const Action = styled.a`
+const Action = styled(Link)`
   ${fluidFont(17, 18)};
   color: var(--primary);
   font-weight: 500;
@@ -41,9 +41,7 @@ const Action = styled.a`
 function Navigation() {
   return (
     <Wrapper>
-      <Link href="/" passHref>
-        <Action>⟵ Go to Homepage</Action>
-      </Link>
+      <Action href="/">⟵ Go to home page</Action>
     </Wrapper>
   );
 }

diff --git a/src/components/playground-layout.tsx b/src/components/playground-layout.tsx
@@ -2,11 +2,8 @@ import { ReactNode } from "react";
 import Link from "next/link";
 import styled from "styled-components";
 
-import Xmark from "../icons/Xmark";
-import Info from "../icons/info";
 import ButtonComp from "./button";
 import { screen } from "../styles/breakpoints";
-import { useRouter } from "next/router";
 
 const Wrapper = styled.div<{ backgroundColor?: string }>`
   display: block;
@@ -59,10 +56,8 @@ export default function PlaygroundLayout({
   return (
     <Wrapper backgroundColor={backgroundColor}>
       {children}
-      <Link href={blogPost} passHref>
-        <Button as="a">
-          <Info />
-        </Button>
+      <Link href={blogPost} passHref legacyBehavior>
+        <Button as="a">⟵ Go to blog post</Button>
       </Link>
     </Wrapper>
   );

diff --git a/src/components/three-canvas.tsx b/src/components/three-canvas.tsx
@@ -1,18 +1,16 @@
-import { ResizeObserver as polyfill } from "@juggle/resize-observer";
+import { ResizeObserver } from "@juggle/resize-observer";
 import {
   Canvas as DefaultCanvas,
   Props as DefaultCanvasProps,
 } from "@react-three/fiber";
 
-const pixelRatio = typeof window === "undefined" ? 1 : window.devicePixelRatio;
-
 function Canvas({ resize = {}, children, ...restProps }: DefaultCanvasProps) {
   return (
     <DefaultCanvas
       // uncomment the next line in order to make a snapshot of the canvas
       // gl={{ preserveDrawingBuffer: true }}
-      dpr={pixelRatio}
-      resize={{ polyfill, scroll: false, ...resize }}
+      // required for pinch-to-zoom animations to work
+      resize={{ polyfill: ResizeObserver, scroll: false, ...resize }}
       {...restProps}
     >
       {children}

diff --git a/src/components/trackball-control.tsx b/src/components/trackball-control.tsx
@@ -214,7 +214,7 @@ function TrackballControl({
         scaleSpeed = (event.deltaY / delta_t) * 0.01;
       } else {
         // used in Safari
-        scaleSpeed = dd / delta_t * -1;
+        scaleSpeed = (dd / delta_t) * -1;
         rotationSpeed
           .copy(cameraDirectionVec3)
           .setLength((da * Math.PI) / 180 / delta_t);

diff --git a/src/home/hero.tsx b/src/home/hero.tsx
@@ -73,9 +73,8 @@ export default function Hero() {
           placeholder="blur"
           priority
           alt="Mike Heddes in the Hills of Orange County"
-          layout="fill"
-          objectPosition="50% 15%"
-          objectFit="cover"
+          fill
+          style={{ objectPosition: "50% 15%", objectFit: "cover" }}
         />
       </ImageSize>
       <Headline />

diff --git a/src/home/metadata.tsx b/src/home/metadata.tsx
@@ -1,6 +1,6 @@
 import Head from "next/head";
 
-import profileImage from "./profile.jpg"
+import profileImage from "./profile.jpg";
 import StructuredData from "../components/structured-data";
 
 const SITE_URL = "https://www.mikeheddes.nl";
@@ -43,7 +43,8 @@ export default function Metadata() {
           url: SITE_URL,
           image: SITE_URL + profileImage.src,
           jobTitle: "Machine Learning Researcher",
-          description: "Computer Science PhD student researching Machine Learning at the University of California, Irvine",
+          description:
+            "Computer Science PhD student researching Machine Learning at the University of California, Irvine",
           nationality: "Dutch",
           affiliation: {
             "@type": "Organization",