Genius/hextra
1
0
Fork 0
forked from drowl87/hextra_mirror
Code Pull Requests Activity

refactor: extract card shortcode to partial (#339)

Browse Source 
* refactor: extract card shortcode to partial

* chore: update hugo stats
This commit is contained in:
Xin 2024-03-31 12:06:47 +02:00 committed by GitHub
parent a5b59b61f1
commit 24fb13b221
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 69 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
exampleSite/hugo_stats.json
View File

@ -208,6 +208,9 @@
"group-open:before:hx-rotate-90",
"hamburger-menu",
"hextra-card",
"hextra-card-icon",
"hextra-card-image",
"hextra-card-subtitle",
"hextra-cards",
"hextra-code-block",
"hextra-code-copy-btn",

54
layouts/partials/shortcodes/card.html Normal file
View File

@ -0,0 +1,54 @@
{{- $page := .page -}}
{{- $link := .link -}}
{{- $title := .title -}}
{{- $icon := .icon -}}
{{- $subtitle := .subtitle -}}
{{- $image := .image -}}
{{- $width := .width -}}
{{- $height := .height -}}
{{- $imageStyle := .imageStyle -}}
{{ $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 -}}
</a>
{{- /* Strip trailing newline. */ -}}

54
layouts/shortcodes/card.html
View File

@ -38,45 +38,15 @@
{{- 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. */ -}}
{{- partial "shortcodes/card" (dict
"page" .Page
"link" $link
"title" $title
"icon" $icon
"subtitle" $subtitle
"image" $image
"width" $width
"height" $height
"imageStyle" $imageStyle
)
-}}