Scrollytelling Implementation

package.json

@@ -47,6 +47,7 @@
     "prettier": "^2.3.0",
     "react": "^16.14.0",
     "react-icons": "^3.11.0",
+    "react-scrollama": "^2.2.16",
     "react-social-icons": "^4.1.0",
     "save": "^2.4.0"
   }

studio/schemas/blockContent.js

@@ -128,5 +128,8 @@ export default {
     {
       type: "iframe",
     },
+    {
+      type: "scrollytellingComponent",
+    },
   ],
 };

studio/schemas/schemas.js

@@ -26,6 +26,8 @@ import preview from "./preview";
 import project from "./project";
 import projectMember from "./projectMember";
 import redirect from "./redirect";
+import scrollytellingBlock from "./scrollytellingBlock";
+import scrollytellingComponent from "./scrollytellingComponent";
 import shortForm from "./shortForm";
 import siteSettings from "./siteSettings";
 import slideshow from "./slideshow";
@@ -63,6 +65,8 @@ export default createSchema({
     project,
     projectMember,
     redirect,
+    scrollytellingBlock,
+    scrollytellingComponent,
     shortForm,
     siteSettings,
     slideshow,

studio/schemas/scrollytellingBlock.js

@@ -0,0 +1,32 @@
+export default {
+    name: "scrollytellingBlock",
+    title: "Scrollytelling Block",
+    type: "object",
+    description: "Scrollytelling Block to be used Scrollytelling Component",
+    preview: {
+      select: {
+        media: 'graphic',
+      },
+    },
+    fields: [
+      {
+        name: "graphic",
+        title: "Graphic",
+        description: "Array of contents blocks and associated images",
+        type: "figure",
+        options: {
+          isHighlighted: true,
+        },
+      },
+      {
+        name: "textContent",
+        title: "Text Content",
+        description: "Array of contents blocks and associated images",
+        type: 'blockContent',
+        options: {
+          isHighlighted: true,
+        },
+      },
+    ],
+  };
+

studio/schemas/scrollytellingComponent.js

@@ -0,0 +1,30 @@
+export default {
+    title: "Scrollytelling Component",
+    name: "scrollytellingComponent",
+    type: "object",
+    description: "Scrollytelling Component to be used inside articles",
+    preview: {
+      select: {
+        blocks: 'scrollyTellingBlocks',
+      },
+      prepare(selection) {
+        const {blocks} = selection;
+        return {
+          subtitle: `There are ${blocks.length} Scrollytelling Blocks`,
+        };
+      },
+    },
+    fields: [
+      {
+        name: "scrollyTellingBlocks",
+        title: "Scrollytelling Blocks",
+        description: "Array of Scrollytelling blocks",
+        type: "array",
+        of: [{type: "scrollytellingBlock"}],
+        options: {
+          isHighlighted: true,
+        },
+      },
+    ],
+  };
+