codesnips
ruby 
class Import < ApplicationRecord
  include ActionView::RecordIdentifier

  enum status: { pending: 0, processing: 1, completed: 2, failed: 3 }

  has_one_attached :file

Broadcast job progress updates to a Turbo Frame

rails hotwire turbo-streams
by codesnips 4 tabs
ruby 
class CommentsController < ApplicationController
  before_action :set_post

  def create
    @comment = @post.comments.build(comment_params)

Turbo Streams fallback to HTML for older clients

rails hotwire turbo-streams
by codesnips 4 tabs
erb 
<!DOCTYPE html>
<html>
  <head>
    <title><%= content_for(:title) || "App" %></title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

Disable Turbo Drive on external links

rails hotwire turbo
by codesnips 3 tabs
ruby 
class TurboFailureApp < Devise::FailureApp
  def respond
    if turbo_request?
      redirect_for_turbo
    else
      super

Handle 401 responses in Turbo by forcing a full redirect

rails hotwire turbo
by codesnips 4 tabs
javascript 
import * as Turbo from "@hotwired/turbo";

function metaContent(name) {
  const el = document.querySelector(`meta[name="${name}"]`);
  return el ? el.getAttribute("content") : null;
}

Attach custom headers to Turbo fetch requests (stimulus-free)

rails hotwire turbo
by codesnips 3 tabs
css 
.turbo-progress-bar {
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--progress-start, #6366f1),
    var(--progress-end, #ec4899)

Customize Turbo progress bar styling with Tailwind/CSS

rails hotwire turbo
by codesnips 3 tabs
erb 
<nav id="main-navbar"
     data-turbo-permanent
     data-controller="navbar"
     data-navbar-menu-open-value="false"
     class="navbar">
  <div class="navbar-inner">

Keep navbar state across Turbo navigations with data-turbo-permanent

rails hotwire turbo
by codesnips 3 tabs
erb 
<div id="toasts" class="fixed right-4 top-4 z-50 space-y-2"></div>

Toast notifications delivered with Turbo Streams

rails hotwire turbo
by Henry Kim 2 tabs
javascript 
import { StreamActions } from "@hotwired/turbo"

StreamActions.highlight = function () {
  const className = this.getAttribute("data-highlight-class") || "flash-highlight"
  const duration = parseInt(this.getAttribute("data-highlight-duration"), 10) || 1500

Custom turbo_stream action tag: highlight an updated element

rails hotwire turbo
by codesnips 4 tabs
erb 
<nav class="site-nav" data-controller="preload">
  <ul>
    <li>
      <%= link_to "Dashboard", dashboard_path,
            class: "nav-link",
            data: { turbo_preload: true } %>

Speed up perceived performance with Turbo preload links

rails hotwire turbo
by codesnips 3 tabs
erb 
<h1>Catalog</h1>

<%= turbo_frame_tag "products" do %>
  <div class="product-grid" data-controller="frame">
    <% @products.each do |product| %>
      <%= render "products/card", product: product %>

Pagination links that escape a Turbo Frame with _top

rails hotwire turbo
by codesnips 4 tabs
ruby 
class WizardsController < ApplicationController
  STEPS = %w[account profile confirm].freeze

  before_action :set_step

  def show

Multi-step wizard navigation with Turbo Frames

rails hotwire turbo
by codesnips 4 tabs