forked from drowl87/hextra_mirror
68 lines
3.2 KiB
HTML
68 lines
3.2 KiB
HTML
{{- $page := .page -}}
|
|
{{- $link := .link -}}
|
|
{{- $title := .title -}}
|
|
{{- $icon := .icon -}}
|
|
{{- $subtitle := .subtitle -}}
|
|
{{- $image := .image -}}
|
|
{{- $width := .width -}}
|
|
{{- $height := .height -}}
|
|
{{- $imageStyle := .imageStyle -}}
|
|
{{- $tag := .tag -}}
|
|
{{- $tagColor := .tagColor -}}
|
|
|
|
{{ $linkClass := "hover:hx-border-gray-300 hx-bg-transparent hx-shadow-sm dark:hx-border-neutral-800 hover:hx-bg-slate-50 hover:hx-shadow-md dark:hover:hx-border-neutral-700 dark:hover:hx-bg-neutral-900" }}
|
|
{{- with $image -}}
|
|
{{ $linkClass = "hover:hx-border-gray-300 hx-bg-gray-100 hx-shadow dark:hx-border-neutral-700 dark:hx-bg-neutral-800 dark:hx-text-gray-50 hover:hx-shadow-lg dark:hover:hx-border-neutral-500 dark:hover:hx-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 dark:hx-shadow-none hover:hx-shadow-gray-100 dark:hover:hx-shadow-none hx-shadow-gray-100 active:hx-shadow-sm active:hx-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="{{ $title }}"
|
|
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 hover:hx-text-gray-900 dark:hx-text-neutral-200 dark:hover:hx-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 dark:hx-text-gray-400 hx-px-4 hx-mb-4 hx-mt-2">{{- $subtitle | markdownify -}}</div>
|
|
{{- end -}}
|
|
|
|
{{- if $tag }}
|
|
{{ $defaultClass := "hx-text-gray-600 hx-text-xxs hx-bg-gray-100 hx-border dark:hx-bg-neutral-800 dark:hx-text-neutral-200" }}
|
|
{{ $yellowClass := "hx-border-yellow-100 hx-bg-yellow-50 hx-text-yellow-900 dark:hx-border-yellow-200/30 dark:hx-bg-yellow-700/30 dark:hx-text-yellow-200" }}
|
|
{{ $blueClass := "hx-border-blue-200 hx-bg-blue-100 hx-text-blue-900 dark:hx-border-blue-200/30 dark:hx-bg-blue-900/30 dark:hx-text-blue-200" }}
|
|
{{ $redClass := "hx-border-red-200 hx-bg-red-100 hx-text-red-900 dark:hx-border-red-200/30 dark:hx-bg-red-900/30 dark:hx-text-red-200" }}
|
|
|
|
{{ $class := cond (eq $tagColor "yellow") $yellowClass (cond (eq $tagColor "blue") $blueClass (cond (eq $tagColor "red") $redClass $defaultClass)) }}
|
|
|
|
<span class="hx-flex hx-tag hx-text-xxs hx-border hx-rounded-full hx-px-2 hx-py-1 {{ $class }}">{{ $tag }}</span>
|
|
{{- end -}}
|
|
</a>
|
|
{{- /* Strip trailing newline. */ -}}
|