From bc75444ea037d7bdb640768fcf557c3c6e1503f5 Mon Sep 17 00:00:00 2001
From: Will Faught <willfaught@users.noreply.github.com>
Date: Wed, 22 Mar 2023 21:03:49 -0700
Subject: [PATCH] Add icon shortcode

---
 README.md                          | 23 +++++++++++++++++++++++
 exampleSite/content/_index.md      |  9 +++------
 layouts/shortcodes/paige/icon.html | 23 +++++++++++++++++++++++
 3 files changed, 49 insertions(+), 6 deletions(-)
 create mode 100644 layouts/shortcodes/paige/icon.html

diff --git a/README.md b/README.md
index 04291660..c6dff1a1 100644
--- a/README.md
+++ b/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>
diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
index b78be849..fb6211a9 100644
--- a/exampleSite/content/_index.md
+++ b/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>
diff --git a/layouts/shortcodes/paige/icon.html b/layouts/shortcodes/paige/icon.html
new file mode 100644
index 00000000..0903df16
--- /dev/null
+++ b/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>