mirror of
https://github.com/prdlk/leetcode.git
synced 2026-11-02 21:22:43 +00:00
45 lines
1.5 KiB
Plaintext
45 lines
1.5 KiB
Plaintext
|
---
|
||
|
|
/**
|
||
|
|
* One slide of a <Carousel>: Blume's own <Frame> around an <img>, so a slide
|
||
|
|
* is pixel-identical to a framed image elsewhere on the site — `alt` doubles
|
||
|
|
* as the frame's hint line and `caption` is Markdown, exactly as in Frame.
|
||
|
|
*
|
||
|
|
* `src` accepts what MDX authors already write for images: a URL, a
|
||
|
|
* root-relative `/file.png` (served from public/, prefixed with the deploy
|
||
|
|
* base), or the page-relative `../../public/file.png` form. A relative path
|
||
|
|
* that does not pass through public/ has nothing to serve it, so it is a
|
||
|
|
* build error rather than a silent 404.
|
||
|
|
*/
|
||
|
|
import Frame from "blume/components/content/Frame.astro";
|
||
|
|
import { withBase } from "blume/components/islands/base-path.ts";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
src: string;
|
||
|
|
alt?: string;
|
||
|
|
caption?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { src, alt, caption } = Astro.props;
|
||
|
|
|
||
|
|
const resolveSrc = (value: string): string => {
|
||
|
|
if (URL.canParse(value)) return value;
|
||
|
|
if (value.startsWith("/")) return withBase(value);
|
||
|
|
const at = value.indexOf("public/");
|
||
|
|
if (at === -1) {
|
||
|
|
throw new Error(
|
||
|
|
`<CarouselImage src="${value}">: a relative src must point into public/ (or use /file.png)`
|
||
|
|
);
|
||
|
|
}
|
||
|
|
return withBase(`/${value.slice(at + "public/".length)}`);
|
||
|
|
};
|
||
|
|
---
|
||
|
|
|
||
|
|
<blume-carousel-image
|
||
|
|
class="block w-full shrink-0 snap-center [&_blume-frame]:my-0"
|
||
|
|
role="group"
|
||
|
|
aria-roledescription="slide"
|
||
|
|
>
|
||
|
|
<Frame caption={caption} hint={alt}>
|
||
|
|
<img alt={alt ?? ""} src={resolveSrc(src)} loading="lazy" draggable="false" />
|
||
|
|
</Frame>
|
||
|
|
</blume-carousel-image>
|