panda-cms 0.8.2 → 0.10.2

data/app/views/panda/cms/admin/menus/_menu_item_fields.html.erb

@@ -0,0 +1,11 @@
+<div class="mb-6 pb-6 border-b border-gray-200 dark:border-gray-700 nested-form-wrapper" data-new-record="<%= form.object.new_record? %>">
+  <%= form.text_field :text, label: "Menu Item Text" %>
+  <%= form.collection_select :panda_cms_page_id, Panda::CMS::Page.order(:title), :id, :title, { include_blank: "Select a page (optional)", label: "Page" }, { class: "mt-1" } %>
+  <%= form.text_field :external_url, label: "External URL (optional)" %>
+
+  <div class="mt-3">
+    <%= render Panda::Core::Admin::ButtonComponent.new(text: "Remove", action: :delete, link: "#", size: :small, data: { action: "click->nested-form#remove" }) %>
+  </div>
+
+  <%= form.hidden_field :_destroy %>
+</div>

data/app/views/panda/cms/admin/menus/edit.html.erb

@@ -0,0 +1,62 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.heading(text: "Edit Menu: #{@menu.name}", level: 1) %>
+
+  <%= panda_cms_form_with model: @menu, url: admin_cms_menu_path(@menu), method: :put, data: { controller: "menu-form" } do |f| %>
+    <%= render Panda::Core::Admin::FormErrorComponent.new(model: @menu) %>
+
+    <%= f.text_field :name %>
+    <%= f.select :kind, options_for_select([["Static", "static"], ["Auto", "auto"]], selected: @menu.kind), {}, { data: { action: "change->menu-form#kindChanged" } } %>
+
+    <div data-menu-form-target="startPageField" class="<%= 'hidden' unless @menu.kind == 'auto' %>">
+      <%= f.collection_select :start_page_id, Panda::CMS::Page.order(:title), :id, :title, { include_blank: "Select a page...", label: "Start Page" }, { class: "mt-1" } %>
+    </div>
+
+      <% if @menu.kind == "static" %>
+        <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+          <% panel.heading(text: "Menu Items") %>
+
+          <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".nested-form-wrapper">
+            <template data-nested-form-target="template">
+              <%= f.fields_for :menu_items, Panda::CMS::MenuItem.new, child_index: "NEW_RECORD" do |item_form| %>
+                <%= render "menu_item_fields", form: item_form %>
+              <% end %>
+            </template>
+
+            <div class="space-y-4">
+              <% if @menu.menu_items.any? %>
+                <%= f.fields_for :menu_items, @menu.menu_items.sort_by(&:lft) do |item_form| %>
+                  <%= render "menu_item_fields", form: item_form %>
+                <% end %>
+              <% end %>
+            </div>
+
+            <div data-nested-form-target="target"></div>
+
+            <div class="mt-4">
+              <%= render Panda::Core::Admin::ButtonComponent.new(text: "Add Menu Item", action: :add, link: "#", size: :small, data: { action: "click->nested-form#add" }) %>
+            </div>
+          </div>
+        <% end %>
+      <% else %>
+        <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+          <% panel.heading(text: "Auto-Generated Menu Items") %>
+
+          <% if @menu.menu_items.any? %>
+            <%= render Panda::Core::Admin::TableComponent.new(term: "menu item", rows: @menu.menu_items.root.self_and_descendants) do |table| %>
+              <% table.column("Text") do |menu_item| %>
+                <div class="<%= "ml-#{menu_item.depth * 6}" %>">
+                  <%= menu_item.text %>
+                </div>
+              <% end %>
+              <% table.column("Page") { |menu_item| menu_item.page&.title } %>
+              <% table.column("Path") { |menu_item| menu_item.page&.path } %>
+            <% end %>
+          <% else %>
+            <p class="text-sm text-gray-500 dark:text-gray-400">No menu items generated yet. Select a start page and save to generate menu items.</p>
+          <% end %>
+        <% end %>
+      <% end %>
+
+    <%= f.button "Save Menu" %>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/menus/index.html.erb

