prismic

.gitignore

@@ -1,3 +1,6 @@
 node_modules/
 .cache/
 public
+.DS_Store
+yarn-error.log
+.env*

custom_types/works.json

@@ -0,0 +1,31 @@
+{
+  "Main": {
+    "uid": {
+      "type": "UID",
+      "config": {
+        "label": "slug"
+      }
+    },
+    "title": {
+      "type": "StructuredText",
+      "config": {
+        "single": "heading1,heading2,heading3,heading4,heading5,heading6",
+        "label": "title"
+      }
+    },
+    "cover": {
+      "type": "Image",
+      "config": {
+        "constraint": {},
+        "thumbnails": [],
+        "label": "cover"
+      }
+    },
+    "description": {
+      "type": "Text",
+      "config": {
+        "label": "description"
+      }
+    }
+  }
+}

gatsby-config.js

@@ -4,14 +4,32 @@
 module.exports = {
   siteMetadata: {
     title: `r3f caroussel`,
-    siteUrl: `https://www.yourdomain.tld`
+    siteUrl: `https://www.yourdomain.tld`,
   },
-  plugins: ["gatsby-plugin-emotion", "gatsby-plugin-image", "gatsby-plugin-sitemap", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      "name": "images",
-      "path": "./src/images/"
+  plugins: [
+    "gatsby-plugin-emotion",
+    "gatsby-plugin-image",
+    "gatsby-plugin-sitemap",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    "gatsby-plugin-transition-link",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: "./src/images/",
+      },
+      __key: "images",
     },
-    __key: "images"
-  }]
-};
+    {
+      resolve: "gatsby-source-prismic",
+      accessToken: `${process.env.API_KEY}`,
+      options: {
+        repositoryName: "r3f-caroussel",
+        schemas: {
+          works: require("./custom_types/works.json"),
+        },
+      },
+    },
+  ],
+};

gatsby-node.js

@@ -0,0 +1 @@
+exports.createPages = require("./src/gatsby/node/createPages");

package.json

@@ -24,7 +24,9 @@
     "gatsby-plugin-image": "^3.12.0",
     "gatsby-plugin-sharp": "^5.12.0",
     "gatsby-plugin-sitemap": "^6.12.0",
+    "gatsby-plugin-transition-link": "^1.20.5",
     "gatsby-source-filesystem": "^5.12.0",
+    "gatsby-source-prismic": "^6.0.1",
     "gatsby-transformer-sharp": "^5.12.0",
     "gsap": "^3.12.2",
     "leva": "^0.9.35",

src/gatsby/data/query.js

@@ -0,0 +1,21 @@
+module.exports.data = {
+  works: `{
+        allPrismicWorks(sort: {first_publication_date: DESC}) {
+            edges {
+                node {
+                    uid
+                    data {
+                        cover {
+                            gatsbyImageData
+                            alt
+                        }
+                        title {
+                            text
+                        }
+                        description
+                    }
+                }
+            }
+        }
+    }`,
+};

src/gatsby/node/createPages.js

@@ -0,0 +1,24 @@
+const query = require("../data/query");
+const path = require(`path`);
+
+module.exports = async ({ graphql, actions }) => {
+  const { createPage } = actions;
+
+  // Create a page for each post
+  const worksQuery = await graphql(query.data.works);
+  const works = worksQuery.data.allPrismicWorks.edges;
+  works.forEach((work, i) => {
+    const selected = work.node;
+    const previous = i === works.length - 1 ? null : works[i + 1].node;
+    const next = i === 0 ? null : works[i - 1].node;
+    createPage({
+      path: `/${work.node.uid}/`,
+      component: path.resolve(`./src/templates/work.js`),
+      context: {
+        ...selected,
+        previous,
+        next,
+      },
+    });
+  });
+};

src/pages/index.js

@@ -1,21 +1,45 @@
 import React, { Suspense } from "react";
 import { Canvas } from "@react-three/fiber";
+import { graphql } from "gatsby";
 
 import Carousel from "../three/Carousel";
 import "../style/styles.css";
 
