Building a word glossary in Laravel 11 and Filament

To build a word glossary in Laravel 11 and Filament, you can follow these steps:

1. Create the Glossary Model and Migration: First, create a model and migration for the glossary words.

   php artisan make:model Glossary -m
   

   Then, update the migration file to include the necessary fields:

   // database/migrations/xxxx_xx_xx_create_glossaries_table.php
   public function up()
   {
       Schema::create('glossaries', function (Blueprint $table) {
           $table->id();
           $table->string('word')->unique();
           $table->text('description');
           $table->timestamps();
       });
   }
   

   Run the migration:

   php artisan migrate
   

2. Seed the Glossary Table: Create a seeder to populate the glossary table with initial data.

   php artisan make:seeder GlossarySeeder
   

   Update the seeder file:

   // database/seeders/GlossarySeeder.php
   use App\Models\Glossary;
   
   public function run()
   {
       Glossary::create(['word' => 'Laravel', 'description' => 'A PHP framework for web artisans.']);
       // Add more glossary words as needed
   }
   

   Run the seeder:

   php artisan db:seed --class=GlossarySeeder
   

3. Create a Middleware to Inject Glossary Tooltips: Create a middleware to process the content and inject tooltips for glossary words.

   php artisan make:middleware GlossaryTooltip
   

   Update the middleware:

   // app/Http/Middleware/GlossaryTooltip.php
   namespace App\Http\Middleware;
   
   use Closure;
   use App\Models\Glossary;
   
   class GlossaryTooltip
   {
       public function handle($request, Closure $next)
       {
           $response = $next($request);
   
           if ($response->isSuccessful() && $response->headers->get('content-type') === 'text/html; charset=UTF-8') {
               $content = $response->getContent();
               $glossaryWords = Glossary::all();
   
               foreach ($glossaryWords as $word) {
                   $pattern = '/\b' . preg_quote($word->word, '/') . '\b/';
                   $replacement = '<span class="glossary-tooltip" title="' . e($word->description) . '">' . e($word->word) . '</span>';
                   $content = preg_replace($pattern, $replacement, $content, 1);
               }
   
               $response->setContent($content);
           }
   
           return $response;
       }
   }
   

   Register the middleware in app/Http/Kernel.php:

   protected $middlewareGroups = [
       'web' => [
           // other middleware
           \App\Http\Middleware\GlossaryTooltip::class,
       ],
   ];
   

4. Add CSS for Tooltip Styling: Add some CSS to style the tooltips. You can include this in your main CSS file.

   .glossary-tooltip {
       position: relative;
       cursor: pointer;
       border-bottom: 1px dotted #000;
   }
   
   .glossary-tooltip:hover::after {
       content: attr(title);
       position: absolute;
       background: #333;
       color: #fff;
       padding: 5px;
       border-radius: 5px;
       top: 100%;
       left: 50%;
       transform: translateX(-50%);
       white-space: nowrap;
       z-index: 1000;
   }
   

5. Integrate with Filament Wysiwyg: Ensure that your Filament Wysiwyg editor is configured to allow HTML content. This will ensure that the tooltips are rendered correctly.

   // In your Filament resource or form configuration
   use Filament\Forms\Components\RichEditor;
   
   RichEditor::make('content')
       ->toolbarButtons([
           'bold',
           'italic',
           'underline',
           'strike',
           'link',
           'bulletList',
           'orderedList',
           'blockquote',
           'codeBlock',
           'heading',
           'horizontalRule',
           'table',
           'image',
           'video',
           'undo',
           'redo',
       ])
       ->required(),
   

By following these steps, you will have a glossary system in place that highlights the first instance of a glossary word in an article and shows a tooltip with the word's description when hovered over. This approach ensures that the glossary is dynamically updated across all articles without causing significant performance issues.