diff --git a/package-lock.json b/package-lock.json index c50b17e76..3b0fd2272 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25,6 +25,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-github-btn": "^1.4.0", + "react-image-gallery": "^1.2.11", "react-player": "^2.12.0", "sass": "^1.57.1" }, @@ -12271,6 +12272,14 @@ "react-dom": "^16.6.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-image-gallery": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/react-image-gallery/-/react-image-gallery-1.3.0.tgz", + "integrity": "sha512-lKnPaOzxqSdujPFyl+CkVw0j1aYoNCHk61cvr1h7aahf5aWqmPcR9YhUB4cYrt5Tn5KHDaPUzYm5/+cX9WxzaA==", + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 883d8cac7..fe975d730 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-github-btn": "^1.4.0", + "react-image-gallery": "^1.2.11", "react-player": "^2.12.0", "sass": "^1.57.1" }, diff --git a/src/components/slides/slides.js b/src/components/slides/slides.js new file mode 100644 index 000000000..6312cc9da --- /dev/null +++ b/src/components/slides/slides.js @@ -0,0 +1,39 @@ +import React from "react"; +import styles from "@site/src/components/slides/slides.module.css"; +import ImageGallery from "react-image-gallery"; +import "react-image-gallery/styles/css/image-gallery.css" + +// https://github.com/xiaolin/react-image-gallery +// https://stackoverflow.com/questions/3746725/how-to-create-an-array-containing-1-n +const images = Array.from({length: 22}, (_, i) => { + let ix = i; // starting at 0 intentionally + return { + original: "/img/slides/introduction-to-toolset-" + ix + ".svg", + thumbnail: "/img/slides/introduction-to-toolset-" + ix + ".svg", + originalAlt: "Introduction to Toolset slide " + ix, + originalTitle: "Introduction to Toolset slide " + ix, + thumbnailAlt: "Introduction to Toolset slide " + ix, + thumbnailTitle: "Introduction to Toolset slide " + ix, + loading: "lazy" + } + } +); + +export default function Slides() { + return ( +
+
+
+ +
+
+
+ ); +} diff --git a/src/components/slides/slides.module.css b/src/components/slides/slides.module.css new file mode 100644 index 000000000..df51370be --- /dev/null +++ b/src/components/slides/slides.module.css @@ -0,0 +1,11 @@ +/** + * CSS files with the .module.css suffix will be treated as CSS modules + * and scoped locally. + */ + +.slidesContainer { + display: flex; + align-items: center; + padding: 0; + width: 100%; +} diff --git a/static/img/slides/introduction-to-toolset-0.svg b/static/img/slides/introduction-to-toolset-0.svg new file mode 100644 index 000000000..7f9add22d --- /dev/null +++ b/static/img/slides/introduction-to-toolset-0.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-1.svg b/static/img/slides/introduction-to-toolset-1.svg new file mode 100644 index 000000000..29e18083a --- /dev/null +++ b/static/img/slides/introduction-to-toolset-1.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-10.svg b/static/img/slides/introduction-to-toolset-10.svg new file mode 100644 index 000000000..8baf0d348 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-10.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-11.svg b/static/img/slides/introduction-to-toolset-11.svg new file mode 100644 index 000000000..49a89d65e --- /dev/null +++ b/static/img/slides/introduction-to-toolset-11.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-12.svg b/static/img/slides/introduction-to-toolset-12.svg new file mode 100644 index 000000000..6f851ccf3 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-12.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-13.svg b/static/img/slides/introduction-to-toolset-13.svg new file mode 100644 index 000000000..9dc7302ce --- /dev/null +++ b/static/img/slides/introduction-to-toolset-13.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-14.svg b/static/img/slides/introduction-to-toolset-14.svg new file mode 100644 index 000000000..d4ffcc2c9 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-14.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-15.svg b/static/img/slides/introduction-to-toolset-15.svg new file mode 100644 index 000000000..f46121e7f --- /dev/null +++ b/static/img/slides/introduction-to-toolset-15.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-16.svg b/static/img/slides/introduction-to-toolset-16.svg new file mode 100644 index 000000000..dbdd88775 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-16.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-17.svg b/static/img/slides/introduction-to-toolset-17.svg new file mode 100644 index 000000000..22f489053 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-17.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-18.svg b/static/img/slides/introduction-to-toolset-18.svg new file mode 100644 index 000000000..9403895f3 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-18.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-19.svg b/static/img/slides/introduction-to-toolset-19.svg new file mode 100644 index 000000000..af9e41b6b --- /dev/null +++ b/static/img/slides/introduction-to-toolset-19.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-2.svg b/static/img/slides/introduction-to-toolset-2.svg new file mode 100644 index 000000000..8940375af --- /dev/null +++ b/static/img/slides/introduction-to-toolset-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-20.svg b/static/img/slides/introduction-to-toolset-20.svg new file mode 100644 index 000000000..e088a225f --- /dev/null +++ b/static/img/slides/introduction-to-toolset-20.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-21.svg b/static/img/slides/introduction-to-toolset-21.svg new file mode 100644 index 000000000..a0504d470 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-21.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-3.svg b/static/img/slides/introduction-to-toolset-3.svg new file mode 100644 index 000000000..60ab28bd5 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-3.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-4.svg b/static/img/slides/introduction-to-toolset-4.svg new file mode 100644 index 000000000..659929e48 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-4.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-5.svg b/static/img/slides/introduction-to-toolset-5.svg new file mode 100644 index 000000000..a7e468f03 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-5.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-6.svg b/static/img/slides/introduction-to-toolset-6.svg new file mode 100644 index 000000000..2f4af5891 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-6.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-7.svg b/static/img/slides/introduction-to-toolset-7.svg new file mode 100644 index 000000000..fd29deee0 --- /dev/null +++ b/static/img/slides/introduction-to-toolset-7.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-8.svg b/static/img/slides/introduction-to-toolset-8.svg new file mode 100644 index 000000000..1dd6896cc --- /dev/null +++ b/static/img/slides/introduction-to-toolset-8.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/img/slides/introduction-to-toolset-9.svg b/static/img/slides/introduction-to-toolset-9.svg new file mode 100644 index 000000000..1faac9dfe --- /dev/null +++ b/static/img/slides/introduction-to-toolset-9.svg @@ -0,0 +1 @@ + \ No newline at end of file