Render ruby enumeration iframe in a turbo frame 🤯

Why an iframe? So I can host the demo js on a separate static site and
can avoid adding all those dependencies to Joy of Rails.

Why a turbo frame? So we can add pass some custom query params to get
the theme of the demo.

app/content/pages/articles/simple-trick-to-understand-ruby-lazy-enumerator.html.mdrb

@@ -13,10 +13,21 @@ tags:
 
 Below is how I visualize how Ruby normally processes a chain of methods on an enumerable object.
 
-<%= render Demo::RubyEnumeration.new(demo_type: "eager") %>
+<%= turbo_frame_tag [:ruby, :enumeration, :eager], src: examples_ruby_enumeration_path(demo_type: "eager") do %>
+
+  <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
+<% end %>
 
 Now visualize how enumeration changes when using `.lazy` enumeration.
 
-<%= render Demo::RubyEnumeration.new(demo_type: "lazy") %>
+<%= turbo_frame_tag [:ruby, :enumeration, :lazy], src: examples_ruby_enumeration_path(demo_type: "lazy") do %>
+
+  <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
+<% end %>
+
+Here’s the demo again with some controls to play with the speed and style of enumeration:
+
+<%= turbo_frame_tag [:ruby, :enumeration, :combined], src: examples_ruby_enumeration_path(demo_type: "combined") do %>
 
-<%= render Demo::RubyEnumeration.new(demo_type: "combined") %>
+  <div><%= image_tag "articles/simple-trick-to-understand-ruby-lazy-enumerator/loading.gif" %></div>
+<% end %>

app/controllers/examples/ruby_enumerations_controller.rb

@@ -0,0 +1,11 @@
+module Examples
+  class RubyEnumerationsController < ApplicationController
+    before_action :current_color_scheme
+
+    layout false
+
+    def show
+      render Demo::RubyEnumeration.new(demo_type: params[:demo_type])
+    end
+  end
+end

app/views/components/demo/ruby_enumeration.rb

@@ -1,17 +1,22 @@
 module Demo
   class RubyEnumeration < ApplicationComponent
+    include Phlex::Rails::Helpers::TurboFrameTag
+
     attr_reader :demo_type
+
     def initialize(demo_type: "combined")
       @demo_type = demo_type.to_s
     end
 
     def view_template
-      iframe(
-        src: iframe_src,
-        height: focused_demo_type? ? "635px" : "695px",
-        loading: "lazy",
-        width: "100%"
-      )
+      turbo_frame_tag [:ruby, :enumeration, demo_type], class: "ruby-enumeration-demo" do
+        iframe(
+          src: iframe_src,
+          height: focused_demo_type? ? "635px" : "695px",
+          loading: "lazy",
+          width: "100%"
+        )
+      end
     end
 
     def base_uri

config/routes.rb

@@ -244,6 +244,7 @@
     resource :counters, only: [:show, :update, :destroy]
     resource :hello, only: [:show]
     resources :posts, only: [:index, :create, :new]
+    resource :ruby_enumeration, only: [:show]
   end
   resources :examples, only: [:index, :show]