@@ -1,8 +1,9 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Menus", level: 1) do |heading| %>
+  <% component.heading(text: "Menus", level: 1) do |heading| %>
+    <% heading.button(action: :add, text: "New Menu", href: new_admin_cms_menu_path) %>
   <% end %>
   <%= render Panda::Core::Admin::TableComponent.new(term: "menu", rows: menus) do |table| %>
     <% table.column("Name") { |menu| link_to menu.name, edit_admin_cms_menu_path(menu) } %>
-    <% table.column("Kind") { |menu| render Panda::Core::Admin::TagComponent.new(status: :active, text: menu.kind.titleize) } %>
+    <% table.column("Kind") { |menu| render Panda::Core::Admin::TagComponent.new(status: menu.kind.to_sym) } %>
   <% end %>
 <% end %>

data/app/views/panda/cms/admin/menus/new.html.erb

@@ -0,0 +1,38 @@
+<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
+  <% component.heading(text: "New Menu", level: 1) %>
+
+  <%= panda_cms_form_with model: menu, url: admin_cms_menus_path, method: :post, data: { controller: "menu-form" } do |f| %>
+    <%= render Panda::Core::Admin::FormErrorComponent.new(model: menu) %>
+
+    <%= f.text_field :name %>
+    <%= f.select :kind, options_for_select([["Static", "static"], ["Auto", "auto"]], selected: menu.kind || "static"), {}, { data: { action: "change->menu-form#kindChanged" } } %>
+
+    <div data-menu-form-target="startPageField" class="hidden">
+      <%= f.collection_select :start_page_id, Panda::CMS::Page.order(:title), :id, :title, { include_blank: "Select a page...", label: "Start Page" }, { class: "mt-1" } %>
+    </div>
+
+    <div data-menu-form-target="menuItemsSection">
+        <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
+          <% panel.heading(text: "Menu Items") %>
+
+          <div data-controller="nested-form" data-nested-form-wrapper-selector-value=".nested-form-wrapper">
+            <template data-nested-form-target="template">
+              <%= f.fields_for :menu_items, Panda::CMS::MenuItem.new, child_index: "NEW_RECORD" do |item_form| %>
+                <%= render "menu_item_fields", form: item_form %>
+              <% end %>
+            </template>
+
+            <div class="space-y-4"></div>
+
+            <div data-nested-form-target="target"></div>
+
+            <div class="mt-4">
+              <%= render Panda::Core::Admin::ButtonComponent.new(text: "Add Menu Item", action: :add, link: "#", size: :small, data: { action: "click->nested-form#add" }) %>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+    <%= f.button "Create Menu" %>
+  <% end %>
+<% end %>

data/app/views/panda/cms/admin/pages/edit.html.erb

@@ -1,27 +1,151 @@
-<%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "#{page.title}", level: 1) %>
+<%= render Panda::Core::Admin::ContainerComponent.new(full_height: true) do |component| %>
+  <% component.heading(text: "#{page.title}", level: 1, meta: (link_to page.path, target: "_blank", class: "text-black/60 hover:text-black/80 inline-flex items-center gap-x-1" do
+    raw("#{page.path}<i class='fa-solid fa-arrow-up-right-from-square text-xs ml-1'></i>")
+  end)) do |h| %>
+    <% h.button(text: "Page Details", action: :secondary, as_button: true, size: :regular, id: "open-page-details", icon: "gear", data: { action: "click->toggle#toggle touch->toggle#toggle" }) %>
+    <% h.button(text: "Save Changes", action: :save, href: "#", size: :regular, id: "saveEditableButton", icon: "check") %>
+  <% end %>
   <% component.with_slideover(title: "Page Details") do %>
