panda-cms 0.10.0 → 0.10.2

data/app/helpers/panda/cms/asset_helper.rb

@@ -24,51 +24,9 @@ module Panda
       end
 
       # Include only Panda CMS JavaScript
-      def panda_cms_javascript
-        js_url = Panda::CMS::AssetLoader.javascript_url
-        return "" unless js_url
-
-        if Panda::CMS::AssetLoader.use_github_assets?
-          # GitHub-hosted assets with integrity check
-          version = Panda::CMS::AssetLoader.send(:asset_version)
-          integrity = asset_integrity(version, "panda-cms-#{version}.js")
-
-          tag_options = {
-            src: js_url
-          }
-          # In CI environment, don't use defer to ensure immediate execution
-          tag_options[:defer] = true unless ENV["GITHUB_ACTIONS"] == "true"
-          # Standalone bundles should NOT use type: "module" - they're regular scripts
-          # Only use type: "module" for importmap/ES module assets
-          if !js_url.include?("panda-cms-assets")
-            tag_options[:type] = "module"
-          end
-          tag_options[:integrity] = integrity if integrity
-          tag_options[:crossorigin] = "anonymous" if integrity
-
-          content_tag(:script, "", tag_options)
-        elsif js_url.include?("panda-cms-assets")
-          # Development assets - check if it's a standalone bundle or importmap
-          defer_option = (ENV["GITHUB_ACTIONS"] == "true") ? {} : {defer: true}
-          javascript_include_tag(js_url, **defer_option)
-        # Standalone bundle - don't use type: "module"
-        else
-          # Development mode - Load JavaScript with import map
-          # Files are served by Rack::Static middleware from engine's app/javascript
-          importmap_html = <<~HTML
-            <script type="importmap">
-              {
-                "imports": {
-                  "@hotwired/stimulus": "/panda/core/vendor/@hotwired--stimulus.js",
-                  "@hotwired/turbo": "/panda/core/vendor/@hotwired--turbo.js"
-                }
-              }
-            </script>
-            <script type="module" src="/panda/cms/application_panda_cms.js"></script>
-          HTML
-          importmap_html.html_safe
-        end
-      end
+      #
+      # Delegates to Core's helper which automatically includes all registered modules.
+      alias_method :panda_cms_javascript, :panda_core_javascript
 
       # Include only Panda CMS CSS
       def panda_cms_stylesheet
@@ -117,39 +75,16 @@ module Panda
         version = Panda::CMS::VERSION
         js_url = Panda::CMS::AssetLoader.javascript_url
         css_url = Panda::CMS::AssetLoader.css_url
-        using_github = Panda::CMS::AssetLoader.use_github_assets?
-        compiled_available = Panda::CMS::AssetLoader.send(:compiled_assets_available?)
-
-        # Additional CI debugging
-        asset_file_exists = js_url && File.exist?(Rails.root.join("public#{js_url}"))
-        ci_env = ENV["GITHUB_ACTIONS"] == "true"
-
-        # Check what script tag will be generated
-        script_tag_preview = if using_github
-          tag_options = {src: js_url}
-          tag_options[:defer] = true unless ci_env
-          if !js_url.include?("panda-cms-assets")
-            tag_options[:type] = "module"
-          end
-          "Script tag: <script#{tag_options.map { |k, v| (v == true) ? " #{k}" : " #{k}=\"#{v}\"" }.join}></script>"
-        else
-          "Using development assets"
-        end
+        Panda::CMS::AssetLoader.use_github_assets?
 
         debug_info = [
           "<!-- Panda CMS Asset Debug Info -->",
           "<!-- Version: #{version} -->",
-          "<!-- Using GitHub assets: #{using_github} -->",
-          "<!-- Compiled assets available: #{compiled_available} -->",
+          "<!-- Using importmaps: true (no compilation) -->",
           "<!-- JavaScript URL: #{js_url} -->",
-          "<!-- CSS URL: #{css_url || "none"} -->",
+          "<!-- CSS URL: #{css_url || "CSS from panda-core"} -->",
           "<!-- Rails environment: #{Rails.env} -->",
-          "<!-- Asset file exists: #{asset_file_exists} -->",
-          "<!-- Rails root: #{Rails.root} -->",
-          "<!-- CI environment: #{ci_env} -->",
-          "<!-- #{script_tag_preview} -->",
-          "<!-- Params embed_id: #{params[:embed_id] if respond_to?(:params)} -->",
-          "<!-- Compiled at: #{Time.now.utc.iso8601} -->"
+          "<!-- Rails root: #{Rails.root} -->"
         ]
 
         debug_info.join("\n").html_safe
