57 lines
1.3 KiB
TypeScript
57 lines
1.3 KiB
TypeScript
import type { FlatTemplatable } from "tempstream";
|
|
import { TempstreamJSX } from "tempstream";
|
|
import type {
|
|
ComponentToHTMLArgs,
|
|
ExtractStructuredComponentArgumentsParsed,
|
|
JDDContext,
|
|
} from "@sealcode/jdd";
|
|
import { Component, ComponentArguments } from "@sealcode/jdd";
|
|
|
|
import _locreq from "locreq";
|
|
|
|
const locreq = _locreq(new URL("./", import.meta.url).pathname);
|
|
|
|
const component_arguments = {
|
|
image: new ComponentArguments.Structured({
|
|
image: new ComponentArguments.Image().setExampleImages(
|
|
["image1.jpg", "image2.jpg", "image3.jpg", "image5.jpg"].map((name) =>
|
|
locreq.resolve("assets/" + name)
|
|
)
|
|
),
|
|
alt: new ComponentArguments.ShortText(),
|
|
}),
|
|
} as const;
|
|
|
|
export class Photo extends Component<typeof component_arguments> {
|
|
getArguments() {
|
|
return component_arguments;
|
|
}
|
|
|
|
getTitle(
|
|
_: JDDContext,
|
|
args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
|
|
) {
|
|
return args.image.alt || null;
|
|
}
|
|
|
|
getHeadings() {
|
|
return [];
|
|
}
|
|
|
|
toHTML({
|
|
args: { image },
|
|
classes,
|
|
jdd_context: { render_image },
|
|
index,
|
|
}: ComponentToHTMLArgs<typeof component_arguments>): FlatTemplatable {
|
|
return (
|
|
<div class={["image-jdd", ...classes]} style={`--jdd-index: ${index}`}>
|
|
{render_image(image.image, {
|
|
sizesAttr: "100vw",
|
|
alt: image.alt,
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
}
|