Convert datafruits Ember home layout to Rails Hotwire

[Copilot]

Ports the base layout from the datafruits Ember frontend (app/templates/home.hbs) to render server-side from streampusher-api via Hotwire, replacing Ember components and services with Rails-native equivalents.

Architecture

The app was API-only (ActionController::API). Rather than changing that, this introduces a parallel base class for HTML controllers:

class HtmlController < ActionController::Base
  protect_from_forgery with: :exception
end

class LandingController < HtmlController
  layout "hotwire"
  # ...
end

API controllers remain untouched.

Gems Added

• turbo-rails, stimulus-rails, importmap-rails, sprockets-rails
• Enabled action_view/railtie, action_cable/engine, sprockets/railtie (previously commented out)

Ember Component → Rails Mapping

Ember Component	Rails Equivalent	Approach
PcNav, SpNav	_pc_nav, _sp_nav partials	ERB + Stimulus
UserMenu, LoginModal	_user_menu, _login_modal	Stimulus-toggled (hidden/shown client-side)
DatafruitsPlayer	<datafruits-player>	Web Component
AudioVisualizer	<audio-visualizer>	Web Component (Web Audio API)
AddDatafruit, RandomBannerAd	Turbo Frames	Lazy-loaded via /api/* endpoints
HackButton, OurVersionNotifier	Simple partials	Static HTML

Complex stateful components (player, visualizer) are Web Components — self-contained, framework-agnostic, and compatible with future Turbo Stream updates.

Ember Service → Rails Mapping

Ember Service	Rails Equivalent
session / currentUser	Devise user_signed_in? / current_user
fastboot	Not needed — Rails is always server-rendered
metadata	MetadataChannel (ActionCable) + DOM CustomEvent
siteSettings	Controller @site_settings instance variable
videoStream	Encapsulated inside datafruits-player Web Component
chat	Existing ActionCable channels (separate concern)

Navigation Interactivity

The Stimulus home controller handles all toggle behavior — submenus, user menu, login modal, donate modal — and closes everything on Escape:

// data-action="keydown.esc->home#closeAll"
closeAll() {
  [this.mobileMenuTarget, this.submenuTarget, this.userMenuTarget,
   this.loginModalTarget, this.donateModalTarget].forEach(t => t?.classList.add("hidden"))
}

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/repos/datafruits/datafruits/contents/app/components
  • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node /home/REDACTED/work/_temp/ghcca-node/node/bin/node --enable-source-maps /home/REDACTED/work/_temp/copilot-developer-action-main/dist/index.js (http block)
• s3.amazonaws.com
  • Triggering command: /usr/bin/ruby3.2 /usr/bin/ruby3.2 -I/usr/lib/ruby/vendor_ruby extconf.rb --gdwarf-5 --64 -o http11_parser.o /tmp/cczeZ6XE.s 3 y-3.2.0 -I /usr/libexec/gcc-I -plu�� /usr/libexec/gcc-I -plugin-opt=/usr/usr/include/ruby-3.2.0 by-3.2.0 -plugin-opt=-pasas kward -plugin-opt=-pas. y-3.2.0 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.