diff --git a/src/components/InteractivePython/index.js b/src/components/InteractivePython/index.js index 1d0cc90..62a6bb6 100644 --- a/src/components/InteractivePython/index.js +++ b/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 }) {
Python Sandbox + {showMemoryGraph && ( + + )}
`${MEMORY_GRAPH_BASE_URL}#code=${encodeURIComponent((code || '').trim())}`, + [code] + ); + + return ( + + View on Memory Graph ↗ + + ); +} diff --git a/src/components/MemoryGraphButton/styles.module.css b/src/components/MemoryGraphButton/styles.module.css new file mode 100644 index 0000000..2bb71f8 --- /dev/null +++ b/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; +} diff --git a/src/components/MemoryGraphHeader/index.js b/src/components/MemoryGraphHeader/index.js index c89e92f..d9c28ea 100644 --- a/src/components/MemoryGraphHeader/index.js +++ b/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 - *
 (```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 
 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 (
     
Debug Mode - - View on Memory Graph ↗ - +
); } diff --git a/src/components/MemoryGraphHeader/styles.module.css b/src/components/MemoryGraphHeader/styles.module.css index d99077b..a6050cb 100644 --- a/src/components/MemoryGraphHeader/styles.module.css +++ b/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; diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js index ee3698f..d330527 100644 --- a/src/theme/MDXComponents.js +++ b/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 ( - <> - - - - ); - } if (isInteractive) { - return ; + return ; } if (isDebug) { return ;