Filament Title With Slug Laravel Package

Technical Evaluation

Architecture Fit

• Pros:

  • Seamless Filament Integration: Designed natively for FilamentPHP’s form builder, reducing architectural friction. Leverages Filament’s Livewire-based form components, ensuring consistency with existing UI patterns.
  • WordPress-Inspired UX: Familiar workflow for content creators (e.g., auto-slug generation, manual override, "Visit" link) aligns with common expectations for SEO-friendly URLs.
  • Configurability: Supports custom slugifiers, route generation, and label translations, making it adaptable to diverse use cases (e.g., multilingual sites, custom routing logic).
  • Dark Mode Support: Out-of-the-box compatibility with Filament’s dark mode theme, reducing theming overhead.

• Cons:

  • Filament Dependency: Tight coupling to FilamentPHP limits use cases to Filament-based admin panels. Not applicable for non-Filament Laravel apps or standalone Livewire components.
  • Slug Generation Logic: Relies on Filament’s Livewire reactivity; custom slugifiers must be implemented via callbacks, which may introduce complexity for edge cases (e.g., non-Latin scripts, special characters).
  • No Standalone Slug Validation: Assumes slug uniqueness/validation is handled by the underlying model/DB constraints (e.g., Laravel’s unique rule). Additional logic may be needed for real-time validation.

Integration Feasibility

• Low Effort for Basic Use:
  • Drop-in replacement for Filament’s TextInput + TextInput (title + slug). Requires minimal changes to existing forms (e.g., replacing make('title') and make('slug') with TitleWithSlugInput::make()).
  • Zero backend changes if slug generation/validation is already handled by the model.
• Moderate Effort for Advanced Use:
  • Custom slugifiers or route generation may require additional logic in the model or resource class.
  • Translations or label customization necessitates YAML/JSON config updates.
• Livewire Compatibility:
  • Fully compatible with Filament’s Livewire-based forms. No conflicts expected with existing Livewire components.

Technical Risk

• Minor Risks:
  • Slug Collision Handling: If the app relies on unique slugs, additional validation (e.g., database checks) may be needed beyond the package’s auto-generation.
  • SEO URL Routing: Custom route generation (e.g., route() parameter) requires ensuring the underlying routes are correctly defined in Laravel.
  • Performance: Auto-slug generation on title change triggers Livewire updates. For high-frequency edits, consider debouncing or server-side slug generation.
• Major Risks:
  • Filament Version Lock: Package may not support future Filament major versions without updates. Monitor Filament’s roadmap.
  • Edge Cases in Slugification: Non-ASCII characters, emojis, or special use cases (e.g., case sensitivity) may require custom slugifiers.

Key Questions

1. Use Case Alignment:
   • Is the primary use case for SEO-friendly URLs in a Filament admin panel? If not, is Filament the right framework for this feature?
2. Slug Uniqueness:
   • How are slug collisions handled today? Does the app need real-time uniqueness validation?
3. Customization Needs:
   • Are custom slugifiers or route generation required? If so, what’s the complexity of implementing them?
4. Performance:
   • Will auto-slug generation on every title change impact performance for high-traffic forms?
5. Localization:
   • Does the app support multiple languages? If so, how will slugs be handled for non-Latin scripts?
6. Testing:
   • Are there existing tests for slug generation/validation? Will this package reduce or increase test coverage needs?

Integration Approach

Stack Fit

• Primary Fit:
  • FilamentPHP v2/v3: Native support for Filament’s form builder. No additional stack changes required.
  • Laravel Livewire: Leverages Livewire’s reactivity for real-time slug updates. Works within Filament’s Livewire-based architecture.
  • Tailwind CSS: Compatible with Filament’s default Tailwind styling. Dark mode support is built-in.
• Secondary Fit:
  • Multilingual Apps: Supports translatable labels via Filament’s localization system (e.g., Laravel Localization).
  • Custom Routing: Extensible for apps with non-standard URL structures (e.g., API-driven slugs, dynamic routes).

Migration Path

