revert image to embed. disable page scrolling while cursor hovers over embeds

Author: gavination

blog/2023-11-15-koordinates-and-stately-case-study/index.mdx

@@ -40,11 +40,11 @@ The desktop app Koordinates provides also ships with **[Kart](https://github.com
 - **manage** branches for their datasets - creating, merging, and deleting them
 - **roll back** branches to previous commits, preserving changes made over time
 
-In the case of Kart, many of these operations can be long-running and have **several** edge cases, making Stately’s tooling to visualize, understand, and execute logic from stateful diagrams a massive benefit.
+In the case of Kart, many of these operations can be long-running and have several edge cases, making Stately’s tooling to visualize, understand, and execute logic from stateful diagrams a massive benefit.
 
 ## Breaking complex UI’s into manageable components **
 
-In the case of both their products, Koordinates was able to use Stately’s tooling to break their “big” problems down into several, distinct smaller ones. Taylor Lodge, an engineer on the core team, explained that with Stately’s visual editor and simulation tooling, they were able to break their application logic into several small, testable state machines. For example, the UI for Koordinates Cloud has several components, but the logic for loading elements in their list view is represented rather succinctly in this state machine: 
+In the case of both their products, Koordinates was able to use Stately’s tooling to break their “big” problems down into several, distinct smaller ones. Taylor Lodge, an engineer on the core team, explained that with Sta tely’s visual editor and simulation tooling, they were able to break their application logic into several small, testable state machines. For example, the UI for Koordinates Cloud has several components, but the logic for loading elements in their list view is represented rather succinctly in this state machine: 
 
 
 <EmbedMachine

src/components/EmbedMachine/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styles from './styles.module.css';
 import { useColorMode } from '@docusaurus/theme-common';
 
@@ -7,9 +7,23 @@ type Embed = {
   embedURL: string;
 };
 
+
 export default function EmbedMachine({ name, embedURL }: Embed) {
   const { colorMode } = useColorMode();
+
+  // keeps the whole page from scrolling when 
+  const handleMouseEnter = () => {
+    document.body.style.overflow = 'hidden';
+    }
+  const handleMouseLeave = () => { 
+    document.body.style.overflow = 'auto';
+  }
+
   return (
+    <div
+    onMouseEnter={handleMouseEnter}
+    onMouseLeave={handleMouseLeave}
+  >
     <iframe
       loading="lazy"
       src={manageURL(embedURL, {
@@ -22,6 +36,7 @@ export default function EmbedMachine({ name, embedURL }: Embed) {
       </a>
       .
     </iframe>
+    </div>
   );
 }