-    <%= panda_cms_form_with model: page, url: admin_cms_page_path, method: :put do |f| %>
-      <%= f.text_field :title, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
-      <%= f.text_field :template, value: template.name,  readonly: true, class: "read-only:bg-gray-100 block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
-      <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: page.status), {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
-      <%= f.submit "Save" %>
+    <% parent_seo_data = page.parent ? {
+      seoTitle: page.parent.seo_title,
+      seoDescription: page.parent.seo_description,
+      seoKeywords: page.parent.seo_keywords,
+      canonicalUrl: page.parent.canonical_url,
+      ogTitle: page.parent.og_title,
+      ogDescription: page.parent.og_description,
+      ogType: page.parent.og_type
+    }.to_json : '{}' %>
+    <% ai_generation_url = begin
+         admin_cms_pro_ai_generate_seo_path(page.id)
+       rescue NoMethodError
+         nil
+       end %>
+    <%= panda_cms_form_with model: page, url: admin_cms_page_path, method: :put, id: "page-form", data: {
+      controller: "page-form",
+      page_form_parent_seo_data_value: parent_seo_data,
+      page_form_page_id_value: page.id,
+      page_form_ai_generation_url_value: ai_generation_url
+    } do |f| %>
+      <%= f.text_field :title, { data: { page_form_target: "pageTitle" } } %>
+      <%= f.text_field :template, value: template.name, readonly: true %>
+      <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: page.status) %>
+      <% if page.page_type.in?(["system", "posts"]) %>
+        <%= f.text_field :page_type, value: page.page_type.humanize, readonly: true %>
+      <% else %>
+        <%= f.select :page_type, options_for_select([["Standard", "standard"], ["Hidden", "hidden"], ["Code", "code"]], selected: page.page_type) %>
+      <% end %>
+
+      <%= f.section_heading "SEO Settings" %>
+
+      <% if defined?(Panda::CMS::Pro) && ai_generation_url.present? %>
+        <div class="mb-4">
+          <%= render Panda::Core::Admin::ButtonComponent.new(
+            text: "Generate With AI",
+            action: :save,
+            icon: "wand-magic-sparkles",
+            size: :regular,
+            as_button: true,
+            data: {
+              action: "click->page-form#generateSeoWithAI",
+              page_form_target: "generateButton"
+            }
+          ) %>
+          <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">Uses AI to analyze page content and generate optimized SEO fields.</p>
+        </div>
+      <% end %>
+
+      <% unless page.parent_id.nil? %>
+        <%= f.check_box :inherit_seo, {
+          label: "Inherit SEO from parent page",
+          data: {
+            page_form_target: "inheritCheckbox",
+            action: "change->page-form#toggleInherit"
+          }
+        } %>
+      <% end %>
+
+      <div class="space-y-4">
+        <%= f.text_field :seo_title, {
+          meta: "Max 70 characters. Leave blank to use page title.",
+          max_length: 70,
+          data: { page_form_target: "seoTitle" }
+        } %>
+        <%= f.text_area :seo_description, {
+          rows: 3,
+          meta: "Max 160 characters. Shown in search results.",
+          max_length: 160,
+          data: { page_form_target: "seoDescription" }
+        } %>
+        <%= f.text_field :seo_keywords, {
+          meta: "Comma-separated keywords for search engines.",
+          data: { page_form_target: "seoKeywords" }
+        } %>
+        <%= f.radio_button_group :seo_index_mode,
+            [["Visible to search engines", "visible"], ["Hidden from search engines", "invisible"]],
+            { meta: "Control how search engines index this page." } %>
+        <%= f.text_field :canonical_url, {
+          meta: "Optional. Full URL to the canonical version of this page.",
+          data: { page_form_target: "canonicalUrl" }
+        } %>
+      </div>
+
+      <%= f.section_heading "Social Sharing" %>
+
+      <div class="space-y-4">
+        <%= f.text_field :og_title, {
+          label: "Social Media Title",
+          meta: "Max 60 characters. Leave blank to use SEO title.",
+          max_length: 60,
+          data: { page_form_target: "ogTitle" }
+        } %>
+        <%= f.text_area :og_description, {
+          label: "Social Media Description",
+          rows: 2,
+          meta: "Max 200 characters. Used on Facebook, LinkedIn, Twitter.",
+          max_length: 200,
+          data: { page_form_target: "ogDescription" }
+        } %>
+        <%= f.select :og_type,
+            options_for_select(
+              [["Website", "website"], ["Article", "article"], ["Profile", "profile"], ["Video", "video"], ["Book", "book"]],
+              selected: page.og_type
+            ),
+            { label: "Content Type" },
+            { data: { page_form_target: "ogType" } } %>
+        <%= f.file_field :og_image, {
+          label: "Social Media Image",
+          meta: "Recommended: 1200×630px (1.91:1 ratio). Used on Facebook, LinkedIn, Twitter.",
+          accept: "image/png,image/jpeg,image/jpg,image/webp",
+          with_cropper: true,
+          aspect_ratio: 1.91,
+          min_width: 1200,
+          min_height: 630
+        } %>
+        <% if page.og_image.attached? %>
+          <div class="mt-2">
+            <%= image_tag page.og_image.variant(:og_share), class: "max-w-xs rounded border border-gray-300" %>
+          </div>
+        <% end %>
+      </div>
     <% end %>
   <% end %>
