Commit a2edc9aa2044b09fccabfd343759f4f6e151e0a3 | sitegen

author	clover caruso <git@paperclover.net> 2026-04-02 23:01:46-07:00
committer	clover caruso <git@paperclover.net> 2026-04-06 01:17:01-07:00
log	a2edc9aa2044b09fccabfd343759f4f6e151e0a3
tree	58243b0f5228c0250aab16ddd2cf9be17deb1573
parent	223b5dc94bf1459d8a62aed61e447b8f3abafcd8
signature	Signed by SSH key SHA256:xbd+BjjhyBfwk7GVoURf9Yx0gzDerHbvYv7SddNWmAs

resolves #49. aspect ratio bugs on videos and images are fixed.

5 files changed, 16 insertions(+), 10 deletions(-)

src/tags/clover-media.marko+2-2

...	...	@@ -12,7 +12,7 @@ export interface Input {
12	12	<div style={ color: "red" }>ERROR: No file in database: ${src}</div>
13	13	</if>
14	14	<else if=extsVideo.has(file.extension.toLowerCase())>
15		<clover-video noFigure ...{ file }/>
	15	<clover-video minimal noFigure ...{ file }/>
16	16	</else>
17	17	<else if=file.extension === ".gif">
18	18	<img src=`/file${escapeUri(file.path)}` ...rest>
...	...	@@ -29,7 +29,7 @@ export interface Input {
29	29	: `100vw`
30	30	)>
31	31	<picture>
32		<for\|ext\| of=["jxl", "avif", "webp"]>
	32	<for\|ext\| of=["jxl", "webp"]>
33	33	<source
34	34	type=`image/${ext}`
35	35	srcset=targetSizes.map((s) => `${base}:/${s}.${ext} ${s}w`)

src/tags/clover-video.marko+1-1

...	...	@@ -34,7 +34,7 @@ export interface Input {
34	34	<define/Inner>
35	35	<video
36	36	...{ id }
37		class={ "clover-video": noFigure }
	37	class={ "clover-video": noFigure, minimal: noFigure && minimal }
38	38	data-src=file.path
39	39	poster=poster ? `/file${poster.path}` : null
40	40	width=width

src/tags/image.tsx+1-1

...	...	@@ -35,7 +35,7 @@ export default function Image(
35	35
36	36	return (
37	37	<picture>
38		{["jxl", "avif", "webp"].map((ext) => (
	38	{["jxl", "webp"].map((ext) => (
39	39	<source
40	40	type={`image/${ext}`}
41	41	srcset={targetSizes.map((s) => `${base}:/${s}.${ext} ${s}w`)}

src/tags/photo-grid.css+6

...	...	@@ -22,3 +22,9 @@ photo-grid-item {
22	22	object-fit: cover;
23	23	}
24	24	}
	25	photo-grid + blockquote {
	26	margin: 0 -4px;
	27	border: none;
	28	background-color: var(--primary);
	29	color: black;
	30	}

src/tags/photo-grid.marko+6-6

...	...	@@ -1,19 +1,18 @@
1	1	import "./photo-grid.css";
2	2
3		static const gap = 11;
4
5	3	export interface Input {
6	4	base?: string;
7	5	cols: number[]; // weights
8	6	rows?: number[]; // pixel heights, based on a 768px container
9	7	style?: Marko.AttrStyle;
	8	gapless?: boolean;
	9	gap?: number;
10	10	// images are placed left to right, top to bottom
11	11	img: Marko.AttrTag<{
12	12	src: string;
13	13	w?: number; // column span
14	14	h?: number; // row span
15	15	s?: number; // skipped columns before placement
16		small?: unknown;
17	16	mutedLoop?: boolean;
18	17	align?: "top" \| "center" \| "bottom" \| (string & {});
19	18	}>;
...	...	@@ -39,7 +38,7 @@ static const alignments = {
39	38	"right-end": "100% 50%",
40	39	};
41	40
42		<const/{ base, cols, style }=input>
	41	<const/{ base, cols, style, gapless, gap = gapless ? 4 : 11 }=input>
43	42	<const/rows=input.rows ?? [325]>
44	43	<const/colCount=input.cols.length>
45	44	<const/rowSum=rows.reduce((a, b) => a + b, 0) + gap * (rows.length - 1)>
...	...	@@ -55,8 +54,8 @@ static const alignments = {
55	54	return false;
56	55	};
57	56
58		let x = 0,
59		y = 0;
	57	let x = 0;
	58	let y = 0;
60	59	let result: Positioned[] = [];
61	60	for (const img of input.img) {
62	61	const w = img.w ?? 1;
...	...	@@ -97,6 +96,7 @@ static const alignments = {
97	96	.map((x) => ((100 * x) / rowSum).toFixed(1) + "%")
98	97	.join(" "),
99	98	"aspect-ratio": `768/${rowSum}`,
	99	gap: gap !== 11 ? gap + "px" : undefined,
100	100	...style,
101	101	}>
102	102	<for\|{ x, y, w, h, src, align }\| of=items>