Add icon shortcode
This commit is contained in:
23
README.md
23
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>
|
||||
|
@@ -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>
|
||||
|
23
layouts/shortcodes/paige/icon.html
Normal file
23
layouts/shortcodes/paige/icon.html
Normal file
@@ -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>
|
Reference in New Issue
Block a user