80 lines
2.9 KiB
HTML
Executable File
80 lines
2.9 KiB
HTML
Executable File
{{/* Track Card Component */}}
|
|
{{- $hasVideo := .Resources.GetMatch "preview.*" -}}
|
|
<article
|
|
class="track-card rounded-lg overflow-hidden group transition-all duration-300"
|
|
:class="hovering ? '' : 'grayscale'"
|
|
x-data="{ hovering: false }"
|
|
@mouseenter="hovering = true; $refs.video?.play().catch(() => {})"
|
|
@mouseleave="hovering = false; if ($refs.video) { $refs.video.pause(); $refs.video.currentTime = 0; }"
|
|
>
|
|
{{/* Cover Image/Video */}}
|
|
<a href="{{ .Permalink }}" class="block relative aspect-square overflow-hidden">
|
|
{{- with .Resources.GetMatch "cover.*" }}
|
|
{{- $img := .Resize "600x webp q85" }}
|
|
<img
|
|
src="{{ $img.RelPermalink }}"
|
|
alt="{{ $.Title }}"
|
|
class="track-card__cover w-full h-full object-cover"
|
|
:class="{ 'opacity-0': hovering && $refs.video }"
|
|
loading="lazy"
|
|
decoding="async"
|
|
>
|
|
{{- else }}
|
|
<div class="w-full h-full bg-surface-2 flex items-center justify-center">
|
|
<svg class="w-12 h-12 text-text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3"/>
|
|
</svg>
|
|
</div>
|
|
{{- end }}
|
|
|
|
{{/* Video preview on hover */}}
|
|
{{- with .Resources.GetMatch "preview.*" }}
|
|
<video
|
|
x-ref="video"
|
|
src="{{ .RelPermalink }}"
|
|
class="absolute inset-0 w-full h-full object-cover transition-opacity duration-300"
|
|
:class="hovering ? 'opacity-100' : 'opacity-0'"
|
|
muted
|
|
loop
|
|
playsinline
|
|
preload="metadata"
|
|
></video>
|
|
{{- end }}
|
|
|
|
{{/* Play overlay - only show if NO video exists */}}
|
|
{{- if not $hasVideo }}
|
|
<div class="absolute inset-0 bg-surface-0/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<div class="w-14 h-14 rounded-full bg-accent flex items-center justify-center transform scale-90 group-hover:scale-100 transition-transform">
|
|
<svg class="w-6 h-6 text-surface-0 ml-1" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M8 5v14l11-7z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
{{- end }}
|
|
</a>
|
|
|
|
{{/* Info */}}
|
|
<div class="p-4">
|
|
<a href="{{ .Permalink }}" class="block">
|
|
<h3 class="font-medium truncate group-hover:text-accent transition-colors">
|
|
{{ .Title }}
|
|
</h3>
|
|
</a>
|
|
|
|
<div class="flex items-center justify-between mt-2 text-sm text-text-muted">
|
|
<time datetime="{{ .Date.Format "2006-01-02" }}">
|
|
{{ .Date.Format "2006.01.02" }}
|
|
</time>
|
|
{{- with .Params.duration }}
|
|
<span class="tabular-nums">{{ . }}</span>
|
|
{{- end }}
|
|
</div>
|
|
|
|
{{- with .Params.genre }}
|
|
<span class="inline-block mt-3 px-2 py-1 text-xs bg-surface-2 text-text-secondary rounded">
|
|
{{ . }}
|
|
</span>
|
|
{{- end }}
|
|
</div>
|
|
</article>
|