Add support for injecting "unsafe" HTML into places that currently take strings as an escape hatch a-la dangerouslySetInnerHTML. Use it to highlight code elements in hero page.

Author: markrandall

include/branch-highlights.inc

@@ -9,15 +9,15 @@ return [
             ],
             [
                 'title' => 'Pipe Operator',
-                'about' => 'The |> operator enables chaining callables left-to-right, passing values smoothly through multiple functions without intermediary variables.',
+                'about' => 'The `|>` operator enables chaining callables left-to-right, passing values smoothly through multiple functions without intermediary variables.',
             ],
             [
                 'title' => 'Clone With',
-                'about' => 'Clone objects and update properties with the new clone() syntax, making the "with-er" pattern simple for readonly classes.',
+                'about' => 'Clone objects and update properties with the new `clone()` syntax, making the "with-er" pattern simple for readonly classes.',
             ],
             [
-                'title' => '#[\NoDiscard] Attribute',
-                'about' => 'The #[\NoDiscard] attribute warns when a return value isn’t used, helping prevent mistakes and improving overall API safety.',
+                'title' => '`#[\NoDiscard]` Attribute',
+                'about' => 'The `#[\NoDiscard]` attribute warns when a return value isn’t used, helping prevent mistakes and improving overall API safety.',
             ],
             [
                 'title' => 'Closures and First-Class Callables in Constant Expressions',
@@ -42,7 +42,7 @@ return [
             ],
             [
                 'title' => '#[Deprecated] Attribute',
-                'short' => '#[Deprecated] attribute signals removal intent',
+                'short' => '`#[Deprecated]` attribute signals removal intent',
             ],
             [
                 'title' => 'Additional Array Functions',
@@ -84,7 +84,7 @@ return [
             ],
             [
                 'title' => 'Improved Standalone Types',
-                'short' => 'Null, true and false are now usable as types',
+                'short' => '`Null`, `true` and `false` are now usable as types',
             ],
         ],
     ],

public/index.php

@@ -4,6 +4,7 @@
 use phpweb\Releases\Branches;
 use phpweb\Releases\VersionLogos;
 use phpweb\Themes\ClickableCard;
+use phpweb\Themes\HTML;
 use phpweb\Themes\ThemeRenderer;
 
 require_once __DIR__ . '/../include/prepend.inc';
@@ -205,7 +206,6 @@ public function render(): void
                 </div>
             </div>
             <?php
-//            echo $this->theme->clickableCards(self::getHeaderCards(), id: 'header-cards');
         });
 
         $this->drawSection('primary', 'releases', function() use ($latestRelease, $latestReleases) {
@@ -328,8 +328,12 @@ public function render(): void
     }
 
 
-    private function safe(string $content): string
+    private function safe(string|HTML $content): string
     {
+        if ($content instanceof HTML) {
+            return $content->html;
+        }
+
         return htmlspecialchars($content, ENT_QUOTES);
     }
 
@@ -361,8 +365,12 @@ private function drawLatestVersionHeader(array $release): void
                     <div class="lp-lhr-highlights">
                         <?php foreach ($highlights as $highlight) { ?>
                         <div class="lp-lrh-highlight">
-                            <div class="lp-lrh-highlight-title"><?= $this->safe($highlight['title']) ?></div>
-                            <div class="lp-lrh-highlight-text"><?= $this->safe($highlight['about'] ?? $highlight['short'] ?? '') ?></div>
+                            <div class="lp-lrh-highlight-title">
+                                <?= $this->safe($this->theme->textWithCode($highlight['title'])) ?>
+                            </div>
+                            <div class="lp-lrh-highlight-text">
+                                <?= $this->safe($this->theme->textWithCode($highlight['about'] ?? $highlight['short'] ?? '')) ?>
+                            </div>
                         </div>
                         <?php } ?>
                     </div>

src/Themes/ClickableCard.php

@@ -5,11 +5,11 @@
 class ClickableCard
 {
     public function __construct(
-        public string $title,
+        public string|HTML $title,
         public string $href,
         public string $href_label = '',
         public string $image = '',
-        public string $body = '',
+        public string|HTML $body = '',
     ) {
     }
 }

src/Themes/HTML.php

@@ -0,0 +1,10 @@
+<?php
+
+namespace phpweb\Themes;
+
+readonly class HTML
+{
+    public function __construct(public string $html)
+    {
+    }
+}

src/Themes/ThemeRenderer.php

@@ -3,6 +3,7 @@
 namespace phpweb\Themes;
 
 use phpweb\Utils;
+use function preg_replace;
 
 class ThemeRenderer
 {
@@ -76,8 +77,20 @@ public function sectionHeader(string $title, string $subtitle = ''): string
         });
     }
 
-    private function safe(string|int|float $value): string
+    private function safe(string|int|float|HTML $value): string
     {
+        if ($value instanceof HTML) {
+            return $value->html;
+        }
+
         return htmlspecialchars((string)$value);
     }
+
+    public function textWithCode(string $input): HTML
+    {
+        $html = preg_replace('/`(.+?)`/i', '<code>$1</code>', htmlspecialchars($input));
+        assert(is_string($html));
+
+        return new HTML($html);
+    }
 }