al_marimo 1.0.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: d04f121dc6cb7e4d4d132f0ba0e7912df875b73707013bfa35a66a5f5be8586b
+  data.tar.gz: a44b52b29146749d4e7a754de13530670a0f0c48d718bfa6a40fd954e9e52a4e
+SHA512:
+  metadata.gz: 93d3a014fa33632f6fdb78ed349388c94ebf282bf59f0c54e354759783589d97cc7ce2c8ff5c7880be8ec2be6080430c8a0dacacca891ff7a435b008b9e82fba
+  data.tar.gz: f177be12c37a379ee733af04c910f80e3bbd961cb8faa8e60ffa5aee52a2cc04a76d89decd3f353214a76184665ec4369c435097298938645a96871b71110c11

data/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 1.0.0 — 2026-08-02
+
+- Initial release of `al_marimo`, implementing the plugin proposed in
+  [alshedivat/al-folio#3541](https://github.com/alshedivat/al-folio/issues/3541) (source PR
+  [#3517](https://github.com/alshedivat/al-folio/pull/3517)).
+- `{% al_marimo_embed %}` for hosted notebooks and `.al-marimo-inline` conversion for in-page Python snippets.
+- The `marimo-snippets` runtime is **vendored and version-pinned** with recorded provenance, rather than loaded from a
+  CDN at an unpinned major version as the source PR did.
+- Embedded notebooks are sandboxed **without** `allow-same-origin`.

data/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) al-folio maintainers
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,90 @@
+# al_marimo
+
+[marimo](https://marimo.io) interactive Python notebooks for [al-folio](https://github.com/alshedivat/al-folio) v1.x.
+Implements the plugin proposed in [al-folio#3541](https://github.com/alshedivat/al-folio/issues/3541).
+
+## Install
+
+```ruby
+gem "al_marimo", "= 1.0.0"
+```
+
+and in `_config.yml` — **both lists, or the plugin is inert**:
+
+```yaml
+plugins:
+  - al_marimo
+```
+
+Then opt in **per page**, in front matter:
+
+```yaml
+---
+layout: post
+title: a notebook post
+marimo: true
+---
+```
+
+Nothing is loaded on pages without that flag, so bundling the plugin costs nothing site-wide.
+
+## Usage
+
+### Embedding a hosted notebook
+
+```liquid
+{% al_marimo_embed src="https://marimo.app/l/abc123" height="700px" caption="Sampling demo" %}
+```
+
+Accepts `src` (required), `height`, `width`, `mode` (`read` / `edit`), `embed`, `title`, `caption`, `class`. `src` may
+be a literal or a Liquid variable.
+
+### Inline runnable snippets
+
+Wrap fenced Python blocks in a container:
+
+<pre>
+&lt;div class="al-marimo-inline" markdown="1"&gt;
+
+```python
+import marimo as mo
+mo.md("Hello from the browser")
+```
+
+&lt;/div&gt;
+</pre>
+
+The runtime moves those blocks into a `<marimo-iframe>` after load.
+
+## Differences from the source PR
+
+The source PR was explicitly a work in progress. Two things changed:
+
+**The runtime is vendored, not fetched from a CDN.** The PR loaded
+`https://cdn.jsdelivr.net/npm/@marimo-team/marimo-snippets@1` — an unpinned major version, with no integrity hash,
+executing in every visitor's page. That is the shape of the polyfill.io supply-chain attack. Pinning it with SRI is not
+possible either: that URL serves a _dynamically minified_ build, and jsDelivr
+[documents that such files must not be used with SRI](https://www.jsdelivr.com/using-sri-with-dynamic-files) because a
+minifier upgrade changes the bytes and would break every site at once. So the stable unminified source is vendored at an
+exact version, with its digest recorded in [`lib/vendor/provenance.json`](lib/vendor/provenance.json) and a test that
+fails if the shipped file drifts from it.
+
+**Embedded notebooks do not get `allow-same-origin`.** The PR's sandbox included it, which lets the embedded
+third-party notebook reach the embedding page's storage and cookies — defeating the purpose of the sandbox.
+
+## Note on third-party contact
+
+The notebook itself executes on `marimo.app` (or your own WASM host). Embedding one means your readers' browsers contact
+that origin. The vendored runtime also references a marimo-hosted icon. Nothing is sent unless a page opts in.
+
+## Development
+
+```bash
+bundle install
+bundle exec rake test
+npm ci && npm run lint:prettier
+```
+
+## License
+
+MIT

data/lib/al_marimo/version.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+module AlMarimo
+  VERSION = "1.0.0"
+end

data/lib/al_marimo.rb

@@ -0,0 +1,196 @@
+# frozen_string_literal: true
+
+require "cgi"
+require "json"
+require "jekyll"
+require "liquid"
+require_relative "al_marimo/version"
+
+# Embeds marimo notebooks, and turns Python code blocks into runnable snippets.
+#
+# Two-layer gating, per the al-folio contract: the gem must be loaded *and* the
+# page must opt in with `marimo: true` in its front matter. Without the page
+# opt-in every tag renders an empty string, so a site that bundles this plugin
+# pays nothing on pages that do not use it.
+module AlMarimo
+  PLUGIN_ROOT = File.expand_path("..", __dir__)
+  # Jekyll writes a StaticFile to <dest>/<dir>/<name>, where <dir> is relative
+  # to the base below. That base must be lib/, not the gem root, or assets land
+  # at /lib/assets/... while every tag in this file points at /assets/... .
+  LIB_ROOT = __dir__
+  ASSETS_ROOT = File.join(LIB_ROOT, "assets")
+  VENDOR_ROOT = File.join(PLUGIN_ROOT, "lib", "vendor")
+
+  # marimo runs the notebook itself; only these origins are ever contacted.
+  DEFAULT_PLAYGROUND = "https://marimo.app"
+
+  class PluginStaticFile < Jekyll::StaticFile; end
+
+  module_function
+
+  def config(site)
+    return {} unless site
+
+    site.config["al_marimo"] || {}
+  end
+
+  # Page-level opt-in. Anything truthy other than the string "false" counts, so
+  # `marimo: true` and `marimo: snippets` both work.
+  #
+  # Reads through `[]` rather than testing for Hash: at render time Jekyll hands
+  # `registers[:page]` a Drop (Jekyll::Drops::DocumentDrop), not a Hash, so an
+  # `is_a?(Hash)` guard silently discards the front matter and the feature never
+  # switches on for any real page.
+  def page_enabled?(page)
+    value = begin
+      page.respond_to?(:[]) ? page["marimo"] : nil
+    rescue StandardError
+      nil
+    end
+    return false if value.nil? || value == false
+    return false if value.respond_to?(:strip) && ["", "false"].include?(value.strip.downcase)
+
+    true
+  end
+
+  def provenance
+    @provenance ||= JSON.parse(File.read(File.join(VENDOR_ROOT, "provenance.json")))
+  end
+
+  def escape(value)
+    CGI.escapeHTML(value.to_s)
+  end
+
+  # Builds the notebook URL, folding in the query parameters marimo understands.
+  #
+  # Appends with the correct separator rather than assuming the caller passed a
+  # bare URL: `?embed=true` on a URL that already has a query string produces a
+  # link that silently loads the wrong notebook.
+  def build_url(src, embed: true, mode: "read")
+    url = src.to_s.strip
+    return nil if url.empty?
+
+    separator = url.include?("?") ? "&" : "?"
+    if embed
+      url = "#{url}#{separator}embed=true"
+      separator = "&"
+    end
+    "#{url}#{separator}mode=#{mode == "edit" ? "edit" : "read"}"
+  end
+
+  # [relative_dir, filename] for everything this gem publishes. Exposed so the
+  # destination path can be asserted without booting a full Jekyll site.
+  def asset_entries
+    Dir.glob(File.join(ASSETS_ROOT, "**", "*")).sort.reject { |p| File.directory?(p) }.map do |source_path|
+      [File.dirname(source_path).sub("#{LIB_ROOT}/", ""), File.basename(source_path)]
+    end
+  end
+
+  class AssetsGenerator < Jekyll::Generator
+    safe true
+    priority :low
+
+    def generate(site)
+      Dir.glob(File.join(ASSETS_ROOT, "**", "*")).sort.each do |source_path|
+        next if File.directory?(source_path)
+
+        relative_dir = File.dirname(source_path).sub("#{LIB_ROOT}/", "")
+        site.static_files << PluginStaticFile.new(site, LIB_ROOT, relative_dir, File.basename(source_path))
+      end
+    end
+  end
+
+  # {% al_marimo_scripts %} — emits the runtime, only on pages that opted in.
+  class ScriptsTag < Liquid::Tag
+    def render(context)
+      site = context.registers[:site]
+      page = context.registers[:page]
+      return "" unless site && AlMarimo.page_enabled?(page)
+
+      baseurl = site.config["baseurl"] || ""
+      # Vendored rather than pulled from a CDN. jsDelivr serves a dynamically
+      # minified build at the package root and documents that it must not be
+      # used with SRI; loading it unpinned would hand every al-folio site's
+      # execution context to whatever that URL returns tomorrow.
+      <<~HTML
+        <script defer src="#{baseurl}/assets/al_marimo/js/marimo-init.js"></script>
+        <script defer src="#{baseurl}/assets/al_marimo/js/marimo-snippets.js"></script>
+      HTML
+    end
+  end
+
+  class StylesTag < Liquid::Tag
+    def render(context)
+      site = context.registers[:site]
+      page = context.registers[:page]
+      return "" unless site && AlMarimo.page_enabled?(page)
+
+      baseurl = site.config["baseurl"] || ""
+      %(<link rel="stylesheet" href="#{baseurl}/assets/al_marimo/css/marimo.css">\n)
+    end
+  end
+
+  # {% al_marimo_embed src="https://marimo.app/l/abc" height="600px" caption="..." %}
+  class EmbedTag < Liquid::Tag
+    ATTRIBUTES = /(\w+)\s*=\s*("[^"]*"|'[^']*'|[^\s]+)/.freeze
+
+    def initialize(tag_name, markup, options)
+      super
+      @attributes = {}
+      markup.scan(ATTRIBUTES) do |key, value|
+        @attributes[key] = value.gsub(/\A["']|["']\z/, "")
+      end
+    end
+
+    def render(context)
+      site = context.registers[:site]
+      return "" unless site
+
+      src = resolve(@attributes["src"], context)
+      url = AlMarimo.build_url(
+        src,
+        embed: @attributes.fetch("embed", "true") != "false",
+        mode: @attributes["mode"] || "read"
+      )
+      # A missing or empty src is an authoring mistake. Emit nothing rather than
+      # an iframe pointed at the site itself, which would silently render the
+      # page inside its own post.
+      return "" if url.nil?
+
+      height = @attributes["height"] || "600px"
+      width = @attributes["width"] || "100%"
+      title = @attributes["title"] || "marimo notebook"
+      caption = @attributes["caption"]
+      extra_class = @attributes["class"]
+
+      figure = +%(<figure class="al-marimo">)
+      figure << %(<div class="al-marimo-embed">)
+      figure << %(<iframe src="#{AlMarimo.escape(url)}")
+      figure << %( class="#{AlMarimo.escape(extra_class)}") if extra_class
+      # Deliberately omits allow-same-origin: the notebook is third-party code,
+      # and granting it same-origin access to the embedding site would let it
+      # read the parent document's storage and cookies.
+      figure << %( sandbox="allow-scripts allow-downloads allow-popups allow-forms")
+      figure << %( width="#{AlMarimo.escape(width)}" height="#{AlMarimo.escape(height)}")
+      figure << %( title="#{AlMarimo.escape(title)}" loading="lazy" frameborder="0" allowfullscreen></iframe>)
+      figure << %(</div>)
+      figure << %(<figcaption class="caption">#{AlMarimo.escape(caption)}</figcaption>) if caption
+      figure << %(</figure>)
+      figure
+    end
+
+    private
+
+    # Allows both a literal (src="https://…") and a variable (src=page.notebook).
+    def resolve(value, context)
+      return nil if value.nil?
+
+      looked_up = context[value]
+      looked_up.nil? ? value : looked_up
+    end
+  end
+end
+
+Liquid::Template.register_tag("al_marimo_scripts", AlMarimo::ScriptsTag)
+Liquid::Template.register_tag("al_marimo_styles", AlMarimo::StylesTag)
+Liquid::Template.register_tag("al_marimo_embed", AlMarimo::EmbedTag)

data/lib/assets/al_marimo/css/marimo.css

@@ -0,0 +1,42 @@
+/* Styling for marimo embeds. Plain CSS rather than Sass: _sass/ is gem-owned by
+   al_folio_core and a plugin must not add to the theme's build pipeline. */
+
+.al-marimo {
+  margin: 1.5rem 0;
+}
+
+.al-marimo-embed {
+  position: relative;
+  width: 100%;
+  /* Notebooks are wide; let the frame scroll itself rather than the page. */
+  overflow-x: auto;
+}
+
+.al-marimo-embed iframe {
+  display: block;
+  width: 100%;
+  border: 1px solid var(--global-divider-color, rgba(0, 0, 0, 0.1));
+  border-radius: 6px;
+  background: var(--global-bg-color, transparent);
+}
+
+.al-marimo figcaption,
+.al-marimo .caption {
+  margin-top: 0.5rem;
+  font-size: 0.875rem;
+  text-align: center;
+  color: var(--global-text-color-light, inherit);
+}
+
+/* Hidden until marimo-init.js has moved the code blocks into <marimo-iframe>,
+   so readers never see the raw source flash before it becomes a notebook.
+   Scripts are deferred, so this is re-shown on DOMContentLoaded at the latest. */
+.al-marimo-inline {
+  visibility: hidden;
+}
+
+/* Without JS the block would stay hidden forever, which is worse than showing
+   the code. Reveal it and let it render as an ordinary listing. */
+.no-js .al-marimo-inline {
+  visibility: visible;
+}

data/lib/assets/al_marimo/js/marimo-init.js

@@ -0,0 +1,114 @@
+// Prepares kramdown's code-block output for marimo-snippets.
+//
+// marimo-snippets reads <pre> children of a <marimo-iframe>. Kramdown wraps
+// fenced blocks in a .highlighter-rouge div whose nested elements contribute
+// whitespace-only text nodes; marimo-snippets reads the element via textContent
+// and those nodes show up as blank leading and trailing lines in the notebook.
+// So the <pre> is moved out of the wrapper rather than the wrapper moved in.
+//
+// Runs before marimo-snippets (which is loaded after it) and is idempotent, so
+// a page that re-runs it does not double-convert.
+(function () {
+  "use strict";
+
+  var LANGUAGE_PREFIX = "language-";
+
+  function languageOf(element) {
+    var found = "";
+    Array.prototype.forEach.call(element.classList, function (name) {
+      if (name.indexOf(LANGUAGE_PREFIX) === 0) {
+        found = name;
+      }
+    });
+    return found;
+  }
+
+  // Kramdown emits a trailing newline inside <code>; marimo renders it as an
+  // empty final cell line.
+  function trim(pre) {
+    Array.prototype.forEach.call(pre.querySelectorAll("code"), function (code) {
+      code.textContent = code.textContent.replace(/^\n+/, "").replace(/\s+$/, "");
+    });
+  }
+
+  function collectBlocks(container) {
+    var wrappers = container.querySelectorAll(".highlighter-rouge");
+    var blocks = [];
+
+    if (wrappers.length > 0) {
+      Array.prototype.forEach.call(wrappers, function (wrapper) {
+        var language = languageOf(wrapper);
+        var pre = wrapper.querySelector("pre");
+        if (!pre) {
+          return;
+        }
+        // marimo-snippets distinguishes Python cells from markdown cells by the
+        // language class, which kramdown puts on the wrapper, not the <pre>.
+        if (language) {
+          pre.classList.add(language);
+        }
+        trim(pre);
+        blocks.push(pre);
+      });
+      return blocks;
+    }
+
+    Array.prototype.forEach.call(container.querySelectorAll("pre"), function (pre) {
+      trim(pre);
+      blocks.push(pre);
+    });
+    return blocks;
+  }
+
+  // Height is a guess, but a bad guess is very visible: too short and the
+  // notebook scrolls inside a stub. Scale with both cell count and line count.
+  function estimateHeight(blocks) {
+    var lines = blocks.reduce(function (total, pre) {
+      return total + (pre.textContent || "").split("\n").filter(Boolean).length;
+    }, 0);
+    return Math.max(300, 150 + blocks.length * 80 + lines * 22);
+  }
+
+  function convert(container) {
+    if (container.dataset.alMarimoReady === "true") {
+      return;
+    }
+
+    var blocks = collectBlocks(container);
+    if (blocks.length === 0) {
+      // Nothing to run. Leave the markup alone and make it visible again rather
+      // than stranding the reader with a permanently hidden block.
+      container.dataset.alMarimoReady = "true";
+      container.style.visibility = "visible";
+      return;
+    }
+
+    var frame = document.createElement("marimo-iframe");
+    Array.prototype.forEach.call(container.attributes, function (attribute) {
+      if (attribute.name.indexOf("data-") === 0 && attribute.name !== "data-al-marimo-ready") {
+        frame.setAttribute(attribute.name, attribute.value);
+      }
+    });
+    blocks.forEach(function (pre) {
+      frame.appendChild(pre);
+    });
+    if (!frame.hasAttribute("data-height")) {
+      frame.setAttribute("data-height", estimateHeight(blocks) + "px");
+    }
+
+    container.textContent = "";
+    container.appendChild(frame);
+    container.dataset.alMarimoReady = "true";
+    container.style.visibility = "visible";
+  }
+
+  function ready() {
+    Array.prototype.forEach.call(document.querySelectorAll(".al-marimo-inline"), convert);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", ready);
+  } else {
+    ready();
+  }
+})();

data/lib/assets/al_marimo/js/marimo-snippets.js

@@ -0,0 +1,213 @@
+let buttonSettings = {
+  elements: ['pre'],
+  title: 'Open code in an interactive playground',
+  position: 'absolute',
+  top: '0.5rem',
+  right: '0.5rem',
+  border: 'none',
+  borderRadius: '4px',
+  padding: '4px 8px',
+  margin: '-4px 22px',
+  cursor: 'pointer',
+  zIndex: '10',
+  filter: 'grayscale(100%)',
+  icon: '<img src="https://cms.marimo.io/icons/favicon.svg" alt="icon" width="20" height="20">',
+  url: 'https://marimo.app',
+  paramName: 'code'
+};
+
+let iframeSettings = {
+  elements: ['pre'],
+  height: '400px',
+  width: '100%',
+  border: '1px solid #ddd',
+  borderRadius: '4px',
+  margin: '1rem 0',
+  showCode: 'true',
+  url: 'https://marimo.app',
+  paramName: 'code'
+};
+
+/**
+ * Configure interactive buttons for code blocks that open the code in a Marimo playground
+ *
+ * @param {Object} settings - Button customization options
+ * @param {string[]} [settings.elements=['pre', 'div.highlight'] - CSS selectors for elements to add buttons to. Default: ['pre', 'div.highlight']
+ * @param {string} [settings.title='Open code in an interactive playground'] - Button tooltip text
+ * @param {string} [settings.position='absolute'] - CSS position property
+ * @param {string} [settings.top='0.5rem'] - Distance from top of container
+ * @param {string} [settings.right='0.5rem'] - Distance from right of container
+ * @param {string} [settings.border='none'] - Button border style
+ * @param {string} [settings.borderRadius='4px'] - Button corner radius
+ * @param {string} [settings.padding='4px 8px'] - Button padding
+ * @param {string} [settings.margin='-4px 22px'] - Button margin
+ * @param {string} [settings.cursor='pointer'] - Mouse cursor style on hover
+ * @param {string} [settings.zIndex='10'] - Button stacking order
+ * @param {string} [settings.filter='grayscale(100%)'] - Default filter applied to button
+ * @param {string} [settings.icon='<img src="https://cms.marimo.io/icons/favicon.svg" alt="icon" width="20" height="20">'] - HTML content for the button
+ * @param {string} [settings.url='https://marimo.app'] - Base URL for the Marimo instance
+ * @param {string} [settings.paramName='code'] - Query parameter name for the code
+ */
+function configureMarimoButtons(settings = {}) {
+  buttonSettings = { ...buttonSettings, ...settings };
+}
+
+/**
+ * Configure marimo iframes
+ *
+ * @param {Object} settings - Iframe customization options
+ * @param {string[]} [settings.elements=['pre', 'div.highlight'] - CSS selectors for elements to add buttons to. Default: ['pre', 'div.highlight']
+ * @param {string} [settings.height='400px'] - Height of the iframe
+ * @param {string} [settings.width='100%'] - Width of the iframe
+ * @param {string} [settings.border='1px solid #ddd'] - Border style of the iframe
+ * @param {string} [settings.borderRadius='4px'] - Corner radius of the iframe
+ * @param {string} [settings.margin='1rem 0'] - Margin around the iframe
+ * @param {string} [settings.showCode='true'] - Whether to show the notebook's code
+ * @param {string} [settings.url='https://marimo.app'] - Base URL for the Marimo instance
+ * @param {string} [settings.paramName='code'] - Query parameter name for the code
+ */
+function configureMarimoIframes(settings = {}) {
+  iframeSettings = { ...iframeSettings, ...settings };
+}
+
+function generateCell(code, kind="python") {
+
+  if (kind === "python") {
+    return `@app.cell
+def _():
+${code.split('\n').map(line => '    ' + line).join('\n')}
+`;
+}
+    if (kind === "md") {
+    return `@app.cell(hide_code=True)
+def _():
+    mo.md("""
+${code.split('\n').map(line => '    ' + line).join('\n')}
+    """)
+`;
+}
+}
+
+function generateNotebook(cells) {
+  return `import marimo
+
+app = marimo.App()
+
+${cells}
+`;
+}
+
+/**
+ * Helper to override settings using data attributes.
+ * It takes an element and a settings object and returns a new configuration,
+ * where any data-* attribute (e.g. data-title or data-elements) on the element
+ * will override the corresponding property in the settings.
+ */
+function overrideSettingsWithDataAttributes(element, settings) {
+  const config = { ...settings };
+  for (const key in element.dataset) {
+    let value = element.dataset[key];
+    // If key is "elements", assume a comma-separated list.
+    if (key.toLowerCase() === "elements") {
+      value = value.split(',').map(s => s.trim());
+    }
+    config[key] = value;
+  }
+  return config;
+}
+
+function createButton(codeElement, config = buttonSettings) {
+  const button = document.createElement('button');
+  button.className = 'url-copy-button';
+  button.title = config.title;
+  button.style.position = config.position;
+  button.style.top = config.top;
+  button.style.right = config.right;
+  button.style.border = config.border;
+  button.style.borderRadius = config.borderRadius;
+  button.style.padding = config.padding;
+  button.style.margin = config.margin;
+  button.style.cursor = config.cursor;
+  button.style.zIndex = config.zIndex;
+  button.style.filter = config.filter;
+  button.innerHTML = config.icon;
+
+  button.addEventListener("mouseover", function() {
+    button.style.filter = "grayscale(0%)";
+  });
+  button.addEventListener("mouseout", function() {
+    button.style.filter = config.filter;
+  });
+  button.addEventListener('click', function(e) {
+    e.preventDefault();
+    const code = generateNotebook(generateCell(codeElement.textContent));
+    const encodedCode = encodeURIComponent(code);
+    const url = `${config.url}?${config.paramName}=${encodedCode}`;
+    window.open(url, '_blank');
+  });
+
+  return button;
+}
+
+/**
+ * Adds interactive buttons to code blocks that open the code in a Marimo playground.
+ * This uses any data attributes on <marimo-button> to override defaults.
+ */
+document.addEventListener("DOMContentLoaded", function() {
+  document.querySelectorAll('script[type="text/x-marimo-snippets-config"]').forEach(script => {
+    eval(script.textContent);
+  });
+
+  const buttons = document.querySelectorAll('marimo-button');
+  buttons.forEach(button => {
+    // Merge data attribute config with global buttonSettings.
+    const buttonConfig = overrideSettingsWithDataAttributes(button, buttonSettings);
+    const preElement = button.querySelector(buttonConfig.elements.join(","));
+    if (!preElement) {
+      return;
+    }
+    // Ensure the pre element has a relative position for button placement.
+    if (getComputedStyle(preElement).position === 'static') {
+      preElement.style.position = 'relative';
+    }
+    preElement.appendChild(createButton(preElement, buttonConfig));
+  });
+});
+
+/**
+ * Replaces code blocks with inline marimo notebooks.
+ * This uses any data attributes on <marimo-iframe> to override defaults.
+ */
+document.addEventListener("DOMContentLoaded", function() {
+  const marimoFrames = document.querySelectorAll("marimo-iframe");
+  marimoFrames.forEach(marimoFrame => {
+    // Merge data attribute config with global iframeSettings.
+    const iframeConfig = overrideSettingsWithDataAttributes(marimoFrame, iframeSettings);
+    
+    console.log("marimoFrame", marimoFrame);
+    
+    const cells = Array.from(marimoFrame.children).map((element) => {
+      const allClassNames = Array.from(element.classList).concat(
+        Array.from(element.getElementsByTagName("*")).flatMap(el => Array.from(el.classList))
+      );
+      const kind = allClassNames.includes("language-python") ? "python" : "md";
+
+      return generateCell(element.textContent, kind);
+    });
+
+    const code = generateNotebook(cells.join("\n"));
+
+    const iframe = document.createElement('iframe');
+    iframe.style.height = iframeConfig.height;
+    iframe.style.width = iframeConfig.width;
+    iframe.style.border = iframeConfig.border;
+    iframe.style.borderRadius = iframeConfig.borderRadius;
+    iframe.style.margin = iframeConfig.margin;
+
+    const encodedCode = encodeURIComponent(code);
+    const mode = iframeConfig.showCode === 'false' ? 'read' : 'edit';
+    const url = `${iframeConfig.url}?${iframeConfig.paramName}=${encodedCode}&embed=true&show-chrome=false&mode=${mode}&show-code=${iframeConfig.showCode}`;
+    iframe.src = url;
+    marimoFrame.replaceWith(iframe);
+  });
+});

data/lib/vendor/provenance.json

@@ -0,0 +1,10 @@
+{
+  "name": "@marimo-team/marimo-snippets",
+  "version": "1.0.3",
+  "source_url": "https://cdn.jsdelivr.net/npm/@marimo-team/marimo-snippets@1.0.3/src/extractor.js",
+  "sha384": "sha384-wu02bTA++0bnvSB8GwNxnJmRB7AYFTgpaidK3uEVGrV6yu6QcdOt+J9vtHvla1vZ",
+  "sha256": "QENbXBT2k95BXBwOn5Ctx6Pr0cp46cyYWx2gRMv7vqw=",
+  "bytes": 8042,
+  "license": "Apache-2.0",
+  "note": "Vendored rather than loaded from a CDN. jsDelivr's default package URL serves a dynamically minified build and documents that it must not be used with SRI, since a Terser bump changes the hash and breaks every site at once. The unminified source path is stable, so it is pinned and vendored here."
+}

metadata

@@ -0,0 +1,144 @@
+--- !ruby/object:Gem::Specification
+name: al_marimo
+version: !ruby/object:Gem::Version
+  version: 1.0.0
+platform: ruby
+authors:
+- al-folio maintainers
+autorequire:
+bindir: bin
+cert_chain: []
+date: 2026-08-02 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.9'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+- !ruby/object:Gem::Dependency
+  name: liquid
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '4.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '6.0'
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '2.0'
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3.0'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '13.0'
+- !ruby/object:Gem::Dependency
+  name: minitest
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.0'
+description: Embeds marimo notebooks and turns Python code blocks into runnable in-browser
+  snippets.
+email:
+- maintainers@al-folio.dev
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- CHANGELOG.md
+- LICENSE
+- README.md
+- lib/al_marimo.rb
+- lib/al_marimo/version.rb
+- lib/assets/al_marimo/css/marimo.css
+- lib/assets/al_marimo/js/marimo-init.js
+- lib/assets/al_marimo/js/marimo-snippets.js
+- lib/vendor/provenance.json
+homepage: https://github.com/al-org-dev/al-marimo
+licenses:
+- MIT
+metadata:
+  allowed_push_host: https://rubygems.org
+  homepage_uri: https://github.com/al-org-dev/al-marimo
+  source_code_uri: https://github.com/al-org-dev/al-marimo
+post_install_message:
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '2.7'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubygems_version: 3.5.22
+signing_key:
+specification_version: 4
+summary: Marimo interactive notebook plugin for al-folio v1.x
+test_files: []