panda-cms 0.8.0 → 0.10.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9a439141e4b2fd9c4167ea0bd872096a648fe1a9fcfc237e6a1c20e16d2a2562
-  data.tar.gz: fa28c3d1d698b9725140618603505a0120c0e58430ff4c923ccd986f3e27daa5
+  metadata.gz: a5d7ab51a41583d6af2b9c03249894b81eb3301e8a88068bf512fea5ba10891a
+  data.tar.gz: 9cbbd69b5b6e6ce229fef244135e7abb1e12580be401524b054e94ff227280cc
 SHA512:
-  metadata.gz: 1923aea63bd5a266487a4a25e852df4cc96e0cba408fd9cb9351a5a302a20ad7e07ef22254dbe01ef7751ca3b35d0a9cdfb941a821e56730455fc73f0223083b
-  data.tar.gz: 54291d3de7b95047412a2c6c9e50b94f187457803bfd1609f0f9a947348de612c2ca6480f33e8e5df5f0305c131d638e025f1d6e04cc30c2997ce4ccb2a9c56e
+  metadata.gz: 84f46d5e374a05e046047e7e7751371f4b90d2e86a137df179c02e6e89c08169048e64c18ef38b0b78ab5137c22f55d0777451ab49bb32ab3aa3c67745b6aaed
+  data.tar.gz: 0b6ad4481db935ed61ca57d087582e8b370fe2ecb6b0e15dadeaa53042a834dbecaf9cd7d0122830788e10b071cce66290d0abd6a0b4649adf23465140854069

data/README.md

@@ -30,7 +30,17 @@ Then run `bin/dev`. You'll see a basic website has automatically been created fo
 
 The easiest way for you to get started is to visit http://localhost:3000/admin and login with your GitHub credentials. As the first user, you'll automatically have an administrator account created.
 
-When you're ready to configure further, you can set your own configuration in `config/initializers/panda/cms.rb`. Make sure to turn off the default `github` account creation options!
+When you're ready to configure further, you can set your own configuration in `config/initializers/panda.rb`. Make sure to configure your authentication providers and update the domain restriction!
+
+## Panda CMS Pro
+
+Commercial features such as structured **Collections** live in the `panda-cms-pro` gem. Once the pro gem is installed you can:
+
+- Model repeatable content with collections and items.
+- Loop over entries inside layouts using helpers like `panda_cms_collection_items("trustees")`.
+- Keep the feature hidden in open-source installs thanks to `Panda::CMS::Features`.
+
+See `docs/collections.md` for the editor workflow and template examples, and `docs/private-gem-server.md` for hosting the private gem server.
 
 ### Existing applications
 
@@ -44,14 +54,83 @@ For initial setup, run:
 
 ```shell
 bundle install
-rails generate panda_cms:install
-rails panda_cms:install:migrations
+rails generate panda:cms:install
+rails panda:cms:install:migrations
+rails db:migrate
 rails db:seed
 ```
 
 You may want to check this does not re-run any of your existing seeds!
 