-  <div id="successMessage" class="hidden">
-    <%= render Panda::Core::Admin::FlashMessageComponent.new(kind: "success", message: "This page was successfully updated!", temporary: false) %>
-  </div>
-  <div id="errorMessage" class="hidden">
-    <%= render Panda::Core::Admin::FlashMessageComponent.new(kind: "error", message: "There was an error updating this page.", temporary: false) %>
-  </div>
-  <div class="grid grid-cols-2 mb-4 -mt-5">
-    <div>
-      <a class="inline-block mb-2 text-sm text-black/60" target="_blank" href="<%= @page.path %>"><%= @page.path %> <i class="ml-2 fa-solid fa-arrow-up-right-from-square"></i></a>
-    </div>
-    <div class="relative -mt-5">
-      <span class="absolute right-0"><%= render Panda::Core::Admin::ButtonComponent.new(text: "Save Changes", action: :save_inactive, icon: "check", link: "#", size: :regular, id: "saveEditableButton") %></span>
-    </div>
-  </div>
+  <% component.with_footer do %>
+    <button type="button" data-action="click->toggle#toggle touch->toggle#toggle" class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring inset-ring-gray-300 hover:bg-gray-50 cursor-pointer dark:bg-white/10 dark:text-gray-100 dark:shadow-none dark:inset-ring-white/5 dark:hover:bg-white/20">
+      <i class="fa-solid fa-xmark"></i> Cancel
+    </button>
+    <button type="submit" form="page-form" class="inline-flex items-center gap-x-1.5 justify-center rounded-md bg-mid px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-mid/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-mid cursor-pointer dark:shadow-none">
+      <i class="fa-solid fa-check"></i> Save
+    </button>
+  <% end %>
+
+  <%= content_tag :div, id: "successMessage", class: "hidden fixed top-4 right-4 z-50" do %>
+    <%= render Panda::Core::Admin::FlashMessageComponent.new(kind: :success, message: "This page was successfully updated!", temporary: false) %>
+  <% end %>
+
+  <%= content_tag :div, id: "errorMessage", class: "hidden fixed top-4 right-4 z-50" do %>
+    <%= render Panda::Core::Admin::FlashMessageComponent.new(kind: :error, message: "There was an error updating this page.", temporary: false) %>
+  <% end %>
+
   <%= content_tag :iframe, nil,
       src: "#{page.path}?embed_id=#{page.id}",
       class: "p-0 m-0 w-full h-full border border-slate-200",
@@ -31,6 +155,7 @@
         controller: "editor-iframe",
         editor_iframe_page_id_value: @page.id,
         editor_iframe_admin_path_value: "#{admin_cms_dashboard_url}",
-        editor_iframe_autosave_value: false
+        editor_iframe_autosave_value: false,
+        editor_iframe_assets_value: panda_cms_injectable_assets
       } %>
 <% end %>

data/app/views/panda/cms/admin/pages/index.html.erb

