spina 2.15.1 → 2.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8a4c285b310a44ed59a8188549402477161efe9e559dbbb6e5e52bac3a38ffc3
-  data.tar.gz: b7055f33ccf17811f980f0e79843245a3ce7d9a5b11910b6f5ef080ed25adbe1
+  metadata.gz: a0077bbb44829d71ab719fc2b7e51d625eff7a904c6d96d73fa4fb5d1b53c124
+  data.tar.gz: 685b9ed0d11538e6118b13cf72627fe70d8a4edf76d5ff2bbe00e72386d9e55e
 SHA512:
-  metadata.gz: 715e97080cea0a49d9329eb0c52960e21438f9401548f079d04afb9d1c0d1e601671de1153c3c4d6ae8ab305c5ee726d2881a08cf85fea77fc6b415b36dcdca7
-  data.tar.gz: 2623fea9312d74ea949df1588ff4b67bbd9c929af292c7097a1ec0cf09e738b75befb4e633092ca6fd19e248d7fd816e8f903f244fb75b0ea25a501955957f56
+  metadata.gz: 208e7e279bd356cdb47d9a12cafc7545caa73a824f25328cd119abb1d34c11c6a667f3feb49ec85390c8e836a024ce9bcde3c6cf764f8e8112a2123bc53be34f
+  data.tar.gz: b1eb0d8626ffc0873833ee45eec600ab7434392691c44877eac6353a3b9ebad0daf7641e0cbf4f5f84dcb66c5320c4f12cf91a74318211d4d0dc273741f87020

