Add icon shortcode

README.md

@@ -561,6 +561,27 @@ Parameters:
     <dd>Optional. String. CSS value. Image width.</dd>
 </dl>
 
+### Icon
+
+The `paige/icon` shortcode provides a web font icon.
+
+```
+{{< paige/icon class="bi bi-github" name="GitHub" url="https://github.com/willfaught/paige" >}}
+```
+
+Inner content: None.
+
+Parameters:
+
+<dl>
+    <dt><code>class</code></dt>
+    <dd>Required. Position 0. String. Class attribute value.</dd>
+    <dt><code>name</code></dt>
+    <dd>Optional. String. The screen reader description.</dd>
+    <dt><code>url</code></dt>
+    <dd>Optional. String. URL. E-mails in URLs with a <code>mailto:</code> scheme are protected from web crawlers.</dd>
+</dl>
+
 ### Vimeo
 
 The `paige/vimeo` shortcode provides a responsive Vimeo video.
@@ -889,6 +910,8 @@ Shortcode classes:
     <dd>The container element of <code>paige/figure</code> shortcodes.</dd>
     <dt><code>.paige-gallery</code></dt>
     <dd>The container element of <code>paige/gallery</code> shortcodes.</dd>
+    <dt><code>.paige-icon</code></dt>
+    <dd>The container element of <code>paige/icon</code> shortcodes.</dd>
     <dt><code>.paige-image</code></dt>
     <dd>The container element of <code>paige/image</code> shortcodes.</dd>
     <dt><code>.paige-quote</code></dt>

exampleSite/content/_index.md

@@ -1,11 +1,6 @@
 ---
 description: "Powerful, pliable pixel perfection."
 paige:
-  social:
-    github:
-      class: "bi bi-github"
-      name: "GitHub"
-      url: "https://github.com/willfaught/paige"
   style: |
     #paige-collections,
     #paige-sections,
@@ -31,4 +26,6 @@ Paige is designed to put your content front and center, avoiding the typical clu
     <a class="lead" href="https://github.com/willfaught/paige">Install it now.</a>
 </p>
 
-{{< paige/social >}}
+<div class="column-gap-3 d-flex display-6 justify-content-center mb-3 paige-social">
+    {{< paige/icon class="bi bi-github" name="GitHub" url="https://github.com/willfaught/paige" >}}
+</div>

layouts/shortcodes/paige/icon.html

@@ -0,0 +1,23 @@
+{{ $class := .Get 0 | default (.Get "class") }}
+{{ $name := .Get "name" }}
+{{ $url := .Get "url" }}
+
+{{ if not $class }}
+    {{ errorf "paige/icon: invalid class" }}
+{{ end }}
+
+<span class="paige-icon">
+    {{ with $url -}}
+        {{- if hasPrefix . "mailto:" -}}
+            <a href="#" data-a="{{ base64Encode (index (split . `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split . `@`) 1) }}" onclick="this.href = atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">
+        {{- else -}}
+            <a href="{{ . }}">
+        {{- end -}}
+    {{- end -}}
+
+    <i class="{{ $class }}">{{ with $name }}<span class="visually-hidden">{{ . }}</span>{{ end }}</i>
+
+    {{- if $url -}}
+        </a>
+    {{- end }}
+</span>