panda-core 0.2.3 → 0.2.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 348ffbfa5cfbd2fc7fcb605670dd7ecb3914eddd6c076984d94d689d050e44fe
-  data.tar.gz: 50f977fc4f31605d4b985f9f37d3167b239a4b1627e2aaedb9638e10d7bd0762
+  metadata.gz: ea69195a180331f2758bbae8cfc22ccae44cf8b8ac0133b0642c8e4fb7e11e41
+  data.tar.gz: 495cd12223dc77a2c3893568732ae8ae73374bc0bdaf940cf4498227eae082dc
 SHA512:
-  metadata.gz: 077e81f9825f43dd1e65425fca186277ba082bab5b4e361a746dba2bbdf3224bdca7db055db47504ca6f4d345962129f58ba3b090557992472689a6e57f90f5a
-  data.tar.gz: 3be894b015597b1f06a12452398eef7c03824de92e553b1d8e960f161407ee9bf3d5cd6df43e57ea5eb7075cb4b16ac38bdeae6010f30fe11e962467e45b92d6
+  metadata.gz: eb217e7a4b3f7ddfee0e9e13e252c5fe31a66535b1b239badf9b0b1bfcd71906effd222b0eb2457b6bd4cd309ba69ac8f7edca6db675f93661b7706969728267
+  data.tar.gz: 7b39637eb2c83328f84f349ff0006b550741d9c91afacdbdc5c9f11102dc25baf58ae24dd514b87891ec1a2c1d0bfa3fee7b623d919a0113ef4644ea2d3d2a62

data/README.md

