add custom anchor link type to hyper options + update template for link

config/project/project.yaml

@@ -1,4 +1,4 @@
-dateModified: 1769616195
+dateModified: 1770968375
 elementSources:
   craft\elements\Entry:
     -

modules/statik/src/Statik.php

@@ -22,6 +22,7 @@
 use modules\statik\fields\AnchorLink;
 use modules\statik\services\LanguageService;
 use modules\statik\variables\StatikVariable;
+use modules\statik\web\hyper\Anchor;
 use modules\statik\web\twig\HyperExtension;
 use modules\statik\web\twig\HyphenateExtension;
 use modules\statik\web\twig\IconExtension;
@@ -30,6 +31,7 @@
 use modules\statik\web\twig\ValidateInputExtension;
 use verbb\formie\events\RegisterFieldsEvent;
 use verbb\formie\fields\formfields;
+use verbb\hyper\services\Links;
 use yii\base\Event;
 use yii\base\Module;
 use yii\web\HttpException;
@@ -198,6 +200,10 @@ function () use ($languageService) {
             $event->fields = array_values($event->fields);
         });
 
+        Event::on(Links::class, Links::EVENT_REGISTER_LINK_TYPES, function(RegisterComponentTypesEvent $event) {
+            $event->types[] = Anchor::class;
+        });
+
         Event::on(Cp::class, Cp::EVENT_REGISTER_CP_NAV_ITEMS, function (RegisterCpNavItemsEvent $event) {
             if (Craft::$app->getConfig()->getGeneral()->allowAdminChanges) {
                 $event->navItems[] = [

modules/statik/src/templates/_hyper/_anchor/_input.twig

@@ -0,0 +1,7 @@
+{% import '_includes/forms' as forms %}
+
+{{ forms.text({
+    name: 'linkValue',
+    value: link.linkValue,
+    placeholder: link.placeholder,
+}) }}

modules/statik/src/templates/_hyper/_anchor/_settings.twig

@@ -0,0 +1,10 @@
+{% import '_includes/forms' as forms %}
+
+{{ forms.textField({
+    label: 'Placeholder' | t('hyper'),
+    instructions: 'The placeholder text for the "Link" setting.' | t('hyper'),
+    name: 'placeholder',
+    value: linkType.placeholder,
+    placeholder: linkType.linkValuePlaceholder(),
+    errors: linkType.getErrors('placeholder'),
+}) }}

modules/statik/src/web/hyper/Anchor.php

@@ -0,0 +1,96 @@
+<?php
+
+namespace modules\statik\web\hyper;
+
+use craft\helpers\App;
+use craft\validators\UrlValidator;
+use Twig\Error\LoaderError;
+use Twig\Error\RuntimeError;
+use Twig\Error\SyntaxError;
+use verbb\hyper\base\Link;
+use verbb\hyper\fieldlayoutelements\LinkField;
+use verbb\hyper\fields\HyperField;
+use yii\base\Exception;
+
+class Anchor extends Link
+{
+    // Static Methods
+    // =========================================================================
+
+    public static function displayName(): string
+    {
+        return \Craft::t('hyper', 'Anchor Link');
+    }
+
+
+    // Public Methods
+    // =========================================================================
+
+    public function getLinkUrl(): ?string
+    {
+        return rtrim(\Craft::$app->getSites()->primarySite->baseUrl, '/');
+    }
+
+    public ?string $placeholder = null;
+
+    public function getSettingsConfig(): array
+    {
+        $values = parent::getSettingsConfig();
+        $values['placeholder'] = $this->placeholder;
+
+        return $values;
+    }
+
+    public function defaultPlaceholder(): ?string
+    {
+        return rtrim(\Craft::$app->getSites()->primarySite->baseUrl, '/');
+    }
+
+
+    public function validateAnchorLink(string $attribute): void
+    {
+        $isValid = str_starts_with($this->$attribute, '#');
+
+        if (!$isValid) {
+            $this->addError($attribute, 'Anchor links must start with a # symbol.');
+        }
+    }
+
+    // Protected Methods
+    // =========================================================================
+
+    protected function defineRules(): array
+    {
+        $rules = parent::defineRules();
+
+        $rules[] = [['linkValue'], 'validateAnchorLink'];
+
+        return $rules;
+    }
+
+    /**
+     * @throws SyntaxError
+     * @throws Exception
+     * @throws RuntimeError
+     * @throws LoaderError
+     */
+    public function getSettingsHtml(): ?string
+    {
+        $variables = $this->getSettingsHtmlVariables();
+
+        return \Craft::$app->getView()->renderTemplate('statik/_hyper/_anchor/_settings', $variables);
+    }
+
+    /**
+     * @throws SyntaxError
+     * @throws Exception
+     * @throws RuntimeError
+     * @throws LoaderError
+     */
+    public function getInputHtml(LinkField $layoutField, HyperField $field): ?string
+    {
+        $variables = $this->getInputHtmlVariables($layoutField, $field);
+
+        return \Craft::$app->getView()->renderTemplate('statik/_hyper/_anchor/_input', $variables);
+    }
+}

templates/_site/_snippet/_content/_hero.twig

@@ -1,36 +1,38 @@
 {% if entry.hero|length %}
     {% set hero = entry.hero.one() %}
     {% set heroImage = hero.image.one() %}
-    {% set optimizedHero = heroImage.optimizedHero %}
-    {% set darkOpacityMaxIntensity = 75 %}
-    {% set darkOpacity = optimizedHero.lightness %}
-    {% if darkOpacity > darkOpacityMaxIntensity %}
-        {% set darkOpacity = darkOpacityMaxIntensity %}
-    {% endif %}
-    <div class="relative py-10 bg-black bg-cover sm:py-20" data-bg-image style="background-position: {% for focalPoint in heroImage.getFocalPoint() %} {{ focalPoint * 100 }}% {% endfor %};">
-        <div class="absolute inset-0 w-full h-full bg-pitch-black" style="opacity: {{darkOpacity}}%" aria-hidden="true"></div>
-        <div class="container">
-            <div class="w-full md:w-1/2">
-                <div class="relative z-10">
-                    {% if hero.title|length %}
-                        <h1 class="text-white">{{ hero.title|hyphenate|raw }}</h1>
-                    {% endif %}
-                    {% if hero.intro|length %}
-                        <div class="mt-6 text-lg text-white md:text-xl">{{ hero.intro }}</div>
-                    {% endif %}
-                    {% if hero.ctas|length %}
-                        <div class="flex flex-wrap items-center gap-4 mt-6">
-                            {{ render_hyper_links(hero.ctas) | raw }}
-                        </div>
-                    {% endif %}
+    {% if heroImage|length %}
+        {% set optimizedHero = heroImage.optimizedHero %}
+        {% set darkOpacityMaxIntensity = 75 %}
+        {% set darkOpacity = optimizedHero.lightness %}
+        {% if darkOpacity > darkOpacityMaxIntensity %}
+            {% set darkOpacity = darkOpacityMaxIntensity %}
+        {% endif %}
+        <div class="relative py-10 bg-black bg-cover sm:py-20" data-bg-image style="background-position: {% for focalPoint in heroImage.getFocalPoint() %} {{ focalPoint * 100 }}% {% endfor %};">
+            <div class="absolute inset-0 w-full h-full bg-pitch-black" style="opacity: {{darkOpacity}}%" aria-hidden="true"></div>
+            <div class="container">
+                <div class="w-full md:w-1/2">
+                    <div class="relative z-10">
+                        {% if hero.title|length %}
+                            <h1 class="text-white">{{ hero.title|hyphenate|raw }}</h1>
+                        {% endif %}
+                        {% if hero.intro|length %}
+                            <div class="mt-6 text-lg text-white md:text-xl">{{ hero.intro }}</div>
+                        {% endif %}
+                        {% if hero.ctas|length %}
+                            <div class="flex flex-wrap items-center gap-4 mt-6">
+                                {{ render_hyper_links(hero.ctas) | raw }}
+                            </div>
+                        {% endif %}
+                    </div>
                 </div>
+                <picture>
+                    {% if craft.imageOptimize.serverSupportsWebP() and heroImage.extension != 'svg' and heroImage.extension != 'gif' and heroImage.extension != 'webp' %}
+                        <source srcset="{{ optimizedHero.srcsetWebP() }}" sizes="100vw" type="image/webp"/>
+                    {% endif %}
+                    <img src="{{ optimizedHero.optimizedImageUrls|length == 0 ? heroImage.getUrl() : optimizedHero.placeholderBox() }}" srcset="{{ optimizedHero.srcset() }}" sizes="100vw" alt="" class="sr-only" loading="lazy"/>
+                </picture>
             </div>
-            <picture>
-                {% if craft.imageOptimize.serverSupportsWebP() and heroImage.extension != 'svg' and heroImage.extension != 'gif' and heroImage.extension != 'webp' %}
-                    <source srcset="{{ optimizedHero.srcsetWebP() }}" sizes="100vw" type="image/webp"/>
-                {% endif %}
-                <img src="{{ optimizedHero.optimizedImageUrls|length == 0 ? heroImage.getUrl() : optimizedHero.placeholderBox() }}" srcset="{{ optimizedHero.srcset() }}" sizes="100vw" alt="" class="sr-only" loading="lazy"/>
-            </picture>
         </div>
-    </div>
+    {% endif %}
 {% endif %}

templates/_site/_snippet/_global/_hyperCta.twig

@@ -4,7 +4,11 @@
 {% if divWrapper %}
 <div class="{{ divClass }}">
 {% endif %}
-  {{ cta.getLink({ class: classes}) }}
+  {% if "Anchor" in cta.type|split("hyper")|last %}
+    <a href="{{ cta.linkValue }}" target="{{ cta.target }}" class="{{ classes }}">{{ cta.text }}</a>
+  {% else %}
+    {{ cta.getLink({ class: classes}) }}
+  {% endif %}
 {% if divWrapper %}
 </div>
 {% endif %}