a128fabaf1
Add support for custom alt text on card images to improve accessibility. The alt parameter is optional and defaults to the card title if not provided, maintaining backward compatibility with existing implementations. Fixes #896
70 lines
2.7 KiB
HTML
70 lines
2.7 KiB
HTML
{{- $link := .link -}}
|
|
{{- $title := .title -}}
|
|
{{- $icon := .icon -}}
|
|
{{- $subtitle := .subtitle -}}
|
|
{{- $image := .image -}}
|
|
{{- $alt := .alt | default $title -}}
|
|
{{- $width := .width -}}
|
|
{{- $height := .height -}}
|
|
{{- $imageStyle := .imageStyle -}}
|
|
{{- $tag := .tag -}}
|
|
{{- $tagColor := .tagColor | default .tagType | default "" -}}{{- /* Compatibility with previous parameter. */ -}}
|
|
{{- $tagBorder := not (eq .tagBorder false) | default true }}
|
|
{{- $tagIcon := .tagIcon -}}
|
|
|
|
{{ $linkClass := "hx:hover:border-gray-300 hx:bg-transparent hx:shadow-xs hx:dark:border-neutral-800 hx:hover:bg-slate-50 hx:hover:shadow-md hx:dark:hover:border-neutral-700 hx:dark:hover:bg-neutral-900" }}
|
|
{{- with $image -}}
|
|
{{ $linkClass = "hx:hover:border-gray-300 hx:bg-gray-100 hx:shadow-sm hx:dark:border-neutral-700 hx:dark:bg-neutral-800 hx:dark:text-gray-50 hx:hover:shadow-lg hx:dark:hover:border-neutral-500 hx:dark:hover:bg-neutral-700" }}
|
|
{{- end -}}
|
|
|
|
{{- $external := strings.HasPrefix $link "http" -}}
|
|
{{- $href := cond (strings.HasPrefix $link "/") ($link | relURL) $link -}}
|
|
|
|
|
|
<a
|
|
class="hextra-card hx:group hx:flex hx:flex-col hx:justify-start hx:overflow-hidden hx:rounded-lg hx:border hx:border-gray-200 hx:text-current hx:no-underline hx:dark:shadow-none hx:hover:shadow-gray-100 hx:dark:hover:shadow-none hx:shadow-gray-100 hx:active:shadow-sm hx:active:shadow-gray-200 hx:transition-all hx:duration-200 {{ $linkClass }}"
|
|
{{- if $link -}}
|
|
href="{{ $href }}"
|
|
{{ with $external }}target="_blank" rel="noreferrer"{{ end -}}
|
|
{{- end -}}
|
|
>
|
|
{{- with $image -}}
|
|
<img
|
|
alt="{{ $alt }}"
|
|
class="hextra-card-image"
|
|
loading="lazy"
|
|
decoding="async"
|
|
src="{{ $image | safeURL }}"
|
|
{{ with $width }}width="{{ . }}"{{ end }}
|
|
{{ with $height }}height="{{ . }}"{{ end }}
|
|
{{ with $imageStyle }}style="{{ . | safeCSS }}"{{ end }}
|
|
/>
|
|
{{- end -}}
|
|
|
|
{{- $padding := "hx:p-4" -}}
|
|
{{- with $subtitle -}}
|
|
{{- $padding = "hx:pt-4 hx:px-4" -}}
|
|
{{- end -}}
|
|
|
|
|
|
<span class="hextra-card-icon hx:flex hx:font-semibold hx:items-start hx:gap-2 {{ $padding }} hx:text-gray-700 hx:hover:text-gray-900 hx:dark:text-neutral-200 hx:dark:hover:text-neutral-50">
|
|
{{- with $icon }}{{ partial "utils/icon.html" (dict "name" $icon) -}}{{- end -}}
|
|
{{- $title -}}
|
|
</span>
|
|
{{- with $subtitle -}}
|
|
<div class="hextra-card-subtitle hx:line-clamp-3 hx:text-sm hx:font-normal hx:text-gray-500 hx:dark:text-gray-400 hx:px-4 hx:mb-4 hx:mt-2">{{- $subtitle | markdownify -}}</div>
|
|
{{- end -}}
|
|
|
|
{{- if $tag }}
|
|
{{- partial "shortcodes/badge.html" (dict
|
|
"content" $tag
|
|
"color" $tagColor
|
|
"class" "hextra-card-tag"
|
|
"border" $tagBorder
|
|
"icon" $tagIcon
|
|
)
|
|
-}}
|
|
{{- end -}}
|
|
</a>
|
|
{{- /* Strip trailing newline. */ -}}
|