Rockingcool/paige-hugo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add shortcode prefix to shortcode classes

Browse Source
This commit is contained in:
Will Faught
2025-02-08 23:13:56 -08:00
parent 0a70fd4eb4
commit 171b1dcf5d
11 changed files with 41 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@@ -1187,23 +1187,23 @@ Page status classes:
Shortcode classes:
<dl>
<dt><code>.paige-code</code></dt>
<dt><code>.paige-shortcode-code</code></dt>
<dd>The container element of <code>paige/code</code> shortcodes.</dd>
<dt><code>.paige-email</code></dt>
<dt><code>.paige-shortcode-email</code></dt>
<dd>The container element of <code>paige/email</code> shortcodes.</dd>
<dt><code>.paige-figure</code></dt>
<dt><code>.paige-shortcode-figure</code></dt>
<dd>The container element of <code>paige/figure</code> shortcodes.</dd>
<dt><code>.paige-gallery</code></dt>
<dt><code>.paige-shortcode-gallery</code></dt>
<dd>The container element of <code>paige/gallery</code> shortcodes.</dd>
<dt><code>.paige-icon</code></dt>
<dt><code>.paige-shortcode-icon</code></dt>
<dd>The container element of <code>paige/icon</code> shortcodes.</dd>
<dt><code>.paige-image</code></dt>
<dt><code>.paige-shortcode-image</code></dt>
<dd>The container element of <code>paige/image</code> shortcodes.</dd>
<dt><code>.paige-quote</code></dt>
<dt><code>.paige-shortcode-quote</code></dt>
<dd>The container element of <code>paige/quote</code> shortcodes.</dd>
<dt><code>.paige-vimeo</code></dt>
<dt><code>.paige-shortcode-vimeo</code></dt>
<dd>The container element of <code>paige/vimeo</code> shortcodes.</dd>
<dt><code>.paige-youtube</code></dt>
<dt><code>.paige-shortcode-youtube</code></dt>
<dd>The container element of <code>paige/youtube</code> shortcodes.</dd>
</dl>
@@ -1262,9 +1262,9 @@ try the following in `yoursite/hugo.toml`:
style = """
#paige-page-content > * { margin-left: auto; margin-right: auto; max-width: 40rem; }
#paige-page-content > img,
#paige-page-content > .paige-image,
#paige-page-content > .paige-vimeo,
#paige-page-content > .paige-youtube { max-width: 100%; }
#paige-page-content > .paige-shortcode-image,
#paige-page-content > .paige-shortcode-vimeo,
#paige-page-content > .paige-shortcode-youtube { max-width: 100%; }
"""
```

40
layouts/partials/paige/style.html
View File

@@ -3,16 +3,16 @@
<style>
{{ partial "paige/func-include.html" (dict "name" "style-first%s.html" "page" $page) }}
.paige-figure-numbered {
counter-increment: paige-figure-numbered;
.paige-shortcode-figure-numbered {
counter-increment: paige-shortcode-figure-numbered;
}
.paige-figure-numbered > div > figure > figcaption::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered) ": ";
.paige-shortcode-figure-numbered > div > figure > figcaption::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered) ": ";
}
.paige-figure-numbered > div > figure > figcaption:empty::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-figure-numbered);
.paige-shortcode-figure-numbered > div > figure > figcaption:empty::before {
content: "{{ i18n `paige_figure` | safeCSS }} " counter(paige-shortcode-figure-numbered);
}
.paige-header-link {
@@ -26,11 +26,11 @@
content: "#";
}
.paige-quote .blockquote-footer {
.paige-shortcode-quote .blockquote-footer {
margin-top: 0;
}
.paige-quote blockquote {
.paige-shortcode-quote blockquote {
border-left: 0;
border-right: 0;
margin-bottom: 0;
@@ -54,22 +54,22 @@ th {
}
.paige-row-short:not(:last-child),
.paige-figure .paige-quote,
.paige-figure .paige-video,
.paige-figure .highlight pre.chroma,
.paige-figure .highlight .chroma pre,
.paige-figure .paige-quote blockquote,
.paige-figure figure > div > :last-child,
.paige-gallery .paige-figure,
.paige-gallery .paige-image,
.paige-shortcode-figure .paige-shortcode-quote,
.paige-shortcode-figure .paige-video,
.paige-shortcode-figure .highlight pre.chroma,
.paige-shortcode-figure .highlight .chroma pre,
.paige-shortcode-figure .paige-shortcode-quote blockquote,
.paige-shortcode-figure figure > div > :last-child,
.paige-shortcode-gallery .paige-shortcode-figure,
.paige-shortcode-gallery .paige-shortcode-image,
blockquote > p:last-of-type {
margin-bottom: 0;
}
.paige-figure,
.paige-gallery,
.paige-image,
.paige-quote,
.paige-shortcode-figure,
.paige-shortcode-gallery,
.paige-shortcode-image,
.paige-shortcode-quote,
.paige-row-short:last-child,
.paige-row-tall,
.paige-video,

2
layouts/shortcodes/paige/code.html
View File

@@ -11,4 +11,4 @@
{{ $content = htmlUnescape $content }}
{{ end }}
<div class="paige-code">{{ highlight $content $lang $options }}</div>
<div class="paige-shortcode-code">{{ highlight $content $lang $options }}</div>

2
layouts/shortcodes/paige/email.html
View File

@@ -9,4 +9,4 @@
{{ errorf "layouts/shortcodes/paige/email.html: no content" }}
{{ end }}
<span class="paige-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>
<span class="paige-shortcode-email"><a href="" data-a="{{ base64Encode (index (split $address `@`) 0) }}" data-b="{{ base64Encode `@` }}" data-c="{{ base64Encode (index (split $address `@`) 1) }}" onclick="this.href = 'mailto:' + atob(this.dataset.a) + atob(this.dataset.b) + atob(this.dataset.c)">{{ $content }}</a></span>

2
layouts/shortcodes/paige/figure.html
View File

@@ -56,7 +56,7 @@
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
<div class="paige-figure {{ if $numbered }} paige-figure-numbered {{ end }}">
<div class="paige-shortcode-figure {{ if $numbered }} paige-shortcode-figure-numbered {{ end }}">
<div class="align-items-{{ $vertical }} d-flex {{ with $float }} float-{{ . }} {{ end }} h-100 justify-content-{{ $horizontal }} {{ with $sideMargin }} {{ . }} {{ end }}">
<figure class="{{ if $table }} d-table {{ end }} mb-0" {{ with $widths }} style="{{ . | safeCSS }}" {{ end }}>
<div class="d-flex justify-content-{{ $horizontal }} text-{{ $horizontal }}">{{ $content }}</div>

2
layouts/shortcodes/paige/gallery.html
View File

@@ -41,7 +41,7 @@
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
<div class="paige-gallery">
<div class="paige-shortcode-gallery">
{{ if eq $type "grid" }}
<div class="container-fluid overflow-hidden px-0">
<div class="align-items-{{ $align }} gx-3 gy-3 justify-content-{{ $justify }} row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 row-cols-xxl-6">

2
layouts/shortcodes/paige/icon.html
View File

@@ -10,7 +10,7 @@
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
<span class="paige-icon">
<span class="paige-shortcode-icon">
{{- with $url -}}
<a href="{{ . }}" {{ with $target }} target="{{ . }}" {{ end }}>
{{- end -}}

2
layouts/shortcodes/paige/image.html
View File

@@ -17,7 +17,7 @@
{{ $title := .Get "title" }}
{{ $width := .Get "width" }}
<div class="paige-image">
<div class="paige-shortcode-image">
{{ partial "paige/image.html" (dict
"alt" $alt
"breakpoints" $breakpoints

2
layouts/shortcodes/paige/quote.html
View File

@@ -7,7 +7,7 @@
{{/* The markup below cannot be indented due to nested shortcodes within Markdown. */}}
<div class="paige-quote">
<div class="paige-shortcode-quote">
<blockquote class="blockquote">{{ $content }}</blockquote>
{{ with $cite }}

2
layouts/shortcodes/paige/vimeo.html
View File

@@ -116,7 +116,7 @@
{{ $src = print $src "?" . }}
{{ end }}
<div class="paige-vimeo">
<div class="paige-shortcode-vimeo">
{{ partial "paige/video.html" (dict
"fullscreen" $fullscreen
"height" $height

2
layouts/shortcodes/paige/youtube.html
View File

@@ -70,7 +70,7 @@
{{ $src = print $src "?" . }}
{{ end }}
<div class="paige-youtube">
<div class="paige-shortcode-youtube">
{{ partial "paige/video.html" (dict
"fullscreen" $fullscreen
"height" $height