-const IndexPage = () => {
+const IndexPage = ({ data }) => {
+  const works = data.allPrismicWorks.edges;
   return (
     <>
       <Suspense fallback={null}>
         <Canvas>
-          <Carousel />
+          <Carousel works={works} />
         </Canvas>
       </Suspense>
     </>
   );
 };
 
+export const query = graphql`
+  query {
+    allPrismicWorks(sort: { first_publication_date: DESC }) {
+      edges {
+        node {
+          uid
+          data {
+            cover {
+              gatsbyImageData(width: 1800, placeholder: BLURRED)
+              alt
+            }
+            title {
+              text
+            }
+            description
+          }
+        }
+      }
+    }
+  }
+`;
+
 export default IndexPage;
 
 export const Head = () => <title>Home Page</title>;

src/templates/work.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const work = ({ pageContext }) => {
+  const { title, cover, description } = pageContext.data;
+  const { next } = pageContext;
+
+  return (
+    <>
+      <div>{title.text}</div>
+    </>
+  );
+};
+
+export default work;

src/three/Carousel.js

@@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState, useMemo } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
 import { usePrevious } from "react-use";
 import gsap from "gsap";
+
 import CarouselItem from "./CarouselItem";
-import images from "../data/images";
 
 /*------------------------------
 Plane Settings
@@ -25,7 +25,7 @@ gsap.defaults({
 /*------------------------------
 Carousel
 ------------------------------*/
-const Carousel = () => {
+const Carousel = ({ works }) => {
   const [root, setRoot] = useState();
 
   const [activePlane, setActivePlane] = useState(null);
@@ -40,15 +40,15 @@ const Carousel = () => {
   const isDown = useRef(false);
   const speedWheel = 0.02;
   const speedDrag = -0.3;
-  const items = useMemo(() => {
+  const images = useMemo(() => {
     if (root) return root.children;
   }, [root]);
 
   /*--------------------
   Diaplay Items
   --------------------*/
-  const displayItems = (item, index, active) => {
-    gsap.to(item.position, {
+  const displayItems = (image, index, active) => {
+    gsap.to(image.position, {
       x: (index - active) * (planeSettings.width + planeSettings.gap),
       y: 0,
     });
@@ -60,8 +60,8 @@ const Carousel = () => {
   useFrame(() => {
     progress.current = Math.max(0, Math.min(progress.current, 100));
 
-    const active = Math.floor((progress.current / 100) * (items.length - 1));
-    items.forEach((item, index) => displayItems(item, index, active));
+    const active = Math.floor((progress.current / 100) * (images.length - 1));
+    images.forEach((image, index) => displayItems(image, index, active));
   });
 
   /*--------------------
@@ -105,11 +105,11 @@ const Carousel = () => {
   Click
   --------------------*/
   useEffect(() => {
-    if (!items) return;
+    if (!images) return;
     if (activePlane !== null && prevActivePlane === null) {
-      progress.current = (activePlane / (items.length - 1)) * 100; // Calculate the progress.current based on activePlane
+      progress.current = (activePlane / (images.length - 1)) * 100; // Calculate the progress.current based on activePlane
     }
-  }, [activePlane, items, prevActivePlane]);
+  }, [activePlane, images, prevActivePlane]);
 
   /*--------------------
   Render Plane Events
@@ -137,15 +137,17 @@ const Carousel = () => {
   const renderSlider = () => {
     return (
       <group ref={setRoot}>
-        {images.map((item, i) => (
+        {works.map(({ node: work }, i) => (
           <CarouselItem
             width={planeSettings.width}
             height={planeSettings.height}
             setActivePlane={setActivePlane}
             activePlane={activePlane}
-            key={item.image}
-            item={item}
+            key={i}
+            image={work.data.cover.gatsbyImageData}
             index={i}
+            works={works}
+            slug={`/${work.uid}/`}
           />
         ))}
       </group>

src/three/CarouselItem.js

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useThree } from "@react-three/fiber";
+import { navigate } from "gatsby";
+import { getSrc } from "gatsby-plugin-image";
 import gsap from "gsap";
 import Plane from "./Plane";
 
@@ -9,14 +11,16 @@ const CarouselItem = ({
   height,
   setActivePlane,
   activePlane,
-  item,
+  image,
+  slug,
 }) => {
   const groupRef = useRef();
   const [hover, setHover] = useState(false);
   const [isActive, setIsActive] = useState(false);
   const [isCloseActive, setCloseActive] = useState(false);
   const { viewport } = useThree();
   const timeoutID = useRef();
+  const imageSrc = getSrc(image);
 
   useEffect(() => {
     if (activePlane === index) {
@@ -66,14 +70,15 @@ const CarouselItem = ({
       ref={groupRef}
       onClick={() => {
         setActivePlane(index);
+        navigate(slug);
       }}
       onPointerEnter={() => setHover(true)}
       onPointerLeave={() => setHover(false)}
     >
       <Plane
         width={width}
         height={height}
-        texture={item.image}
+        texture={imageSrc}
         active={isActive}
       />