Xin 5c7303bee7
feat: add hx- prefix to Hextra Tailwind CSS classes (#300)
* feat: add prefix to tailwind css classes

* fix: remove unnecessary prefixes

* fix: add missing prefix in other places

* chore: regenerate hugo_stats.json

* chore: run `npm run build:css`

* chore: add `hx-` prefix to _index.fa.md

* fix: lang switcher display issue

* fix: add `hx-` prefix to showcase/index.fa.md

* fix: lang switch param mistake
2024-02-20 22:59:31 +00:00

83 lines
3.3 KiB
HTML

{{- $context := . -}}
{{- $link := .Get "link" -}}
{{- $title := .Get "title" -}}
{{- $icon := .Get "icon" -}}
{{- $subtitle := .Get "subtitle" -}}
{{- $image := .Get "image" -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- $imageStyle := .Get "imageStyle" -}}
{{/* Image processing options */}}
{{- $method := .Get "method" | default "Resize" | humanize -}}
{{- $options := .Get "options" | default "800x webp q80" -}}
{{- if and $image (not (urls.Parse $image).Scheme) -}}
{{/* Process images in assets */}}
{{- with resources.Get $image -}}
{{- $processed := "" -}}
{{- if eq $method "Resize" -}}
{{- $processed = (.Resize $options) -}}
{{- else if eq $method "Fit" -}}
{{- $processed = (.Fit $options) -}}
{{- else if eq $method "Fill" -}}
{{- $processed = (.Fill $options) -}}
{{- else if eq $method "Crop" -}}
{{- $processed = (.Crop $options) -}}
{{- else -}}
{{- errorf "Invalid image processing command: Must be one of Crop, Fit, Fill or Resize." -}}
{{- end -}}
{{- $width = $processed.Width -}}
{{- $height = $processed.Height -}}
{{- $image = $processed.RelPermalink -}}
{{- else -}}
{{/* Otherwise, use relative link of the image */}}
{{- if hasPrefix $image "/" -}}
{{- $image = relURL (strings.TrimPrefix "/" $image) -}}
{{- end -}}
{{- end -}}
{{- end -}}
{{ $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 }}"
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="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="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 -}}
</a>
{{- /* Strip trailing newline. */ -}}