Filament Title With Slug Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require adrolli/filament-title-with-slug
   

   Publish the config (optional):

   php artisan vendor:publish --provider="Adrolli\FilamentTitleWithSlug\FilamentTitleWithSlugServiceProvider"
   

2. First Use Case: Replace a standard TextInput or Textarea for a title field in a Filament form with TitleWithSlugInput:

   use Adrolli\FilamentTitleWithSlug\TitleWithSlugInput;
   
   TitleWithSlugInput::make(
       fieldTitle: 'title',
       fieldSlug: 'slug',
   )
   ->rules(['title' => 'required|max:255', 'slug' => 'required|unique:posts,slug']),
   

3. Where to Look First:

   • Documentation for config options.
   • config/filament-title-with-slug.php for default settings.
   • Demo video (YouTube) for visual workflow.

Implementation Patterns

Common Workflows

1. Basic Integration: Replace a Filament form field for a title/slug pair:

   TitleWithSlugInput::make('name', 'slug')
       ->columnSpanFull()
       ->required(),
   

2. Custom Slug Generation: Override the default slugifier (e.g., for SEO-friendly URLs):

   TitleWithSlugInput::make('title', 'slug')
       ->slugifier(fn(string $title): string => Str::slug($title, '-').'-custom'),
   

3. Dynamic "Visit" Links: Use a custom route resolver for the "View" button:

   TitleWithSlugInput::make('title', 'slug')
       ->visitRoute(fn($record) => route('posts.show', $record)),
   

4. Conditional Slug Editing: Disable slug editing for certain records (e.g., drafts):

   TitleWithSlugInput::make('title', 'slug')
       ->editableSlug(fn($record) => $record->is_published),
   

5. Localization: Translate labels and placeholders:

   TitleWithSlugInput::make('title', 'slug')
       ->label(__('filament-title-with-slug::fields.title.label'))
       ->placeholder(__('filament-title-with-slug::fields.title.placeholder')),
   

6. Validation Integration: Sync validation rules with model rules:

   TitleWithSlugInput::make('title', 'slug')
       ->rules([
           'title' => 'required|max:255|unique:posts,title,'.$record->id,
           'slug' => 'required|unique:posts,slug,'.$record->id,
       ]),
   

Advanced Patterns

• Livewire Hooks: Listen to slug changes for real-time updates:

  protected function getTitleWithSlugInputListeners(): array
  {
      return [
          'slug-updated' => fn($slug) => $this->syncSlugToMeta($slug),
      ];
  }
  

• Model Observers: Trigger actions when slugs are updated:

  class PostObserver
  {
      public function saved(Post $post)
      {
          if ($post->wasChanged('slug')) {
              // Redirect SEO crawlers, log changes, etc.
          }
      }
  }
  

• Custom UI Extensions: Extend the component via Blade or JavaScript (e.g., add a "slug preview" tooltip):

  <x-filament-title-with-slug::input
      wire:model="state.title"
      wire:model.defer="state.slug"
      x-data="{
          preview: @entangle('state.slug'),
          showPreview: false,
      }"
      x-on:mouseenter="showPreview = true"
      x-on:mouseleave="showPreview = false"
  >
      <div x-show="showPreview" x-text="`Preview: ${preview}`" class="absolute bg-gray-800 text-white p-2 rounded"></div>
  </x-filament-title-with-slug::input>
  

Gotchas and Tips

Pitfalls

1. Slug Uniqueness Conflicts:

   • Issue: Auto-generated slugs may conflict with existing records.
   • Fix: Use ->uniqueRule() or custom validation:

     TitleWithSlugInput::make('title', 'slug')
         ->uniqueRule('posts', 'slug', ignoreRecord: true),
     

2. Livewire State Mismatch:

   • Issue: Slug changes may not persist due to Livewire state not being synced.
   • Fix: Ensure wire:model.defer is used and save() is called explicitly if needed.

3. Route Caching:

   • Issue: Dynamic visitRoute may fail if routes aren’t cached.
   • Fix: Cache routes or use route() helper with cached parameters.

4. Dark Mode Styling:

   • Issue: Custom styles may break in dark mode.
   • Fix: Use Filament’s dark mode classes (e.g., dark:bg-gray-800).

5. Slugifier Edge Cases:

   • Issue: Special characters or emojis may break slugs.
   • Fix: Pre-process titles or use a stricter slugifier:

     ->slugifier(fn($title) => preg_replace('/[^\pL0-9\-_]/u', '-', $title)),
     

Debugging Tips

• Check Config: Verify config/filament-title-with-slug.php for unexpected behavior (e.g., disabled features).
• Log Slug Events: Use Livewire’s wire:ignore or JavaScript to log slug changes for debugging:

  document.addEventListener('slug-updated', (e) => {
      console.log('Slug updated:', e.detail);
  });
  

• Inspect Blade: Override the component’s Blade view to debug rendering:

  cp vendor/adrolli/filament-title-with-slug/resources/views/input.blade.php resources/views/vendor/filament-title-with-slug/input.blade.php
  

Extension Points

1. Custom Slugifier: Replace the default slugifier with a service provider:

   public function boot()
   {
       TitleWithSlugInput::configureUsing(function (TitleWithSlugInput $component) {
           $component->slugifier(app(\App\Services\CustomSlugifier::class));
       });
   }
   

2. Add-on Fields: Extend the component to include additional fields (e.g., SEO meta tags):

   TitleWithSlugInput::make('title', 'slug')
       ->extraFields([
           TextInput::make('meta_description')
               ->columnSpan('full')
               ->maxLength(160),
       ]),
   

3. Event Listeners: Listen to slug changes globally:

   TitleWithSlugInput::listen('slug-updated', function ($slug, $record) {
       // Trigger analytics, update search index, etc.
   });
   

4. Localization Fallback: Provide fallback translations for missing keys:

   TitleWithSlugInput::make('title', 'slug')
       ->translateLabelsUsing(fn($key, $default) => __("filament-title-with-slug::{$key}", ['default' => $default])),
   

5. Performance:

   • Tip: Disable auto-slug generation for large datasets:

     TitleWithSlugInput::make('title', 'slug')
         ->autoGenerateSlug(false),
     

   • Tip: Use ->columnSpan() wisely to avoid layout issues on small screens.