@@ -1,19 +1,57 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Pages", level: 1) do |heading| %>
-    <% heading.with_button(action: :add, text: "Add Page", link: new_admin_cms_page_path) %>
+  <% component.heading(text: "Pages", level: 1) do |heading| %>
+    <% heading.button(action: :add, text: "Add Page", href: new_admin_cms_page_path) %>
   <% end %>
 
   <% if root_page %>
-    <%= render Panda::Core::Admin::TableComponent.new(term: "page", rows: root_page.self_and_descendants) do |table| %>
-      <% table.column("Name") do |page| %>
-        <div class="<%= table_indent(page) %>">
-          <%= link_to page.title, edit_admin_cms_page_path(page), class: "block h-full w-full" %>
-          <span class="block text-xs text-black/60"><%= page.path %></span>
-        </div>
+    <div data-controller="tree" data-tree-target="container" style="opacity: 0; transition: opacity 0.2s;">
+      <%= render Panda::Core::Admin::TableComponent.new(term: "page", rows: root_page.self_and_descendants) do |table| %>
+        <% table.column("Name") do |page| %>
+          <div class="flex items-start" data-tree-target="row" data-page-id="<%= page.id %>" data-level="<%= page.level %>" data-parent-id="<%= page.parent_id %>">
+            <div class="flex-1 min-w-0">
+              <%# Add indentation for nested levels %>
+              <% indent_class = case page.level
+                 when 0 then ""
+                 when 1 then "ml-4"
+                 when 2 then "ml-8"
+                 else "ml-12"
+                 end %>
+              <div class="flex items-start <%= indent_class %>">
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <%# Chevron/icon section %>
+                    <% if page.children_count > 0 %>
+                      <% if page.level > 0 %>
+                        <%# Non-root pages with children: show chevron button only %>
+                        <button type="button"
+                                class="text-xs text-gray-500 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary rounded px-1 w-4 flex items-center justify-center"
+                                data-tree-target="toggle"
+                                data-action="click->tree#toggle"
+                                data-page-id="<%= page.id %>">
+                          <i class="fa-solid fa-chevron-right"></i>
+                        </button>
+                      <% else %>
+                        <%# Root page (Home): show folder icon %>
+                        <i class="fa-solid fa-folder text-gray-500 mr-2"></i>
+                      <% end %>
+                    <% else %>
+                      <%# Leaf pages: show file icon %>
+                      <i class="fa-solid fa-file text-gray-400 mr-2"></i>
+                    <% end %>
+                    <%= link_to page.title, edit_admin_cms_page_path(page), class: "font-medium hover:text-primary #{page.children_count > 0 && page.level > 0 ? 'ml-2' : ''}" %>
+                  </div>
+                  <div class="text-xs text-black/60 mt-1 ml-6">
+                    <%= page.path %>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        <% end %>
+        <% table.column("Type", width: "12%") { |page| render Panda::Core::Admin::TagComponent.new(page_type: page.page_type.to_sym) } %>
+        <% table.column("Last Updated", width: "18%") { |page| render Panda::Core::Admin::UserActivityComponent.new(at: page.last_updated_at) } %>
       <% end %>
-      <% table.column("Status") { |page| render Panda::Core::Admin::TagComponent.new(status: page.status) } %>
-      <% table.column("Last Updated") { |page| render Panda::CMS::Admin::UserActivityComponent.new(model: page) } %>
-    <% end %>
+    </div>
   <% else %>
     <div class="p-6 bg-error/10 text-error rounded-lg">
       <p class="text-base">No homepage (at <code>/</code>) found. Please create a homepage to start building your site.</p>

data/app/views/panda/cms/admin/pages/new.html.erb

@@ -1,21 +1,13 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Add Page", level: 1) do |heading| %>
-  <% end %>
+  <% component.heading(text: "Add Page", level: 1) %>
   <%= panda_cms_form_with model: page, url: admin_cms_pages_path, method: :post do |f| %>