data/app/assets/builds/spina/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.2.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.3.2 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -31,6 +31,7 @@
 3. Use a more readable tab size.
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
 */
 
 html {
@@ -47,6 +48,8 @@ html {
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
 }
 
 /*
@@ -620,6 +623,9 @@ a, button {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -667,6 +673,9 @@ a, button {
   --tw-pan-y:  ;
   --tw-pinch-zoom:  ;
   --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
   --tw-ordinal:  ;
   --tw-slashed-zero:  ;
   --tw-numeric-figure:  ;
@@ -1779,10 +1788,7 @@ a, button {
   align-items: center;
   justify-content: center;
   position: fixed;
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
   z-index: 40;
   height: 100%;
   padding: 1.5rem;
@@ -1943,10 +1949,7 @@ trix-editor [data-trix-mutable]::selection,
 }
 
 .inset-0 {
-  top: 0px;
-  right: 0px;
-  bottom: 0px;
-  left: 0px;
+  inset: 0px;
 }
 
 .bottom-0 {
@@ -2066,6 +2069,14 @@ trix-editor [data-trix-mutable]::selection,
   margin-right: -1rem;
 }
 
+.-mt-0 {
+  margin-top: -0px;
+}
+
+.-mt-0\.5 {
+  margin-top: -0.125rem;
+}
+
 .-mt-4 {
   margin-top: -1rem;
 }
@@ -2110,6 +2121,10 @@ trix-editor [data-trix-mutable]::selection,
   margin-left: 2rem;
 }
 
+.ml-auto {
+  margin-left: auto;
+}
+
 .mr-1 {
   margin-right: 0.25rem;
 }
@@ -2266,6 +2281,10 @@ trix-editor [data-trix-mutable]::selection,
   width: 3.5rem;
 }
 
+.w-2\/3 {
+  width: 66.666667%;
+}
+
 .w-28 {
   width: 7rem;
 }
@@ -2842,13 +2861,13 @@ trix-editor [data-trix-mutable]::selection,
 }
 
 .from-spina-dark {
-  --tw-gradient-from: #3a3a70;
-  --tw-gradient-to: rgb(58 58 112 / 0);
+  --tw-gradient-from: #3a3a70 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(58 58 112 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
 .to-spina-light {
-  --tw-gradient-to: #797ab8;
+  --tw-gradient-to: #797ab8 var(--tw-gradient-to-position);
 }
 
 .object-contain {
@@ -2971,6 +2990,10 @@ trix-editor [data-trix-mutable]::selection,
   padding-bottom: 1.25rem;
 }
 
+.pl-1 {
+  padding-left: 0.25rem;
+}
+
 .pl-10 {
   padding-left: 2.5rem;
 }
@@ -3600,10 +3623,7 @@ trix-editor [data-trix-mutable]::selection,
   }
 
   .md\:inset-0 {
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-    left: 0px;
+    inset: 0px;
   }
 
   .md\:-top-0 {
@@ -3769,13 +3789,13 @@ trix-editor [data-trix-mutable]::selection,
   }
 
   .md\:from-spina-dark {
-    --tw-gradient-from: #3a3a70;
-    --tw-gradient-to: rgb(58 58 112 / 0);
+    --tw-gradient-from: #3a3a70 var(--tw-gradient-from-position);
+    --tw-gradient-to: rgb(58 58 112 / 0) var(--tw-gradient-to-position);
     --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
   }
 
   .md\:to-spina-light {
-    --tw-gradient-to: #797ab8;
+    --tw-gradient-to: #797ab8 var(--tw-gradient-to-position);
   }
 
   .md\:p-3 {

data/app/assets/javascripts/spina/controllers/auto_file_upload_controller.js

@@ -0,0 +1,49 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  start(event) {
+    const file = event.detail.file
+    if (!file) return
+
+    const trixId = event.detail.trixId
+    this.trixTargetId = trixId
+
+    // DataTransfer() avoids the "TypeError: Failed to set the 'files' property on 'HTMLInputElement': Failed to convert
+    // value to 'FileList'." error which occurs if you try to directly assign: `this.fileField.files = [file]`
+    // https://stackoverflow.com/questions/52078853/is-it-possible-to-update-filelist
+    const fileList = new DataTransfer()
+    fileList.items.add(file)
+    this.fileField.files = fileList.files
+
+    const changeEvent = new Event("input"); // This triggers the upload
+    this.fileField.dispatchEvent(changeEvent);
+  }
+
+  get fileField() {
+    return this.element.querySelector('form input.image-upload-file-field')
+  }
+
+  get form() {
+    return this.element.querySelector('form')
+  }
+
+  get trixTargetId() {
+    return this.element.querySelector('form > #trix_target_id').value
+  }
+
+  set trixTargetId(value) {
+    this.element.querySelector('form > #trix_target_id').value = value
+  }
+
+  #imageData(imageMeta) {
+    return {
+      filename: imageMeta.dataset.filename,
+      signedBlobId: imageMeta.dataset.signedBlobId,
+      imageId: imageMeta.dataset.imageId,
+      embeddedUrl: imageMeta.dataset.embeddedUrl,
+      thumbnail: imageMeta.dataset.thumbnail
+    }
+  }
+
+}

data/app/assets/javascripts/spina/controllers/editor_insert_images_controller.js

@@ -0,0 +1,38 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+
+  connect() {
+    // Gets triggered when refreshed by the ImagesController, and will process any images here
+    this.insertImages()
+  }
+
+  insertImages() {
+    const imagesMetadata = this.element.querySelectorAll('div.trix-insert-image')
+    imagesMetadata.forEach(tag => {
+      const imageData = this.#imageData(tag)
+      let insertImageEvent = new CustomEvent("media-picker:done", {detail: imageData})
+      const targetEditor = document.getElementById(this.trixTargetId)
+      this.trixTarget.dispatchEvent(insertImageEvent)
+    })
+  }
+
+  get trixTarget() {
+    return document.getElementById(this.trixTargetId)
+  }
+
+  get trixTargetId() {
+    return this.element.dataset.trixTargetId
+  }
+
+  #imageData(imageMeta) {
+    return {
+      filename: imageMeta.dataset.filename,
+      signedBlobId: imageMeta.dataset.signedBlobId,
+      imageId: imageMeta.dataset.imageId,
+      embeddedUrl: imageMeta.dataset.embeddedUrl,
+      thumbnail: imageMeta.dataset.thumbnail
+    }
+  }
+
+}

data/app/assets/javascripts/spina/controllers/repeater_controller.js

@@ -40,9 +40,11 @@ export default class extends Controller {
 
     // Insert button
     this.listTarget.insertAdjacentHTML('beforeend', this.buttonHTML(time))
-
     // Insert fields
-    this.contentTarget.insertAdjacentHTML('beforeend', html)
+    const parser = new DOMParser();
+    const docFields = parser.parseFromString(html, 'text/html');
+    this.contentTarget.appendChild(docFields.body.firstChild);
+
   }
 
   removeFields(event) {

data/app/assets/javascripts/spina/controllers/trix_controller.js

@@ -19,7 +19,7 @@ export default class extends Controller {
       }
     }.bind(this))
   }
-  
+
   insertEmbeddable(html) {
     let embeddable = new Trix.Attachment({
       content: html, 
@@ -38,7 +38,15 @@ export default class extends Controller {
     </span>`, contentType: "Spina::Image"})
     this.editor.insertAttachment(attachment)
   }
-  
+
+  fileAccept(event) {
+    const file = event.file
+    if(file) {
+      const startUploadEvent = new CustomEvent("auto-file-upload:start", { detail: { file, trixId: this.trixId }})
+      window.dispatchEvent(startUploadEvent)
+    }
+  }
+
   setAltText(event) {
     let alt = event.currentTarget.value
     let altLabel = alt
@@ -81,6 +89,10 @@ export default class extends Controller {
   get trixAttachment() {
     return this.getTrixAttachment(this.mutableImageAttachment.dataset.trixId)
   }
+
+  get trixId() {
+    return this.element.id
+  }
   
   get mutableImageAttachment() {
     return this.element.querySelector(`figure[data-trix-mutable][data-trix-content-type="Spina::Image"]`)

data/app/components/spina/forms/auto_file_upload_component.html.erb

@@ -0,0 +1,6 @@
+<div data-controller="auto-file-upload" data-action="auto-file-upload:start@window->auto-file-upload#start">
+  <%= render Spina::Forms::FileUploadComponent.new(origin: 'auto-file-upload', css_classes: 'hidden', turbo_frame: turbo_frame_id) %>
+  <turbo-frame id="auto-file-upload-images" data-trix-insert-target="">
+    <%= render Spina::Forms::EditorInsertImagesMetaComponent.new %>
+  </turbo-frame>
+</div>

data/app/components/spina/forms/auto_file_upload_component.rb

@@ -0,0 +1,15 @@
+module Spina
+  module Forms
+
+    # Meant to be a hidden component for facilitating quick file uploads from drag and drop or paste action within Trix
+    class AutoFileUploadComponent < ApplicationComponent
+      attr_reader :turbo_frame_id
+
+      def initialize
+        @turbo_frame_id = "auto-file-upload-images"
+      end
+
+    end
+
+  end
+end

data/app/components/spina/forms/editor_insert_images_meta_component.html.erb

@@ -0,0 +1,12 @@
+<div id="auto-uploaded-images" data-controller="editor-insert-images" data-trix-target-id="<%= trix_target_id %>">
+  <% @images.each do |image| %>
+    <div
+      class="hidden trix-insert-image"
+      data-image-id="<%= image.id %>"
+      data-signed-blob-id="<%= image.file.blob&.signed_id %>"
+      data-filename="<%= image.file.filename %>"
+      data-thumbnail="<%= helpers.thumbnail_url(image) %>"
+      data-embedded-url="<%= helpers.embedded_image_url(image) %>"
+    ></div>
+  <% end %>
+</div>

data/app/components/spina/forms/editor_insert_images_meta_component.rb

@@ -0,0 +1,12 @@
+module Spina
+  module Forms
+    class EditorInsertImagesMetaComponent < ApplicationComponent
+      attr_reader :images, :trix_target_id
+
+      def initialize(trix_target_id: nil, images:[])
+        @trix_target_id = trix_target_id
+        @images = images
+      end
+    end
+  end
+end

data/app/components/spina/forms/file_upload_component.html.erb

@@ -0,0 +1,14 @@
+<div data-controller="file-upload-component" class=<%= @css_classes %>>
+  <%= form_with model: [:admin, Spina::Image.new], url: helpers.spina.admin_images_path, data: {controller: "form loading-button", loading_message: t('spina.media_library.uploading'), action: "turbo:submit-end->loading-button#doneLoading", origin: origin, turbo_frame: turbo_frame} do |f| %>
+    <%= hidden_field_tag :origin, origin %>
+    <%= hidden_field_tag :trix_target_id, value: @trix_target_id %>
+    <%= f.hidden_field :media_folder_id, value: media_folder&.id %>
+
+    <%= f.file_field :files, multiple: true, accept: "image/*", id: file_field_id, class: 'image-upload-file-field hidden', data: {action: "loading-button#loading form#requestSubmit"} %>
+
+    <%= button_tag(type: "button", class: "font-medium w-full text-gray-600 text-sm hover:bg-gray-200 px-3 py-2 cursor-pointer rounded-lg flex items-center w-full", data: { controller:"delegate-click", action: "delegate-click#click", 'loading-button-target': "button", 'delegate-click-target': "##{file_field_id}" }) do %>
+      <%= helpers.heroicon("upload", style: :solid, class: "w-5 h-5 text-spina mr-2") %>
+      <%=t 'spina.media_library.upload_from_device' %>
+    <% end %>
+  <% end %>
+</div>

data/app/components/spina/forms/file_upload_component.rb

@@ -0,0 +1,19 @@
+module Spina
+  module Forms
+    class FileUploadComponent < ApplicationComponent
+      attr_reader :css_classes, :id, :origin, :file_field_id, :media_folder, :trix_id, :turbo_frame
+
+      def initialize(origin:, css_classes: '', id: nil, trix_target_id: nil, media_folder: nil, turbo_frame: nil)
+        @origin = origin
+        @css_classes = css_classes
+        @id = id || SecureRandom.uuid
+        @media_folder = media_folder
+        @trix_target_id = trix_target_id # If inserting an image into Trix, specifies which one receives it
+        @turbo_frame = turbo_frame
+
+        @file_field_id = "image_upload_file_field_#{@id}"
+      end
+
+    end
+  end
+end

data/app/components/spina/forms/text_field_component.rb

@@ -3,11 +3,12 @@ module Spina
     class TextFieldComponent < ApplicationComponent
       attr_accessor :f, :method, :size, :autofocus
 
-      def initialize(f, method, size: "md", autofocus: false)
+      def initialize(f, method, size: "md", autofocus: false, placeholder: nil)
         @f = f
         @method = method
         @size = size
         @autofocus = autofocus
+        @placeholder = placeholder
       end
 
       def controllers
@@ -42,7 +43,7 @@ module Spina
       end
 
       def placeholder
-        f.object.class.human_attribute_name(method)
+        @placeholder || f.object.class.human_attribute_name(method)
       end
     end
   end

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -1,6 +1,6 @@
 <div class="relative sticky z-10 top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
   <div class="flex items-center flex-wrap" data-controller="reveal">
-    <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3">
+    <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3" data-trix-button-group="text-tools">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">
         <svg class="w-4 h-4" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M333.49 238a122 122 0 0 0 27-65.21C367.87 96.49 308 32 233.42 32H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h31.87v288H34a16 16 0 0 0-16 16v48a16 16 0 0 0 16 16h209.32c70.8 0 134.14-51.75 141-122.4 4.74-48.45-16.39-92.06-50.83-119.6zM145.66 112h87.76a48 48 0 0 1 0 96h-87.76zm87.76 288h-87.76V288h87.76a56 56 0 0 1 0 112z"/></svg>
       </button>
@@ -27,7 +27,7 @@
       </button>
     </div>
   
-    <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3">
+    <div class="flex items-center bg-gray-200 rounded overflow-hidden mr-3 mb-3" data-trix-button-group="file-tools">
       
       <%= link_to helpers.spina.admin_media_picker_path(target: "insert_#{@trix_id}"), class: "hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center", data: {turbo_frame: "modal"} do %>
         <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">

data/app/components/spina/media_picker/modal_component.html.erb

@@ -58,17 +58,7 @@
               <% end %>
             <% end %>
             
-            <%= form_with model: [:admin, Spina::Image.new], url: helpers.spina.admin_images_path, data: {controller: "form loading-button", loading_message: t('spina.media_library.uploading'), action: "turbo:submit-end->loading-button#doneLoading", turbo_frame: "media_picker"} do |f| %>
-              <%= hidden_field_tag :modal, true %>
-              <%= f.hidden_field :media_folder_id, value: @media_folder&.id %>
-              
-              <%= f.file_field :files, multiple: true, accept: "image/*", id: "new_image_file_field", class: 'hidden', data: {action: "loading-button#loading form#requestSubmit"} %>
-              
-              <button type="button" class="font-medium w-full text-gray-600 text-sm hover:bg-gray-200 px-3 py-2 cursor-pointer rounded-lg flex items-center w-full" data-controller="delegate-click" data-action="delegate-click#click" data-loading-button-target="button" data-delegate-click-target="#new_image_file_field">
-                <%= helpers.heroicon("upload", style: :solid, class: "w-5 h-5 text-spina mr-2") %>
-                <%=t 'spina.media_library.upload_from_device' %>
-              </button>
-            <% end %>
+            <%= render Spina::Forms::FileUploadComponent.new(origin: 'media-picker', media_folder: @media_folder, turbo_frame: 'media_picker') %>
           </div>
           
           <button type="button" class="btn btn-primary w-full mt-3" data-action="media-picker-modal#confirm modal#close">

data/app/components/spina/pages/location_component.html.erb

@@ -1,10 +1,11 @@
 <div class="flex items-center border border-gray-300 rounded-md bg-white p-1 relative shadow-sm" data-controller="parent-pages">
+  <% if resources.many? %>
+    <%= helpers.heroicon("collection", style: :solid, class: 'w-5 h-5 ml-2 text-gray-400 absolute') %>
+    
+    <%= f.select :resource_id, resources, {}, class: "form-select hover:bg-gray-100 bg-none shadow-none w-auto bg-transparent border-none focus:ring-0 cursor-pointer pr-2 pl-8 flex-none truncate", data: {controller: "select-placeholder", action: "select-placeholder#update parent-pages#update"} %>
   
-  <%= helpers.heroicon("collection", style: :solid, class: 'w-5 h-5 ml-2 text-gray-400 absolute') %>
-  
-  <%= f.select :resource_id, resources, {}, class: "form-select hover:bg-gray-100 bg-none shadow-none w-auto bg-transparent border-none focus:ring-0 cursor-pointer pr-2 pl-8 flex-none truncate", data: {controller: "select-placeholder", action: "select-placeholder#update parent-pages#update"} %>
-  
-  <%= helpers.heroicon('chevron-right', style: :solid, class: 'w-5 h-5 text-gray-600 flex-none') %>
+    <%= helpers.heroicon('chevron-right', style: :solid, class: 'w-5 h-5 text-gray-600 flex-none') %>
+  <% end %>
   
   <%= helpers.turbo_frame_tag "parent_pages", src: default_parent_pages_path, class: 'flex-auto', data: {parent_pages_target: "frame"} %>
 </div>

data/app/components/spina/pages/page_select_component.rb

@@ -12,7 +12,7 @@ module Spina::Pages
 
     def options
       Spina::Page.sort_by_ancestry(pages.arrange(order: :position)).map do |page|
-        page_menu_title = page.menu_title.indent(page.depth, "–")
+        page_menu_title = page.menu_title&.indent(page.depth, "–")
         [page_menu_title, page.id]
       end
     end

data/app/controllers/spina/admin/images_controller.rb

@@ -35,8 +35,15 @@ module Spina
           image
         end.compact
 
-        if params[:modal]
+        if params[:origin] == 'media-picker'
           redirect_to spina.admin_media_picker_path(media_folder_id: image_params[:media_folder_id])
+        elsif params[:origin] == 'auto-file-upload'
+          render turbo_stream: turbo_stream.update(
+            'auto-file-upload-images',
+            Spina::Forms::EditorInsertImagesMetaComponent
+              .new(images: @images, trix_target_id: params[:trix_target_id])
+              .render_in(view_context)
+          )
         else
           render turbo_stream: turbo_stream.prepend("images", partial: "image", collection: @images)
         end
@@ -90,7 +97,7 @@ module Spina
       end
 
       def image_params
-        params.require(:image).permit(:media_folder_id, :file)
+        params.require(:image).permit(:media_folder_id, :file, files: [])
       end
     end
   end

data/app/controllers/spina/admin/layout_controller.rb

@@ -3,6 +3,7 @@ module Spina::Admin
     before_action :set_account
     before_action :set_locale
     before_action :set_breadcrumb
+    before_action :get_layout_parts
 
     admin_section :content
 
@@ -24,6 +25,11 @@ module Spina::Admin
     def layout_params
       params.require(:account).permit!
     end
+    
+    def get_layout_parts
+      @layout_parts = Spina::Current.theme.layout_parts
+      @layout_parts = {parts: @layout_parts} if @layout_parts.is_a?(Array)
+    end
 
     def set_breadcrumb
       add_breadcrumb t("spina.layout.layout")

data/app/controllers/spina/admin/navigation_items_controller.rb

@@ -4,14 +4,33 @@ module Spina
       before_action :set_navigation
 
       def new
-        @navigation_item = @navigation.navigation_items.new(parent_id: params[:parent_id])
+        @navigation_item = @navigation.navigation_items.new(parent_id: params[:parent_id], kind: params[:kind].presence || "page")
         @pages = Page.sorted.main.includes(:translations)
       end
 
       def create
-        @navigation_item = NavigationItem.new(navigation_item_params)
+        @navigation_item = @navigation.navigation_items.new(navigation_item_params)
         if @navigation_item.save
-          render turbo_stream: turbo_stream.append(@navigation_item.parent || @navigation, @navigation_item)
+          redirect_to spina.edit_admin_navigation_path(@navigation)
+        else
+          @pages = Page.sorted.main.includes(:translations)
+          render turbo_stream: turbo_stream.update(:navigation_item_form, partial: "form")
+        end
+      end
+
+      def edit
+        @navigation_item = NavigationItem.find(params[:id])
+        @pages = Page.sorted.main.includes(:translations)
+      end
+
+      def update
+        @navigation_item = NavigationItem.find(params[:id])
+
+        if @navigation_item.update(navigation_item_params)
+          redirect_to spina.edit_admin_navigation_path(@navigation)
+        else
+          @pages = Page.sorted.main.includes(:translations)
+          render turbo_stream: turbo_stream.update(:navigation_item_form, partial: "form")
         end
       end
 
@@ -23,13 +42,14 @@ module Spina
 
       private
 
-      def navigation_item_params
-        params.require(:navigation_item).permit(:page_id, :parent_id).merge(navigation_id: @navigation.id)
-      end
+        def navigation_item_params
+          params.require(:navigation_item).permit(:kind, :page_id, :parent_id, :url_title, :url).merge(navigation_id: @navigation.id)
+        end
+  
+        def set_navigation
+          @navigation = Navigation.find(params[:navigation_id])
+        end
 
-      def set_navigation
-        @navigation = Navigation.find(params[:navigation_id])
-      end
     end
   end
 end

data/app/models/spina/account.rb

@@ -5,7 +5,7 @@ module Spina
     include Partable
     include TranslatedContent
 
-    serialize :preferences
+    serialize :preferences, coder: Psych
 
     after_save :bootstrap_website
 
@@ -72,9 +72,16 @@ module Spina
 
     def find_or_create_custom_pages(theme)
       theme.custom_pages.each do |page|
+        ancestry = nil
+
+        if page[:parent].present?
+          parent_page = Page.find_by(name: page[:parent])
+          ancestry = [parent_page&.ancestry, parent_page&.id].compact.join("/")
+        end
+        
         Page.where(name: page[:name])
           .first_or_create(title: page[:title])
-          .update(view_template: page[:view_template], deletable: page[:deletable])
+          .update(view_template: page[:view_template], deletable: page[:deletable], ancestry: ancestry)
       end
     end
 

data/app/models/spina/navigation_item.rb

@@ -1,18 +1,35 @@
 module Spina
   class NavigationItem < ApplicationRecord
-    belongs_to :navigation, touch: true
-    belongs_to :page
+    belongs_to :navigation, touch: true, class_name: "Spina::Navigation"
+    belongs_to :page, optional: true, class_name: "Spina::Page"
+    
+    # NavigationItems can be of two different kinds:
+    # - A link to a page
+    # - A link to a URL
+    enum(:kind, {page: "page", url: "url"}, default: :page, suffix: true)
 
     has_ancestry
 
     scope :regular_pages, -> { joins(:page).where(spina_pages: {resource_id: nil}) }
     scope :sorted, -> { order("spina_navigation_items.position") }
-    scope :live, -> { joins(:page).where(spina_pages: {draft: false, active: true}) }
-    scope :in_menu, -> { joins(:page).where(spina_pages: {show_in_menu: true}) }
-    scope :active, -> { joins(:page).where(spina_pages: {active: true}) }
+    scope :live, -> { left_outer_joins(:page).where("spina_pages.draft = ? AND spina_pages.active = ? OR spina_pages.id IS NULL", false, true) }
+    scope :in_menu, -> { left_outer_joins(:page).where("spina_pages.show_in_menu = ? OR spina_pages.id IS NULL", true) }
+    scope :active, -> { left_outer_joins(:page).where("spina_pages.active = ? OR spina_pages.id IS NULL", true) }
 
-    validates :page, uniqueness: {scope: :navigation}
+    validates :page, uniqueness: {scope: :navigation}, presence: true, if: :page_kind?
+    validates :url, presence: true, if: :url_kind?
+    validates :url_title, presence: true, if: :url_kind?
 
-    delegate :menu_title, :materialized_path, :draft?, :homepage?, to: :page
+    delegate :draft?, :homepage?, to: :page, allow_nil: true
+
+    def menu_title
+      return url_title if url_kind?
+      page&.menu_title
+    end
+    
+    def materialized_path
+      return url if url_kind?
+      page&.materialized_path
+    end
   end
 end