feature/try-it-code-block-button

Author: sfc-gh-dmatthews

components/blocks/code.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
 import Prism from "prismjs";
 import "prismjs/plugins/line-numbers/prism-line-numbers";
@@ -12,6 +12,87 @@ import Image from "./image";
 
 import styles from "./code.module.css";
 
+// Compress code with gzip and encode as base64 for Streamlit Playground
+async function compressCodeForPlayground(code) {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(code);
+
+  const cs = new CompressionStream("gzip");
+  const writer = cs.writable.getWriter();
+  writer.write(data);
+  writer.close();
+
+  const compressedChunks = [];
+  const reader = cs.readable.getReader();
+
+  while (true) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    compressedChunks.push(value);
+  }
+
+  // Combine all chunks into a single Uint8Array
+  const totalLength = compressedChunks.reduce(
+    (acc, chunk) => acc + chunk.length,
+    0,
+  );
+  const compressed = new Uint8Array(totalLength);
+  let offset = 0;
+  for (const chunk of compressedChunks) {
+    compressed.set(chunk, offset);
+    offset += chunk.length;
+  }
+
+  // Convert to URL-safe base64 (uses - and _ instead of + and /)
+  let binary = "";
+  for (let i = 0; i < compressed.length; i++) {
+    binary += String.fromCharCode(compressed[i]);
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_");
+}
+
+// TryMeButton component
+const TryMeButton = ({ code }) => {
+  const [playgroundUrl, setPlaygroundUrl] = useState(null);
+
+  useEffect(() => {
+    async function generateUrl() {
+      if (code) {
+        const encoded = await compressCodeForPlayground(code.trim());
+        setPlaygroundUrl(
+          `https://streamlit.io/playground?example=blank&code=${encoded}`,
+        );
+      }
+    }
+    generateUrl();
+  }, [code]);
+
+  if (!playgroundUrl) return null;
+
+  return (
+    <a
+      href={playgroundUrl}
+      target="_blank"
+      rel="noopener noreferrer"
+      className={styles.TryMeButton}
+      title="Try this code in Streamlit Playground"
+    >
+      <span className={styles.TryMeLabel}>Try it!</span>
+      <svg
+        className={styles.TryMeIcon}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <polygon points="5 3 19 12 5 21 5 3" />
+      </svg>
+    </a>
+  );
+};
+
 // Initialize the cache for imported languages.
 const languageImports = new Map();
 
@@ -62,6 +143,7 @@ const Code = ({
   hideCopyButton = false,
   filename,
   filenameOnly = true,
+  try: tryIt = false,
 }) => {
   // Create a ref for the code element.
   const codeRef = useRef(null);
@@ -135,6 +217,7 @@ const Code = ({
         <span className={styles.Language}>{displayLanguage}</span>
       )}
       {filename && <span className={styles.Filename}>{filename}</span>}
+      {tryIt && <TryMeButton code={customCode} />}
     </div>
   );
 

components/blocks/code.module.css

@@ -76,3 +76,22 @@
 }
 
 /* Syntax highlighting is now handled globally via styles/syntax-highlighting.scss */
+
+/* Try Me Button */
+.TryMeButton {
+  @apply flex items-center gap-1 px-2 py-1 rounded text-xs font-medium transition-all duration-150;
+  @apply text-red-70 hover:text-white hover:bg-red-70;
+  text-decoration: none !important;
+}
+
+:global(.dark) .TryMeButton {
+  @apply text-red-50 hover:text-white hover:bg-red-60;
+}
+
+.TryMeIcon {
+  @apply w-3 h-3;
+}
+
+.TryMeLabel {
+  @apply hidden sm:inline;
+}

pages/[...slug].js

@@ -14,6 +14,29 @@ import { useRouter } from "next/router";
 import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import getConfig from "next/config";
+
+// Custom remark plugin to pass code fence metadata through to the HTML
+// e.g., ```python try filename="app.py"``` adds data-meta attribute
+function remarkCodeMeta() {
+  // Simple recursive tree walker (avoids ESM import issues with unist-util-visit)
+  function walkTree(node, callback) {
+    callback(node);
+    if (node.children) {
+      node.children.forEach((child) => walkTree(child, callback));
+    }
+  }
+
+  return (tree) => {
+    walkTree(tree, (node) => {
+      if (node.type === "code" && node.meta) {
+        // Store meta in data.hProperties which remark-rehype passes to the element
+        node.data = node.data || {};
+        node.data.hProperties = node.data.hProperties || {};
+        node.data.hProperties["data-meta"] = node.meta;
+      }
+    });
+  };
+}
 const { serverRuntimeConfig, publicRuntimeConfig } = getConfig();
 
 // Site Components
@@ -167,7 +190,37 @@ export default function Article({
         goToLatest={goToLatest}
       />
     ),
-    pre: (props) => <Code {...props} />,
+    pre: (props) => {
+      // Extract metadata from code fence (e.g., ```python try filename="app.py" filenameOnly)
+      // The metadata is passed via data-meta attribute from our remark plugin
+      const codeElement = props.children;
+      const metaString = codeElement?.props?.["data-meta"] || "";
+
+      // Parse metadata into props
+      const codeProps = {};
+
+      if (metaString) {
+        // Match boolean flags (standalone words) and key="value" pairs
+        const booleanFlags = ["try", "filenameOnly", "hideCopyButton"];
+
+        // Extract key="value" pairs first
+        const keyValueRegex = /(\w+)=["']([^"']+)["']/g;
+        let match;
+        while ((match = keyValueRegex.exec(metaString)) !== null) {
+          codeProps[match[1]] = match[2];
+        }
+
+        // Check for boolean flags (words not part of key=value)
+        const cleanedMeta = metaString.replace(keyValueRegex, "");
+        booleanFlags.forEach((flag) => {
+          if (new RegExp(`\\b${flag}\\b`).test(cleanedMeta)) {
+            codeProps[flag] = true;
+          }
+        });
+      }
+
+      return <Code {...props} {...codeProps} />;
+    },
     h1: H1,
     h2: H2,
     h3: H3,
@@ -410,7 +463,7 @@ export async function getStaticProps(context) {
       scope: data,
       mdxOptions: {
         rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
-        remarkPlugins: [remarkUnwrapImages, remarkGfm],
+        remarkPlugins: [remarkUnwrapImages, remarkGfm, remarkCodeMeta],
       },
     });