chore: add tolkie hooks

README.md

@@ -113,6 +113,40 @@ Usage:
 <x-brave-read-speaker />
 ```
 
+### Tolkie
+
+Enqueues the Tolkie script and adds the button placeholder. 
+It [automatically](./src/Hooks/Tolkie.php) adds a placeholder bellow every `H1` heading. 
+
+Usage:
+
+1. Add the Tolkie token to the config
+    ```
+    return [
+        ...
+
+        'tolkie' => [
+            'token' => 'yourtokenhere',
+        ],
+    ];
+   ```
+2. If needed add the button placeholder component to the templates 
+    ```blade
+    <x-brave-tolkie />
+    ```
+
+If needed you can configure the Tolkie script in the config. Every attribute you would normally add in `wp_print_script_tag()` can be added here.
+
+Lets say you want to add a new `data` attribute:
+```
+'tolkie' => [
+    'html_attributes' => [
+        'data-tolkie-new-option' => 'new-value',
+        'data-tolkie-state' => 'separateButtons',
+    ]
+],
+```
+
 ### Nav
 
 Navigation component with optional dropdowns. Provides the right ARIA attributes and keyboard navigation for accessibility.

config/components.php

@@ -37,4 +37,11 @@
 		'disable' => '',
 		'automaticallyAddToH1' => true,
 	],
+	'tolkie' => [
+		'token' => null,
+		'automatically_add_to_h1' => true,
+		'html_attributes' => [
+			'data-tolkie-state' => 'separateButtons',
+		],
+	],
 ];

resources/views/components/tolkie.blade.php

@@ -0,0 +1 @@
+<div class="tolkie-buttons-afterbegin"></div>

src/Components/Tolkie.php

@@ -0,0 +1,17 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Components;
+
+use Illuminate\Contracts\View\Factory;
+use Illuminate\View\Component;
+use Illuminate\View\View;
+
+class Tolkie extends Component
+{
+	public function render(): Factory|View
+	{
+		return view('brave::components.tolkie');
+	}
+}

src/ComponentsServiceProvider.php

@@ -16,6 +16,7 @@
 use Yard\Brave\Components\PatternContent;
 use Yard\Brave\Components\ReadSpeaker;
 use Yard\Brave\Components\SocialIcon;
+use Yard\Brave\Components\Tolkie;
 use Yard\Brave\Components\Tooltip;
 use Yard\Hook\Registrar;
 
@@ -39,7 +40,8 @@ public function configurePackage(Package $package): void
 				PatternContent::class,
 				ReadSpeaker::class,
 				SocialIcon::class,
-				Tooltip::class
+				Tooltip::class,
+				Tolkie::class
 			);
 	}
 
@@ -55,6 +57,13 @@ public function packageBooted(): void
 			$hooks[] = Hooks\ReadSpeaker::class;
 		}
 
+		if ('' !== config('components.tolkie.token', '')) {
+			//			dd(config('components.tolkie.token'), config('components.tolkie.automatically_add_to_h1'), [...config('components.tolkie.html_attributes', [
+			//				'data-tolkie-state' => 'separateButtons',
+			//			]),]);
+			$hooks[] = Hooks\Tolkie::class;
+		}
+
 		(new Registrar($hooks))->registerHooks();
 	}
 }

src/Hooks/Tolkie.php

@@ -0,0 +1,39 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Yard\Brave\Hooks;
+
+use Yard\Hook\Action;
+use Yard\Hook\Filter;
+
+class Tolkie
+{
+	#[Action('wp_footer')]
+	public function addTolkieScript(): void
+	{
+		wp_print_script_tag([
+			...config('components.tolkie.html_attributes', [
+				'data-tolkie-state' => 'separateButtons',
+			]),
+			'class' => 'tolkieIntegrationScript',
+			'id' => 'tolkie-script',
+			'type' => 'module',
+			'src' => 'https://app.tolkie.nl/',
+			'crossorigin' => 'anonymous',
+			'defer' => '',
+			'data-tolkie-token' => config('components.tolkie.token'),
+		]);
+	}
+
+	#[Filter('render_block_core/heading')]
+	#[Filter('render_block_core/post-title')]
+	public function addTolkieTag(string $content, array $block): string
+	{
+		if (config('components.tolkie.automatically_add_to_h1', true) && 1 === ($block['attrs']['level'] ?? 0)) {
+			$content .= '<div class="tolkie-buttons-afterbegin"></div>';
+		}
+
+		return $content;
+	}
+}