maglevcms 3.0.0.beta2 → 3.0.0.beta3

data/app/assets/javascripts/maglev/editor/controllers/app/preview_notification_center_controller.js

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus"
-import { isSamePath } from"maglev-controllers/utils"
+import { isSamePath } from "maglev-controllers/utils"
 
 export default class extends Controller { 
   static targets = ["iframe"]

data/app/assets/javascripts/maglev/editor/controllers/shared/submit_button_controller.js

@@ -1,25 +1,41 @@
 import { Controller } from "@hotwired/stimulus"
 import { sleep } from"maglev-controllers/utils"
+import TurboDelayedStreams from 'maglev-patches/turbo_delayed_streams'
 
 export default class extends Controller {
 
   initialize() {
     this._start = this.start.bind(this)
     this._end = this.end.bind(this)
+    this._cancel = this.cancel.bind(this)    
   }
 
   connect() {
+    this.canceled = false
     this.formElement = this.element.closest('form')
     this.formElement.addEventListener('turbo:submit-start', this._start)
     this.formElement.addEventListener('turbo:submit-end', this._end)
+    document.addEventListener("turbo:before-cache", this._cancel)
   }
 
   disconnect() {
+    this.canceled = true
+    this.requestId = null
     this.formElement.removeEventListener('turbo:submit-start', this._start)
-    this.formElement.removeEventListener('turbo:submit-end', this._end)
+    this.formElement.removeEventListener('turbo:submit-end', this._end)    
   }
 
-  start() {
+  cancel() {
+    this.canceled = true
+    this.element.disabled = false
+    this.formElement.classList.remove('is-pending', 'is-success', 'is-error')
+    this.formElement.classList.add('is-default')    
+  }
+
+  start(event) {
+    // the requestId is set by the turbo:before-fetch-request listener. We need it if there are delayed streams to render
+    this.requestId = event.detail.formSubmission.fetchRequest.fetchOptions.turboRequestId
+
     this.formElement.classList.add('is-pending')
     this.startedAt = Date.now()
   }
@@ -30,16 +46,24 @@ export default class extends Controller {
 
     // on an UX standpoint, we want to show the pending state for a short time to avoid flickering
     // if the submit (call to the server) took less than 800ms, we wait for 800ms to show the pending state
-    if (Date.now() - this.startedAt < 800) await sleep(800)
+    if (Date.now() - this.startedAt < 600) await sleep(600)
+
+    if (this.canceled) return
 
     this.formElement.classList.remove('is-pending')
-    this.formElement.classList.add(event.detail.success ? 'is-success' : 'is-error')      
+    this.formElement.classList.add(event.detail.success ? 'is-success' : 'is-error')
     
     // wait for 2 seconds and then remove the success or error class and add the default class
-    await sleep(1600)
+    await sleep(1400)
+
+    if (this.canceled) return
     
     this.formElement.classList.remove(event.detail.success ? 'is-success' : 'is-error')
     this.formElement.classList.add('is-default')
     this.element.disabled = false
+
+    // render the delayed turbo stream messages from the request
+    // use the requestId to identify the request and render the turbo stream messages
+    TurboDelayedStreams.render(this.requestId)
   }
 }

data/app/assets/javascripts/maglev/editor/controllers/utils.js

@@ -7,4 +7,20 @@ export const isSamePath = (targetPath) => {
 
 export const sleep = (ms) => {
   return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+function uuidv4() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, c => {
+    const r = Math.random() * 16 | 0
+    const v = c === "x" ? r : (r & 0x3 | 0x8)
+    return v.toString(16)
+  })
+}
+
+export function generateRequestId() {
+  // use the native randomUUID function if available (Browsers don't expose it for non-secure domains)
+  if (window.crypto?.randomUUID) {
+    return window.crypto.randomUUID()
+  }
+  return uuidv4()
 }

data/app/assets/javascripts/maglev/editor/index.js

@@ -1,6 +1,7 @@
 import "@hotwired/turbo-rails"
 import "maglev-controllers"
-import { PageRenderer, StreamActions } from '@hotwired/turbo'
+import "maglev-patches/page_renderer_patch"
+import "maglev-patches/turbo_stream_patch"
 
 console.log('Maglev Editor v2 ⚡️')
 
@@ -22,45 +23,4 @@ document.addEventListener("click", (event) => {
   if (current.pathname === target.pathname && current.search === target.search) {
     link.dataset.turboAction = "replace"
   }
-})
-
-// iFrames will always be reloaded even if we mark them as turbo-permanent. 
-// In the context of the Editor, the workaround is to replace the content of another DIV (#root) 
-// instead of the body and put the preview iframe as a sibling of the root DIV.
-PageRenderer.prototype.assignNewBody = function() {
-  const body = document.querySelector("#root")
-  const el   = this.newElement.querySelector("#root")
-
-  // replace all the data attributes of the BODY tag with the data attributes of the newElement
-  // This is because the BODY tag carries the current page id in one of the controller values
-  const bodyDataAttributes = document.body.dataset
-  const newElementDataAttributes = this.newElement.dataset
-  Object.keys(newElementDataAttributes).forEach(key => {
-    bodyDataAttributes[key] = newElementDataAttributes[key]
-  })
-
-  // now replace the "body" with the newElement
-  if (body && el) {
-    body.replaceWith(el)
-    return
-  } else if (document.body && this.newElement instanceof HTMLBodyElement) {
-    document.body.replaceWith(this.newElement)
-  } else {
-    document.documentElement.appendChild(this.newElement)
-  }
-}
-
-// Custom stream actions
- 
-StreamActions.console_log = function() {
-  const message = this.getAttribute("message")
-  console.log(message)
-}
-
-StreamActions.dispatch_event = function() {
-  const type = this.getAttribute("type")
-  const payload = this.getAttribute("payload")
-  console.log('dispatchEvent', type, payload, `dispatcher:${type}`)
-  const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
-  window.dispatchEvent(event)
-}
+})

