feat: add readspeaker component

README.md

@@ -103,6 +103,16 @@ Usage:
 
 Configure the admin behavior of each pattern in the `components.php` config file to automatically save them as drafts (thus hiding them from the pattern inserter), prevent their deletion, and add custom labels in the admin view.
 
+### Read Speaker
+
+Adds a ReadSpeaker button on specific places with the component and automatically adds it to the content of H1 blocks in the post content. Make sure to configure the `readSpeaker` settings in the `components.php` config file to set your customer ID and other options.
+
+Usage:
+
+```blade
+<x-brave-read-speaker />
+```
+
 ## About us
 
 [![banner](https://raw.githubusercontent.com/yardinternet/.github/refs/heads/main/profile/assets/small-banner-github.svg)](https://www.yard.nl/werken-bij/)

config/components.php

@@ -31,4 +31,10 @@
 			'not_found' => '404 error',
 		],
 	],
+	'readSpeaker' => [
+		'customerId' => null,
+		'readId' => 'main',
+		'disable' => '',
+		'automaticallyAddToH1' => true,
+	],
 ];

resources/views/components/read-speaker.blade.php

@@ -0,0 +1,7 @@
+<div id="{{ wp_unique_prefixed_id('readspeaker_button_') }}" class="brave-read-speaker rs_skip rsbtn rs_preserve">
+    <a rel="nofollow" class="rsbtn_play" title="Laat de tekst voorlezen met ReadSpeaker webReader"
+        href="{{ $src }}">
+        <span class="rsbtn_left rsimg rspart"><span class="rsbtn_text"><span>Lees voor</span></span></span>
+        <span class="rsbtn_right rsimg rsplay rspart"></span>
+    </a>
+</div>

src/Components/ReadSpeaker.php

@@ -0,0 +1,43 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Components;
+
+use Illuminate\View\Component;
+use Illuminate\View\Factory;
+use Illuminate\View\View;
+
+class ReadSpeaker extends Component
+{
+	public int $customerId;
+	public string $readId;
+	public string $src = '';
+
+	public function __construct()
+	{
+		$this->customerId = (int) config('components.readSpeaker.customerId', 0);
+		$this->readId = config('components.readSpeaker.readId', 'main');
+
+		if (0 !== $this->customerId) {
+			$this->src = add_query_arg(
+				[
+					'customerid' => $this->customerId,
+					'lang' => 'nl_nl',
+					'readid' => $this->readId,
+					'url' => rawurlencode(get_permalink()),
+				],
+				'https://app-eu.readspeaker.com/cgi-bin/rsent',
+			);
+		}
+	}
+
+	public function render(): View|Factory|string
+	{
+		if ('' === $this->src) {
+			return '';
+		}
+
+		return view('brave::components.read-speaker');
+	}
+}

src/ComponentsServiceProvider.php

@@ -13,6 +13,7 @@
 use Yard\Brave\Components\FeedbackForm;
 use Yard\Brave\Components\ImgFocalPoint;
 use Yard\Brave\Components\PatternContent;
+use Yard\Brave\Components\ReadSpeaker;
 use Yard\Brave\Components\SocialIcon;
 use Yard\Hook\Registrar;
 
@@ -24,7 +25,7 @@ public function configurePackage(Package $package): void
 			->name('components')
 			->hasConfigFile()
 			->hasViews('brave')
-			->hasViewComponents('brave', Accordion::class, BackButton::class, Breadcrumb::class, Dialog::class, FeedbackForm::class,  ImgFocalPoint::class, PatternContent::class, SocialIcon::class);
+			->hasViewComponents('brave', Accordion::class, BackButton::class, Breadcrumb::class, Dialog::class, FeedbackForm::class,  ImgFocalPoint::class, PatternContent::class, ReadSpeaker::class, SocialIcon::class);
 	}
 
 	public function packageBooted(): void
@@ -35,6 +36,10 @@ public function packageBooted(): void
 			$hooks[] = Hooks\PatternContent::class;
 		}
 
+		if (0 !== (int) config('components.readSpeaker.customerId', 0)) {
+			$hooks[] = Hooks\ReadSpeaker::class;
+		}
+
 		(new Registrar($hooks))->registerHooks();
 	}
 }

src/Hooks/ReadSpeaker.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Hooks;
+
+use Illuminate\Support\Facades\Blade;
+use Yard\Brave\Components\ReadSpeaker as ReadSpeakerComponent;
+use Yard\Hook\Action;
+use Yard\Hook\Filter;
+
+class ReadSpeaker
+{
+	private int $customerId;
+	private string $disable;
+	private bool $automaticallyAddToH1;
+
+	public function __construct()
+	{
+		$this->customerId = (int) config('components.readSpeaker.customerId', 0);
+		$this->disable = config('components.readSpeaker.disable', '');
+		$this->automaticallyAddToH1 = (bool) config('components.readSpeaker.automaticallyAddToH1', true);
+	}
+
+	/**
+	 * Add the ReadSpeaker script to the footer of the site if a valid customer ID is set.
+	 */
+	#[Action('wp_footer')]
+	public function addReadSpeakerScript(): void
+	{
+		$baseUrl = 'https://cdn-eu.readspeaker.com/script/' . $this->customerId . '/webReader/webReader.js';
+
+		$src = add_query_arg(
+			[
+				'pids' => 'wr',
+				'disable' => $this->disable,
+			],
+			$baseUrl
+		);
+
+		wp_print_inline_script_tag('', [
+			'id' => 'readspeaker-script',
+			'src' => $src,
+		]);
+	}
+
+	/**
+	 * Add the ReadSpeaker button partial to H1's
+	 */
+	#[Filter('render_block_core/heading')]
+	#[Filter('render_block_core/post-title')]
+	public function addReadSpeakerButtonToH1(string $blockContent, array $block): string
+	{
+		if (! $this->automaticallyAddToH1) {
+			return $blockContent;
+		}
+
+		if (isset($block['attrs']['level']) && (int) $block['attrs']['level'] === 1) {
+			return $blockContent . Blade::renderComponent(new ReadSpeakerComponent());
+		}
+
+		return $blockContent;
+	}
+}