Merge branch 'main' of https://github.com/sul-cidr/mime-hai-seminar-s…

…lides
sul-cidr · Jan 21, 2025 · 671d690 · 671d690
2 parents 4080ca1 + b63ef4b
commit 671d690
Show file tree

Hide file tree

Showing 6 changed files with 592 additions and 0 deletions.
diff --git a/assets/building/mime_arch.png b/assets/building/mime_arch.png
diff --git a/assets/building/platform_diagram.svg b/assets/building/platform_diagram.svg
diff --git a/assets/mime-hai-seminar-demo-video.mp4 b/assets/mime-hai-seminar-demo-video.mp4
diff --git a/index.html b/index.html
@@ -45,9 +45,34 @@
           32: (evt) => {
             const currentSlide = Reveal.getCurrentSlide();
             const currentVideo = currentSlide.getElementsByTagName("video")[0];
+            const currentSpotlight = currentSlide.querySelector(".spotlight");
             if (currentVideo) {
               if (currentVideo.paused == true) currentVideo.play();
               else currentVideo.pause();
+            } else if (currentSpotlight) {
+              const spotlightData = JSON.parse(
+                currentSpotlight.querySelector(".spotlight-data").textContent,
+              );
+              const spotlightMask = currentSpotlight.querySelector(
+                "#spotlight-mask rect:last-child",
+              );
+              const nextWindowId =
+                +spotlightMask.dataset.splotlightIdx +
+                  (evt.shiftKey ? -1 : 1) || 0;
+
+              if (nextWindowId >= 0 && nextWindowId < spotlightData.length) {
+                Object.assign(spotlightMask.style, spotlightData[nextWindowId]);
+                spotlightMask.dataset.splotlightIdx = nextWindowId;
+              } else if (
+                nextWindowId === -1 ||
+                nextWindowId === spotlightData.length
+              ) {
+                spotlightMask.style = {};
+                spotlightMask.dataset.splotlightIdx = nextWindowId;
+              } else {
+                Reveal.next();
+                spotlightMask.dataset.splotlightIdx = null;
+              }
             } else {
               Reveal.next();
             }

diff --git a/local.css b/local.css
@@ -130,3 +130,28 @@
   visibility: visible;
   transform: translate(0, 0);
 }
+
+.reveal p:has([alt="Platform Diagram"]) {
+  display: grid;
+  grid-template-columns: 1fr;
+  background-color: var(--box-color);
+  border-radius: 8px;
+  outline: 2px solid var(--box-color);
+  outline-offset: 4px;
+  padding: 0.5em 0.75em;
+
+  img,
+  svg {
+    grid-row-start: 1;
+    grid-column-start: 1;
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  rect {
+    transition: all ease 0.5s;
+  }
+}
diff --git a/slides.md b/slides.md
@@ -157,6 +157,37 @@ Sun, Jennifer J, Jiaping Zhao, Liang-Chieh Chen, Florian Schroff, Hartwig Adam a
 ---
 
 
+## The MIME Platform
+
+<section>
+<div>
+
+![Platform Diagram](assets/building/platform_diagram.svg)
+<svg class="spotlight" viewBox="0 0 1080 300" preserveAspectRatio="none">
+  <script type="application/json" class="spotlight-data">
+  [
+    {"x":"17px","y":"28px","height":"215px","width":"245px"},
+    {"x":"295px","y":"8px","height":"143px","width":"459px"},
+    {"x":"351px","y":"155px","height":"125px","width":"215px"},
+    {"x":"629px","y":"155px","height":"125px","width":"150px"},
+    {"x":"844px","y":"131px","height":"168px","width":"235px"},
+    {"x":"772px","y":"18px","height":"92px","width":"295px"}
+  ]
+  </script>
+  <defs>
+    <mask id="spotlight-mask">
+      <rect width="1080" height="300" fill="white" opacity=".6"/>
+      <rect x="0" y="0" width="1080" height="300" fill="black"/>
+    </mask>
+  </defs>
+  <rect width="1080" height="300" fill="#000" mask="url(#spotlight-mask)"/>
+</svg>
+
+</div>
+
+---
+
+
 ## Platform Demonstration
 
 <video controls muted src="assets/mime-hai-seminar-demo-video.mp4"></video>