From e12d976305f9db0d7c39984e9018233add2bf51b Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 13:10:16 +0200 Subject: [PATCH 1/7] feat: pagination shared between facetwp and elasticsearch --- .../views/search-page/search-page.css | 35 ++++++++++++------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/stubs/resources/scripts/reactive-search/views/search-page/search-page.css b/stubs/resources/scripts/reactive-search/views/search-page/search-page.css index c70fdde..da20e6f 100644 --- a/stubs/resources/scripts/reactive-search/views/search-page/search-page.css +++ b/stubs/resources/scripts/reactive-search/views/search-page/search-page.css @@ -61,7 +61,7 @@ } .yrs-datasearch-input { - @apply rounded-theme h-13 border-x-0 border-t-0 border-b-2 border-(--yrs-datasearch-input-border-color) bg-white py-3 pr-10 text-base shadow-sm; + @apply h-13 rounded-theme border-x-0 border-t-0 border-b-2 border-(--yrs-datasearch-input-border-color) bg-white py-3 pr-10 text-base shadow-sm; &:focus { @apply border-(--yrs-datasearch-input-border-color-focus); @@ -129,7 +129,7 @@ } .yrs-results-info { - @apply text-primary mb-4 justify-end text-sm; + @apply mb-4 justify-end text-sm text-primary; } .yrs-results-list { @@ -171,24 +171,34 @@ } } + .yrs-pagination { + @apply mb-8; + } + .yrs-pagination-list { - @apply justify-end gap-x-2 gap-y-4; + @apply m-(--pagination-item-margin) justify-end gap-x-(--pagination-item-gap-x) gap-y-(--pagination-item-gap-y); } .yrs-pagination-button { - @apply size-10 min-h-10 min-w-10 p-2 text-black no-underline transition-all; + @apply relative size-(--pagination-item-size) rounded-(--pagination-item-radius) p-2 text-black no-underline transition-all; &:not( .is-active ) { - @apply hover:bg-primary-100; + @variant hocus { + @apply bg-(--pagination-item-bg-color-hover) text-(--pagination-item-color-hover); + } } &.is-active { - @apply font-bold; + @apply bg-(--pagination-current-bg-color) text-(--pagination-current-color); + + &::after { + @apply absolute bottom-0 left-1/2 h-0.5 w-3/4 -translate-x-1/2 bg-(--pagination-current-underline-bg-color) content; + } } } .yrs-pagination-button-prev { - @apply hover:bg-primary! border-primary text-primary mr-4 size-10 border text-[0px]; + @apply mr-4 size-(--pagination-item-size) border border-(--pagination-prev-border-color) bg-(--pagination-prev-bg-color) text-[0px] text-(--pagination-prev-color); &::before { @apply fontawesome text-base text-inherit; @@ -196,25 +206,24 @@ } @variant hocus { - @apply bg-primary text-white; + @apply border-(--pagination-prev-border-color-hocus) bg-(--pagination-prev-bg-color-hocus) text-(--pagination-prev-color-hocus); } } .yrs-pagination-button-next { - @apply bg-primary ml-4 size-10 text-[0px] text-white; + @apply ml-4 size-(--pagination-item-size) border border-(--pagination-next-border-color) bg-(--pagination-next-bg-color) text-[0px] text-(--pagination-next-color); &::before { - @apply fontawesome text-base; + @apply fontawesome text-base text-inherit; --fa-icon: '\f054'; } @variant hocus { - @apply bg-primary-700!; - filter: brightness( 1 ); + @apply border-(--pagination-next-border-color-hocus) bg-(--pagination-next-bg-color-hocus) text-(--pagination-next-color-hocus); } } .yrs-pagination-info { - @apply text-right text-sm; + @apply mt-4 text-right text-sm; } } From 492dfbc2de89a653af17d06ba51cc6eb21d6591a Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 14:29:52 +0200 Subject: [PATCH 2/7] docs: voeg stap toe voor pagination variabelen bij elasticsearch scaffold --- docs/elasticsearch.md | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/elasticsearch.md b/docs/elasticsearch.md index 07379ce..77d73ef 100644 --- a/docs/elasticsearch.md +++ b/docs/elasticsearch.md @@ -26,7 +26,11 @@ EP_HOST= ES_PUBLIC_URL= ``` -## 3. Add Reactive Search entrypoint to Vite +## 3. Controleer pagination variabelen + +Zorg dat `variables.css` de `--pagination-*` variabelen bevat. Zo niet, kopieer ze over vanuit `brave`. + +## 4. Add Reactive Search entrypoint to Vite Update your `vite.config.js`: @@ -38,7 +42,7 @@ export default braveConfig( { } ); ``` -## 4. Register the Elasticsearch Hook +## 5. Register the Elasticsearch Hook Add the `Elasticsearch.php` hook to your `hooks.php`: @@ -48,7 +52,7 @@ return [ ]; ``` -## 5. Add the reactive search bar to the header +## 6. Add the reactive search bar to the header Replace the current `` of the search-bar with the following in the `header.blade.php`: @@ -60,7 +64,7 @@ Replace the current `` of the search-bar with the followi @endif ``` -## 6. Activate the Plugin & Configure Settings +## 7. 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` From 0448e6173699eddd227887ff3ae701dfc7d9238f Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 14:30:34 +0200 Subject: [PATCH 3/7] feat: waarschuw na elasticsearch scaffold voor ontbrekende pagination variabelen --- src/Console/ElasticsearchScaffoldCommand.php | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Console/ElasticsearchScaffoldCommand.php b/src/Console/ElasticsearchScaffoldCommand.php index bffd08d..c11cc0d 100644 --- a/src/Console/ElasticsearchScaffoldCommand.php +++ b/src/Console/ElasticsearchScaffoldCommand.php @@ -31,6 +31,7 @@ public function handle(): void '--provider' => 'Yard\\Brave\\Scaffold\\ScaffoldServiceProvider', '--tag' => 'elasticsearch', ]); + $this->warn('Zorg dat variables.css de --pagination-* variabelen bevat. Zo niet, kopieer ze over vanuit brave.'); $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/main/docs/elasticsearch.md'); } From ab56b2d1e351df486594f2693604f0d2f2ce65c4 Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 14:32:49 +0200 Subject: [PATCH 4/7] feat: check of pagination variabelen aanwezig zijn na elasticsearch scaffold --- src/Console/ElasticsearchScaffoldCommand.php | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Console/ElasticsearchScaffoldCommand.php b/src/Console/ElasticsearchScaffoldCommand.php index c11cc0d..282c391 100644 --- a/src/Console/ElasticsearchScaffoldCommand.php +++ b/src/Console/ElasticsearchScaffoldCommand.php @@ -31,7 +31,11 @@ public function handle(): void '--provider' => 'Yard\\Brave\\Scaffold\\ScaffoldServiceProvider', '--tag' => 'elasticsearch', ]); - $this->warn('Zorg dat variables.css de --pagination-* variabelen bevat. Zo niet, kopieer ze over vanuit brave.'); + $variablesPath = base_path('resources/styles/base/variables.css'); + if (! file_exists($variablesPath) || ! str_contains(file_get_contents($variablesPath), '--pagination-')) { + $this->warn('variables.css mist de shared elasticsearch/facetwp --pagination-* variabelen. Kopieer ze over vanuit brave.'); + } + $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/main/docs/elasticsearch.md'); } From ac591a25f3a1fcb601933a5b4767b5f1a19d0c62 Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 14:36:05 +0200 Subject: [PATCH 5/7] fix: cast file_get_contents naar string voor phpstan --- src/Console/ElasticsearchScaffoldCommand.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Console/ElasticsearchScaffoldCommand.php b/src/Console/ElasticsearchScaffoldCommand.php index 282c391..099013d 100644 --- a/src/Console/ElasticsearchScaffoldCommand.php +++ b/src/Console/ElasticsearchScaffoldCommand.php @@ -32,7 +32,7 @@ public function handle(): void '--tag' => 'elasticsearch', ]); $variablesPath = base_path('resources/styles/base/variables.css'); - if (! file_exists($variablesPath) || ! str_contains(file_get_contents($variablesPath), '--pagination-')) { + if (! str_contains((string) file_get_contents($variablesPath), '--pagination-')) { $this->warn('variables.css mist de shared elasticsearch/facetwp --pagination-* variabelen. Kopieer ze over vanuit brave.'); } From 8e5a4afb89fd54a64a846fd054311cd777d906b9 Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 16:00:40 +0200 Subject: [PATCH 6/7] fix: translate warning and docs to english --- docs/elasticsearch.md | 4 ++-- src/Console/ElasticsearchScaffoldCommand.php | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/elasticsearch.md b/docs/elasticsearch.md index 77d73ef..91f7daf 100644 --- a/docs/elasticsearch.md +++ b/docs/elasticsearch.md @@ -26,9 +26,9 @@ EP_HOST= ES_PUBLIC_URL= ``` -## 3. Controleer pagination variabelen +## 3. Check pagination variables -Zorg dat `variables.css` de `--pagination-*` variabelen bevat. Zo niet, kopieer ze over vanuit `brave`. +Make sure `variables.css` contains the `--pagination-*` variables. If not, copy them over from `brave`. ## 4. Add Reactive Search entrypoint to Vite diff --git a/src/Console/ElasticsearchScaffoldCommand.php b/src/Console/ElasticsearchScaffoldCommand.php index 099013d..246aef8 100644 --- a/src/Console/ElasticsearchScaffoldCommand.php +++ b/src/Console/ElasticsearchScaffoldCommand.php @@ -33,7 +33,7 @@ public function handle(): void ]); $variablesPath = base_path('resources/styles/base/variables.css'); if (! str_contains((string) file_get_contents($variablesPath), '--pagination-')) { - $this->warn('variables.css mist de shared elasticsearch/facetwp --pagination-* variabelen. Kopieer ze over vanuit brave.'); + $this->warn('variables.css is missing the shared --pagination-* variables. Copy them over from brave.'); } $this->info('You need to do some additional steps after running this scaffold. Please read the docs here:'); From 511010b9d96106153d97059f920d23a8051a87fd Mon Sep 17 00:00:00 2001 From: Wybe van den Bosch Date: Tue, 19 May 2026 16:31:56 +0200 Subject: [PATCH 7/7] fix: reset min-h and min-w on pagination button --- .../scripts/reactive-search/views/search-page/search-page.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stubs/resources/scripts/reactive-search/views/search-page/search-page.css b/stubs/resources/scripts/reactive-search/views/search-page/search-page.css index da20e6f..f56e09e 100644 --- a/stubs/resources/scripts/reactive-search/views/search-page/search-page.css +++ b/stubs/resources/scripts/reactive-search/views/search-page/search-page.css @@ -180,7 +180,7 @@ } .yrs-pagination-button { - @apply relative size-(--pagination-item-size) rounded-(--pagination-item-radius) p-2 text-black no-underline transition-all; + @apply relative size-(--pagination-item-size) min-h-auto min-w-auto rounded-(--pagination-item-radius) p-2 text-black no-underline transition-all; &:not( .is-active ) { @variant hocus {