replace Fuse.js with Algolia for home user search

.env.example

@@ -46,3 +46,7 @@ BACKUP_DROPBOX_ACCESS_TOKEN=
 BACKUP_ARCHIVE_PASSWORD=
 
 TRUSTED_PROXIES=
+
+SCOUT_PREFIX=
+ALGOLIA_APP_ID=
+ALGOLIA_SECRET=

app/Console/Kernel.php

@@ -8,9 +8,12 @@
 use App\Console\Commands\GithubRepositoryDetails;
 use App\Console\Commands\GithubUserDetails;
 use App\Console\Commands\GithubUserRepositories;
+use App\Models\User;
 use Illuminate\Console\Scheduling\Schedule;
 use Illuminate\Foundation\Console\Kernel as ConsoleKernel;
 use Laravel\Horizon\Console\SnapshotCommand;
+use Laravel\Scout\Console\FlushCommand;
+use Laravel\Scout\Console\ImportCommand;
 use Spatie\Backup\Commands\BackupCommand;
 use Spatie\Backup\Commands\CleanupCommand;
 use Spatie\Backup\Commands\MonitorCommand;
@@ -33,6 +36,12 @@ protected function schedule(Schedule $schedule): void
         // laravel/horizon
         $schedule->command(SnapshotCommand::class)->everyFiveMinutes()->onOneServer()->environments('gorgeous-moon');
 
+        // laravel/scout
+        $schedule->command(FlushCommand::class, [User::class])
+            ->dailyAt('02:00')
+            ->onOneServer()
+            ->onSuccess(fn () => $this->call(ImportCommand::class, ['model' => User::class]));
+
         // spatie/laravel-schedule-monitor
         $schedule->command(CleanLogCommand::class)->dailyAt('01:00')->onOneServer();
 

app/Http/Policies/ContentSecurityPolicy.php

@@ -18,6 +18,8 @@ public function configure(): void
             ->addDirective(Directive::CHILD, Keyword::NONE)
             ->addDirective(Directive::CONNECT, Keyword::SELF)
             ->addDirective(Directive::CONNECT, 'https://plausible.io/api/event')
+            ->addDirective(Directive::CONNECT, 'https://*.algolia.net')
+            ->addDirective(Directive::CONNECT, 'https://*.algolianet.com')
             ->addDirective(Directive::FORM_ACTION, Keyword::SELF)
             ->addDirective(Directive::FRAME, Keyword::NONE)
             ->addDirective(Directive::FRAME_ANCESTORS, Keyword::NONE)

app/Models/User.php

@@ -18,6 +18,7 @@
 use Illuminate\Notifications\RoutesNotifications;
 use Illuminate\Support\Facades\Http;
 use Illuminate\Support\Str;
+use Laravel\Scout\Searchable;
 use Spatie\Permission\Traits\HasRoles;
 use Spatie\Sitemap\Contracts\Sitemapable as SitemapableContract;
 use Spatie\Sitemap\Tags\Url;
@@ -72,6 +73,7 @@ class User extends Model implements AuthenticatableContract, AuthorizableContrac
     use RoutesNotifications;
     use Blockable;
     use HasRoles;
+    use Searchable;
 
     protected const SUPERADMIN_IDS = [
         6187884, // Gummibeer
@@ -228,4 +230,24 @@ public function toSitemapTag(): Url
         return Url::create($this->profile_url)
             ->setChangeFrequency(Url::CHANGE_FREQUENCY_DAILY);
     }
+
+    public function toSearchableArray(): array
+    {
+        return [
+            'name' => $this->name,
+            'display_name' => $this->display_name,
+            'avatar_url' => $this->avatar_url,
+            'profile_url' => $this->profile_url,
+        ];
+    }
+
+    public function shouldBeSearchable(): bool
+    {
+        return $this->isRegistered();
+    }
+
+    protected function makeAllSearchableUsing(Builder $query): Builder
+    {
+        return $query->whereIsRegistered();
+    }
 }

composer.json

@@ -9,6 +9,7 @@
         "ext-intl": "*",
         "ext-json": "*",
         "ext-redis": "*",
+        "algolia/algoliasearch-client-php": "^3.0",
         "astrotomic/laravel-cachable-attributes": "^0.3.0",
         "astrotomic/laravel-imgix": "^0.2.0",
         "astrotomic/php-open-graph": "^0.5.2",
@@ -22,6 +23,7 @@
         "laravel/framework": "^8.12",
         "laravel/horizon": "^5.7",
         "laravel/nova": "^3.22",
+        "laravel/scout": "^8.6",
         "laravel/socialite": "^5.2",
         "lorisleiva/cron-translator": "^0.2.0",
         "mazedlx/laravel-feature-policy": "^1.1",

config/horizon.php

@@ -219,6 +219,15 @@
 //            'tries' => 1,
 //            'nice' => 0,
 //        ],
