Feature/add memorygraph support

src/components/InteractivePython/index.js

@@ -6,8 +6,9 @@ import styles from './styles.module.css';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 // Import Docusaurus's color mode hook
 import { useColorMode } from '@docusaurus/theme-common';
+import MemoryGraphButton from '@site/src/components/MemoryGraphButton';
 
-export default function InteractivePython({ children }) {
+export default function InteractivePython({ children, showMemoryGraph = false }) {
   const { siteConfig } = useDocusaurusContext();
   const baseUrl = siteConfig.baseUrl;
 
@@ -124,6 +125,9 @@ export default function InteractivePython({ children }) {
     <div className={styles.wrapper}>
       <div className={styles.codeHeader}>
         <span className={styles.codeHeaderText}>Python Sandbox</span>
+        {showMemoryGraph && (
+          <MemoryGraphButton code={rawCode} className={styles.memoryGraphButton} />
+        )}
       </div>
 
       <CodeMirror

src/components/InteractivePython/styles.module.css

@@ -20,6 +20,7 @@
   padding: 12px 16px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   border-bottom: 1px solid var(--ifm-toc-border-color);
 }
@@ -54,6 +55,12 @@
   color: var(--ifm-color-success, #4caf50);
 }
 
+/* Pushes the Memory Graph button to the header's right edge regardless
+   of viewport width, leaving "Python Sandbox" on the left */
+.memoryGraphButton {
+  margin-left: auto;
+}
+
 /* ==========================================================================
    3. RUN BUTTON
    ========================================================================== */

src/components/MemoryGraphBlock/styles.module.css

@@ -9,3 +9,4 @@
   border-top-right-radius: 0 !important;
   border-top: none !important;
 }
+

src/components/MemoryGraphButton/index.js

@@ -0,0 +1,29 @@
+import React, { useMemo } from 'react';
+import styles from './styles.module.css';
+
+const MEMORY_GRAPH_BASE_URL = 'https://memory-graph.com/';
+
+/**
+ * Just the "View on Memory Graph" link — no header bar, no label text.
+ * Rendered directly inside InteractivePython's own header row when a
+ * block is both `interactive` and `debug` (right-aligned next to
+ * "Python Sandbox"), and reused by MemoryGraphHeader — which adds the
+ * "Debug Mode" label + purple bar — for the debug-only case.
+ */
+export default function MemoryGraphButton({ code, className = '' }) {
+  const memoryGraphUrl = useMemo(
+    () => `${MEMORY_GRAPH_BASE_URL}#code=${encodeURIComponent((code || '').trim())}`,
+    [code]
+  );
+
+  return (
+    <a
+      href={memoryGraphUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={`${styles.openButton} ${className}`}
+    >
+      View on Memory Graph ↗
+    </a>
+  );
+}

src/components/MemoryGraphButton/styles.module.css

@@ -0,0 +1,20 @@
+.openButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 6px;
+  background-color: #7c3aed;
+  color: #ffffff !important; /* override Docusaurus's default link color */
+  font-family: var(--ifm-font-family-base, sans-serif);
+  font-weight: 600;
+  font-size: 0.85rem;
+  text-decoration: none !important;
+  white-space: nowrap;
+  transition: background-color 0.15s ease;
+}
+
+.openButton:hover {
+  background-color: #6d28d9;
+  color: #ffffff !important;
+}

src/components/MemoryGraphHeader/index.js

@@ -1,37 +1,19 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import MemoryGraphButton from '@site/src/components/MemoryGraphButton';
 import styles from './styles.module.css';
 
-const MEMORY_GRAPH_BASE_URL = 'https://memory-graph.com/';
-
 /**
- * Purple header bar linking a code snippet out to Bas Terwijn's Memory
- * Graph web debugger (memory-graph.com). This is just the bar + link —
- * it doesn't render the code itself, so it can sit above either a plain
- * <pre> (```lang debug, via MemoryGraphBlock) or InteractivePython's
- * editable sandbox (```lang interactive debug, via MDXComponents).
- *
- * `code` is the raw (untrimmed is fine) source string; `flush` squares
- * off the bottom edge and drops the outer margin so it butts directly
- * against whatever renders right beneath it, instead of floating as its
- * own rounded pill.
+ * Purple header bar used for debug-only blocks (```lang debug): a
+ * "Debug Mode" label plus the Memory Graph button, sitting flush above
+ * the theme's plain <pre> via MemoryGraphBlock. When a block is also
+ * `interactive`, this isn't used at all — the button renders inline in
+ * InteractivePython's own header instead (see MDXComponents.js).
  */
 export default function MemoryGraphHeader({ code, flush = false }) {
-  const memoryGraphUrl = useMemo(
-    () => `${MEMORY_GRAPH_BASE_URL}#code=${encodeURIComponent((code || '').trim())}`,
-    [code]
-  );
-
   return (
     <div className={`${styles.header} ${flush ? styles.flush : ''}`}>
       <span className={styles.headerText}>Debug Mode</span>
-      <a
-        href={memoryGraphUrl}
-        target="_blank"
-        rel="noopener noreferrer"
-        className={styles.openButton}
-      >
-        View on Memory Graph ↗
-      </a>
+      <MemoryGraphButton code={code} />
     </div>
   );
 }

src/components/MemoryGraphHeader/styles.module.css

@@ -43,27 +43,6 @@
   color: #e9d5ff;
 }
 
-.openButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 14px;
-  border-radius: 6px;
-  background-color: #7c3aed;
-  color: #ffffff !important; /* override Docusaurus's default link color */
-  font-family: var(--ifm-font-family-base, sans-serif);
-  font-weight: 600;
-  font-size: 0.85rem;
-  text-decoration: none !important;
-  white-space: nowrap;
-  transition: background-color 0.15s ease;
-}
-
-.openButton:hover {
-  background-color: #6d28d9;
-  color: #ffffff !important;
-}
-
 @media (max-width: 480px) {
   .header {
     justify-content: center;

src/theme/MDXComponents.js

@@ -1,7 +1,6 @@
 import MDXComponents from '@theme-original/MDXComponents';
 import InteractivePython from '@site/src/components/InteractivePython';
 import MemoryGraphBlock from '@site/src/components/MemoryGraphBlock';
-import MemoryGraphHeader from '@site/src/components/MemoryGraphHeader';
 
 export default {
   ...MDXComponents,
@@ -11,17 +10,8 @@ export default {
     const isInteractive = metastring.includes('interactive');
     const isDebug = metastring.includes('debug');
 
-    if (isInteractive && isDebug) {
-      const rawCode = props.children?.props?.children || '';
-      return (
-        <>
-          <MemoryGraphHeader code={rawCode} />
-          <InteractivePython {...props} />
-        </>
-      );
-    }
     if (isInteractive) {
-      return <InteractivePython {...props} />;
+      return <InteractivePython {...props} showMemoryGraph={isDebug} />;
     }
     if (isDebug) {
       return <MemoryGraphBlock {...props} />;