andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Add video headers
Some checks failed
Deploy to Pages / build (push) Failing after 2m46s
Details

Browse source
This commit is contained in:
Andras Schmelczer 2026-06-03 08:15:01 +01:00
parent cf509360e6
commit 0ab9889fc8
7 changed files with 535 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

133
src/components/PostThumbnail.astro
View file

@ -1,13 +1,15 @@
---
import { Picture } from 'astro:assets';
import type { CollectionEntry } from 'astro:content';
import { absoluteUrl } from '../lib/site';
import VideoThumbnail from './VideoThumbnail.astro';
import { absoluteUrl, getHeaderVideo } from '../lib/site';
interface Props {
post: CollectionEntry<'posts'>;
}
const { post } = Astro.props;
const headerVideo = getHeaderVideo(post);
const demoLink = post.data.links.find(
(link) => !link.download && link.label.trim().toLowerCase() === 'demo'
);
@ -54,66 +56,81 @@ for (const root of document.querySelectorAll('.post-thumbnail--iframe')) {
`;
---
<div
class:list={['post-thumbnail', iframeSrc && 'post-thumbnail--iframe']}
style={iframeSrc ? `--post-thumbnail-aspect: ${aspectRatio}` : undefined}
data-uncropped-preview
data-preview-label={post.data.title}
>
<Picture
src={post.data.thumbnail.src}
alt={post.data.thumbnail.alt}
formats={['avif', 'webp']}
fallbackFormat="jpg"
widths={[640, 960, 1280, 1920]}
sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
quality="high"
loading="eager"
fetchpriority="high"
decoding="async"
/>
{
headerVideo ? (
<VideoThumbnail
class="post-thumbnail post-thumbnail--video"
variant="banner"
poster={post.data.thumbnail.src}
alt={post.data.thumbnail.alt}
video={headerVideo}
previewLabel={post.data.title}
widths={[640, 960, 1280, 1920]}
sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
loading="eager"
fetchpriority="high"
/>
) : (
<div
class:list={['post-thumbnail', iframeSrc && 'post-thumbnail--iframe']}
style={iframeSrc ? `--post-thumbnail-aspect: ${aspectRatio}` : undefined}
data-uncropped-preview
data-preview-label={post.data.title}
>
<Picture
src={post.data.thumbnail.src}
alt={post.data.thumbnail.alt}
formats={['avif', 'webp']}
fallbackFormat="jpg"
widths={[640, 960, 1280, 1920]}
sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
quality="high"
loading="eager"
fetchpriority="high"
decoding="async"
/>
{
iframeSrc && (
<>
<button
class="post-thumbnail__play"
type="button"
data-thumbnail-iframe-trigger
data-iframe-src={iframeSrc}
aria-label={`Play ${demoLink?.label.toLowerCase() ?? 'demo'}`}
aria-expanded="false"
>
<span class="post-thumbnail__play-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path d="M8 5v14l11-7z" />
</svg>
</span>
<span class="sr-only">Play {demoLink?.label.toLowerCase() ?? 'demo'}</span>
</button>
<iframe
class="post-thumbnail__iframe"
data-thumbnail-iframe-frame
title={iframeTitle}
src="about:blank"
allow="fullscreen; webgpu"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
tabindex="0"
hidden
/>
<noscript>
<p class="post-thumbnail__noscript">
<a href={iframeSrc}>Open {demoLink?.label.toLowerCase() ?? 'demo'}</a>
</p>
</noscript>
</>
)
}
</div>
{iframeSrc && (
<>
<button
class="post-thumbnail__play"
type="button"
data-thumbnail-iframe-trigger
data-iframe-src={iframeSrc}
aria-label={`Play ${demoLink?.label.toLowerCase() ?? 'demo'}`}
aria-expanded="false"
>
<span class="post-thumbnail__play-icon" aria-hidden="true">
<svg viewBox="0 0 24 24" focusable="false">
<path d="M8 5v14l11-7z" />
</svg>
</span>
<span class="sr-only">Play {demoLink?.label.toLowerCase() ?? 'demo'}</span>
</button>
<iframe
class="post-thumbnail__iframe"
data-thumbnail-iframe-frame
title={iframeTitle}
src="about:blank"
allow="fullscreen; webgpu"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
tabindex="0"
hidden
/>
<noscript>
<p class="post-thumbnail__noscript">
<a href={iframeSrc}>Open {demoLink?.label.toLowerCase() ?? 'demo'}</a>
</p>
</noscript>
</>
)}
</div>
)
}
{
iframeSrc && (
iframeSrc && !headerVideo && (
<script is:inline data-thumbnail-iframe-script set:html={iframeThumbnailScript} />
)
}