-    <% if page.errors.any? %>
-      <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
-        <div class="text-sm text-red-600">
-          <% page.errors.full_messages.each do |message| %>
-            <p><%= message %></p>
-          <% end %>
-        </div>
-      </div>
-    <% end %>
+    <%= render Panda::Core::Admin::FormErrorComponent.new(model: page) %>
     <% options = nested_set_options(Panda::CMS::Page, page) { |i| "#{"-" * i.level} #{i.title} (#{i.path})" } %>
     <%= f.select :parent_id, options %>
     <%= f.text_field :title %>
     <%= f.text_field :path, { meta: t(".path.meta") } %>
     <%= f.collection_select :panda_cms_template_id, available_templates, :id, :name %>
+    <%= f.select :page_type, options_for_select([["Active", "standard"], ["Hidden", "hidden"], ["Code", "code"]], selected: "standard") %>
     <%= f.button "Create Page" %>
   <% end %>
 <% end %>

data/app/views/panda/cms/admin/posts/_form.html.erb

@@ -1,30 +1,20 @@
 <%= panda_cms_form_with model: post, url: url, method: post.persisted? ? :put : :post do |f| %>
-  <% if post.errors.any? %>
-    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-md">
-      <div class="text-sm text-red-600">
-        <% post.errors.full_messages.each do |message| %>
-          <p><%= message %></p>
-        <% end %>
-      </div>
-    </div>
-  <% end %>
+  <%= render Panda::Core::Admin::FormErrorComponent.new(model: post) %>
 
   <div data-controller="slug" data-slug-add-date-prefix-value="true">
     <%= f.text_field :title,
-        class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer",
         data: {
           "slug-target": "input_text",
           action: "focusout->slug#generatePath"
         } %>
     <%= f.text_field :slug,
-        class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer",
         data: {
           "slug-target": "output_text"
         } %>
   </div>
-  <%= f.select :author_id, Panda::Core::User.admin.map { |u| [u.name, u.id] }, {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
-  <%= f.datetime_field :published_at, class: "block w-full rounded-md border-0 p-2 text-gray-900 ring-1 ring-inset ring-mid placeholder:text-gray-300 focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
-  <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: post.status), {}, class: "block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-mid focus:ring-1 focus:ring-inset focus:ring-dark sm:leading-6 hover:pointer" %>
+  <%= f.select :author_id, Panda::Core::User.admins.map { |u| [u.name, u.id] } %>
+  <%= f.datetime_field :published_at %>
+  <%= f.select :status, options_for_select([["Active", "active"], ["Draft", "draft"], ["Hidden", "hidden"], ["Archived", "archived"]], selected: post.status) %>
 
   <% editor_id = "editor_#{dom_id(post, :content)}" %>
   <div data-controller="editor-form"
@@ -41,7 +31,46 @@
     </div>
   </div>
 