data/app/assets/javascripts/maglev/editor/patches/page_renderer_patch.js

@@ -0,0 +1,47 @@
+import { PageRenderer } from '@hotwired/turbo'
+
+// iFrames will always be reloaded even if we mark them as turbo-permanent. 
+// In the context of the Editor, the workaround is to replace the content of another DIV (#root) 
+// instead of the body and put the preview iframe as a sibling of the root DIV.
+// assignNewBody is the right function to patch because it's called by both the PageRenderer and the SnapshotRenderer.
+
+// Inspirations: 
+// - https://github.com/hotwired/turbo/pull/711/files
+// - https://github.com/Challenge-Guy/turbo-cfm1/commit/2a3b0acfe0367f32c9d1635ff7c6fd7d87d2a2cd
+PageRenderer.prototype.assignNewBody = function() {
+  const body = document.querySelector("#root")
+  const el   = this.newElement.querySelector("#root")
+
+  // Only update sync elements during snapshot preview render
+  // those elements are permanent during the snapshot preview render and updated when we've got the new snapshot
+  if (this.isPreview) {
+    const syncElements = document.querySelectorAll('[data-turbo-sync]')
+    syncElements.forEach(element => {
+      const currentElement = document.querySelector(`#${element.id}`)
+      const newElement = this.newElement.querySelector(`#${element.id}`)
+      
+      if (currentElement && newElement) {
+        // sync the innerHTML of the newElement with the currentElement
+        newElement.innerHTML = currentElement.innerHTML
+      }
+    })    
+  }
+
+  // replace all the data attributes of the BODY tag with the data attributes of the newElement
+  // This is because the BODY tag carries the current page id in one of the controller values
+  const bodyDataAttributes = document.body.dataset
+  const newElementDataAttributes = this.newElement.dataset
+  Object.keys(newElementDataAttributes).forEach(key => {
+    bodyDataAttributes[key] = newElementDataAttributes[key]
+  })
+
+  // now replace the "body" with the newElement
+  if (body && el) {
+    body.replaceWith(el)
+    return
+  } else if (document.body && this.newElement instanceof HTMLBodyElement) {
+    document.body.replaceWith(this.newElement)
+  } else {
+    document.documentElement.appendChild(this.newElement)
+  }
+}

data/app/assets/javascripts/maglev/editor/patches/turbo_delayed_streams.js

