photo.jdd.tsx
No OneTemporary
Actions

Size

1 KB

Referenced Files

None

Subscribers

None

photo.jdd.tsx
View Options

	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>
	);
	}
	}