diff --git a/package-lock.json b/package-lock.json index afe156d4..16c09953 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" }, @@ -20159,6 +20160,7 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz", "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==", + "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.", "engines": { "node": ">=0.4.x" } @@ -20651,6 +20653,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", @@ -24357,6 +24371,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=", + "deprecated": "The querystring API is considered Legacy. new code should use the URLSearchParams API instead.", "engines": { "node": ">=0.4.x" } @@ -28127,7 +28142,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 +30432,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 +31221,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 +31270,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 +31729,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 +33530,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 +34154,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 +34365,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 +34403,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 +34881,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 +36424,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 +37398,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 +37905,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 +38710,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 +39742,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 +41481,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 +41596,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 +41628,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 +42349,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 +46478,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/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..95fde67f --- /dev/null +++ b/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, + }, + }, + ], + }; + \ No newline at end of file diff --git a/studio/schemas/scrollytellingComponent.js b/studio/schemas/scrollytellingComponent.js new file mode 100644 index 00000000..4408b3bc --- /dev/null +++ b/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, + }, + }, + ], + }; + \ No newline at end of file diff --git a/web/src/components/article-layouts/scrollytelling-article.js b/web/src/components/article-layouts/scrollytelling-article.js new file mode 100644 index 00000000..4fc5f709 --- /dev/null +++ b/web/src/components/article-layouts/scrollytelling-article.js @@ -0,0 +1,47 @@ +/** @jsx jsx */ +import { jsx, Grid, Styled, Text } from "theme-ui"; +import { format, distanceInWords, differenceInDays } from "date-fns"; +import React from "react"; +import { buildImageObj } from "../../lib/helpers"; +import { imageUrlFor } from "../../lib/image-url"; +import ArticleBody from "./article-body"; +import ArticleHeader from "./article-header"; +import ArticleSidebar from "./article-sidebar"; +import BlockContent from "../block-content"; +import Container from "../core/container"; + +function ScrollytellingHeader(props) { + const { mainImage } = props; + + return ( + + + {props.mainImage && mainImage.asset && ( + {mainImage.alt} + )} +
+ +
+ + + ); +} + +function ScrollytellingArticle(props) { + return ( +
+ + +
+ ); +} + +export default ScrollytellingArticle; 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