@@ -0,0 +1,35 @@
+// Delayed Turbo streams are streams that are not rendered immediately, but are rendered later manually by the application
+// It's used by the SubmitButton controller for instance
+
+class TurboDelayedStream {
+  constructor(maxElements = 10) {
+    this.maxElements = maxElements
+    this.elements = new Map()
+  }
+
+  add(requestId, render) {
+    if (this.elements.has(requestId)) {
+      this.elements.get(requestId).push(render)
+    } else {
+      this.elements.set(requestId, [render])
+    }
+
+    if (this.elements.size > this.maxElements) {
+      this.elements.delete(this.elements.keys().next().value)
+    }
+  }
+
+  render(requestId) {
+    if (!this.elements.has(requestId)) return
+
+    const renderFns = this.elements.get(requestId)
+
+    // render all the turbo streams for this request
+    renderFns.forEach(render => render())
+    
+    // remove the element from the list
+    this.elements.delete(requestId)
+  }
+}
+
+export default new TurboDelayedStream()

data/app/assets/javascripts/maglev/editor/patches/turbo_stream_patch.js

@@ -0,0 +1,50 @@
+
+import { StreamActions } from '@hotwired/turbo'
+import TurboDelayedStreams from 'maglev-patches/turbo_delayed_streams'
+import { generateRequestId } from 'maglev-controllers/utils'
+
+// Custom stream actions
+StreamActions.console_log = function() {
+  const message = this.getAttribute("message")
+  console.log(message)
+}
+
+StreamActions.dispatch_event = function() {
+  const type = this.getAttribute("type")
+  const payload = this.getAttribute("payload")
+  console.log('dispatchEvent', type, payload, `dispatcher:${type}`)
+  const event = new CustomEvent(`dispatcher:${type}`, { detail: JSON.parse(payload) })
+  window.dispatchEvent(event)
+}
+
+// Handle delayed streams through Turbo events
+
+document.addEventListener("turbo:before-stream-render", (event) => {
+  const delayedStream = (
+    event.detail.newStream.templateContent.querySelector('meta[name="turbo-delayed-stream"]')?.content ?? event.detail.newStream.getAttribute('delayed')
+  ) === 'true'
+  const requestId = (
+    event.detail.newStream.templateContent.querySelector('meta[name="turbo-request-id"]')?.content ?? event.detail.newStream.getAttribute('request-id')
+  )?.split(',')?.[0]
+
+  if (delayedStream) {
+    // Keep the stream in the queue to be rendered later
+    TurboDelayedStreams.add(requestId, () => {
+      // console.log('rendering delayed stream', requestId, event.detail.newStream)
+      event.detail.render(event.detail.newStream)
+    })
+          
+    // Cancel Turbo's rendering for this stream
+    event.preventDefault()
+  }    
+})
+
+document.addEventListener('turbo:before-fetch-request', (event) => {
+  const requestId = generateRequestId()
+
+  // Attach to headers (for server → client stream correlation)
+  event.detail.fetchOptions.headers["X-Turbo-Request-ID"] = requestId
+
+  // Attach to the fetchRequest instance
+  event.detail.fetchOptions.turboRequestId = requestId
+})

data/app/assets/stylesheets/maglev/application.css

@@ -10,8 +10,6 @@
  * files in this directory. Styles in this file should be added after the last require_* statement.
  * It is generally better to create a new file per style scope.
  *
- *= require_tree .
- *= require_self
  */
 
 @keyframes slide-out {

data/app/assets/stylesheets/maglev/tailwind.css.erb

@@ -8,7 +8,9 @@
   --color-editor-primary: var(--editor-color-primary);
 }
 
-@source "../../../";  
+@source "<%= Maglev::Engine.root.join('app') %>";
+@source "<%= Maglev::Engine.root.join('lib') %>";
+
 <% Maglev.config.tailwindcss_folders.each do |folder| %>
 @source "<%= folder %>";
 <% end %>

data/app/components/maglev/uikit/app_layout/topbar/logo_component.html.erb

@@ -1,3 +1,3 @@
-<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0" do %>
+<%= link_to root_path, class: "w-16 h-full flex justify-center items-center border-r border-gray-200 shrink-0", data: { controller: 'prevent-same-path' } do %>
   <%= image_tag logo_url, class: "w-2/4", id: 'editor-logo-image', data: { turbo_permanent: true } %>
 <% end %>