1. Assessment Phase:
   • Audit existing Filament forms using TextInput for title + slug pairs.
   • Identify forms where TitleWithSlugInput would improve UX (e.g., CMS content editing).
2. Pilot Integration:
   • Replace one form component (e.g., a blog post editor) with TitleWithSlugInput.
   • Test auto-slug generation, manual override, and "Visit" link functionality.
3. Gradual Rollout:
   • Prioritize high-impact forms (e.g., SEO-critical pages).
   • Replace remaining title/slug pairs in batches, validating slug uniqueness and routing.
4. Customization:
   • Implement custom slugifiers or route logic if needed (e.g., for non-standard URL structures).
   • Update translations/labels via Filament’s config.

Compatibility

• Filament Versions:
  • Tested with FilamentPHP v2/v3. Verify compatibility with the app’s current Filament version.
• Laravel Versions:
  • Compatible with Laravel 9+. Check for breaking changes if using an older version.
• Dependencies:
  • No hard dependencies beyond Filament/Livewire. Ensure no conflicts with existing packages (e.g., other Filament plugins).
• Database:
  • Assumes slug fields exist in the model. No schema migrations required unless adding new fields.

Sequencing

1. Prerequisites:
   • Ensure Filament and Livewire are up-to-date.
   • Verify slug fields (title, slug) exist in the target models.
2. Implementation Steps:
   • Install the package via Composer:

     composer require adrolli/filament-title-with-slug
     

   • Publish config (if customizing labels/behavior):

     php artisan vendor:publish --tag="filament-title-with-slug-config"
     

   • Replace existing form fields:

     // Before
     TextInput::make('title')->required(),
     TextInput::make('slug')->required(),
     
     // After
     TitleWithSlugInput::make(
         fieldTitle: 'title',
         fieldSlug: 'slug',
     )->required(),
     

3. Post-Integration:
   • Test edge cases (e.g., special characters in titles, slug collisions).
   • Monitor performance for forms with frequent edits.
   • Document custom configurations for future maintainers.

Operational Impact

Maintenance

• Pros:
  • Reduced Boilerplate: Eliminates manual slug generation logic in forms, reducing maintenance overhead.
  • Centralized Configuration: All slug-related behavior (labels, slugifiers, routes) is configurable in one place (package config or resource class).
  • Community Support: MIT-licensed with active maintenance (last release: 2025-03-12). Issues can be raised on GitHub.
• Cons:
  • Dependency Risk: Relies on external package. Future Filament updates may require package updates.
  • Custom Logic: Any custom slugifiers or route logic must be maintained alongside the package.

Support

• Developer Support:
  • Learning Curve: Minimal for basic usage. Customization (e.g., slugifiers) may require deeper understanding of Filament/Livewire.
  • Debugging: Issues related to slug generation or Livewire reactivity may need debugging Filament’s internals.
• End-User Support:
  • UX Familiarity: WordPress-inspired workflow reduces training needs for content creators.
  • Feedback Channels: "Visit" link provides immediate validation of slugs, reducing support queries about broken URLs.

Scaling

• Performance:
  • Client-Side: Auto-slug generation triggers Livewire updates. For high-frequency edits, consider:
    • Debouncing title changes (e.g., 300ms delay).
    • Server-side slug generation (disable client-side auto-generation via config).
  • Server-Side: Slug uniqueness validation should be handled by database constraints (e.g., unique rule) or model observers.
• Load Testing:
  • Test forms with concurrent edits to ensure Livewire’s reactivity doesn’t cause bottlenecks.
  • Monitor database load for slug uniqueness checks.

Failure Modes

• Slug Generation Failures:
  • Input Validation: Malformed titles (e.g., empty strings) may break slug generation. Add client-side validation if needed.
  • Character Encoding: Non-ASCII titles may produce invalid slugs. Custom slugifiers can mitigate this.
• Livewire Issues:
  • State Conflicts: Concurrent edits could lead to slug conflicts. Implement optimistic locking or real-time validation.
  • Connection Drops: Livewire’s reactivity relies on WebSocket connections. Fallback to server-side generation if needed.
• Routing Errors:
  • Incorrect route generation (