-  <%= f.submit post.persisted? ? "Update Post" : "Create Post",
+  <%= f.section_heading "SEO Settings" %>
+
+  <div class="space-y-4">
+    <%= f.text_field :seo_title, { meta: "Max 70 characters. Leave blank to use post title." } %>
+    <%= f.text_area :seo_description, { rows: 3, meta: "Max 160 characters. Leave blank to use post excerpt." } %>
+    <%= f.text_field :seo_keywords, { meta: "Comma-separated keywords for search engines." } %>
+    <%= f.radio_button_group :seo_index_mode,
+        [["Visible to search engines", "visible"], ["Hidden from search engines", "invisible"]],
+        { meta: "Control how search engines index this post." } %>
+    <%= f.text_field :canonical_url, { meta: "Optional. Full URL to the canonical version of this post." } %>
+  </div>
+
+  <%= f.section_heading "Social Sharing" %>
+
+  <div class="space-y-4">
+    <%= f.text_field :og_title, { label: "Social Media Title", meta: "Max 60 characters. Leave blank to use SEO title." } %>
+    <%= f.text_area :og_description, { label: "Social Media Description", rows: 2, meta: "Max 200 characters. Used on Facebook, LinkedIn, Twitter." } %>
+    <%= f.select :og_type,
+        options_for_select(
+          [["Website", "website"], ["Article", "article"], ["Profile", "profile"], ["Video", "video"], ["Book", "book"]],
+          selected: post.og_type
+        ),
+        { label: "Content Type" } %>
+    <%= f.file_field :og_image, {
+      label: "Social Media Image",
+      meta: "Recommended: 1200×630px (1.91:1 ratio). Used on Facebook, LinkedIn, Twitter.",
+      accept: "image/png,image/jpeg,image/jpg,image/webp",
+      with_cropper: true,
+      aspect_ratio: 1.91,
+      min_width: 1200,
+      min_height: 630
+    } %>
+    <% if f.object.present? && f.object.persisted? && f.object.og_image.attached? %>
+      <div class="mt-2">
+        <%= image_tag f.object.og_image.variant(:og_share), class: "max-w-xs rounded border border-gray-300" %>
+      </div>
+    <% end %>
+  </div>
+
+  <%= f.submit f.object.persisted? ? "Update Post" : "Create Post",
       class: "btn btn-primary",
       data: {
         disable_with: "Saving...",

data/app/views/panda/cms/admin/posts/edit.html.erb

@@ -1,6 +1,6 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: post.title, level: 1) do |heading| %>
-    <% heading.with_button(action: :view, text: "View Post", link: post_path(post.admin_param)) %>
+  <% component.heading(text: post.title, level: 1) do |heading| %>
+    <% heading.button(action: :view, text: "View Post", href: post_path(post.admin_param)) %>
   <% end %>
 
   <%= render "form", post: post, url: admin_cms_post_path(post.admin_param), method: :patch %>

data/app/views/panda/cms/admin/posts/index.html.erb

@@ -1,9 +1,9 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Posts", level: 1) do |heading| %>
-    <% heading.with_button(action: :add, text: "Add Post", link: new_admin_cms_post_path) %>
+  <% component.heading(text: "Posts", level: 1, icon: "fa-solid fa-newspaper") do |heading| %>
+    <% heading.button(action: :add, text: "Add Post", href: new_admin_cms_post_path) %>
   <% end %>
 
-  <%= render Panda::Core::Admin::TableComponent.new(term: "post", rows: posts) do |table| %>
+  <%= render Panda::Core::Admin::TableComponent.new(term: "post", rows: posts, icon: "fa-solid fa-newspaper") do |table| %>
     <% table.column("Title") do |post| %>
       <div>
         <%= link_to post.title, edit_admin_cms_post_path(post.admin_param), class: "block h-full w-full" %>
@@ -12,9 +12,9 @@
         </span>
       </div>
     <% end %>
-    <% table.column("Status") { |post| render Panda::Core::Admin::TagComponent.new(status: post.status) } %>
-    <% table.column("Published") { |post| render Panda::CMS::Admin::UserActivityComponent.new(at: post.published_at, user: post.author)} %>
-    <% table.column("Last Updated") { |post| render Panda::CMS::Admin::UserActivityComponent.new(at: post.updated_at)} %>
+    <% table.column("Status") { |post| render Panda::Core::Admin::TagComponent.new(status: post.status.to_sym) } %>
+    <% table.column("Published") { |post| render Panda::Core::Admin::UserActivityComponent.new(at: post.published_at, user: post.author)} %>
+    <% table.column("Last Updated") { |post| render Panda::Core::Admin::UserActivityComponent.new(at: post.updated_at)} %>
   <% end %>
 
 <% end %>

data/app/views/panda/cms/admin/posts/new.html.erb

@@ -1,5 +1,5 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Add Post", level: 1) do |heading| %>
+  <% component.heading(text: "Add Post", level: 1) do |heading| %>
   <% end %>
 
   <%= render "form", post: post, url: url, method: :post %>

data/app/views/panda/cms/admin/settings/bulk_editor/new.html.erb

