plutonium 0.34.1 → 0.35.0

data/docs/.vitepress/theme/custom.css

@@ -1,44 +1,23 @@
 /*
-
-Primary Colors:
-
-Coral/Orange Red: #FF4D4D (for main CTAs and primary elements)
-Deep Turquoise: #00CED1 (for secondary elements)
-Deep Blue: #1E3D59 (for text and accents)
-
-Accent Colors:
-
-Soft Pink: #FF9EAA (for highlights)
-Light Blue: #B8E3E9 (for backgrounds)
-White: #FFFFFF (for contrast and readability)
-
+Brand Colors:
+- Coral/Orange Red: #FF4D4D
+- Deep Turquoise: #00CED1
+- Deep Blue: #1E3D59
 */
 
 :root {
-  /* Primary Brand Colors - Inspired by the vibrant gradient */
   --vp-c-brand-1: #FF4D4D;
-  /* Vibrant coral red */
   --vp-c-brand-2: #FF6B4A;
-  /* Lighter coral */
   --vp-c-brand-3: #FF8347;
-  /* Soft orange */
   --vp-c-brand-soft: rgba(255, 77, 77, 0.14);
 
-  /* Accent Colors */
   --vp-c-accent-1: #00CED1;
-  /* Turquoise */
   --vp-c-accent-2: #1E90FF;
-  /* Bright blue */
   --vp-c-accent-3: #4169E1;
-  /* Royal blue */
   --vp-c-accent-soft: rgba(0, 206, 209, 0.14);
 
-  /* Custom Background Gradients */
-  --vp-home-hero-name-background: linear-gradient(120deg,
-      #FF4D4D 30%,
-      #00CED1);
+  --vp-home-hero-name-background: linear-gradient(120deg, #FF4D4D 30%, #00CED1);
 
-  /* Updating existing color references */
   --vp-c-tip-1: var(--vp-c-accent-1);
   --vp-c-tip-2: var(--vp-c-accent-2);
   --vp-c-tip-3: var(--vp-c-accent-3);
@@ -46,16 +25,396 @@ White: #FFFFFF (for contrast and readability)
 }
 
 .dark {
-  /* Dark mode adjustments */
   --vp-c-brand-1: #FF6B4A;
-  /* Slightly lighter coral for dark mode */
   --vp-c-brand-2: #FF4D4D;
   --vp-c-brand-3: #FF3333;
   --vp-c-brand-soft: rgba(255, 107, 74, 0.16);
 
   --vp-c-accent-1: #40E0E3;
-  /* Brighter turquoise for dark mode */
   --vp-c-accent-2: #45A3FF;
   --vp-c-accent-3: #6182E3;
   --vp-c-accent-soft: rgba(64, 224, 227, 0.16);
 }
+
+/* ============================================
+   Landing Page Styles
+   ============================================ */
+
+.landing-content {
+  max-width: 1152px;
+  margin: 0 auto;
+  padding: 0 24px;
+}
+
+.landing-content section {
+  padding: 80px 0;
+}
+
+.landing-content h2 {
+  font-size: 2.25rem;
+  font-weight: 700;
+  text-align: center;
+  margin-bottom: 48px;
+  background: linear-gradient(120deg, var(--vp-c-brand-1), var(--vp-c-accent-1));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+/* Before/After Comparison */
+.before-after {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.comparison {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 32px;
+  flex-wrap: wrap;
+}
+
+.before, .after {
+  flex: 1;
+  min-width: 300px;
+  max-width: 450px;
+  padding: 24px;
+  border-radius: 12px;
+  background: var(--vp-c-bg-soft);
+}
+
+.before h3, .after h3 {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin-bottom: 16px;
+  color: var(--vp-c-text-1);
+}
+
+.file-tree {
+  font-family: var(--vp-font-family-mono);
+  font-size: 0.85rem;
+  line-height: 1.8;
+}
+
+.file {
+  color: var(--vp-c-text-2);
+  padding: 2px 0;
+}
+
+.file.dim {
+  color: var(--vp-c-text-3);
+  font-style: italic;
+}
+
+.stats {
+  display: flex;
+  gap: 16px;
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid var(--vp-c-divider);
+}
+
+.stats span {
+  font-size: 0.85rem;
+  color: var(--vp-c-text-3);
+  padding: 4px 12px;
+  background: var(--vp-c-bg-mute);
+  border-radius: 20px;
+}
+
+.stats.success span {
+  color: var(--vp-c-brand-1);
+  background: var(--vp-c-brand-soft);
+  font-weight: 500;
+}
+
+.arrow {
+  font-size: 2rem;
+  color: var(--vp-c-brand-1);
+  font-weight: bold;
+}
+
+@media (max-width: 768px) {
+  .arrow {
+    transform: rotate(90deg);
+  }
+}
+
+/* Feature Rows */
+.features-detailed {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.feature-row {
+  display: flex;
+  align-items: center;
+  gap: 48px;
+  margin-bottom: 64px;
+}
+
+.feature-row:last-child {
+  margin-bottom: 0;
+}
+
+.feature-row.reverse {
+  flex-direction: row-reverse;
+}
+
+.feature-text {
+  flex: 1;
+  min-width: 280px;
+}
+
+.feature-text h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.feature-text p {
+  font-size: 1.05rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.7;
+}
+
+.feature-text code {
+  font-size: 0.9rem;
+  padding: 2px 6px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 4px;
+}
+
+.feature-code {
+  flex: 1;
+  min-width: 320px;
+}
+
+.feature-code div[class*="language-"] {
+  margin: 0 !important;
+  border-radius: 12px;
+}
+
+@media (max-width: 900px) {
+  .feature-row,
+  .feature-row.reverse {
+    flex-direction: column;
+  }
+
+  .feature-text {
+    text-align: center;
+  }
+
+  .feature-code {
+    width: 100%;
+  }
+}
+
+/* Feature Grid */
+.feature-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 24px;
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.grid-item {
+  padding: 32px 24px;
+  background: var(--vp-c-bg-soft);
+  border-radius: 12px;
+  text-align: center;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.grid-item:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
+}
+
+.grid-item .icon {
+  font-size: 2.5rem;
+  margin-bottom: 16px;
+}
+
+.grid-item h3 {
+  font-size: 1.15rem;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--vp-c-text-1);
+}
+
+.grid-item p {
+  font-size: 0.95rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+/* CTA Section */
+.cta-section {
+  text-align: center;
+  padding-top: 80px !important;
+  padding-bottom: 120px !important;
+}
+
+.cta-section h2 {
+  margin-bottom: 16px;
+}
+
+.cta-section > p {
+  font-size: 1.15rem;
+  color: var(--vp-c-text-2);
+  margin-bottom: 32px;
+}
+
+.cta-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 16px;
+  flex-wrap: wrap;
+}
+
+.cta-primary,
+.cta-secondary {
+  display: inline-block;
+  padding: 14px 32px;
+  font-size: 1rem;
+  font-weight: 600;
+  border-radius: 8px;
+  text-decoration: none;
+  transition: all 0.2s;
+}
+
+.cta-primary {
+  background: linear-gradient(135deg, var(--vp-c-brand-1), var(--vp-c-brand-2));
+  color: #ffffff !important;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.cta-primary:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(255, 77, 77, 0.3);
+}
+
+.cta-secondary {
+  background: var(--vp-c-bg-soft);
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+}
+
+.cta-secondary:hover {
+  background: var(--vp-c-bg-mute);
+  border-color: var(--vp-c-brand-1);
+}
+
+/* After section - code block styling */
+.after div[class*="language-"] {
+  margin: 0 0 16px 0 !important;
+  border-radius: 8px;
+}
+
+/* AI Section */
+.ai-section {
+  border-bottom: 1px solid var(--vp-c-divider);
+  background: linear-gradient(180deg, var(--vp-c-bg) 0%, var(--vp-c-bg-soft) 100%);
+  margin: 0 -24px;
+  padding-left: 24px;
+  padding-right: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.ai-intro {
+  text-align: center;
+  font-size: 1.2rem;
+  color: var(--vp-c-text-2);
+  max-width: 700px;
+  margin: -24px auto 48px;
+  line-height: 1.7;
+}
+
+.ai-features {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 32px;
+  margin-bottom: 48px;
+  width: 100%;
+  max-width: 1100px;
+}
+
+.ai-feature {
+  text-align: center;
+  padding: 24px;
+}
+
+.ai-icon {
+  font-size: 3rem;
+  margin-bottom: 16px;
+}
+
+.ai-feature h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 12px;
+  color: var(--vp-c-text-1);
+}
+
+.ai-feature p {
+  font-size: 1rem;
+  color: var(--vp-c-text-2);
+  line-height: 1.6;
+}
+
+.ai-example {
+  max-width: 700px;
+  margin: 0 auto;
+  background: var(--vp-c-bg);
+  border-radius: 12px;
+  overflow: hidden;
+  border: 1px solid var(--vp-c-divider);
+}
+
+.ai-prompt,
+.ai-result {
+  padding: 24px;
+}
+
+.ai-prompt {
+  border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.prompt-label,
+.result-label {
+  display: block;
+  font-size: 0.8rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: 8px;
+}
+
+.prompt-label {
+  color: var(--vp-c-brand-1);
+}
+
+.result-label {
+  color: var(--vp-c-accent-1);
+}
+
+.ai-prompt p,
+.ai-result p {
+  font-size: 1.05rem;
+  color: var(--vp-c-text-1);
+  margin: 0;
+  line-height: 1.6;
+}
+
+.ai-prompt p {
+  font-style: italic;
+}
+
+/* Fix VitePress doc h2 text cutoff at bottom */
+.vp-doc h2 {
+  line-height: 1.5;
+  padding-bottom: 4px;
+}

data/docs/getting-started/index.md

@@ -13,7 +13,7 @@ Welcome to Plutonium! This guide will help you get up and running quickly.
 Before you begin, make sure you have:
 
 - **Ruby 3.2+** installed
-- **Rails 7.1+** (Rails 8 recommended)
+- **Rails 7.2+** (Rails 8 recommended)
 - **Node.js 18+** (for asset compilation)
 - Basic familiarity with Ruby on Rails
 

data/docs/getting-started/tutorial/02-first-resource.md

@@ -51,6 +51,15 @@ class Blogging::Post < Blogging::ResourceRecord
 end
 ```
 
+Add scopes for filtering posts by publication status:
+
+```ruby
+class Blogging::Post < Blogging::ResourceRecord
+  scope :published, -> { where(published: true) }
+  scope :drafts, -> { where(published: [false, nil]) }
+end
+```
+
 ### Definition (`packages/blogging/app/definitions/blogging/post_definition.rb`)
 
 ```ruby

data/docs/getting-started/tutorial/06-nested-resources.md

@@ -142,6 +142,6 @@ Plutonium supports one level of nesting. For deeper hierarchies (e.g., Replies t
 
 ## What's Next
 
-Our blog has posts and comments. In the final chapter, we'll customize the UI to make it look polished.
+Our blog has posts and comments. In the next chapter, we'll create an Author Portal to show how multiple portals can share resources with different access levels.
 
-[Continue to Chapter 7: Customizing the UI →](./07-customizing-ui)
+[Continue to Chapter 7: Creating an Author Portal →](./07-author-portal)

data/docs/getting-started/tutorial/07-author-portal.md

@@ -0,0 +1,191 @@
+# Chapter 7: Creating an Author Portal
+
+In this chapter, you'll create a second portal for content authors. This demonstrates how multiple portals can share the same feature package while providing different access levels and experiences.
+
+## Why Multiple Portals?
+
+Real applications often need different interfaces for different user types:
+
+- **Admin Portal** - Full access for administrators
+- **Author Portal** - Limited access for content creators
+- **Customer Portal** - Public-facing for end users
+
+Each portal can have:
+- Different authentication (Admin vs User accounts)
+- Different authorization rules (admins see everything, authors see only their own)
+- Different UI customizations
+
+## Creating the Author Portal
+
+Generate a new portal package:
+
+```bash
+rails generate pu:pkg:portal author --auth=user
+```
+
+This creates:
+
+```
+packages/author_portal/
+├── app/
+│   ├── controllers/author_portal/
+│   │   ├── concerns/controller.rb
+│   │   ├── plutonium_controller.rb
+│   │   └── dashboard_controller.rb
+│   ├── definitions/author_portal/
+│   ├── policies/author_portal/
+│   └── views/author_portal/
+├── config/
+│   └── routes.rb
+└── lib/
+    └── engine.rb
+```
+
+## Configuring Authentication
+
+The Author Portal uses the `User` account type (created in Chapter 3), while the Admin Portal uses `Admin`. Update the portal's controller concern:
+
+```ruby
+# packages/author_portal/app/controllers/author_portal/concerns/controller.rb
+module AuthorPortal
+  module Concerns
+    module Controller
+      extend ActiveSupport::Concern
+      include Plutonium::Portal::Controller
+      include Plutonium::Auth::Rodauth(:user)  # Uses User accounts
+    end
+  end
+end
+```
+
+Compare this to the Admin Portal which uses `:admin`:
+
+```ruby
+# packages/admin_portal/app/controllers/admin_portal/concerns/controller.rb
+include Plutonium::Auth::Rodauth(:admin)  # Uses Admin accounts
+```
+
+## Connecting Resources
+
+Connect the Post resource to the Author Portal:
+
+```bash
+rails generate pu:res:conn Blogging::Post --dest=author_portal
+```
+
+This adds routes and creates a portal-specific controller.
+
+## Portal-Specific Authorization
+
+Authors should only see and manage their own posts. Create a portal-specific policy:
+
+```ruby
+# packages/author_portal/app/policies/author_portal/blogging/post_policy.rb
+class AuthorPortal::Blogging::PostPolicy < ::Blogging::PostPolicy
+  # Authors can only see their own posts
+  def relation_scope(relation)
+    relation.where(user_id: user.id)
+  end
+
+  # Authors can always create posts
+  def create?
+    true
+  end
+
+  # Authors can only update their own posts
+  def update?
+    owner?
+  end
+
+  # Authors can only delete their own posts
+  def destroy?
+    owner?
+  end
+
+  # Don't show user_id field - it's automatically set
+  def permitted_attributes_for_create
+    [:title, :body]
+  end
+end
+```
+
+Plutonium automatically uses the portal-specific policy (`AuthorPortal::Blogging::PostPolicy`) when accessing posts through the Author Portal.
+
+## Auto-Assigning the Author
+
+When authors create posts, we want to automatically set themselves as the author. The `pu:res:conn` generator creates a portal-specific controller that extends the feature package's controller. Override the `resource_params` method to merge in the current user:
+
+```ruby
+# packages/author_portal/app/controllers/author_portal/blogging/posts_controller.rb
+class AuthorPortal::Blogging::PostsController < ::Blogging::PostsController
+  include AuthorPortal::Concerns::Controller
+
+  private
+
+  # Override resource_params to automatically include current_user
+  def resource_params
+    super.merge(user: current_user)
+  end
+end
+```
+
+Notice that the controller inherits from `::Blogging::PostsController` (the feature package's controller), not `AuthorPortal::ResourceController`. This allows portal controllers to share behavior defined in the feature package while adding portal-specific customizations.
+
+Now when an author creates a post, they're automatically set as the owner.
+
+## Configuring Routes
+
+The Author Portal routes are configured to use User authentication:
+
+```ruby
+# packages/author_portal/config/routes.rb
+AuthorPortal::Engine.routes.draw do
+  root to: "dashboard#index"
+
+  register_resource ::Blogging::Post
+end
+
+Rails.application.routes.draw do
+  constraints Rodauth::Rails.authenticate(:user) do
+    mount AuthorPortal::Engine, at: "/author"
+  end
+end
+```
+
+## Testing the Portal
+
+Start the server:
+
+```bash
+bin/dev
+```
+
+Now you have two portals:
+
+| Portal | URL | Account Type | Access |
+|--------|-----|--------------|--------|
+| Admin | `/admin` | Admin | All posts |
+| Author | `/author` | User | Own posts only |
+
+### Test the difference:
+
+1. **Create an Admin account** at `/admin/register`
+2. **Create a User account** at `/auth/register`
+3. **As Admin**: Create several posts at `/admin/blogging/posts`
+4. **As User**: Visit `/author/blogging/posts` - you'll only see posts you created
+
+## How It Works
+
+The same `Blogging::Post` resource is used by both portals, but:
+
+1. **Different authentication** - Admin Portal requires Admin accounts, Author Portal requires User accounts
+2. **Different policies** - `AuthorPortal::Blogging::PostPolicy` scopes posts to the current user
+3. **Different controllers** - Author Portal auto-assigns the current user as author
+
+This is the power of Plutonium's portal system - share business logic while customizing access.
+
+## What's Next
+
+In the next chapter, we'll customize the UI with custom forms, tables, and views.
+
+[Continue to Chapter 8: Customizing the UI →](./08-customizing-ui)