data/app/components/maglev/uikit/app_layout/topbar/page_info_component.html.erb

@@ -4,7 +4,7 @@
   <div class="flex flex-row items-center h-full w-full px-4 overflow-hidden">
     <div class="flex flex-col leading-none overflow-hidden">
       <div class="flex items-center">
-        <%= render Maglev::Uikit::IconComponent.new(name: icon_name, size: '1.1rem', class_names: 'shrink-0 text-gray-900') %>
+        <%= helpers.maglev_page_icon(page, size: '1.1rem', wrapper_class_names: 'text-gray-900') %>
         <div class="text-base font-semibold truncate ml-1 mr-3">
           <%= page.title.presence || page.default_title %>
         </div>

data/app/components/maglev/uikit/dropdown_component/dropdown_controller.js

@@ -47,7 +47,12 @@ export default class extends Controller {
   }
 
   disconnect() {
-    this.cleanup()
+    this.cleanup() // clean up the observer for the floating element
+
+    // fix issue: https://github.com/stimulus-use/stimulus-use/issues/500
+    this.enter = null
+    this.leave = null
+    this.toggleTransition = null
   }
 
   clickOutside() {

data/app/controllers/concerns/maglev/editor/errors_concern.rb

@@ -7,23 +7,16 @@ module Maglev
 
       included do
         around_action :handle_editor_errors
-
-        rescue_from ActiveRecord::StaleObjectError, with: :handle_stale_object
       end
 
       private
 
-      def handle_stale_object
-        respond_to do |format|
-          format.turbo_stream { render 'maglev/editor/shared/errors/stale_object_error' }
-          format.html { redirect_to editor_root_path }
-        end
-      end
-
       def handle_editor_errors
         yield
       rescue Maglev::Errors::NotAuthorized
         raise # Let the main app handle this one
+      rescue ActiveRecord::StaleObjectError
+        handle_stale_object
       rescue StandardError => e
         respond_to do |format|
           format.turbo_stream { render_turbo_stream_standard_error(e) }
@@ -31,6 +24,13 @@ module Maglev
         end
       end
 
+      def handle_stale_object
+        respond_to do |format|
+          format.turbo_stream { render 'maglev/editor/shared/errors/stale_object_error' }
+          format.html { redirect_to editor_root_path }
+        end
+      end
+
       def render_turbo_stream_standard_error(error)
         track_maglev_error(error)
         render 'maglev/editor/shared/errors/standard_error', status: :internal_server_error

data/app/controllers/concerns/maglev/errors_concern.rb

@@ -0,0 +1,17 @@
+# frozen_string_literal: true
+
+module Maglev
+  module ErrorsConcern
+    extend ActiveSupport::Concern
+
+    included do
+      rescue_from ::Maglev::Errors::SiteNotFound, with: :handle_site_not_found if Rails.env.development?
+    end
+
+    private
+
+    def handle_site_not_found
+      render 'maglev/errors/site_not_found', layout: nil, status: :not_found
+    end
+  end
+end

data/app/controllers/maglev/application_controller.rb

@@ -4,6 +4,7 @@ module Maglev
   class ApplicationController < ::ApplicationController
     include Maglev::ServicesConcern
     include Maglev::ResourceIdConcern
+    include Maglev::ErrorsConcern
 
     protect_from_forgery with: :exception
 

data/app/controllers/maglev/site_controller.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Maglev
+  class SiteController < Maglev::ApplicationController
+    def create
+      redirect_to editor_root_path and return if Maglev::Site.exists? || !Rails.env.local?
+
+      Maglev::GenerateSite.call(
+        theme: Maglev.local_themes.first
+      )
+
+      redirect_to editor_root_path
+    end
+  end
+end

data/app/helpers/maglev/application_helper.rb

@@ -3,6 +3,7 @@
 # rubocop:disable Metrics/ModuleLength
 module Maglev
   module ApplicationHelper
+    ## "system" helpers
     def turbo_stream
       # we don't want to pollute the global Turbo::Streams::TagBuilder
       Maglev::Turbo::Streams::TagBuilder.new(self)
@@ -26,6 +27,17 @@ module Maglev
       ], "\n"
     end
 