-If you don't want to use GitHub to login (or are at a URL other than http://localhost:3000/), you'll need to configure a user provider (in `config/initializers/panda/cms.rb`), and then set your user's `admin` attribute to `true` once you've first tried to login.
+If you don't want to use GitHub to login (or are at a URL other than http://localhost:3000/), you'll need to configure authentication providers (in `config/initializers/panda.rb`), and then set your user's `admin` attribute to `true` once you've first tried to login.
+
+## Configuration
+
+All Panda configuration is managed in `config/initializers/panda.rb`. The generator creates this file with sensible defaults including Google OAuth authentication:
+
+```ruby
+# config/initializers/panda.rb
+Panda::Core.configure do |config|
+  config.admin_path = "/admin"
+
+  config.login_page_title = "Panda Admin"
+  config.admin_title = "Panda Admin"
+
+  config.authentication_providers = {
+    google_oauth2: {
+      enabled: true,
+      name: "Google",
+      client_id: Rails.application.credentials.dig(:google, :client_id),
+      client_secret: Rails.application.credentials.dig(:google, :client_secret),
+      options: {
+        scope: "email,profile",
+        prompt: "select_account",
+        hd: "yourdomain.com" # Restrict to specific domain
+      }
+    }
+  }
+
+  # Core settings
+  config.session_token_cookie = :panda_session
+  config.user_class = "Panda::Core::User"
+  config.user_identity_class = "Panda::Core::UserIdentity"
+end
+```
+
+**Important**: Update `hd: "yourdomain.com"` to your organization's domain to restrict admin access, or remove this line to allow any Google account.
+
+See the [Configuration Documentation](docs/developers/configuration/) for detailed information on all available settings.
+
+### Engine Mounting
+
+**The Panda CMS engine automatically mounts itself** via an `after_initialize` hook. You do **not** need to manually add `mount Panda::CMS::Engine => "/"` to your routes file. The engine will:
+
+- Mount itself at the root path
+- Add admin routes under the configured admin path (e.g., `/admin/cms` or `/manage/cms`)
+- Set up a catch-all route for CMS pages (excluding admin paths)
+
+The admin interface structure will be:
+- `{admin_path}` - Panda Core admin dashboard (authentication, profile)
+- `{admin_path}/cms` - Panda CMS admin (pages, posts, menus, files)
+
+## Styling
+
+**Panda CMS does not compile or manage its own CSS.** All admin interface styling is provided by [Panda Core](https://github.com/tastybamboo/panda-core).
+
+The CMS automatically loads Core's compiled stylesheet:
+
+```erb
+<link rel="stylesheet" href="/panda-core-assets/panda-core.css">
+```
+
+Core's Rack middleware serves this file from the gem, so:
+- ✅ No CSS copying or compilation needed
+- ✅ Styles update automatically when Core updates
+- ✅ Consistent design across all Panda gems
+
+For details on customizing styles, development workflows, and troubleshooting, see [docs/STYLING.md](docs/STYLING.md).
+
+For CSS compilation (when contributing to styling), see [Panda Core Asset Compilation Guide](https://github.com/tastybamboo/panda-core/blob/main/docs/ASSET_COMPILATION.md).
 
 ## Gotchas
 

data/app/components/panda/cms/code_component.rb

@@ -2,68 +2,146 @@
 
 module Panda
   module CMS
-    # Text component
-    # @param key [Symbol] The key to use for the text component
-    # @param text [String] The text to display
-    # @param editable [Boolean] If the text is editable or not (defaults to true)
-    # @param options [Hash] The options to pass to the content_tag
-    class CodeComponent < ViewComponent::Base
+    # Code component for editable HTML/code content
+    # @param key [Symbol] The key to use for the code component
+    # @param text [String] The default text to display
+    # @param editable [Boolean] If the code is editable or not (defaults to true)
+    class CodeComponent < Panda::Core::Base
       KIND = "code"
 
-      def initialize(key: :text_component, text: "", editable: true, **options)
-        @key = key
-        @text = text
-        @options = options || {}
-        @options[:id] ||= "code-#{key.to_s.dasherize}"
-        @editable = editable
+      prop :key, Symbol, default: :text_component
+      prop :text, String, default: ""
+      prop :editable, _Boolean, default: true
 
-        raise BlockError, "Key 'code' is not allowed for CodeComponent" if key == :code
+      def view_template
+        if @editable_state
+          render_editable_view
+        else
+          raw(@code_content.to_s.html_safe)
+        end
+      rescue => e
+        handle_error(e)
+      end
+
+      def before_template
+        raise BlockError, "Key 'code' is not allowed for CodeComponent" if @key == :code
+        prepare_content
       end
 
-      def call
-        # TODO: For the non-editable version, grab this from a cache or similar?
-        block = Panda::CMS::Block.find_by(kind: KIND, key: @key,
-          panda_cms_template_id: Current.page.panda_cms_template_id)
+      private
+
+      def prepare_content
+        @editable_state = component_is_editable?
+
+        block = find_block
+        return false if block.nil?
+
+        block_content = find_block_content(block)
+        @code_content = block_content&.content.to_s
+        @block_content_id = block_content&.id
+      end
 
-        if block.nil?
-          unless Rails.env.production?
-            raise Panda::CMS::MissingBlockError, "Block with key #{@key} not found for page #{Current.page.title}"
+      def find_block
+        Panda::CMS::Block.find_by(
+          kind: KIND,
+          key: @key,
+          panda_cms_template_id: Current.page.panda_cms_template_id
+        )
+      end
+
+      def find_block_content(block)
+        block.block_contents.find_by(panda_cms_page_id: Current.page.id)
+      end
+
+      def render_editable_view
+        div(class: "code-component-wrapper mb-4", data: {controller: "inline-code-editor", inline_code_editor_page_id_value: Current.page.id, inline_code_editor_block_content_id_value: @block_content_id}) do
+          # Tab Navigation
+          div(class: "border-b border-gray-200 bg-white") do
+            nav(class: "-mb-px flex space-x-4 px-4", "aria-label": "Tabs") do
+              button(type: "button",
+                data: {inline_code_editor_target: "previewTab", action: "click->inline-code-editor#showPreview"},
+                class: "border-primary text-primary whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium") do
+                plain "Preview"
+              end
+              button(type: "button",
+                data: {inline_code_editor_target: "codeTab", action: "click->inline-code-editor#showCode"},
+                class: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 whitespace-nowrap border-b-2 py-2 px-1 text-sm font-medium") do
+                plain "Code"
+              end
+            end
           end
 
-          return false
+          # Preview View
+          div(data: {inline_code_editor_target: "previewView"}, class: "mt-2") do
+            div(**preview_attrs) { raw(@code_content.to_s.html_safe) }
+          end
+
+          # Code Editor View
+          div(data: {inline_code_editor_target: "codeView"}, class: "mt-2 hidden bg-white p-4 border border-gray-200") do
+            textarea(
+              data: {inline_code_editor_target: "codeInput"},
+              class: "w-full h-64 p-3 font-mono text-sm border border-gray-300 rounded focus:ring-primary focus:border-primary",
+              placeholder: "Enter your HTML/embed code here..."
+            ) { raw(@code_content.to_s) }
+
+            div(class: "mt-3 flex justify-end space-x-2") do
+              button(type: "button",
+                data: {action: "click->inline-code-editor#saveCode"},
+                class: "inline-flex items-center px-3 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500") do
+                plain "💾 Save Code"
+              end
+            end
+
+            div(data: {inline_code_editor_target: "saveMessage"}, class: "hidden mt-2")
+          end
         end
+      end
 
-        block_content = block.block_contents.find_by(panda_cms_page_id: Current.page.id)
-        code_content = block_content&.content.to_s
+      def preview_attrs
+        {
+          class: "p-4 border border-dashed border-gray-300 bg-gray-50 min-h-32"
+        }
+      end
 
-        if component_is_editable?
-          @options[:contenteditable] = "plaintext-only"
-          @options[:data] = {
+      def element_attrs
+        {
+          id: "editor-#{@block_content_id}",
+          contenteditable: "plaintext-only",
+          class: "block bg-yellow-50 font-mono text-xs p-2 border-2 border-yellow-700",
+          style: "white-space: pre-wrap;",
+          data: {
             "editable-kind": "html",
             "editable-page-id": Current.page.id,
-            "editable-block-content-id": block_content&.id
+            "editable-block-content-id": @block_content_id
           }
-          @options[:class] = "block bg-yellow-50 font-mono text-xs p-2 border-2 border-yellow-700"
-          @options[:style] = "white-space: pre-wrap;"
-
-          @options[:id] = "editor-#{block_content&.id}"
-
-          # TODO: Switch between the HTML and the preview?
-          content_tag(:div, code_content, @options, true)
-        else
-          code_content.html_safe
-        end
+        }.merge(@attrs)
       end
 
       def component_is_editable?
         # TODO: Permissions
-        @editable && is_embedded? && Current.user&.admin
+        @editable && is_embedded? && Current.user&.admin?
       end
 
       def is_embedded?
         # TODO: Check security on this - embed_id should match something?
-        request.params[:embed_id].present?
+        view_context.request.params[:embed_id].present?
       end
+
+      def handle_error(error)
+        Rails.logger.error "CodeComponent error: #{error.message}"
+        Rails.logger.error error.backtrace.join("\n")
+
+        if Rails.env.production?
+          false
+        else
+          div(class: "p-4 bg-red-50 border border-red-200 rounded") do
+            p(class: "text-red-800 font-semibold") { "CodeComponent Error" }
+            p(class: "text-red-600 text-sm") { error.message }
+          end
+        end
+      end
+
+      class BlockError < StandardError; end
     end
   end
 end

data/app/components/panda/cms/grid_component.rb

@@ -2,14 +2,34 @@
 
 module Panda
   module CMS
-    class GridComponent < ViewComponent::Base
-      def initialize(columns: 1, spans: [1])
-        @columns = "grid-cols-#{columns}"
-        @colspans = []
-        spans.each do |span|
-          @colspans << "col-span-#{span}"
+    # Grid layout component for creating column-based layouts
+    # @param columns [Integer] Number of grid columns
+    # @param spans [Array<Integer>] Array of column span values for each grid cell
+    class GridComponent < Panda::Core::Base
+      prop :columns, Integer, default: 1
+      prop :spans, Array, default: -> { [1].freeze }
+
+      def view_template
+        div(class: "w-full grid #{grid_columns_class} min-h-20") do
+          column_span_classes.each do |colspan|
+            div(
+              class: "border border-red-500 bg-red-50 #{colspan}",
+              onDragOver: "parent.onDragOver(event);",
+              onDrop: "parent.onDrop(event);"
+            )
+          end
         end
       end
+
+      private
+
+      def grid_columns_class
+        "grid-cols-#{columns}"
+      end
+
+      def column_span_classes
+        spans.map { |span| "col-span-#{span}" }
+      end
     end
   end
 end

data/app/components/panda/cms/menu_component.rb

@@ -2,40 +2,71 @@
 
 module Panda
   module CMS
-    class MenuComponent < ViewComponent::Base
-      #
-      # Renders the menu item and its children
-      #
-      # @param [String] name The name of the menu
-      # @param [String] current_path The current path of the request (request.path)
-      # @param [Hash] styles
-      #  The CSS classes to apply to the menu items, containing "default", "inactive" and "active" keys.
-      #  The "default" key is applied to all menu items. "inactive" and "active" are set based on the
-      #  current path.
-      # @return [void]
-      def initialize(name:, current_path: "", styles: {}, overrides: {}, render_page_menu: false, page_menu_styles: {})
-        @menu = Panda::CMS::Menu.find_by(name: name)
-        @menu_items = @menu.menu_items
-        @menu_items = @menu_items.where("depth <= ?", @menu.depth) if @menu.depth
-        @menu_items = @menu_items.order(:lft)
-        @current_path = current_path.to_s
-        @render_page_menu = render_page_menu
-
-        @menu_items = @menu_items.order(:lft).map do |menu_item|
-          if is_active?(menu_item)
-            menu_item.define_singleton_method(:css_classes) { "#{styles[:default]} #{styles[:active]}" }
-          else
-            menu_item.define_singleton_method(:css_classes) { "#{styles[:default]} #{styles[:inactive]}" }
+    # Menu component for rendering navigational menus
+    # @param name [String] The name of the menu to render
+    # @param current_path [String] The current request path for highlighting active items
+    # @param styles [Hash] CSS classes for menu items (default, active, inactive)
+    # @param overrides [Hash] Menu item overrides (currently unused)
+    # @param render_page_menu [Boolean] Whether to render sub-page menus
+    # @param page_menu_styles [Hash] Styles for the page menu component
+    class MenuComponent < Panda::Core::Base
+      prop :name, String
+      prop :current_path, String, default: ""
+      prop :styles, Hash, default: -> { {}.freeze }
+      prop :overrides, Hash, default: -> { {}.freeze }
+      prop :render_page_menu, _Boolean, default: false
+      prop :page_menu_styles, Hash, default: -> { {}.freeze }
+
+      def view_template
+        return unless @menu
+
+        @processed_menu_items.each do |menu_item|
+          a(href: menu_item.resolved_link, class: menu_item.css_classes) { menu_item.text }
+
+          if @render_page_menu && menu_item.page
+            render Panda::CMS::PageMenuComponent.new(
+              page: menu_item.page,
+              start_depth: 1,
+              styles: @page_menu_styles,
+              show_heading: false
+            )
           end
+        end
+      end
+
+      def before_template
+        load_menu_items
+      end
+
+      private
 
+      def load_menu_items
+        @menu = Panda::CMS::Menu.find_by(name: @name)
+        return unless @menu
+
+        menu_items = @menu.menu_items
+        menu_items = menu_items.where("depth <= ?", @menu.depth) if @menu.depth
+        menu_items = menu_items.order(:lft)
+
+        @processed_menu_items = menu_items.map do |menu_item|
+          add_css_classes_to_item(menu_item)
           menu_item
         end
 
-        # TODO: Surely don't need this but Current.page isn't working in the component
-        return unless @render_page_menu
+        # Load current page for page menu rendering
+        if @render_page_menu
+          @current_page = Panda::CMS::Page.find_by(path: @current_path)
+        end
+      end
+
+      def add_css_classes_to_item(menu_item)
+        css_class = if is_active?(menu_item)
+          "#{@styles[:default]} #{@styles[:active]}"
+        else
+          "#{@styles[:default]} #{@styles[:inactive]}"
+        end
 
-        @current_page = Panda::CMS::Page.find_by(path: @current_path)
-        @page_menu_styles = page_menu_styles
+        menu_item.define_singleton_method(:css_classes) { css_class }
       end
 
       def is_active?(menu_item)
@@ -46,13 +77,14 @@ module Panda
       end
 
       def active_link?(path, match: :starts_with)
-        if match == :starts_with
-          return @current_path.starts_with?(path)
-        elsif match == :exact
-          return (@current_path == path)
+        case match
+        when :starts_with
+          @current_path.starts_with?(path)
+        when :exact
+          @current_path == path
+        else
+          false
         end
-
-        false
       end
     end
   end

data/app/components/panda/cms/page_menu_component.rb

@@ -2,35 +2,116 @@
 
 module Panda
   module CMS
-    class PageMenuComponent < ViewComponent::Base
-      attr_accessor :page, :menu_item, :styles
+    # Page menu component for rendering hierarchical page navigation
+    # @param page [Panda::CMS::Page] The current page
+    # @param start_depth [Integer] The depth level to start the menu from
+    # @param styles [Hash] CSS classes for styling menu elements
+    # @param show_heading [Boolean] Whether to show the top-level heading
+    class PageMenuComponent < Panda::Core::Base
+      prop :page, Object
+      prop :start_depth, Integer
+      prop :styles, Hash, default: -> { {}.freeze }
+      prop :show_heading, _Boolean, default: true
 
-      def initialize(page:, start_depth:, styles: {}, show_heading: true)
-        @page = page
+      def view_template
+        return unless should_render?
 
+        nav(class: @styles[:container]) do
+          ul(role: "list", class: "p-0 m-0") do
+            render_heading if @show_heading
+            render_menu_items
+          end
+        end
+      end
+
+      def before_template
         return if @page.nil?
 
-        start_page = if @page.depth == start_depth
+        @start_page = if @page.depth == @start_depth
           @page
         else
-          @page.ancestors.find { |anc| anc.depth == start_depth }
+          @page.ancestors.find { |anc| anc.depth == @start_depth }
         end
 
-        menu = start_page&.page_menu
+        menu = @start_page&.page_menu
         return if menu.nil?
 
         @menu_item = menu.menu_items.order(:lft)&.first
 
-        @show_heading = show_heading
-
-        # Set some default styles for sanity
-        @styles = styles
-        @styles[:indent_with] ||= "pl-2"
+        # Set default styles if not already set
+        @styles[:indent_with] ||= "pl-2" if @styles
       end
 
-      def render?
+      private
+
+      def should_render?
         @page&.path != "/" && @menu_item.present?
       end
+
+      def render_heading
+        li do
+          a(
+            href: @menu_item.page.path,
+            class: heading_class
+          ) { @menu_item.text }
+        end
+      end
+
+      def heading_class
+        if @menu_item.page == Panda::CMS::Current.page
+          @styles[:current_page_active]
+        else
+          @styles[:current_page_inactive]
+        end
+      end
+
+      def render_menu_items
+        ul do
+          Panda::CMS::MenuItem.includes(:page).each_with_level(@menu_item.descendants) do |submenu_item, level|
+            next if should_skip_item?(submenu_item, level)
+
+            render_menu_item(submenu_item, level)
+          end
+        end
+      end
+
+      def should_skip_item?(submenu_item, level)
+        # Skip if we're on the top menu item and level > 1
+        return true if Panda::CMS::Current.page == @menu_item.page && level > 1
+
+        # Skip if path contains parameter placeholder
+        return true if submenu_item.page&.path&.include?(":")
+
+        # Skip if page is nil or Current.page is nil
+        return true if submenu_item&.page.nil? || Panda::CMS::Current.page.nil?
+
+        # Skip if submenu page is deeper than current page and not an ancestor
+        (submenu_item.page&.depth&.to_i&.> Panda::CMS::Current.page&.depth&.to_i) &&
+          !Panda::CMS::Current.page&.in?(submenu_item.page.ancestors)
+      end
+
+      def render_menu_item(submenu_item, level)
+        li(
+          data: {
+            level: level,
+            page_id: submenu_item.page.id
+          },
+          class: menu_item_class(submenu_item)
+        ) do
+          a(
+            href: submenu_item.page&.path,
+            class: view_context.menu_indent(submenu_item, indent_with: @styles[:indent_with])
+          ) { submenu_item.page&.title }
+        end
+      end
+
+      def menu_item_class(submenu_item)
+        if submenu_item.page == Panda::CMS::Current.page
+          @styles[:active]
+        else
+          @styles[:inactive]
+        end
+      end
     end
   end
 end