Add icon shortcode

master
Will Faught 2 years ago
parent dd0d5ef6ed
commit bc75444ea0

@ -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>

@ -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>

@ -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>
Loading…
Cancel
Save