+    def maglev_delayed_stream_tag
+      # since we set the turbo request id before the build of the fetch request, Turbo will set
+      # the X-TURBO-REQUEST-ID header to a comma-separated list of request ids
+      # we only want to use the first request id (ours), so we split the header value and take the first part
+      safe_join [
+        tag.meta(name: 'turbo-request-id', content: ::Turbo.current_request_id.split(',').first),
+        tag.meta(name: 'turbo-delayed-stream', content: 'true')
+      ], "\n"
+    end
+
+    ## Editor helpers
     def maglev_editor_title
       case maglev_config.title
       when nil
@@ -139,9 +151,15 @@ module Maglev
                                                disappear_after: 3.seconds).with_content(message)
     end
 
-    def maglev_page_icon(page, size: '1.15rem')
+    def maglev_page_icon(page, size: '1.15rem', wrapper_class_names: nil)
       icon_name = page.index? ? 'home' : 'file'
-      render Maglev::Uikit::IconComponent.new(name: icon_name, size: size, class_names: 'shrink-0')
+      content_tag :span, class: class_names('shrink-0 relative', wrapper_class_names) do
+        if page.need_to_be_published?
+          concat(content_tag(:span, '',
+                             class: 'absolute -bottom-0.25 right-0 bg-yellow-600 rounded-full w-1.5 h-1.5'))
+        end
+        concat render(Maglev::Uikit::IconComponent.new(name: icon_name, size: size))
+      end
     end
 
     def maglev_page_preview_reload_data

data/app/models/maglev/page.rb

@@ -10,6 +10,7 @@
 #  og_description_translations   :jsonb
 #  og_image_url_translations     :jsonb
 #  og_title_translations         :jsonb
+#  published_at                  :datetime
 #  sections_translations         :jsonb
 #  seo_title_translations        :jsonb
 #  title_translations            :jsonb
@@ -55,6 +56,19 @@ module Maglev
       false
     end
 
+    def published?
+      published_at.present?
+    end
+
+    def need_to_be_published?
+      !published? || updated_at.blank? || updated_at > published_at
+    end
+
+    # opposite of #need_to_be_published?
+    def published_and_up_to_date?
+      published? && updated_at <= published_at
+    end
+
     def translate_in(locale, source_locale)
       %i[title sections seo_title meta_description og_title og_description og_image_url].each do |attr|
         translate_attr_in(attr, locale, source_locale)

data/app/models/maglev/site.rb

@@ -8,6 +8,7 @@
 #  locales               :jsonb
 #  lock_version          :integer
 #  name                  :string
+#  published_at          :datetime
 #  sections_translations :jsonb
 #  style                 :jsonb
 #  created_at            :datetime         not null
@@ -35,6 +36,10 @@ module Maglev
 
     ## methods ##
 
+    def published?
+      published_at.present?
+    end
+
     def api_attributes
       %i[id name]
     end

data/app/services/maglev/fetch_site.rb

@@ -14,7 +14,9 @@ module Maglev
     private
 
     def site
-      @site ||= Maglev::Site.first
+      @site ||= Maglev::Site.first.tap do |site|
+        raise Maglev::Errors::SiteNotFound unless site
+      end
     end
 
     def change_default_locales(site)

data/app/services/maglev/get_published_page_sections_service.rb

@@ -15,7 +15,7 @@ module Maglev
     argument :locale, default: nil
 
     def call
-      fetch_container_store(page).sections.map do |section|
+      (fetch_container_store(page).sections || []).map do |section|
         transform_section(section.dup)
       end.compact
     end

data/app/services/maglev/publish_service.rb

@@ -21,6 +21,9 @@ module Maglev
       store = find_or_build_published_store(container)
       store.sections_translations = container.sections_translations
       store.save!
+      # mark the container as published.
+      # We need to add a delay to ensure that published_at will be posterior to the native updated_at of the container.
+      container.update(published_at: Time.current + 0.2.seconds)
     end
 
     def find_or_build_published_store(container)

data/app/views/layouts/maglev/editor/_sidebar.html.erb

@@ -18,7 +18,8 @@
   icon: 'drop',
   active: controller_name == 'style',
   options: {
-    icon_size: '1.25rem'
+    icon_size: '1.25rem',
+    data: { controller: 'prevent-same-path' }
   }
 ) if maglev_theme.style? %>
 

