Merge pull request #163 from statikbe/KarelJanVanHaute/issue123

Add soft hyphens to the base install

composer.json

@@ -28,6 +28,7 @@
     "studioespresso/craft-dumper": "3.0.1",
     "studioespresso/craft-navigate": "3.1.3",
     "studioespresso/craft-seo-fields": "3.3.1",
+    "vanderlee/syllable": "^1.7",
     "verbb/element-index-defaults": "3.0.0",
     "verbb/expanded-singles": "2.0.5",
     "verbb/formie": "2.0.35",

modules/statik/src/Statik.php

@@ -20,6 +20,7 @@
 use modules\statik\services\LanguageService;
 use modules\statik\variables\StatikVariable;
 use modules\statik\web\twig\HyperExtension;
+use modules\statik\web\twig\HyphenateExtension;
 use modules\statik\web\twig\PaginateExtension;
 use modules\statik\web\twig\StatikExtension;
 use modules\statik\web\twig\IconExtension;
@@ -104,6 +105,7 @@ public function init(): void
         // Register our Twig extensions
         Craft::$app->view->registerTwigExtension(new IconExtension());
         Craft::$app->view->registerTwigExtension(new HyperExtension());
+        Craft::$app->view->registerTwigExtension(new HyphenateExtension());
         Craft::$app->view->registerTwigExtension(new StatikExtension());
         Craft::$app->view->registerTwigExtension(new PaginateExtension());
 

modules/statik/src/web/twig/HyphenateExtension.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace modules\statik\web\twig;
+
+use Craft;
+use craft\elements\Asset;
+use craft\helpers\ElementHelper;
+use Twig\Extension\AbstractExtension;
+use Twig\Markup;
+use Twig\TwigFilter;
+use Vanderlee\Syllable\Syllable;
+
+class HyphenateExtension extends AbstractExtension
+{
+    public function getFilters(): array
+    {
+        return [
+            new TwigFilter('hyphenate', [$this, 'hyphenate']),
+        ];
+    }
+
+    public function hyphenate(string|Asset $source, array $attributes = []): Markup
+    {
+        $minimumWordLength = $attributes['wordLength'] ?? 12;
+
+        $output = Craft::$app->getCache()->getOrSet(
+            "hypen-" . substr(ElementHelper::generateSlug($source), 0, 40),
+            function () use ($source, $minimumWordLength) {
+                $language = strtolower(explode('-', Craft::$app->language)[0]);
+                $language = $language === 'en' ? 'en-us' : $language;
+                $syllable = new Syllable($language);
+                $syllable->getCache()->setPath(Craft::$app->getPath()->getTempPath());
+                $syllable->setMinWordLength($minimumWordLength);
+                return $syllable->hyphenateText($source);
+            });
+
+        return new Markup($output, 'UTF-8');
+    }
+}

templates/_site/_snippet/_content/_hero.twig

@@ -13,7 +13,7 @@
 			<div class="w-full md:w-1/2">
 				<div class="relative z-10">
 					{% if hero.heroTitle|length %}
-						<h1 class="text-white">{{ hero.heroTitle }}</h1>
+						<h1 class="text-white">{{ hero.heroTitle|hyphenate|raw }}</h1>
 					{% endif %}
 					{% if hero.intro|length %}
 						<div class="mt-6 text-lg text-white md:text-xl">{{ hero.intro }}</div>

templates/_site/_snippet/_content/_pageTitle.twig

@@ -1,3 +1,3 @@
 {% if entry.title %}
-	<h1>{{ entry.title }}</h1>
+	<h1>{{ entry.title|hyphenate|raw }}</h1>
 {% endif %}

templates/_site/_snippet/_item/_card.twig

@@ -49,7 +49,7 @@
         {% endif %}
         <div class="w-full flex flex-col flex-auto p-4 md:p-6 xl:p-8 {% if not showInColumns %}md:w-1/2{% endif %}">
             <h3 class="mb-1">
-                <a class="hover-underline link--extended" href="{{ cardEntry.getUrl() }}">{{ cardEntry.overviewTitle ?? cardEntry.title }}</a>
+                <a class="hover-underline link--extended" href="{{ cardEntry.getUrl() }}">{{ (cardEntry.overviewTitle ?? cardEntry.title)|hyphenate|raw }}</a>
             </h3>
             {% if showDate or cardEntry.section.handle == 'news' %}
                 <div class="py-1 text-sm font-semibold text-gray-700">{{ cardEntry.postDate|date('j F Y'|t) }}</div>