@@ -194,6 +129,13 @@ module Panda
         ].join("\n").html_safe
       end
 
+      # Returns asset HTML for injection into iframe
+      # Used by editor_iframe_controller to inject assets dynamically
+      # Returns the raw HTML string (not JSON-encoded)
+      def panda_cms_injectable_assets
+        panda_cms_complete_assets.to_s
+      end
+
       private
 
       def asset_integrity(version, filename)

data/app/helpers/panda/cms/forms_helper.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module FormsHelper
+      # Generates a hidden timing field for spam protection
+      # This should be included in all forms that submit to Panda::CMS::FormSubmissionsController
+      #
+      # @example In your form
+      #   <%= form_with url: form_submissions_path(form.id), method: :post do |f| %>
+      #     <%= panda_cms_form_timestamp %>
+      #     <%= f.text_field :name %>
+      #     <%= f.submit "Submit" %>
+      #   <% end %>
+      #
+      # @return [String] HTML hidden input with current timestamp
+      def panda_cms_form_timestamp
+        hidden_field_tag "_form_timestamp", Time.current.to_i
+      end
+
+      # Generates a complete spam-protected form wrapper
+      # Includes timing protection and invisible captcha honeypot
+      #
+      # @param form [Panda::CMS::Form] The form model
+      # @param options [Hash] Additional options for form_with
+      # @yield [FormBuilder] The form builder
+      #
+      # @example
+      #   <%= panda_cms_protected_form(form) do |f| %>
+      #     <%= f.text_field :name %>
+      #     <%= f.email_field :email %>
+      #     <%= f.text_area :message %>
+      #     <%= f.submit "Send Message" %>
+      #   <% end %>
+      def panda_cms_protected_form(form, options = {}, &block)
+        default_options = {
+          url: "/forms/#{form.id}",
+          method: :post,
+          data: {turbo: false}
+        }
+
+        form_with(**default_options.merge(options)) do |f|
+          concat panda_cms_form_timestamp
+          concat invisible_captcha_field
+          yield f
+        end
+      end
+
+      # Generates the invisible captcha honeypot field
+      # This is a hidden field that bots typically fill out but humans don't
+      #
+      # @return [String] HTML for invisible captcha field
+      def invisible_captcha_field
+        # invisible_captcha gem automatically adds this, but we can add it manually if needed
+        # The field name "spinner" is configured in invisible_captcha initializer
+        text_field_tag :spinner, nil, style: "position: absolute; left: -9999px; width: 1px; height: 1px;", tabindex: -1, autocomplete: "off", aria_hidden: true
+      end
+    end
+  end
+end