data/app/views/layouts/maglev/editor/_topbar.html.erb

@@ -4,17 +4,9 @@
 %>
 
 <% topbar.with_page_info do %>
-  <%= render Maglev::Uikit::AppLayout::Topbar::PageInfoComponent.new(
-    page: current_maglev_page,
-    paths: {
-      edit: edit_editor_page_path(current_maglev_page, maglev_editing_route_context),
-      preview: current_maglev_page_urls[:preview],
-      clone: editor_page_clone_path(current_maglev_page, maglev_editing_route_context),
-      delete: editor_page_path(current_maglev_page, maglev_editing_route_context)
-    },
-    live_page_url: current_maglev_page_urls[:live],
-    prefix_page_path: default_content_locale? ? '' : "#{content_locale}/"
-  ) %>
+  <%= turbo_frame_tag dom_id(current_maglev_page, 'topbar-page-info'), data: { turbo_sync: true } do %>
+    <%= render 'layouts/maglev/editor/topbar/page_info' %>
+  <% end %>
 <% end %>
 
 <% topbar.with_actions do %>
@@ -30,16 +22,7 @@
     current_locale: Maglev::I18n.current_locale,
   ) if maglev_site.many_locales? %>
 
-  <div class="flex items-center h-full px-4">
-    <%= button_to editor_publication_path(maglev_editing_route_context), 
-      method: :post, 
-      class: maglev_button_classes(color: :primary, size: :medium),
-      form_class: 'group/form is-default',
-      data: { controller: 'submit-button' } do %>
-      <%= maglev_button_label(
-        t('maglev.editor.header_nav.publish_button.default'),
-        pending: t('maglev.editor.header_nav.publish_button.in_progress'),
-        )%>
-    <% end %>
-  </div>
+  <%= turbo_frame_tag dom_id(current_maglev_page, 'topbar-publish-button'), data: { turbo_sync: true } do %>
+    <%= render 'layouts/maglev/editor/topbar/publish_button' %>  
+  <% end %>
 <% end %>

data/app/views/layouts/maglev/editor/application.html.erb

@@ -3,6 +3,7 @@
     <title><%= maglev_editor_title %></title>
     <meta name="view-transition" content="same-origin" />
     <meta name="turbo-refresh-method" content="morph">
+    <meta name="turbo-body" content="root">
 
     <meta name="content-locale" content="<%= content_locale %>">
     <meta name="page-preview-url" content="<%= current_maglev_page_urls[:preview] %>">

data/app/views/layouts/maglev/editor/topbar/_page_info.html.erb

@@ -0,0 +1,11 @@
+<%= render Maglev::Uikit::AppLayout::Topbar::PageInfoComponent.new(
+  page: current_maglev_page,
+  paths: {
+    edit: edit_editor_page_path(current_maglev_page, maglev_editing_route_context),
+    preview: current_maglev_page_urls[:preview],
+    clone: editor_page_clone_path(current_maglev_page, maglev_editing_route_context),
+    delete: editor_page_path(current_maglev_page, maglev_editing_route_context)
+  },
+  live_page_url: current_maglev_page_urls[:live],
+  prefix_page_path: default_content_locale? ? '' : "#{content_locale}/"
+) %>

data/app/views/layouts/maglev/editor/topbar/_publish_button.html.erb

@@ -0,0 +1,13 @@
+<div class="flex items-center h-full px-4">
+  <%= button_to editor_publication_path(maglev_editing_route_context), 
+    method: :post, 
+    class: maglev_button_classes(color: :primary, size: :medium),
+    form_class: 'group/form is-default',
+    disabled: current_maglev_page.published_and_up_to_date?,
+    data: { controller: 'submit-button' } do %>
+    <%= maglev_button_label(
+      t('maglev.editor.header_nav.publish_button.default'),
+      pending: t('maglev.editor.header_nav.publish_button.in_progress'),
+      )%>
+  <% end %>
+</div>

data/app/views/maglev/editor/publication/create.turbo_stream.erb

@@ -1 +1,3 @@
-<%= turbo_stream.console_log 'Publication created' %>
+<%= turbo_stream.console_log 'Publication created' %>
+
+<%= turbo_stream.refresh delayed: true %>