@@ -1,5 +1,5 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Bulk Editor", level: 1) %>
+  <% component.heading(text: "Bulk Editor", level: 1) %>
 
   <% if @debug && @debug[:error].any? %>
   <div class="p-4 mb-4 bg-red-50 rounded-md">

data/app/views/panda/cms/admin/settings/index.html.erb

@@ -1,8 +1,8 @@
 <%= render Panda::Core::Admin::ContainerComponent.new do |component| %>
-  <% component.with_heading(text: "Settings", level: 1) %>
+  <% component.heading(text: "Settings", level: 1) %>
 
   <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
-    <% panel.with_heading(text: "System Status") %>
+    <% panel.heading(text: "System Status") %>
 
     <p class="text-base leading-loose"><i class="mr-2 text-active fa fa-check-circle"></i> <span class="font-medium">Panda CMS:</span> v<%= Panda::CMS::VERSION %></p>
     <p class="text-base leading-loose"><i class="mr-2 text-active fa fa-check-circle"></i> <span class="font-medium">Rails:</span> v<%= Rails.version %></p>
@@ -11,7 +11,7 @@
   <% end %>
 
   <%= render Panda::Core::Admin::PanelComponent.new do |panel| %>
-    <% panel.with_heading(text: "Integrations") %>
+    <% panel.heading(text: "Integrations") %>
 
     <p class="text-base leading-loose"><i class="mr-2 text-active fa-brands fa-instagram"></i> <span class="font-medium">Instagram:</span> <%= Panda::CMS.config.instagram[:enabled] ? "Connected (@#{Panda::CMS.config.instagram[:username]})" : "Not Connected" %></p>
   <% end %>

data/app/views/shared/_header.html.erb

@@ -2,10 +2,7 @@
 <html>
 <head>
   <title>Panda CMS Page</title>
-  <% if params[:embed_id].present? %>
-    <!-- Include Panda CMS assets for editor functionality when in edit mode -->
-    <%= panda_cms_complete_assets %>
-  <% end %>
+  <!-- CMS assets are automatically injected by editor_iframe_controller when in edit mode -->
 </head>
 <body>
 <h1>Test Header</h1>

data/config/brakeman.ignore

@@ -0,0 +1,38 @@
+{
+  "ignored_warnings": [
+    {
+      "warning_type": "Dynamic Render Path",
+      "warning_code": 15,
+      "fingerprint": "cbd974174800cbaa06ad90971544cdfb087e88c17ca6ca42d5e9b7e2f62f544f",
+      "check_name": "Render",
+      "message": "Render path contains parameter value",
+      "file": "app/views/panda/cms/admin/menus/edit.html.erb",
+      "line": 5,
+      "link": "https://brakemanscanner.org/docs/warning_types/dynamic_render_path/",
+      "code": "render(action => Panda::Core::Admin::FormErrorComponent.new(:model => Panda::CMS::Menu.find(params[:id])), { :locals => ({ :\"panda::core::admin::formerrorcomponent\" => Panda::Core::Admin::FormErrorComponent.new(:model => Panda::CMS::Menu.find(params[:id])) }) })",
+      "render_path": [
+        {
+          "type": "controller",
+          "class": "Panda::CMS::Admin::MenusController",
+          "method": "edit",
+          "line": 39,
+          "file": "app/controllers/panda/cms/admin/menus_controller.rb",
+          "rendered": {
+            "name": "panda/cms/admin/menus/edit",
+            "file": "app/views/panda/cms/admin/menus/edit.html.erb"
+          }
+        }
+      ],
+      "location": {
+        "type": "template",
+        "template": "panda/cms/admin/menus/edit"
+      },
+      "user_input": "params[:id]",
+      "confidence": "Weak",
+      "cwe_id": [22],
+      "note": "False positive: The component class is hardcoded (Panda::Core::Admin::FormErrorComponent), not dynamically determined. The model parameter is validated through Rails' find method and only used as data to pass to the component, not to determine the rendering path."
+    }
+  ],
+  "updated": "2025-11-09 00:00:00 +0000",
+  "brakeman_version": "7.1.1"
+}