feature: Favicons

composer.json

@@ -10,7 +10,7 @@
     }
   ],
   "require": {
-    "php": "^8.0",
+    "php": "^8.1",
     "8fold/php-xml-builder": "^1.0"
   },
   "require-dev": {

src/Components/Copyright.php

@@ -13,11 +13,11 @@ class Copyright implements Buildable
 {
     use BuildableImp;
 
-    private $useCopyrightSymbol = true;
+    private bool $useCopyrightSymbol = true;
 
-    private $spellOutCopyright = false;
+    private bool $spellOutCopyright = false;
 
-    private $scope = '';
+    private string $scope = '';
 
     public static function create(
         string $holder,

src/Components/FaviconMetroColors.php

@@ -0,0 +1,17 @@
+<?php
+declare(strict_types=1);
+
+namespace Eightfold\HTMLBuilder\Components;
+
+enum FaviconMetroColors: string
+{
+    case Teal = '#00aba9';
+    case DarkBlue = '#2b5797';
+    case LightPurple = '#9f00a7';
+    case DarkPurple = '#603cba';
+    case DarkRed = '#b91d47';
+    case DarkOrange = '#da532c'; // default
+    case Yellow = '#ffc40d';
+    case Green = '#00a300';
+    case Blue = '#2d89ef';
+}

src/Components/Favicons.php

@@ -0,0 +1,187 @@
+<?php
+declare(strict_types=1);
+
+namespace Eightfold\HTMLBuilder\Components;
+
+use Eightfold\XMLBuilder\Contracts\Buildable;
+
+use Eightfold\XMLBuilder\Concatenate;
+
+use Eightfold\XMLBuilder\Implementations\Buildable as BuildableImp;
+
+use Eightfold\HTMLBuilder\Element;
+
+use Eightfold\HTMLBuilder\Components\FaviconMetroColors;
+
+/**
+ * We use https://realfavicongenerator.net to generate favicon-related assets.
+ * We presume the names of these assets will not be changed.
+ */
+class Favicons implements Buildable
+{
+    use BuildableImp;
+
+    private string $appName = '';
+
+    private bool $metroUsesWhite;
+
+    private FaviconMetroColors $metroTileColor = FaviconMetroColors::DarkOrange;
+
+    private string $safariThemeColor = '#5bbad5';
+
+    public static function create(
+        string $path = '',
+        string $themeColor = '#ffffff'
+    ): self {
+        return new self($path, $themeColor);
+    }
+
+    final private function __construct(
+        private string $path,
+        private string $themeColor
+    ) {
+    }
+
+    private function path(): string
+    {
+        return $this->path;
+    }
+
+    private function themeColor(): string
+    {
+        return $this->themeColor;
+    }
+
+    private function hasPath(): bool
+    {
+        return strlen($this->path()) > 0;
+    }
+
+    private function appName(): string
+    {
+        return $this->appName;
+    }
+
+    public function withAppName(string $name): self
+    {
+        $this->appName = $name;
+        return $this;
+    }
+
+    private function hasAppName(): bool
+    {
+        return strlen($this->appName()) > 0;
+    }
+
+    public function withMetro(
+        FaviconMetroColors $tileColor = FaviconMetroColors::DarkOrange,
+        bool $useWhite = false
+    ): self {
+        $this->metroTileColor = $tileColor;
+
+        if ($useWhite !== false) {
+            $this->metroUsesWhite = $useWhite;
+        }
+
+        return $this;
+    }
+
+    private function hasMetro(): bool
+    {
+        if ($this->metroUsesWhite()) {
+            return true;
+        }
+        return false;
+    }
+
+    private function metroUsesWhite(): bool
+    {
+        if (isset($this->metroUsesWhite) === false) {
+            return false;
+        }
+        return $this->metroUsesWhite;
+    }
+
+    public function withSafariThemeColor(string $color): self
+    {
+        $this->safariThemeColor = $color;
+        return $this;
+    }
+
+    private function safariThemeColor(): string
+    {
+        return $this->safariThemeColor;
+    }
+
+    public function __toString(): string
+    {
+        $elements = [
+            Element::link()->omitEndTag()->props(
+                'rel apple-touch-icon',
+                'sizes 180x180',
+                'href ' . $this->path() . '/apple-touch-icon.png'
+            ),
+            Element::link()->omitEndTag()->props(
+                'rel icon',
+                'type image/png',
+                'sizes 32x32',
+                'href ' . $this->path() . '/favicon-32x32.png'
+            ),
+            Element::link()->omitEndTag()->props(
+                'rel icon',
+                'type image/png',
+                'sizes 16x16',
+                'href ' . $this->path() . '/favicon-16x16.png'
+            ),
+            Element::link()->omitEndTag()->props(
+                'rel manifest',
+                'href ' . $this->path() . '/site.webmanifest'
+            ),
+            Element::meta()->omitEndTag()->props(
+                'name msapplication-TileColor',
+                'content ' . $this->metroTileColor->value
+            ),
+            Element::meta()->omitEndTag()->props(
+                'name theme-color',
+                'content ' . $this->themeColor()
+            ),
+            Element::link()->omitEndTag()->props(
+                'rel mask-icon',
+                'href ' . $this->path() . '/safari-pinned-tab.svg',
+                'color ' . $this->safariThemeColor()
+            )
+        ];
+
+        if ($this->hasPath()) {
+            $elements[] = Element::link()->omitendTag()->props(
+                'rel shortcut icon',
+                'href ' . $this->path() . '/favicon.ico'
+            );
+
+            $elements[] = Element::meta()->omitEndTag()->props(
+                'name msapplication-config',
+                'content ' . $this->path() . '/browserconfig.xml'
+            );
+        }
+
+        if ($this->hasMetro() and $this->metroUsesWhite()) {
+            $elements[] = Element::meta()->omitEndTag()->props(
+                'name msapplication-TileImage',
+                'content ' . $this->path() . '/mstile-144x144.png'
+            );
+        }
+
+        if ($this->hasAppName()) {
+            $elements[] = Element::meta()->omitEndTag()->props(
+                'name application-name',
+                'content ' . $this->appName()
+            );
+
+            $elements[] = Element::meta()->omitEndTag()->props(
+                'name apple-mobile-web-app-title',
+                'content ' . $this->appName()
+            );
+        }
+        return (string) Concatenate::create(...$elements);
+    }
+}

src/Document.php

@@ -1,17 +1,19 @@
 <?php
-
 declare(strict_types=1);
 
 namespace Eightfold\HTMLBuilder;
 
 use Stringable;
 
-use Eightfold\XMLBuilder\Comment;
 use Eightfold\XMLBuilder\Contracts\Buildable;
+use Eightfold\XMLBuilder\Implementations\Buildable as BuildableImp;
+
 use Eightfold\HTMLBuilder\Element;
 
 class Document implements Buildable
 {
+    use BuildableImp;
+
     /**
      * @var array<string|Stringable>
      */
@@ -32,8 +34,8 @@ public static function create(
 
     final private function __construct(
         private string $title,
-        private string $lang = 'en',
-        private string $charset = 'utf-8'
+        private string $lang,
+        private string $charset
     ) {
     }
 
@@ -49,7 +51,7 @@ public function body(string|Stringable ...$content): Document
         return $this;
     }
 
-    public function build(): string
+    public function __toString(): string
     {
         $doctype = '<!doctype html>' . "\n";
         return $doctype . Element::html(
@@ -62,11 +64,6 @@ public function build(): string
         )->props($this->lang())->build();
     }
 
-    public function __toString(): string
-    {
-        return $this->build();
-    }
-
     private function title(): string
     {
         return $this->title;

src/Element.php

@@ -1,5 +1,4 @@
 <?php
-
 declare(strict_types=1);
 
 namespace Eightfold\HTMLBuilder;