From e69915b55da077171d012e0ceef07cc4a800ab85 Mon Sep 17 00:00:00 2001 From: Kev-Y-Huang Date: Mon, 16 Aug 2021 22:14:28 -0500 Subject: [PATCH 1/5] Adding scrollytelling components to sanity schema --- studio/schemas/blockContent.js | 3 +++ studio/schemas/schemas.js | 4 ++++ studio/schemas/scrollytellingBlock.js | 27 +++++++++++++++++++++++ studio/schemas/scrollytellingComponent.js | 19 ++++++++++++++++ 4 files changed, 53 insertions(+) create mode 100644 studio/schemas/scrollytellingBlock.js create mode 100644 studio/schemas/scrollytellingComponent.js diff --git a/studio/schemas/blockContent.js b/studio/schemas/blockContent.js index adfc094a..2cb9bc90 100644 --- a/studio/schemas/blockContent.js +++ b/studio/schemas/blockContent.js @@ -128,5 +128,8 @@ export default { { type: "iframe", }, + { + type: "scrollytellingComponent", + }, ], }; diff --git a/studio/schemas/schemas.js b/studio/schemas/schemas.js index 1f32e773..b987f065 100644 --- a/studio/schemas/schemas.js +++ b/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, diff --git a/studio/schemas/scrollytellingBlock.js b/studio/schemas/scrollytellingBlock.js new file mode 100644 index 00000000..6d0b68eb --- /dev/null +++ b/studio/schemas/scrollytellingBlock.js @@ -0,0 +1,27 @@ +export default { + name: "scrollytellingBlock", + title: "Scrollytelling Block", + type: "object", + description: "Scrollytelling Block to be used Scrollytelling Component", + 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, + }, + }, + ], + }; + \ No newline at end of file diff --git a/studio/schemas/scrollytellingComponent.js b/studio/schemas/scrollytellingComponent.js new file mode 100644 index 00000000..a577df76 --- /dev/null +++ b/studio/schemas/scrollytellingComponent.js @@ -0,0 +1,19 @@ +export default { + title: "Scrollytelling Component", + name: "scrollytellingComponent", + type: "object", + description: "Scrollytelling Component to be used inside articles", + fields: [ + { + name: "scrollyTellingBlocks", + title: "Scrollytelling Blocks", + description: "Array of Scrollytelling blocks", + type: "array", + of: [{type: "scrollytellingBlock"}], + options: { + isHighlighted: true, + }, + }, + ], + }; + \ No newline at end of file From 798661439c90e132b53771651da92ac7632e003f Mon Sep 17 00:00:00 2001 From: Kevin Huang Date: Sat, 4 Sep 2021 18:00:51 -0400 Subject: [PATCH 2/5] Creating scrollytelling react components --- package-lock.json | 94 ++- package.json | 1 + studio/schemas/scrollytellingBlock.js | 5 + studio/schemas/scrollytellingComponent.js | 11 + web/src/components/block-content/index.js | 4 + .../block-content/scrollytelling-component.js | 54 ++ yarn.lock | 638 ++++++++++-------- 7 files changed, 484 insertions(+), 323 deletions(-) create mode 100644 web/src/components/block-content/scrollytelling-component.js diff --git a/package-lock.json b/package-lock.json index afe156d4..ad7e88f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -29,6 +29,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" }, @@ -20651,6 +20652,18 @@ "node": ">=0.10.0" } }, + "node_modules/react-scrollama": { + "version": "2.2.16", + "resolved": "https://registry.npmjs.org/react-scrollama/-/react-scrollama-2.2.16.tgz", + "integrity": "sha512-rkd05GPuzqFPypRyxI5wUnNilzqybDTODGCoY7UKQ7sl4mpjzREeQ6BT2Hvq4r4DSQPB7aix8r4ibWaZAXVG4g==", + "engines": { + "node": ">=8", + "npm": ">=5" + }, + "peerDependencies": { + "react": "^16.0.0" + } + }, "node_modules/react-social-icons": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/react-social-icons/-/react-social-icons-4.1.0.tgz", @@ -28127,7 +28140,8 @@ "ws": { "version": "7.4.5", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.5.tgz", - "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==" + "integrity": "sha512-xzyu3hFvomRfXKH8vOFMU3OguG6oOvhXMo3xsGy3xWExqaM2dxBbVxuD99O7m3ZUFMvvscsZDqxfgMaRr/Nr1g==", + "requires": {} } } }, @@ -30416,7 +30430,8 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/@octokit/plugin-request-log/-/plugin-request-log-1.0.4.tgz", "integrity": "sha512-mLUsMkgP7K/cnFEw07kWqXGF5LKrOkD+lhCrKvPHXWDywAwuDUeDwWBpc69XK3pNX0uKiVt8g5z96PJ6z9xCFA==", - "dev": true + "dev": true, + "requires": {} }, "@octokit/plugin-rest-endpoint-methods": { "version": "2.4.0", @@ -31204,7 +31219,8 @@ "acorn-jsx": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz", - "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==" + "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==", + "requires": {} }, "address": { "version": "1.1.2", @@ -31252,12 +31268,14 @@ "ajv-errors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/ajv-errors/-/ajv-errors-1.0.1.tgz", - "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==" + "integrity": "sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==", + "requires": {} }, "ajv-keywords": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz", - "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==" + "integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==", + "requires": {} }, "alphanum-sort": { "version": "1.0.2", @@ -31709,7 +31727,8 @@ "babel-plugin-remove-graphql-queries": { "version": "3.8.0", "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.8.0.tgz", - "integrity": "sha512-ArP55oowkMmMXxz1Q7OAsPUSt09gwRDzRtOi5cdrhhNsN7z4XOmy0n+ImYSyNxId0NL7wG2g2KT8wRdgmZ95Ig==" + "integrity": "sha512-ArP55oowkMmMXxz1Q7OAsPUSt09gwRDzRtOi5cdrhhNsN7z4XOmy0n+ImYSyNxId0NL7wG2g2KT8wRdgmZ95Ig==", + "requires": {} }, "babel-plugin-syntax-jsx": { "version": "6.18.0", @@ -33509,7 +33528,8 @@ "cssnano-utils": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/cssnano-utils/-/cssnano-utils-2.0.1.tgz", - "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==" + "integrity": "sha512-i8vLRZTnEH9ubIyfdZCAdIdgnHAUeQeByEeQ2I7oTilvP9oHO6RScpeq3GsFUVqeB8uZgOQ9pw8utofNn32hhQ==", + "requires": {} }, "csso": { "version": "4.2.0", @@ -34132,7 +34152,8 @@ "disqus-react": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/disqus-react/-/disqus-react-1.1.1.tgz", - "integrity": "sha512-Ob6/3l3WQb682RLplStVZsvRbGnD2DdppmwmHZ3PO7JNyLZfdldKGXnotm0ZhdTCX6DM8oE4Bpr08cSymBIdzg==" + "integrity": "sha512-Ob6/3l3WQb682RLplStVZsvRbGnD2DdppmwmHZ3PO7JNyLZfdldKGXnotm0ZhdTCX6DM8oE4Bpr08cSymBIdzg==", + "requires": {} }, "dns-equal": { "version": "1.0.0", @@ -34342,7 +34363,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -34379,7 +34401,8 @@ "ws": { "version": "7.4.6", "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz", - "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==" + "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A==", + "requires": {} } } }, @@ -34856,7 +34879,8 @@ "eslint-plugin-react-hooks": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.2.0.tgz", - "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==" + "integrity": "sha512-623WEiZJqxR7VdxFCKLI6d6LLpwJkGPYKODnkH3D7WpOG5KM8yWueBd8TLsNAetEJNF5iJmolaAKO3F8yzyVBQ==", + "requires": {} }, "eslint-scope": { "version": "5.1.1", @@ -36398,7 +36422,8 @@ "gatsby-plugin-env-variables": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/gatsby-plugin-env-variables/-/gatsby-plugin-env-variables-2.1.0.tgz", - "integrity": "sha512-TNApeosvOcDxOoxZuzJ3rK4rbR2Fvzvweszn22U+z7bVtZ09G8/MtZg14l3HPXQBwqWjsWJH+PrRP+Z+7W7N/A==" + "integrity": "sha512-TNApeosvOcDxOoxZuzJ3rK4rbR2Fvzvweszn22U+z7bVtZ09G8/MtZg14l3HPXQBwqWjsWJH+PrRP+Z+7W7N/A==", + "requires": {} }, "gatsby-plugin-page-creator": { "version": "3.8.0", @@ -37371,12 +37396,14 @@ "graphql-type-json": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/graphql-type-json/-/graphql-type-json-0.3.2.tgz", - "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==" + "integrity": "sha512-J+vjof74oMlCWXSvt0DOf2APEdZOCdubEvGDUAlqH//VBYcOYsGgRW7Xzorr44LvkjiuvecWc8fChxuZZbChtg==", + "requires": {} }, "graphql-ws": { "version": "4.9.0", "resolved": "https://registry.npmjs.org/graphql-ws/-/graphql-ws-4.9.0.tgz", - "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==" + "integrity": "sha512-sHkK9+lUm20/BGawNEWNtVAeJzhZeBg21VmvmLoT5NdGVeZWv5PdIhkcayQIAgjSyyQ17WMKmbDijIPG2On+Ag==", + "requires": {} }, "gzip-size": { "version": "5.1.1", @@ -37876,7 +37903,8 @@ "icss-utils": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz", - "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==" + "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==", + "requires": {} }, "ieee754": { "version": "1.2.1", @@ -38680,7 +38708,8 @@ "isomorphic-ws": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/isomorphic-ws/-/isomorphic-ws-4.0.1.tgz", - "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==" + "integrity": "sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==", + "requires": {} }, "isstream": { "version": "0.1.2", @@ -39711,7 +39740,8 @@ "meros": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/meros/-/meros-1.1.4.tgz", - "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==" + "integrity": "sha512-E9ZXfK9iQfG9s73ars9qvvvbSIkJZF5yOo9j4tcwM5tN8mUKfj/EKN5PzOr3ZH0y5wL7dLAHw3RVEfpQV9Q7VQ==", + "requires": {} }, "methods": { "version": "1.1.2", @@ -41449,27 +41479,32 @@ "postcss-discard-comments": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-5.0.1.tgz", - "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==" + "integrity": "sha512-lgZBPTDvWrbAYY1v5GYEv8fEO/WhKOu/hmZqmCYfrpD6eyDWWzAOsl2rF29lpvziKO02Gc5GJQtlpkTmakwOWg==", + "requires": {} }, "postcss-discard-duplicates": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-duplicates/-/postcss-discard-duplicates-5.0.1.tgz", - "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==" + "integrity": "sha512-svx747PWHKOGpAXXQkCc4k/DsWo+6bc5LsVrAsw+OU+Ibi7klFZCyX54gjYzX4TH+f2uzXjRviLARxkMurA2bA==", + "requires": {} }, "postcss-discard-empty": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-empty/-/postcss-discard-empty-5.0.1.tgz", - "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==" + "integrity": "sha512-vfU8CxAQ6YpMxV2SvMcMIyF2LX1ZzWpy0lqHDsOdaKKLQVQGVP1pzhrI9JlsO65s66uQTfkQBKBD/A5gp9STFw==", + "requires": {} }, "postcss-discard-overridden": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-discard-overridden/-/postcss-discard-overridden-5.0.1.tgz", - "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==" + "integrity": "sha512-Y28H7y93L2BpJhrdUR2SR2fnSsT+3TVx1NmVQLbcnZWwIUpJ7mfcTC6Za9M2PG6w8j7UQRfzxqn8jU2VwFxo3Q==", + "requires": {} }, "postcss-flexbugs-fixes": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-5.0.2.tgz", - "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==" + "integrity": "sha512-18f9voByak7bTktR2QgDveglpn9DTbBWPUzSOe9g0N4WR/2eSt6Vrcbf0hmspvMI6YWGywz6B9f7jzpFNJJgnQ==", + "requires": {} }, "postcss-loader": { "version": "5.3.0", @@ -41559,7 +41594,8 @@ "postcss-modules-extract-imports": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz", - "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==" + "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==", + "requires": {} }, "postcss-modules-local-by-default": { "version": "4.0.0", @@ -41590,7 +41626,8 @@ "postcss-normalize-charset": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-5.0.1.tgz", - "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==" + "integrity": "sha512-6J40l6LNYnBdPSk+BHZ8SF+HAkS4q2twe5jnocgd+xWpz/mx/5Sa32m3W1AA8uE8XaXN+eg8trIlfu8V9x61eg==", + "requires": {} }, "postcss-normalize-display-values": { "version": "5.0.1", @@ -42310,6 +42347,12 @@ "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz", "integrity": "sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ==" }, + "react-scrollama": { + "version": "2.2.16", + "resolved": "https://registry.npmjs.org/react-scrollama/-/react-scrollama-2.2.16.tgz", + "integrity": "sha512-rkd05GPuzqFPypRyxI5wUnNilzqybDTODGCoY7UKQ7sl4mpjzREeQ6BT2Hvq4r4DSQPB7aix8r4ibWaZAXVG4g==", + "requires": {} + }, "react-social-icons": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/react-social-icons/-/react-social-icons-4.1.0.tgz", @@ -46433,7 +46476,8 @@ "ws": { "version": "7.5.0", "resolved": "https://registry.npmjs.org/ws/-/ws-7.5.0.tgz", - "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==" + "integrity": "sha512-6ezXvzOZupqKj4jUqbQ9tXuJNo+BR2gU8fFRk3XCP3e0G6WT414u5ELe6Y0vtp7kmSJ3F7YWObSNr1ESsgi4vw==", + "requires": {} }, "xdg-basedir": { "version": "4.0.0", diff --git a/package.json b/package.json index e735a135..b1e0241f 100644 --- a/package.json +++ b/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" } diff --git a/studio/schemas/scrollytellingBlock.js b/studio/schemas/scrollytellingBlock.js index 6d0b68eb..95fde67f 100644 --- a/studio/schemas/scrollytellingBlock.js +++ b/studio/schemas/scrollytellingBlock.js @@ -3,6 +3,11 @@ export default { title: "Scrollytelling Block", type: "object", description: "Scrollytelling Block to be used Scrollytelling Component", + preview: { + select: { + media: 'graphic', + }, + }, fields: [ { name: "graphic", diff --git a/studio/schemas/scrollytellingComponent.js b/studio/schemas/scrollytellingComponent.js index a577df76..4408b3bc 100644 --- a/studio/schemas/scrollytellingComponent.js +++ b/studio/schemas/scrollytellingComponent.js @@ -3,6 +3,17 @@ export default { 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", diff --git a/web/src/components/block-content/index.js b/web/src/components/block-content/index.js index c5b8446f..5a0e2d19 100644 --- a/web/src/components/block-content/index.js +++ b/web/src/components/block-content/index.js @@ -7,6 +7,7 @@ import EmbeddedComponent from "./embedded-component"; import Slideshow from "./slideshow"; import Preview from "./preview"; import PlotlyInteractive from "./plotly-interactive"; +import ScrollytellingComponent from "./scrollytelling-component"; import IFrame from "./iframe"; import { resolveAttachmentLink, resolveInternalLink } from "../../lib/helpers"; @@ -63,6 +64,9 @@ const serializers = { iframe(props) { return