diff options
Diffstat (limited to 'layouts/shortcodes')
| -rw-r--r-- | layouts/shortcodes/alert.html | 73 | ||||
| -rw-r--r-- | layouts/shortcodes/details.html | 75 | ||||
| -rw-r--r-- | layouts/shortcodes/img.html | 35 | ||||
| -rw-r--r-- | layouts/shortcodes/task-list.html | 1 |
4 files changed, 163 insertions, 21 deletions
diff --git a/layouts/shortcodes/alert.html b/layouts/shortcodes/alert.html new file mode 100644 index 0000000..3a55964 --- /dev/null +++ b/layouts/shortcodes/alert.html @@ -0,0 +1,73 @@ +{{ $severity := .Get 0 }} +{{ $title := .Get 1 }} + +<div class="alert-box {{ $severity }}"> + {{ if $title }} + <h3 class="alert-title">{{ $title }}</h3> + {{ end }} + <p class="flex flex-row items-center gap-2"> + {{ if eq $severity "info" }} + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="alert-icon" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" + /> + </svg> + {{ else if eq $severity "warning" }} + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="alert-icon" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" + /> + </svg> + {{ else if eq $severity "error" }} + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="alert-icon" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" + /> + </svg> + {{ else if eq $severity "success" }} + <svg + xmlns="http://www.w3.org/2000/svg" + fill="none" + viewBox="0 0 24 24" + stroke-width="1.5" + stroke="currentColor" + class="alert-icon" + > + <path + stroke-linecap="round" + stroke-linejoin="round" + d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" + /> + </svg> + + {{ end }} + {{.Inner}} + </p> +</div> diff --git a/layouts/shortcodes/details.html b/layouts/shortcodes/details.html new file mode 100644 index 0000000..ca524f7 --- /dev/null +++ b/layouts/shortcodes/details.html @@ -0,0 +1,75 @@ +{{- /* +Renders an HTML details element. + +@param {string} [class] The value of the element's class attribute. +@param {string} [name] The value of the element's name attribute. +@param {string} [summary] The content of the child summary element. +@param {string} [title] The value of the element's title attribute. +@param {bool} [open=false] Whether to initially display the content of the details element. + +@reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details + +@examples + + {{< details >}} + A basic collapsible section. + {{< /details >}} + + {{< details summary="Custom Summary Text" >}} + Showing custom `summary` text. + {{< /details >}} + + {{< details summary="Open Details" open=true >}} + Contents displayed initially by using `open`. + {{< /details >}} + + {{< details summary="Styled Content" class="my-custom-class" >}} + Content can be styled with CSS by specifying a `class`. + + Target details element: + + ```css + details.my-custom-class { } + ``` + + Target summary element: + + ```css + details.my-custom-class > summary > * { } + ``` + + Target inner content: + + ```css + details.my-custom-class > :not(summary) { } + ``` + {{< /details >}} + + {{< details summary="Grouped Details" name="my-details" >}} + Specifying a `name` allows elements to be connected, with only one able to be open at a time. + {{< /details >}} + +*/}} + +{{- /* Get arguments. */}} +{{- $class := or (.Get "class") "" }} +{{- $name := or (.Get "name") "" }} +{{- $summary := or (.Get "summary") "Details" }} +{{- $title := or (.Get "title") "" }} +{{- $open := false }} +{{- if in (slice "false" false 0) (.Get "open") }} + {{- $open = false }} +{{- else if in (slice "true" true 1) (.Get "open") }} + {{- $open = true }} +{{- end }} + +{{- /* Render. */}} +<details + {{- with $class }} class="{{ . }}" {{- end }} + {{- with $name }} name="{{ . }}" {{- end }} + {{- with $open }} open {{- end }} + {{- with $title }} title="{{ . }}" {{- end -}} +> + <summary>{{ $summary | .Page.RenderString }}</summary> + {{ .Inner | .Page.RenderString (dict "display" "block") -}} +</details>
\ No newline at end of file diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html index a0673a3..45ce3da 100644 --- a/layouts/shortcodes/img.html +++ b/layouts/shortcodes/img.html @@ -1,23 +1,16 @@ -{{/* Image Resources */}} -{{ $img := .Page.Resources.GetMatch (printf "%s" (.Get "src" | safeURL ))}} -{{ $alt := .Get "alt"}} +{{ $img := .Page.Resources.GetMatch (printf "%s" (.Get "src" | safeURL )) }} +{{ $alt := .Get "alt" }} +{{ $caption := .Get "caption" }} +{{ $captionPosition := .Get "caption-position" }} -{{/* Image Processing */}} -{{ $command := .Get "size-method" }} -{{ $options := .Get "size-format" }} -{{ if eq $command "Fit"}} - {{ $img = $img.Fit $options }} -{{ else if eq $command "Resize"}} - {{ $img = $img.Resize $options }} -{{ else if eq $command "Fill"}} - {{ $img = $img.Fill $options }} -{{ else if eq $command "Crop"}} - {{ $img = $img.Crop $options }} -{{ end }} - -{{/* Position */}} -{{ $position := .Get "position" }} - -<figure class='mb-5{{ if eq $position "center" }} flex justify-center{{ end }}'> - <img src="{{ $img.RelPermalink }}" {{ with $alt }}alt="{{ . }}"{{end}} width="{{ $img.Width }}" height="{{ $img.Height }}" > +<figure class='mb-5'> + <img src="{{ $img.RelPermalink }}" {{ with $alt }} alt="{{ . }}" {{ end }} width="{{ $img.Width }}" height="{{ $img.Height }}" /> + + {{ with $caption }} + <figcaption + class='{{ if eq $captionPosition "center" }} flex justify-center {{ else if eq $captionPosition "end" }} flex justify-end {{ end }}' + > + {{ . }} + </figcaption> + {{ end }} </figure>
\ No newline at end of file diff --git a/layouts/shortcodes/task-list.html b/layouts/shortcodes/task-list.html new file mode 100644 index 0000000..fe4ffe7 --- /dev/null +++ b/layouts/shortcodes/task-list.html @@ -0,0 +1 @@ +<span class="task-list"></span> |