data/app/helpers/panda/cms/seo_helper.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module Panda
+  module CMS
+    module SEOHelper
+      #
+      # Renders all SEO meta tags for a given page or post
+      #
+      # @param resource [Panda::CMS::Page, Panda::CMS::Post] The page or post to render meta tags for
+      # @return [String] HTML meta tags
+      # @visibility public
+      #
+      def render_seo_meta_tags(resource)
+        return "" if resource.blank?
+
+        tags = []
+
+        # Basic SEO tags
+        tags << tag.meta(name: "description", content: resource.effective_seo_description) if resource.effective_seo_description.present?
+        tags << tag.meta(name: "keywords", content: resource.seo_keywords) if resource.seo_keywords.present?
+        tags << tag.meta(name: "robots", content: resource.robots_meta_content)
+        tags << tag.link(rel: "canonical", href: canonical_url_for(resource))
+
+        # Open Graph tags
+        tags << tag.meta(property: "og:title", content: resource.effective_og_title)
+        tags << tag.meta(property: "og:description", content: resource.effective_og_description) if resource.effective_og_description.present?
+        tags << tag.meta(property: "og:type", content: resource.og_type)
+        tags << tag.meta(property: "og:url", content: canonical_url_for(resource))
+
+        # Open Graph image
+        if resource.og_image.attached?
+          og_image_url = url_for(resource.og_image.variant(:og_share))
+          tags << tag.meta(property: "og:image", content: og_image_url)
+          tags << tag.meta(property: "og:image:width", content: "1200")
+          tags << tag.meta(property: "og:image:height", content: "630")
+        end
+
+        # Twitter Card tags (with fallback to OG)
+        tags << tag.meta(name: "twitter:card", content: "summary_large_image")
+        tags << tag.meta(name: "twitter:title", content: resource.effective_og_title)
+        tags << tag.meta(name: "twitter:description", content: resource.effective_og_description) if resource.effective_og_description.present?
+
+        # Twitter image (same as OG)
+        if resource.og_image.attached?
+          tags << tag.meta(name: "twitter:image", content: url_for(resource.og_image.variant(:og_share)))
+        end
+
+        safe_join(tags, "\n")
+      end
+
+      #
+      # Renders just the page title with SEO optimization
+      #
+      # @param resource [Panda::CMS::Page, Panda::CMS::Post] The page or post
+      # @param separator [String] Separator between page title and site name
+      # @param site_name [String] The site name (optional)
+      # @return [String] Formatted page title
+      # @visibility public
+      #
+      def seo_title(resource, separator: " · ", site_name: nil)
+        parts = [resource.effective_seo_title]
+        parts << site_name if site_name.present?
+        safe_join(parts, separator)
+      end
+
+      private
+
+      #
+      # Generates the full canonical URL for a resource
+      #
+      # @param resource [Panda::CMS::Page, Panda::CMS::Post] The page or post
+      # @return [String] Full canonical URL
+      # @visibility private
+      #
+      def canonical_url_for(resource)
+        # If canonical_url is a full URL, use it as-is
+        return resource.canonical_url if resource.canonical_url&.match?(%r{\Ahttps?://})
+
+        # Otherwise, construct from the path
+        path = resource.effective_canonical_url
+        "#{request.protocol}#{request.host_with_port}#{path}"
+      end
+    end
+  end
+end

data/app/javascript/panda/cms/{application_panda_cms.js → application.js}

@@ -3,5 +3,9 @@ console.debug("[Panda CMS] Controllers loading...");
 import "./controllers/index.js"
 console.debug("[Panda CMS] Controllers loaded...");
 
+// Mark that Panda CMS JavaScript has loaded
+window.pandaCmsLoaded = true
+console.debug("[Panda CMS] Ready!");
+
 // Editor resources are now handled by panda-editor gem
 // The panda-editor gem will load its own resources when needed

data/app/javascript/panda/cms/controllers/editor_iframe_controller.js

@@ -8,7 +8,8 @@ export default class extends Controller {
   static values = {
     pageId: Number,
     adminPath: String,
-    autosave: Boolean
+    autosave: Boolean,
+    assets: String
   }
 
   connect() {
@@ -65,6 +66,33 @@ export default class extends Controller {
       this.body = this.frameDocument.body
       this.head = this.frameDocument.head
 
+      // Inject CMS assets into the iframe head
+      if (this.hasAssetsValue && this.assetsValue) {
+        console.debug("[Panda CMS] Injecting assets into iframe", {
+          assetsLength: this.assetsValue.length,
+          assetsPreview: this.assetsValue.substring(0, 200)
+        })
+        const assetsHTML = this.assetsValue
+        const tempDiv = document.createElement('div')
+        tempDiv.innerHTML = assetsHTML
+
+        // Append each node to the iframe's head
+        Array.from(tempDiv.childNodes).forEach(node => {
+          if (node.nodeType === Node.ELEMENT_NODE || node.nodeType === Node.TEXT_NODE) {
+            const importedNode = this.frameDocument.importNode(node, true)
+            this.head.appendChild(importedNode)
+            console.debug("[Panda CMS] Injected node:", node.nodeName)
+          }
+        })
+
+        console.debug("[Panda CMS] Assets injected successfully - head element count:", this.head.children.length)
+      } else {
+        console.warn("[Panda CMS] No assets to inject", {
+          hasAssetsValue: this.hasAssetsValue,
+          assetsValue: this.assetsValue
+        })
+      }
+
       // Ensure iframe content is properly positioned but doesn't block UI
       this.body.style.position = "relative"
       this.body.style.zIndex = "1"
@@ -545,11 +573,10 @@ export default class extends Controller {
   }
 
   setupSlideoverHandling() {
-    // Watch for slideover toggle
-    const slideoverToggle = document.getElementById('slideover-toggle')
+    // Watch for slideover visibility changes
     const slideover = document.getElementById('slideover')
 
-    if (slideoverToggle && slideover) {
+    if (slideover) {
       const observer = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
           if (mutation.attributeName === 'class') {

data/app/javascript/panda/cms/controllers/file_upload_controller.js

@@ -0,0 +1,165 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["input", "preview", "dropzone", "fileInfo", "removeButton"]
+
+  connect() {
+    // Setup drag and drop handlers
+    if (this.hasDropzoneTarget) {
+      this.setupDragAndDrop()
+    }
+  }
+
+  setupDragAndDrop() {
+    const dropzone = this.dropzoneTarget
+
+    // Prevent default drag behaviors
+    ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.preventDefaults.bind(this), false)
+      document.body.addEventListener(eventName, this.preventDefaults.bind(this), false)
+    })
+
+    // Highlight drop zone when item is dragged over it
+    ['dragenter', 'dragover'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.highlight.bind(this), false)
+    })
+
+    ;['dragleave', 'drop'].forEach(eventName => {
+      dropzone.addEventListener(eventName, this.unhighlight.bind(this), false)
+    })
+
+    // Handle dropped files
+    dropzone.addEventListener('drop', this.handleDrop.bind(this), false)
+  }
+
+  preventDefaults(e) {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
+  highlight(e) {
+    this.dropzoneTarget.classList.add('border-indigo-600', 'bg-indigo-50', 'dark:bg-indigo-950', 'dark:border-indigo-400')
+  }
+
+  unhighlight(e) {
+    this.dropzoneTarget.classList.remove('border-indigo-600', 'bg-indigo-50', 'dark:bg-indigo-950', 'dark:border-indigo-400')
+  }
+
+  handleDrop(e) {
+    const dt = e.dataTransfer
+    const files = dt.files
+
+    if (files.length > 0) {
+      // Update the file input with the dropped file
+      this.inputTarget.files = files
+      this.handleFileSelect()
+    }
+  }
+
+  // Triggered when user selects file via input or drag-drop
+  handleFileSelect() {
+    const file = this.inputTarget.files[0]
+
+    if (!file) {
+      return
+    }
+
+    // Show file preview if it's an image
+    if (file.type.startsWith('image/')) {
+      this.showImagePreview(file)
+    } else {
+      this.showFileInfo(file)
+    }
+  }
+
+  showImagePreview(file) {
+    const reader = new FileReader()
+
+    reader.onload = (e) => {
+      if (this.hasPreviewTarget) {
+        // Create or update preview image
+        const existingImage = this.previewTarget.querySelector('img')
+        if (existingImage) {
+          existingImage.src = e.target.result
+        } else {
+          const img = document.createElement('img')
+          img.src = e.target.result
+          img.className = 'max-w-xs rounded border border-gray-300 dark:border-gray-600'
+          this.previewTarget.innerHTML = ''
+          this.previewTarget.appendChild(img)
+        }
+        this.previewTarget.classList.remove('hidden')
+      }
+
+      // Show file info with remove button
+      this.showFileInfo(file, true)
+    }
+
+    reader.readAsDataURL(file)
+  }
+
+  showFileInfo(file, withPreview = false) {
+    if (!this.hasFileInfoTarget) {
+      return
+    }
+
+    const fileSize = this.humanFileSize(file.size)
+    const fileName = file.name
+
+    this.fileInfoTarget.innerHTML = `
+      <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-md">
+        <div class="flex items-center gap-x-3 flex-1 min-w-0">
+          <svg class="size-8 text-gray-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+          </svg>
+          <div class="flex-1 min-w-0">
+            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">${fileName}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">${fileSize}</p>
+          </div>
+        </div>
+        <button type="button"
+                data-action="click->file-upload#removeFile"
+                class="flex-shrink-0 ml-3 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300">
+          <svg class="size-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+    `
+    this.fileInfoTarget.classList.remove('hidden')
+
+    // Hide the dropzone upload area
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.add('hidden')
+    }
+  }
+
+  removeFile() {
+    // Clear the file input
+    this.inputTarget.value = ''
+
+    // Hide preview and file info
+    if (this.hasPreviewTarget) {
+      this.previewTarget.classList.add('hidden')
+      this.previewTarget.innerHTML = ''
+    }
+
+    if (this.hasFileInfoTarget) {
+      this.fileInfoTarget.classList.add('hidden')
+      this.fileInfoTarget.innerHTML = ''
+    }
+
+    // Show the dropzone again
+    if (this.hasDropzoneTarget) {
+      this.dropzoneTarget.classList.remove('hidden')
+    }
+  }
+
+  humanFileSize(bytes) {
+    if (bytes === 0) return '0 Bytes'
+    const k = 1024
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return Math.round((bytes / Math.pow(k, i)) * 100) / 100 + ' ' + sizes[i]
+  }
+}

data/app/javascript/panda/cms/controllers/index.js

@@ -21,6 +21,12 @@ pandaCmsApplication.register("tree", TreeController)
 import FileGalleryController from "./file_gallery_controller.js"
 pandaCmsApplication.register("file-gallery", FileGalleryController)
 
+import FileUploadController from "./file_upload_controller.js"
+pandaCmsApplication.register("file-upload", FileUploadController)
+
+import PageFormController from "./page_form_controller.js"
+pandaCmsApplication.register("page-form", PageFormController)
+
 import NestedFormController from "./nested_form_controller.js"
 pandaCmsApplication.register("nested-form", NestedFormController)
 

data/app/javascript/panda/cms/controllers/menu_form_controller.js

@@ -10,25 +10,38 @@ export default class extends Controller {
   }
 
   kindChanged(event) {
+    console.log("[menu-form] kindChanged called", event)
     this.updateFieldsVisibility()
   }
 
   updateFieldsVisibility() {
+    console.log("[menu-form] updateFieldsVisibility called")
     const kindSelect = this.element.querySelector('select[name*="[kind]"]')
-    if (!kindSelect) return
+    console.log("[menu-form] kindSelect found:", !!kindSelect)
+
+    if (!kindSelect) {
+      console.error("[menu-form] Could not find kind select!")
+      return
+    }
 
     const selectedKind = kindSelect.value
+    console.log("[menu-form] selectedKind:", selectedKind)
 
     if (selectedKind === "auto") {
       // Show start page field, hide menu items section
+      console.log("[menu-form] AUTO - Showing start page field")
       if (this.hasStartPageFieldTarget) {
+        console.log("[menu-form] Removing hidden from start page field")
         this.startPageFieldTarget.classList.remove("hidden")
+      } else {
+        console.error("[menu-form] Start page field target not found!")
       }
       if (this.hasMenuItemsSectionTarget) {
         this.menuItemsSectionTarget.classList.add("hidden")
       }
     } else {
       // Hide start page field, show menu items section
+      console.log("[menu-form] STATIC - Hiding start page field")
       if (this.hasStartPageFieldTarget) {
         this.startPageFieldTarget.classList.add("hidden")
       }