Dave
3dec403492
Some checks failed
Build and Deploy DAVE | DMGs Site / deploy (push) Failing after 3m22s
75 lines
1.4 KiB
Plaintext
75 lines
1.4 KiB
Plaintext
---
|
|
import { Image } from 'astro:assets';
|
|
interface Props {
|
|
src: string;
|
|
alt: string;
|
|
caption?: string;
|
|
}
|
|
const { src, alt, caption } = Astro.props;
|
|
|
|
const images = import.meta.glob<{ default: ImageMetadata }>(
|
|
'/src/content/**/cover/*.{png,jpg,jpeg,webp,avif}',
|
|
{ eager: true },
|
|
);
|
|
|
|
const imagePath = `/src${src}`;
|
|
const image = images[imagePath]?.default;
|
|
---
|
|
|
|
<figure class="cover">
|
|
{
|
|
image ? (
|
|
<Image
|
|
class="image"
|
|
src={image}
|
|
alt={alt}
|
|
widths={[600, 900, 1280, 1440, 1600, 1920]}
|
|
sizes="100vw"
|
|
loading="lazy"
|
|
/>
|
|
) : (
|
|
<img class="image" src={src} alt={alt} loading="lazy" />
|
|
)
|
|
}
|
|
<figcaption class="caption">
|
|
<div class="wrapper">
|
|
{
|
|
caption ? (
|
|
<span class="caption-text">{caption}</span>
|
|
) : (
|
|
<span class="caption-meta">{src}</span>
|
|
)
|
|
}
|
|
</div>
|
|
</figcaption>
|
|
</figure>
|
|
|
|
<style>
|
|
.cover {
|
|
@mixin border-t 12px, solid, var(--color-surface-inverse);
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 60vw;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.caption {
|
|
padding: var(--space-4);
|
|
color: var(--color-text-inverse);
|
|
background-color: var(--color-surface-inverse);
|
|
}
|
|
|
|
.wrapper {
|
|
font-size: var(font-size-responsive);
|
|
text-align: center;
|
|
}
|
|
|
|
.caption-text,
|
|
.caption-meta {
|
|
@mixin typo_code;
|
|
}
|
|
</style>
|