Introduction to Toolset Slides (#596)

* adding introduction to toolset slides * Added package * Added package * formatting slides
cloudposse · Sep 8, 2023 · c797b2c · c797b2c
1 parent 6351542
commit c797b2c
Show file tree

Hide file tree

Showing 26 changed files with 82 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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
@@ -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 (
+        <main>
+            <section className={styles.slidesContainer}>
+                <div className="container">
+                    <ImageGallery items={images}
+                                  thumbnailPosition={"bottom"}
+                                  showBullets={false}
+                                  showNav={true}
+                                  showIndex={true}
+                                  slideInterval={4000}
+                                  lazyLoad={true}
+                    />
+                </div>
+            </section>
+        </main>
+    );
+}
diff --git a/src/components/slides/slides.module.css 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
diff --git a/static/img/slides/introduction-to-toolset-1.svg b/static/img/slides/introduction-to-toolset-1.svg
diff --git a/static/img/slides/introduction-to-toolset-10.svg b/static/img/slides/introduction-to-toolset-10.svg
diff --git a/static/img/slides/introduction-to-toolset-11.svg b/static/img/slides/introduction-to-toolset-11.svg
diff --git a/static/img/slides/introduction-to-toolset-12.svg b/static/img/slides/introduction-to-toolset-12.svg
diff --git a/static/img/slides/introduction-to-toolset-13.svg b/static/img/slides/introduction-to-toolset-13.svg
diff --git a/static/img/slides/introduction-to-toolset-14.svg b/static/img/slides/introduction-to-toolset-14.svg
diff --git a/static/img/slides/introduction-to-toolset-15.svg b/static/img/slides/introduction-to-toolset-15.svg
diff --git a/static/img/slides/introduction-to-toolset-16.svg b/static/img/slides/introduction-to-toolset-16.svg
diff --git a/static/img/slides/introduction-to-toolset-17.svg b/static/img/slides/introduction-to-toolset-17.svg
diff --git a/static/img/slides/introduction-to-toolset-18.svg b/static/img/slides/introduction-to-toolset-18.svg
diff --git a/static/img/slides/introduction-to-toolset-19.svg b/static/img/slides/introduction-to-toolset-19.svg
diff --git a/static/img/slides/introduction-to-toolset-2.svg b/static/img/slides/introduction-to-toolset-2.svg
diff --git a/static/img/slides/introduction-to-toolset-20.svg b/static/img/slides/introduction-to-toolset-20.svg
diff --git a/static/img/slides/introduction-to-toolset-21.svg b/static/img/slides/introduction-to-toolset-21.svg
diff --git a/static/img/slides/introduction-to-toolset-3.svg b/static/img/slides/introduction-to-toolset-3.svg
diff --git a/static/img/slides/introduction-to-toolset-4.svg b/static/img/slides/introduction-to-toolset-4.svg
diff --git a/static/img/slides/introduction-to-toolset-5.svg b/static/img/slides/introduction-to-toolset-5.svg
diff --git a/static/img/slides/introduction-to-toolset-6.svg b/static/img/slides/introduction-to-toolset-6.svg
diff --git a/static/img/slides/introduction-to-toolset-7.svg b/static/img/slides/introduction-to-toolset-7.svg
diff --git a/static/img/slides/introduction-to-toolset-8.svg b/static/img/slides/introduction-to-toolset-8.svg
diff --git a/static/img/slides/introduction-to-toolset-9.svg b/static/img/slides/introduction-to-toolset-9.svg