mirror of
https://github.com/tiennm99/HugoBlox-kit.git
synced 2026-10-12 18:15:31 +00:00
George Cushen
76023f9461
Replace manual format detection (printf "%T", MediaType.SubType whitelists, duck-typing) with Hugo's new reflect.IsResource, reflect.IsImageResource, and reflect.IsImageResourceProcessable functions across 19 template files. Key changes: - process_responsive_image: collapse 15-line format whitelist into single reflect.IsImageResourceProcessable call - Unify three-way SVG/processable/GIF branches into two-way $canProcess guard - Remove duplicate GIF passthrough branches in single.html, events/page.html - Add missing SVG guard in research-areas block (was calling .Fill unprotected) - Replace nil checks with reflect.IsResource in get_cover_image/get_featured_image Design decision: GIFs are intentionally excluded from processing despite Hugo supporting it — processing strips animation frames, so we preserve user-optimized animated GIFs by checking (IsImageResourceProcessable AND not GIF).
226 lines
10 KiB
HTML
226 lines
10 KiB
HTML
{{/* Article Cover Component - Notion-inspired page cover with icon overlay */}}
|
|
{{/* Requires: page context */}}
|
|
|
|
{{ $cover := partial "functions/get_cover_image.html" . }}
|
|
{{ if $cover }}
|
|
|
|
{{/* Get cover configuration with defaults */}}
|
|
{{ $cover_config := .Params.cover | default (dict) }}
|
|
{{ if not (reflect.IsMap $cover_config) }}
|
|
{{/* Simple string format: cover: "image.jpg" */}}
|
|
{{ $cover_config = dict "image" $cover_config }}
|
|
{{ end }}
|
|
|
|
{{/* Default alt text to page title if not specified */}}
|
|
{{ $alt_text := $cover_config.alt_text | default (.Title | plainify) }}
|
|
|
|
{{/* Height configuration */}}
|
|
{{ $height_map := dict
|
|
"small" "200px"
|
|
"medium" "320px"
|
|
"large" "480px"
|
|
"full" "60vh"
|
|
}}
|
|
{{ $height := index $height_map ($cover_config.height | default "medium") | default "320px" }}
|
|
|
|
{{/* Style configuration */}}
|
|
{{ $style := $cover_config.style | default "gradient" }}
|
|
|
|
{{/* Position configuration */}}
|
|
{{ $position := $cover_config.position | default (dict) }}
|
|
{{ $x := $position.x | default 50 }}
|
|
{{ $y := $position.y | default 50 }}
|
|
|
|
{{/* Overlay configuration */}}
|
|
{{ $overlay := $cover_config.overlay | default (dict) }}
|
|
{{ $overlay_enabled := $overlay.enabled | default true }}
|
|
{{ $overlay_type := $overlay.type | default "gradient" }}
|
|
{{ $overlay_opacity := $overlay.opacity | default 0.3 }}
|
|
{{ $overlay_color := $overlay.color | default "#000000" }}
|
|
{{ $overlay_gradient := $overlay.gradient | default "bottom" }}
|
|
|
|
{{/* Fade configuration */}}
|
|
{{ $fade := $cover_config.fade | default (dict) }}
|
|
{{ $fade_enabled := $fade.enabled | default true }}
|
|
{{ $fade_height := $fade.height | default "60px" }}
|
|
{{ $fade_blur := $fade.blur | default false }}
|
|
|
|
{{/* Icon configuration */}}
|
|
{{ $icon_config := $cover_config.icon | default (dict) }}
|
|
{{ $has_icon := or $icon_config.name $icon_config.emoji }}
|
|
{{ $icon_position := $icon_config.position | default "overlap" }}
|
|
{{ $icon_size := $icon_config.size | default "large" }}
|
|
{{ $icon_style := $icon_config.style | default "glass" }}
|
|
{{ $icon_border := $icon_config.border | default true }}
|
|
|
|
{{/* Responsive hide on mobile */}}
|
|
{{ $hide_mobile := false }}
|
|
{{ if $cover_config.responsive }}
|
|
{{ $hide_mobile = $cover_config.responsive.hide_on_mobile | default false }}
|
|
{{ end }}
|
|
|
|
{{/* Process cover image */}}
|
|
{{ $cover_width := 2560 }}
|
|
{{ $cover_height := 520 }}
|
|
{{ if eq ($cover_config.height | default "medium") "small" }}
|
|
{{ $cover_height = 320 }}
|
|
{{ else if eq ($cover_config.height | default "medium") "large" }}
|
|
{{ $cover_height = 768 }}
|
|
{{ else if eq ($cover_config.height | default "medium") "full" }}
|
|
{{ $cover_height = 1080 }}
|
|
{{ end }}
|
|
|
|
{{/*
|
|
Generate responsive images.
|
|
- reflect.IsImageResourceProcessable → false for SVG (not processable by Hugo).
|
|
- GIF: processable by Hugo but we skip to preserve animation frames.
|
|
*/}}
|
|
{{ $processed_cover := $cover }}
|
|
{{ $srcset := "" }}
|
|
{{ $canProcess := and (reflect.IsImageResourceProcessable $cover) (ne $cover.MediaType.SubType "gif") }}
|
|
{{ if $canProcess }}
|
|
{{ $fill_spec := printf "%dx%d Center q85 webp" $cover_width $cover_height }}
|
|
{{ $processed_cover = $cover.Fill $fill_spec }}
|
|
|
|
{{ $variants := slice }}
|
|
{{ $widths := slice 640 768 1024 1366 1920 2560 }}
|
|
{{ range $widths }}
|
|
{{ $w := . }}
|
|
{{ $h := div (mul $w $cover_height) $cover_width }}
|
|
{{ $variant_spec := printf "%dx%d Center q85 webp" $w $h }}
|
|
{{ $variant := $cover.Fill $variant_spec }}
|
|
{{ $variants = $variants | append (printf "%s %dw" $variant.RelPermalink $w) }}
|
|
{{ end }}
|
|
{{ $srcset = delimit $variants ", " }}
|
|
{{ end }}
|
|
|
|
{{/* Build CSS classes based on style */}}
|
|
{{ $cover_classes := "article-cover relative w-full" }}
|
|
{{ if $hide_mobile }}
|
|
{{ $cover_classes = printf "%s hidden md:block" $cover_classes }}
|
|
{{ end }}
|
|
|
|
{{/* Container styles */}}
|
|
{{ $container_style := printf "height: %s;" $height }}
|
|
|
|
{{/* Calculate mask style for fade */}}
|
|
{{ $mask_style := "" }}
|
|
{{ if and $fade_enabled (ne $style "minimal") }}
|
|
{{/* Mask fades from black (visible) to transparent (invisible) at the bottom */}}
|
|
{{ $mask_style = printf "-webkit-mask-image: linear-gradient(to bottom, black calc(100%% - %s), transparent 100%%); mask-image: linear-gradient(to bottom, black calc(100%% - %s), transparent 100%%);" $fade_height $fade_height }}
|
|
{{ end }}
|
|
|
|
<div class="{{ $cover_classes }}" style="{{ $container_style | safeCSS }}" data-cover-style="{{ $style }}">
|
|
<!-- Image Container (Clipped) -->
|
|
<div class="absolute inset-0 overflow-hidden" style="{{ $mask_style | safeCSS }}">
|
|
{{/* Cover Image */}}
|
|
<div class="absolute inset-0">
|
|
{{ if $canProcess }}
|
|
<img
|
|
srcset="{{ $srcset }}"
|
|
sizes="100vw"
|
|
src="{{ $processed_cover.RelPermalink }}"
|
|
alt="{{ $alt_text }}"
|
|
class="w-full h-full object-cover object-center"
|
|
style="object-position: {{ $x }}% {{ $y }}%;"
|
|
fetchpriority="high"
|
|
loading="eager">
|
|
{{ else }}
|
|
<img
|
|
src="{{ $cover.RelPermalink }}"
|
|
alt="{{ $alt_text }}"
|
|
class="w-full h-full object-cover object-center"
|
|
style="object-position: {{ $x }}% {{ $y }}%;"
|
|
fetchpriority="high"
|
|
loading="eager">
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{/* Overlay Effects */}}
|
|
{{ if and $overlay_enabled (ne $style "minimal") }}
|
|
{{ if eq $style "gradient" }}
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-black/{{ $overlay_opacity | mul 100 }}"></div>
|
|
{{ else if eq $style "glass" }}
|
|
<div class="absolute inset-0 backdrop-blur-sm backdrop-saturate-150" style="background: rgba(255, 255, 255, 0.1);"></div>
|
|
{{ else if eq $style "blur" }}
|
|
<div class="absolute inset-x-0 bottom-0 h-1/3 backdrop-blur-md"></div>
|
|
{{ else if eq $overlay_type "gradient" }}
|
|
{{ if eq $overlay_gradient "bottom" }}
|
|
<div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/{{ $overlay_opacity | mul 100 }}"></div>
|
|
{{ else if eq $overlay_gradient "top" }}
|
|
<div class="absolute inset-0 bg-gradient-to-t from-transparent to-black/{{ $overlay_opacity | mul 100 }}"></div>
|
|
{{ else if eq $overlay_gradient "both" }}
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/{{ $overlay_opacity | mul 50 }} via-transparent to-black/{{ $overlay_opacity | mul 100 }}"></div>
|
|
{{ else if eq $overlay_gradient "radial" }}
|
|
<div class="absolute inset-0" style="background: radial-gradient(circle, transparent 0%, rgba(0,0,0,{{ $overlay_opacity }}) 100%);"></div>
|
|
{{ end }}
|
|
{{ else if eq $overlay_type "solid" }}
|
|
<div class="absolute inset-0" style="background-color: {{ $overlay_color }}; opacity: {{ $overlay_opacity }};"></div>
|
|
{{ end }}
|
|
{{ end }}
|
|
|
|
{{/* Blur Effect at Bottom (Optional) */}}
|
|
{{ if and $fade_enabled $fade_blur (ne $style "minimal") }}
|
|
{{/* Taller blur zone with mask to create smooth blur transition before fade out */}}
|
|
{{/* Semi-transparent background needed for backdrop-filter to render */}}
|
|
<div class="absolute inset-x-0 bottom-0 pointer-events-none"
|
|
style="height: calc({{ $fade_height }} * 2.5);
|
|
background: rgba(255, 255, 255, 0.01);
|
|
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
|
|
-webkit-mask-image: linear-gradient(to bottom, transparent, black); mask-image: linear-gradient(to bottom, transparent, black);"></div>
|
|
{{ end }}
|
|
|
|
{{/* Caption */}}
|
|
{{ with $cover_config.caption }}
|
|
<div class="absolute bottom-4 left-4 right-4 text-sm text-white/90 bg-black/50 backdrop-blur-sm px-3 py-2 rounded-lg z-20">
|
|
{{ . | markdownify }}
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
|
|
{{/* Icon Overlay - Only if position is "overlap" - NOW UNCLIPPED */}}
|
|
{{ if and $has_icon (eq $icon_position "overlap") }}
|
|
{{ $icon_size_map := dict "small" "w-8 h-8" "medium" "w-12 h-12" "large" "w-16 h-16" }}
|
|
{{ $icon_size_class := index $icon_size_map $icon_size | default "w-16 h-16" }}
|
|
{{ $icon_padding := cond (eq $icon_size "small") "p-1.5" (cond (eq $icon_size "medium") "p-2" "p-3") }}
|
|
|
|
<div class="absolute left-6 md:left-12 {{ $icon_size_class }}" style="bottom: -32px; z-index: 30;">
|
|
<div class="article-cover-icon {{ $icon_padding }} rounded-xl shadow-lg backdrop-blur-md
|
|
{{ if eq $icon_style "glass" }}bg-white/90 dark:bg-gray-800/80 border border-white/30 dark:border-gray-700/30
|
|
{{ else if eq $icon_style "rounded" }}bg-white dark:bg-gray-800 rounded-full
|
|
{{ else }}bg-white dark:bg-gray-800{{ end }}
|
|
{{ if $icon_border }}border border-gray-200 dark:border-gray-700{{ end }}">
|
|
{{ if $icon_config.emoji }}
|
|
<span class="text-2xl md:text-3xl lg:text-4xl leading-none flex items-center justify-center">{{ $icon_config.emoji }}</span>
|
|
{{ else if $icon_config.name }}
|
|
{{ partial "functions/get_icon.html" (dict "name" $icon_config.name "attributes" (printf "class=\"%s text-gray-700 dark:text-gray-200\"" $icon_size_class)) }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
</div>
|
|
|
|
{{/* Icon Below Cover - If position is "below" */}}
|
|
{{ if and $has_icon (eq $icon_position "below") }}
|
|
{{ $icon_size_map := dict "small" "w-8 h-8" "medium" "w-12 h-12" "large" "w-16 h-16" }}
|
|
{{ $icon_size_class := index $icon_size_map $icon_size | default "w-16 h-16" }}
|
|
{{ $icon_padding := cond (eq $icon_size "small") "p-1.5" (cond (eq $icon_size "medium") "p-2" "p-3") }}
|
|
|
|
<div class="flex justify-center -mt-8 mb-4 relative z-10">
|
|
<div class="article-cover-icon {{ $icon_size_class }} {{ $icon_padding }} rounded-xl shadow-lg backdrop-blur-md
|
|
{{ if eq $icon_style "glass" }}bg-white/90 dark:bg-gray-800/80 border border-white/30 dark:border-gray-700/30
|
|
{{ else if eq $icon_style "rounded" }}bg-white dark:bg-gray-800 rounded-full
|
|
{{ else }}bg-white dark:bg-gray-800{{ end }}
|
|
{{ if $icon_border }}border border-gray-200 dark:border-gray-700{{ end }}">
|
|
{{ if $icon_config.emoji }}
|
|
<span class="text-2xl md:text-3xl lg:text-4xl leading-none flex items-center justify-center">{{ $icon_config.emoji }}</span>
|
|
{{ else if $icon_config.name }}
|
|
{{ partial "functions/get_icon.html" (dict "name" $icon_config.name "attributes" (printf "class=\"%s text-gray-700 dark:text-gray-200\"" $icon_size_class)) }}
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
|
|
{{ end }}
|