+        'scout' => [
+            'connection' => 'redis',
+            'queue' => 'scout',
+            'balance' => 'off',
+            'maxProcesses' => 1,
+            'memory' => 128,
+            'tries' => 1,
+            'nice' => 0,
+        ],
         'github' => [
             'connection' => 'redis',
             'queue' => 'github',

config/scout.php

@@ -0,0 +1,126 @@
+<?php
+
+use Illuminate\Support\Str;
+
+return [
+
+    /*
+    |--------------------------------------------------------------------------
+    | Default Search Engine
+    |--------------------------------------------------------------------------
+    |
+    | This option controls the default search connection that gets used while
+    | using Laravel Scout. This connection is used when syncing all models
+    | to the search service. You should adjust this based on your needs.
+    |
+    | Supported: "algolia", "null"
+    |
+    */
+
+    'driver' => 'algolia',
+
+    /*
+    |--------------------------------------------------------------------------
+    | Index Prefix
+    |--------------------------------------------------------------------------
+    |
+    | Here you may specify a prefix that will be applied to all search index
+    | names used by Scout. This prefix may be useful if you have multiple
+    | "tenants" or applications sharing the same search infrastructure.
+    |
+    */
+
+    // ToDo: https://github.com/laravel/framework/pull/37080
+    // 'prefix' => (string) Str::of(env('SCOUT_PREFIX', ''))->whenNotEmpty(fn (Stringable $prefix) => $prefix->finish('_')),
+    'prefix' => Str::finish(env('SCOUT_PREFIX', ''), '_'),
+
+    /*
+    |--------------------------------------------------------------------------
+    | Queue Data Syncing
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to control if the operations that sync your data
+    | with your search engines are queued. When this is set to "true" then
+    | all automatic data syncing will get queued for better performance.
+    |
+    */
+
+    'queue' => [
+        'queue' => 'scout',
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Database Transactions
+    |--------------------------------------------------------------------------
+    |
+    | This configuration option determines if your data will only be synced
+    | with your search indexes after every open database transaction has
+    | been committed, thus preventing any discarded data from syncing.
+    |
+    */
+
+    'after_commit' => true,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Chunk Sizes
+    |--------------------------------------------------------------------------
+    |
+    | These options allow you to control the maximum chunk size when you are
+    | mass importing data into the search engine. This allows you to fine
+    | tune each of these chunk sizes based on the power of the servers.
+    |
+    */
+
+    'chunk' => [
+        'searchable' => 500,
+        'unsearchable' => 500,
+    ],
+
+    /*
+    |--------------------------------------------------------------------------
+    | Soft Deletes
+    |--------------------------------------------------------------------------
+    |
+    | This option allows to control whether to keep soft deleted records in
+    | the search indexes. Maintaining soft deleted records can be useful
+    | if your application still needs to search for the records later.
+    |
+    */
+
+    'soft_delete' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Identify User
+    |--------------------------------------------------------------------------
+    |
+    | This option allows you to control whether to notify the search engine
+    | of the user performing the search. This is sometimes useful if the
+    | engine supports any analytics based on this application's users.
+    |
+    | Supported engines: "algolia"
+    |
+    */
+
+    'identify' => false,
+
+    /*
+    |--------------------------------------------------------------------------
+    | Algolia Configuration
+    |--------------------------------------------------------------------------
+    |
+    | Here you may configure your Algolia settings. Algolia is a cloud hosted
+    | search engine which works great with Scout out of the box. Just plug
+    | in your application ID and admin API key to get started searching.
+    |
+    */
+
+    'algolia' => [
+        'id' => env('ALGOLIA_APP_ID'),
+        'secret' => env('ALGOLIA_SECRET'),
+        'search_key' => env('ALGOLIA_SEARCH_KEY'),
+    ],
+
+];

package.json

@@ -15,8 +15,9 @@
     },
     "dependencies": {
         "@ryangjchandler/alpine-clipboard": "^1.0.0",
+        "algoliasearch": "^4.9.0",
         "alpinejs": "^2.8.2",
-        "fuse.js": "^6.4.6",
+        "instantsearch.js": "^4.21.0",
         "tailwind-programming-language-colors": "Astrotomic/tailwind-programming-language-colors#main",
         "tailwindcss": "^2.0.4",
         "typeface-raleway": "^1.1.13",

resources/js/app.js

@@ -1,5 +1,16 @@
 import '@ryangjchandler/alpine-clipboard';
-import './alpine/fuse';
 import 'alpinejs';
 
 window.components = {};
+
+import algoliasearch from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js';
+import { connectAutocomplete } from 'instantsearch.js/es/connectors'
+
+window.algolia = {
+    searchClient: algoliasearch(window.ALGOLIA_ID, window.ALGOLIA_KEY),
+    instantsearch,
+    connectors: {
+        connectAutocomplete,
+    }
+};

resources/views/components/layout/html.blade.php

@@ -26,6 +26,11 @@
 
     <link rel="stylesheet" href="{{ mix('css/app.css') }}"/>
 
+    <script nonce="{{ csp_nonce() }}">
+        window.ALGOLIA_ID = '{{ config('scout.algolia.id') }}';
+        window.ALGOLIA_KEY = '{{ config('scout.algolia.search_key') }}';
+    </script>
+
     @stack('head')
 </head>
 <body {{ $attributes->merge(['class' => 'antialiased']) }}>