@@ -59,6 +59,191 @@ The gems listed in the `panda-core.gemspec` will be added to your Gemfile (or, i
 
 Make sure to follow the setup instructions for each of these gems.
 
+## Configuration
+
+Panda Core is configured in `config/initializers/panda.rb`. The install generator creates this file with a complete default configuration:
+
+```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"
+  config.storage_provider = :active_storage
+  config.cache_store = :memory_store
+
+  # Optional editor configuration
+  # config.editor_js_tools = []
+  # config.editor_js_tool_config = {}
+end
+```
+
+### Authentication Providers
+
+Panda Core supports multiple OAuth providers. Configure your credentials in Rails credentials:
+
+```yaml
+# config/credentials.yml.enc
+google:
+  client_id: "your-google-client-id"
+  client_secret: "your-google-client-secret"
+
+microsoft:
+  client_id: "your-microsoft-client-id"
+  client_secret: "your-microsoft-client-secret"
+```
+
+Then reference them in your initializer. You can enable multiple providers simultaneously.
+
+### Admin Path
+
+The `admin_path` setting controls where the admin interface is mounted (default: `/admin`). You can customize this to avoid route conflicts or match your preferences:
+
+```ruby
+config.admin_path = "/manage"  # Custom admin path
+```
+
+This is useful when:
+- You want to avoid conflicts with existing routes
+- You prefer a different URL structure
+- You're running multiple admin interfaces
+- You need different admin paths per environment
+
+### Asset Pipeline
+
+Panda Core provides the **single source of truth** for all Panda admin interface styling. This includes:
+
+- Base Tailwind CSS utilities and theme system
+- EditorJS content styles (used by Panda CMS)
+- Admin component styles
+- Form styles and typography
+
+**Asset Compilation**
+
+Panda Core uses Tailwind CSS v4 to compile all admin interface styling.
+
+**Quick Start** - Compile full CSS (Core + CMS):
+
+```bash
+cd /path/to/panda-core
+
+bundle exec tailwindcss -i app/assets/tailwind/application.css \
+  -o public/panda-core-assets/panda-core.css \
+  --content '../cms/app/views/**/*.erb' \
+  --content '../cms/app/components/**/*.rb' \
+  --content '../cms/app/javascript/**/*.js' \
+  --content 'app/views/**/*.erb' \
+  --content 'app/components/**/*.rb' \
+  --minify
+```
+
+**Result**: `panda-core.css` (~37KB) with all utility classes
+
+**Important**: Always compile with full content before committing!
+
+For complete documentation on:
+- Development workflows (Core-only vs full stack)
+- Release processes
+- Troubleshooting
+- Best practices
+
+See **[docs/ASSET_COMPILATION.md](docs/ASSET_COMPILATION.md)**
+
+**How Asset Serving Works:**
+
+Core's Rack middleware serves `/panda-core-assets/` from the gem's `public/` directory:
+
+```ruby
+# In Core's engine.rb
+config.app_middleware.use(Rack::Static,
+  urls: ["/panda-core-assets"],
+  root: Panda::Core::Engine.root.join("public")
+)
+```
+
+This means:
+- ✅ CMS and other gems automatically load CSS from Core
+- ✅ No copying needed - served directly from gem
+- ✅ Version changes are instant (just restart server)
+- ✅ Single source of truth for all admin styling
+
+**What Gets Compiled:**
+
+The compilation process:
+- Scans all Core and CMS views/components for Tailwind classes (via `tailwind.config.js`)
+- Includes EditorJS content styles for rich text editing
+- Applies theme variables for default and sky themes
+- Outputs a single minified CSS file (~37KB)
+
+**Asset Serving**
+
+Panda Core automatically serves compiled assets from `/panda-core-assets/` using Rack::Static middleware configured in the engine.
+
+**How Panda CMS Uses Core Styling**
+
+Panda CMS depends on Panda Core and loads its CSS automatically:
+
+```erb
+<!-- In CMS views -->
+<link rel="stylesheet" href="/panda-core-assets/panda-core.css">
+```
+
+CMS no longer compiles its own CSS - all styling comes from Core.
+
+**Content Scanning**
+
+The `tailwind.config.js` file configures content scanning to include:
+- Core views: `../../app/views/**/*.html.erb`
+- Core components: `../../app/components/**/*.rb`
+- CMS views: `../../../cms/app/views/**/*.html.erb`
+- CMS components: `../../../cms/app/components/**/*.rb`
+- CMS JavaScript: `../../../cms/app/javascript/**/*.js`
+
+This ensures all Tailwind classes used across the Panda ecosystem are included in the compiled CSS.
+
+**Customizing Styles**
+
+To customize the admin interface styles:
+
+1. Edit `app/assets/tailwind/application.css` in panda-core
+2. Add custom CSS in the appropriate `@layer` (base, components, or utilities)
+3. Recompile: `bundle exec tailwindcss -i app/assets/tailwind/application.css -o public/panda-core-assets/panda-core.css --minify`
+4. Copy the updated CSS to test locations if needed
+5. Restart your Rails server to see changes
+
+**Theme System**
+
+Panda Core provides two built-in themes accessible via `data-theme` attribute:
+
+- `default`: Purple/pink color scheme
+- `sky`: Blue color scheme
+
+Themes use CSS custom properties that can be referenced in your styles:
+- `--color-white`, `--color-black`
+- `--color-light`, `--color-mid`, `--color-dark`
+- `--color-highlight`, `--color-active`, `--color-inactive`
+- `--color-warning`, `--color-error`
+
 ## Development
 
 After checking out the repo:

data/app/assets/tailwind/application.css

@@ -0,0 +1,182 @@
+@import "tailwindcss";
+
+@theme {
+  --color-white: var(--color-white);
+  --color-black: var(--color-black);
+  --color-light: var(--color-light);
+  --color-mid: var(--color-mid);
+  --color-dark: var(--color-dark);
+  --color-highlight: var(--color-highlight);
+  --color-active: var(--color-active);
+  --color-inactive: var(--color-inactive);
+  --color-warning: var(--color-warning);
+  --color-error: var(--color-error);
+}
+
+@layer base {
+  html[data-theme="default"] {
+    --color-white: rgb(249, 249, 249); /* #F9F9F9 */
+    --color-black: rgb(26, 22, 29); /* #1A161D */
+
+    --color-light: rgb(238, 206, 230); /* #EECEE6 */
+    --color-mid: rgb(141, 94, 183); /* #8D5EB7 */
+    --color-dark: rgb(33, 29, 73); /* #211D49 */
+
+    --color-highlight: rgb(208, 64, 20); /* #D04014 */
+
+    --color-active: rgb(0, 135, 85); /* #008755 */
+    --color-warning: rgb(250, 207, 142); /* #FACF8E */
+    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
+    --color-error: rgb(245, 129, 129); /* #F58181 */
+  }
+
+  html[data-theme="sky"] {
+    --color-white: rgb(249, 249, 249); /* #F9F9F9 */
+    --color-black: rgb(26, 22, 29); /* #1A161D */
+    --color-light: rgb(204, 238, 242); /* #CCEEF2 */
+    --color-mid: rgb(42, 102, 159); /* #2A669F */
+    --color-dark: rgb(20, 32, 74); /* #14204A */
+    --color-highlight: rgb(208, 64, 20); /* #D04014 */
+
+    --color-active: rgb(69, 154, 89); /* #459A59 - darker green with better contrast */
+    --color-warning: rgb(244, 190, 102); /* #F4BE66 */
+    --color-inactive: rgb(216, 247, 245); /* #d6e4f7 */
+    --color-error: rgb(208, 64, 20); /* #D04014 */
+  }
+
+  a.block-link:after {
+    position: absolute;
+    content: "";
+    inset: 0;
+  }
+
+  /* Admin gradient backgrounds */
+  html[data-theme="default"] .bg-gradient-admin {
+    background: linear-gradient(to bottom right, rgb(33, 29, 73), rgb(141, 94, 183));
+  }
+
+  html[data-theme="sky"] .bg-gradient-admin {
+    background: linear-gradient(to bottom right, rgb(20, 32, 74), rgb(42, 102, 159));
+  }
+}
+
+/* EditorJS content styles */
+@layer components {
+  .codex-editor__redactor .ce-block .ce-block__content {
+    @apply text-base font-normal font-sans text-dark leading-[1.6] space-y-[1.6rem];
+
+    h1.ce-header {
+      @apply text-3xl md:text-4xl font-semibold font-sans leading-[1.2];
+    }
+
+    h2.ce-header {
+      @apply text-2xl font-medium font-sans leading-[1.3] mb-4 mt-8;
+    }
+
+    h3.ce-header {
+      @apply text-xl font-normal font-sans leading-[1.3] mb-4 mt-6;
+    }
+
+    p,
+    li {
+      @apply leading-[1.6] tracking-wide max-w-[85ch];
+
+      a {
+        @apply text-[#1A9597] underline underline-offset-2 hover:text-[#158486] focus:outline-2 focus:outline-offset-2 focus:outline-[#1A9597];
+      }
+
+      strong,
+      b {
+        @apply font-semibold;
+      }
+    }
+
+    p {
+      @apply mb-4;
+    }
+
+    .cdx-quote {
+      @apply bg-[#eef0f3] border-l-inactive border-l-8 p-6 mb-4;
+
+      .cdx-quote__caption {
+        @apply block ml-6 mt-2 text-sm text-dark;
+      }
+
+      .cdx-quote__text {
+        quotes: "\201C" "\201D" "\2018" "\2019";
+        @apply pl-6;
+
+        &:before {
+          @apply -ml-8 mr-2 text-dark text-6xl leading-4 align-text-bottom font-serif;
+          content: open-quote;
+        }
+
+        p {
+          @apply inline italic text-lg;
+        }
+      }
+    }
+
+    .cdx-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-nested-list {
+      @apply mb-4 pl-6;
+
+      &--ordered {
+        @apply list-decimal;
+      }
+
+      &--unordered {
+        @apply list-disc;
+      }
+
+      .cdx-nested-list {
+        @apply mt-2 mb-0;
+      }
+
+      .cdx-nested-list__item {
+        @apply mb-2 pl-2;
+      }
+    }
+
+    .cdx-table {
+      @apply w-full border-collapse border-2 border-dark my-6;
+
+      &__head {
+        @apply font-semibold border-dark border-r-2 p-3 bg-light;
+      }
+
+      &__row {
+        @apply border-dark border-b-2;
+      }
+
+      &__cell {
+        @apply border-dark border-r-2 p-3;
+      }
+    }
+
+    .cdx-embed {
+      iframe {
+        @apply w-full border-none;
+      }
+    }
+  }
+}

data/app/assets/tailwind/tailwind.config.js

@@ -0,0 +1,21 @@
+module.exports = {
+  content: {
+    relative: true,
+    files: [
+      // Panda Core views and components
+      "../../app/views/**/*.html.erb",
+      "../../app/components/**/*.html.erb",
+      "../../app/components/**/*.rb",
+      "../../app/helpers/**/*.rb",
+
+      // Panda CMS views and components (for compilation)
+      "../../../cms/app/views/**/*.html.erb",
+      "../../../cms/app/builders/**/*.rb",
+      "../../../cms/app/components/**/*.html.erb",
+      "../../../cms/app/components/**/*.rb",
+      "../../../cms/app/helpers/**/*.rb",
+      "../../../cms/app/javascript/**/*.js",
+      "../../../cms/vendor/javascript/**/*.js",
+    ],
+  },
+};

data/app/controllers/panda/core/admin/dashboard_controller.rb

@@ -11,9 +11,8 @@ module Panda
           if Panda::Core.configuration.dashboard_redirect_path
             redirect_to Panda::Core.configuration.dashboard_redirect_path
           else
-            # This can be overridden by applications using panda-core
-            # For now, just render a basic view
-            render plain: "Welcome to Panda Admin"
+            # Render the dashboard view
+            render :show
           end
         end
       end

data/app/controllers/panda/core/admin/sessions_controller.rb

@@ -13,9 +13,12 @@ module Panda
 
         def create
           auth = request.env["omniauth.auth"]
-          provider = params[:provider]&.to_sym
+          provider_path = params[:provider]&.to_sym
 
-          unless Core.configuration.authentication_providers.key?(provider)
+          # Find the actual provider key (might be using path_name override)
+          provider = find_provider_by_path(provider_path)
+
+          unless provider && Core.configuration.authentication_providers.key?(provider)
             redirect_to admin_login_path, flash: {error: "Authentication provider not enabled"}
             return
           end
@@ -63,6 +66,21 @@ module Panda
 
           redirect_to admin_login_path, flash: {success: "Successfully logged out"}
         end
+
+        private
+
+        # Find the provider key by path name (handles path_name override)
+        def find_provider_by_path(provider_path)
+          # First check if it's a direct match
+          return provider_path if Core.configuration.authentication_providers.key?(provider_path)
+
+          # Then check if any provider has a matching path_name
+          Core.configuration.authentication_providers.each do |key, config|
+            return key if config[:path_name]&.to_sym == provider_path
+          end
+
+          nil
+        end
       end
     end
   end

data/app/controllers/panda/core/admin_controller.rb

@@ -3,6 +3,8 @@
 module Panda
   module Core
     class AdminController < ApplicationController
+      layout "panda/core/admin"
+
       # Automatically require admin authentication for all admin controllers
       before_action :authenticate_admin_user!
       before_action :set_initial_breadcrumb

data/app/helpers/panda/core/sessions_helper.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Panda
+  module Core
+    module SessionsHelper
+      # Map OAuth provider names to their FontAwesome icon names
+      PROVIDER_ICON_MAP = {
+        google_oauth2: "google",
+        microsoft_graph: "microsoft",
+        github: "github"
+      }.freeze
+
+      # Returns the FontAwesome icon name for a given provider
+      # Checks provider config first, then falls back to the mapping, then uses the provider name as-is
+      def oauth_provider_icon(provider)
+        provider_config = Panda::Core.configuration.authentication_providers[provider]
+        provider_config&.dig(:icon) || PROVIDER_ICON_MAP[provider.to_sym] || provider.to_s
+      end
+    end
+  end
+end

data/app/javascript/panda/core/application.js

@@ -1,4 +1,5 @@
 import { Application } from "@hotwired/stimulus"
+import "@fortawesome/fontawesome-free"
 
 const application = Application.start()
 

data/app/views/layouts/panda/core/admin.html.erb

@@ -1,59 +1,5 @@
-<!DOCTYPE html>
-<html lang="en" class="h-full bg-white">
-  <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width,initial-scale=1">
-    <%= csrf_meta_tags %>
-    <%= csp_meta_tag %>
-    
-    <title><%= content_for(:title) || "Panda Admin" %></title>
-    
-    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
-    
-    <% if Rails.env.test? || ENV["CI"].present? %>
-      <!-- Load compiled Panda Core assets for test environment -->
-      <link rel="stylesheet" href="/panda-core-assets/panda-core-<%= Panda::Core::VERSION %>.css">
-      <script src="/panda-core-assets/panda-core-<%= Panda::Core::VERSION %>.js" defer></script>
-      
-      <% if defined?(Panda::CMS) %>
-        <!-- Also load Panda CMS assets if CMS is present -->
-        <link rel="stylesheet" href="/panda-cms-assets/panda-cms-<%= Panda::CMS::VERSION %>.css">
-        <script src="/panda-cms-assets/panda-cms-<%= Panda::CMS::VERSION %>.js" defer></script>
-      <% end %>
-    <% else %>
-      <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
-    <% end %>
-    
-    <%= yield :admin_head_extra %>
-  </head>
-  
-  <body class="h-full">
-    <div class="flex h-full" id="panda-container">
-      <div class="absolute top-0 w-full lg:flex lg:fixed lg:inset-y-0 lg:z-50 lg:flex-col lg:w-72">
-        <div class="flex overflow-y-auto flex-col gap-y-5 px-4 pb-4 max-h-16 bg-gradient-to-br lg:max-h-full grow from-gray-900 to-gray-700">
-          <%= render "panda/core/admin/shared/sidebar" %>
-          <%= yield :admin_sidebar_extra %>
-        </div>
-      </div>
-      
-      <div class="flex flex-col flex-1 mt-16 ml-0 lg:mt-0 lg:ml-72" id="panda-inner-container">
-        <section id="panda-main" class="flex flex-row h-full">
-          <div class="flex-1 h-full" id="panda-core-primary-content">
-            <%= render "panda/core/admin/shared/breadcrumbs" if respond_to?(:breadcrumbs) %>
-            <%= render "panda/core/admin/shared/flash" %>
-            
-            <%= yield %>
-            
-            <% if content_for?(:sidebar) %>
-              <%= render "panda/core/admin/shared/slideover" do %>
-                <%= yield :sidebar %>
-              <% end %>
-            <% end %>
-          </div>
-        </section>
-        
-        <%= yield :admin_footer_extra %>
-      </div>
-    </div>
-  </body>
-</html>
+<%= render "panda/core/shared/header", html_class: "h-full", body_class: "bg-gradient-admin" %>
+<div class="flex flex-col items-center justify-center min-h-screen px-4">
+  <%= yield %>
+</div>
+<%= render "panda/core/shared/footer" %>

data/app/views/panda/core/admin/dashboard/_default_content.html.erb

@@ -0,0 +1,73 @@
+<div class="mt-5">
+  <div class="p-6 bg-white shadow rounded-lg">
+    <h2 class="text-lg font-medium text-gray-900">Welcome to Panda Admin</h2>
+    <p class="mt-1 text-sm text-gray-500">Manage your application from this central dashboard.</p>
+  </div>
+
+  <div class="mt-6 grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+    <% if defined?(Panda::CMS) %>
+      <div class="bg-white overflow-hidden shadow rounded-lg">
+        <div class="px-4 py-5 sm:p-6">
+          <div class="flex items-center">
+            <div class="flex-shrink-0">
+              <i class="fa-regular fa-file-lines text-3xl text-gray-400"></i>
+            </div>
+            <div class="ml-5 w-0 flex-1">
+              <dt class="text-sm font-medium text-gray-500 truncate">Content Management</dt>
+              <dd class="mt-1 text-lg font-semibold text-gray-900">
+                <%= link_to "Manage CMS", panda_cms.admin_cms_dashboard_path, class: "text-indigo-600 hover:text-indigo-900" %>
+              </dd>
+            </div>
+          </div>
+          <div class="mt-3">
+            <p class="text-sm text-gray-500">Pages, posts, menus, and content blocks</p>
+          </div>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="bg-white overflow-hidden shadow rounded-lg">
+      <div class="px-4 py-5 sm:p-6">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <i class="fa-regular fa-user text-3xl text-gray-400"></i>
+          </div>
+          <div class="ml-5 w-0 flex-1">
+            <dt class="text-sm font-medium text-gray-500 truncate">My Profile</dt>
+            <dd class="mt-1 text-lg font-semibold text-gray-900">
+              <%= link_to "Edit Profile", edit_admin_my_profile_path, class: "text-indigo-600 hover:text-indigo-900" %>
+            </dd>
+          </div>
+        </div>
+        <div class="mt-3">
+          <p class="text-sm text-gray-500">Update your personal information</p>
+        </div>
+      </div>
+    </div>
+
+    <% # Hook for additional dashboard cards %>
+    <% if Panda::Core.configuration.respond_to?(:admin_dashboard_cards) %>
+      <% cards = Panda::Core.configuration.admin_dashboard_cards&.call(current_user) %>
+      <% cards&.each do |card| %>
+        <div class="bg-white overflow-hidden shadow rounded-lg">
+          <div class="px-4 py-5 sm:p-6">
+            <div class="flex items-center">
+              <div class="flex-shrink-0">
+                <i class="<%= card[:icon] %> text-3xl text-gray-400"></i>
+              </div>
+              <div class="ml-5 w-0 flex-1">
+                <dt class="text-sm font-medium text-gray-500 truncate"><%= card[:title] %></dt>
+                <dd class="mt-1 text-lg font-semibold text-gray-900">
+                  <%= link_to card[:link_text], card[:path], class: "text-indigo-600 hover:text-indigo-900" %>
+                </dd>
+              </div>
+            </div>
+            <div class="mt-3">
+              <p class="text-sm text-gray-500"><%= card[:description] %></p>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  </div>
+</div>

data/app/views/panda/core/admin/dashboard/show.html.erb

@@ -12,16 +12,10 @@
           <% end %>
         </div>
       <% else %>
-        <div class="mt-5 p-6 bg-white shadow rounded-lg">
-          <h2 class="text-lg font-medium text-gray-900">Welcome to Panda Core Admin</h2>
-          <p class="mt-1 text-sm text-gray-500">Configure dashboard widgets to display custom content here.</p>
-        </div>
+        <%= render "panda/core/admin/dashboard/default_content" %>
       <% end %>
     <% else %>
-      <div class="mt-5 p-6 bg-white shadow rounded-lg">
-        <h2 class="text-lg font-medium text-gray-900">Welcome to Panda Core Admin</h2>
-        <p class="mt-1 text-sm text-gray-500">No dashboard widgets configured.</p>
-      </div>
+      <%= render "panda/core/admin/dashboard/default_content" %>
     <% end %>
   <% end %>
 </div>