feat: add wp-scaffold:elasticsearch

README.md

@@ -35,6 +35,7 @@ This package provides a set of scaffolding commands to help you quickly set up c
 in [Brave](https://github.com/yardinternet/brave):
 
 ```shell
+wp acorn scaffold:wp-events
 wp acorn scaffold:knowledgebase
 wp acorn scaffold:news
 wp acorn scaffold:person
@@ -53,6 +54,14 @@ To create a child theme you can run the following command. This will create a ch
 More information about child themes can be found in [Brave](https://github.com/yardinternet/brave)
 and [Sage Child Theme Support](https://github.com/yardinternet/sage-child-theme-support)
 
+### Elasticsearch & Reactive Search
+
+```shell
+wp acorn scaffold:elasticsearch
+```
+
+After scaffolding, [follow these manual steps to complete the setup](docs/elasticsearch.md).
+
 ## About us
 
 [![banner](https://raw.githubusercontent.com/yardinternet/.github/refs/heads/main/profile/assets/small-banner-github.svg)](https://www.yard.nl/werken-bij/)

docs/elasticsearch.md

@@ -0,0 +1,74 @@
+# Elasticsearch
+
+Use the WP Acorn scaffold command to get started:
+
+```shell
+wp acorn scaffold:elasticsearch
+```
+
+After scaffolding, follow these steps:
+
+## 1. Install dependencies
+
+Install the Yard Elasticsearch plugin and the Reactive Search npm package:
+
+```shell
+composer require plugin/yard-elasticsearch && pnpm install @yardinternet/reactive-search
+```
+
+## 2. Add the Elasticsearch `.env` variables
+
+Add the following variables to your `.env` and `.env.example` file:
+
+```env
+# Elasticsearch
+EP_HOST=
+ES_PUBLIC_URL=
+```
+
+## 3. Add Reactive Search entrypoint to Vite
+
+Update your `vite.config.js`:
+
+```js
+export default braveConfig( {
+    entryPoints: [
+        'resources/scripts/reactive-search/reactive-search.jsx',
+    ],
+} );
+```
+
+## 4. Register the Elasticsearch Hook
+
+Add the `Elasticsearch.php` hook to your `hooks.php`:
+
+```php
+return [
+    'elasticsearch' => \App\Hooks\Elasticsearch::class,
+];
+```
+
+## 5. Add the reactive search bar to the header
+
+Replace the current `@include('partials.header.search-bar')` of the search-bar with the following in the  `header.blade.php`:
+
+```diff
+- @include('partials.header.search-bar')
+
++ @if (is_plugin_active('yard-elasticsearch/yard-elasticsearch.php'))
++     @include('partials.header.reactive-search-bar')
++ @else
++     @include('partials.header.search-bar')
++ @endif
+```
+
+## 6. Activate the Plugin & Configure Settings
+
+1. Activate the Yard Elasticsearch plugin in WordPress.
+2. Go to the settings page `/wp/wp-admin/admin.php?page=acf-options-yard-elastic`
+3. Configure the following settings:
+   - **Bronnen** (required)
+   - **Filters** (optional)
+   - **Veld weging** (required)
+
+Everything should now be set up and ready to use!

src/Console/ElasticsearchScaffoldCommand.php

@@ -0,0 +1,37 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Scaffold\Console;
+
+use Illuminate\Console\Command;
+
+class ElasticsearchScaffoldCommand extends Command
+{
+	/**
+	 * The name and signature of the console command.
+	 *
+	 * @var string
+	 */
+	protected $signature = 'scaffold:elasticsearch';
+
+	/**
+	 * The console command description.
+	 *
+	 * @var string
+	 */
+	protected $description = 'Scaffold Elasticsearch & Reactive Search';
+
+	/**
+	 * Execute the console command.
+	 */
+	public function handle(): void
+	{
+		$this->call('vendor:publish', [
+			'--provider' => 'Yard\\Brave\\Scaffold\\ScaffoldServiceProvider',
+			'--tag' => 'elasticsearch',
+		]);
+		$this->info('You need to do some additional steps after running this scaffold. Please read the docs here:');
+		$this->line('https://github.com/yardinternet/brave-scaffold/blob/feat/elasticsearch/docs/elasticsearch.md');
+	}
+}

src/ScaffoldServiceProvider.php

@@ -7,6 +7,7 @@
 use Spatie\LaravelPackageTools\Package;
 use Spatie\LaravelPackageTools\PackageServiceProvider;
 use Yard\Brave\Scaffold\Console\ChildThemeScaffoldCommand;
+use Yard\Brave\Scaffold\Console\ElasticsearchScaffoldCommand;
 use Yard\Brave\Scaffold\Console\EventScaffoldCommand;
 use Yard\Brave\Scaffold\Console\KnowledgebaseScaffoldCommand;
 use Yard\Brave\Scaffold\Console\NewsScaffoldCommand;
@@ -22,6 +23,7 @@ public function configurePackage(Package $package): void
 			->hasCommands(
 				[
 					ChildThemeScaffoldCommand::class,
+					ElasticsearchScaffoldCommand::class,
 					KnowledgebaseScaffoldCommand::class,
 					NewsScaffoldCommand::class,
 					PersonScaffoldCommand::class,
@@ -33,6 +35,21 @@ public function configurePackage(Package $package): void
 
 	public function bootingPackage(): void
 	{
+		$this->publishes([
+			__DIR__ . '/../stubs/app/Hooks/Elasticsearch.php' => app_path('Hooks/Elasticsearch.php'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/reactive-search.jsx' => resource_path('scripts/reactive-search/reactive-search.jsx'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/config/theme.js' => resource_path('scripts/reactive-search/config/theme.js'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/styles/autosuggest.css' => resource_path('scripts/reactive-search/styles/autosuggest.css'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-bar/search-bar.css' => resource_path('scripts/reactive-search/views/search-bar/search-bar.css'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-bar/SearchBar.jsx' => resource_path('scripts/reactive-search/views/search-bar/SearchBar.jsx'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-input/search-input.css' => resource_path('scripts/reactive-search/views/search-input/search-input.css'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-input/SearchInput.jsx' => resource_path('scripts/reactive-search/views/search-input/SearchInput.jsx'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-page/search-page.css' => resource_path('scripts/reactive-search/views/search-page/search-page.css'),
+			__DIR__ . '/../stubs/resources/scripts/reactive-search/views/search-page/SearchPage.jsx' => resource_path('scripts/reactive-search/views/search-page/SearchPage.jsx'),
+			__DIR__ . '/../stubs/resources/views/partials/header/reactive-search-bar.blade.php' => resource_path('views/partials/header/reactive-search-bar.blade.php'),
+			__DIR__ . '/../stubs/resources/views/reactive-search-page.blade.php' => resource_path('views/reactive-search-page.blade.php'),
+		], 'elasticsearch');
+
 		$this->publishes([
 			__DIR__ . '/../stubs/View/Components/Card/News.php' => app_path('View/Components/Card/News.php'),
 			__DIR__ . '/../stubs/Data/NewsData.php' => app_path('Data/NewsData.php'),

stubs/app/Hooks/Elasticsearch.php

@@ -0,0 +1,46 @@
+<?php
+
+declare(strict_types=1);
+
+namespace App\Hooks;
+
+use Illuminate\Support\Facades\Vite;
+use Yard\Brave\Hooks\Plugin;
+use Yard\Hook\Action;
+use Yard\Hook\Filter;
+
+#[Plugin('yard-elasticsearch/yard-elasticsearch.php')]
+class Elasticsearch
+{
+	#[Action('wp_head')]
+	public function enqueueAssets(): void
+	{
+		wp_enqueue_script('wp-element');
+
+		Vite::useHotFile(get_parent_theme_file_path('public/hot'));
+
+		try {
+			echo Vite::withEntryPoints([
+				'web/app/themes/' . get_stylesheet() . '/resources/scripts/reactive-search/reactive-search.jsx',
+			])->toHtml();
+		} catch (\Exception $e) {
+			// Fail silently if entrypoint is not found.
+		}
+	}
+
+	#[Filter('template_include')]
+	public function overrideSearchTemplate(string $template): string
+	{
+		if (! is_search() || is_admin()) {
+			return $template;
+		}
+
+		$override = get_theme_file_path('resources/views/reactive-search-page.blade.php');
+
+		if (file_exists($override)) {
+			return $override;
+		}
+
+		return $template;
+	}
+}

stubs/resources/scripts/reactive-search/config/theme.js

@@ -0,0 +1,11 @@
+export const theme = {
+	typography: {
+		fontFamily: 'inherit',
+		fontSize: 'inherit',
+	},
+	colors: {
+		primaryColor: '#3a0056', // @todo
+		borderColor: '#3a0056', // @todo
+		textColor: '#000',
+	},
+};

stubs/resources/scripts/reactive-search/reactive-search.jsx

@@ -0,0 +1,34 @@
+/**
+ * Internal dependencies
+ */
+import SearchPage from './views/search-page/SearchPage.jsx';
+import SearchBar from './views/search-bar/SearchBar.jsx';
+import SearchInput from './views/search-input/SearchInput.jsx';
+
+/**
+ * WordPress dependencies
+ */
+import { createRoot } from '@wordpress/element';
+
+/**
+ * Styles
+ */
+import './styles/autosuggest.css';
+
+if ( document.getElementById( 'js-reactive-search-page' ) ) {
+	createRoot( document.getElementById( 'js-reactive-search-page' ) ).render(
+		<SearchPage />
+	);
+}
+
+if ( document.getElementById( 'js-reactive-search-bar' ) ) {
+	createRoot( document.getElementById( 'js-reactive-search-bar' ) ).render(
+		<SearchBar />
+	);
+}
+
+if ( document.getElementById( 'js-reactive-search-input' ) ) {
+	createRoot( document.getElementById( 'js-reactive-search-input' ) ).render(
+		<SearchInput />
+	);
+}

stubs/resources/scripts/reactive-search/styles/autosuggest.css

@@ -0,0 +1,56 @@
+@reference '@sage/styles/base/config.css';
+@reference '@sage/styles/base/utilities.css';
+
+.yrs-wrapper {
+	.yrs-autosuggest {
+		@apply z-100 shadow;
+	}
+
+	.yrs-autosuggest-item {
+		@apply border-gray-100;
+
+		&:last-child {
+			@apply font-bold;
+
+			.yrs-autosuggest-link {
+				@apply gap-x-4;
+			}
+		}
+
+		&.is-selected {
+			.yrs-autosuggest-link {
+				@apply text-primary bg-white;
+				animation: focus 0.1s linear both;
+				outline-color: -webkit-focus-ring-color;
+				outline-style: auto;
+			}
+		}
+	}
+
+	.yrs-autosuggest-link {
+		@apply py-2 no-underline;
+
+		&:hover,
+		&:focus {
+			@apply text-black;
+		}
+
+		@variant hocus {
+			@apply text-primary;
+		}
+
+		&:focus {
+			.trim {
+				@apply underline;
+			}
+		}
+
+		i {
+			@apply text-inherit!;
+		}
+	}
+
+	.yrs-autosuggest-link-label {
+		@apply text-xs whitespace-nowrap sm:pl-4;
+	}
+}

stubs/resources/scripts/reactive-search/views/search-bar/SearchBar.jsx

@@ -0,0 +1,43 @@
+/**
+ * External dependencies
+ */
+import {
+	Base,
+	SearchBar as ReactiveSearchBar,
+} from '@yardinternet/reactive-search';
+
+/**
+ * Internal dependencies
+ */
+import { theme } from '../../config/theme';
+import './search-bar.css';
+
+const SearchBar = () => {
+	if ( ! window.YS || ! window.YS.indices ) {
+		console.error( 'Error: Yard Elasticsearch indices has not been set.' ); // eslint-disable-line no-console
+		return <></>;
+	}
+
+	return (
+		<Base
+			app={ window.YS.indices.join() }
+			url={ window.YS.url }
+			theme={ theme }
+		>
+			<ReactiveSearchBar
+				boosts={ window.YS.boosts }
+				dataFields={ window.YS.dataFields }
+				fuzziness={
+					window.YS.fuzziness === 'AUTO'
+						? window.YS.fuzziness
+						: parseInt( window.YS.fuzziness )
+				}
+				mustMatch={ window.YS.mustMatch }
+				openButtonText="Zoeken"
+				placeholder="Waar bent u naar op zoek?"
+			/>
+		</Base>
+	);
+};
+
+export default SearchBar;