From a2edc9aa2044b09fccabfd343759f4f6e151e0a3 Mon Sep 17 00:00:00 2001
From: clover caruso <git@paperclover.net>
Date: Thu, 2 Apr 2026 23:01:46 -0700
Subject: [PATCH] fix: file scanning shit

resolves #49. aspect ratio bugs on videos and images are fixed.
---
 src/tags/clover-media.marko |  4 ++--
 src/tags/clover-video.marko |  2 +-
 src/tags/image.tsx          |  2 +-
 src/tags/photo-grid.css     |  6 ++++++
 src/tags/photo-grid.marko   | 12 ++++++------
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/tags/clover-media.marko b/src/tags/clover-media.marko
index e7729846d33b9e62681ded503c8433a0cdbb0ba7..73a5d68ca8617cf50aef5f3190db7319b456980b 100644
--- a/src/tags/clover-media.marko
+++ b/src/tags/clover-media.marko
@@ -12,7 +12,7 @@ export interface Input {
   <div style={ color: "red" }>ERROR: No file in database: ${src}</div>
 </if>
 <else if=extsVideo.has(file.extension.toLowerCase())>
-  <clover-video noFigure ...{ file }/>
+  <clover-video minimal noFigure ...{ file }/>
 </else>
 <else if=file.extension === ".gif">
   <img src=`/file${escapeUri(file.path)}` ...rest>
@@ -29,7 +29,7 @@ export interface Input {
       : `100vw`
   )>
   <picture>
-    <for|ext| of=["jxl", "avif", "webp"]>
+    <for|ext| of=["jxl", "webp"]>
       <source
         type=`image/${ext}`
         srcset=targetSizes.map((s) => `${base}:/${s}.${ext} ${s}w`)
diff --git a/src/tags/clover-video.marko b/src/tags/clover-video.marko
index a5b581a592835704d93d9fb5e728e65b2cd7868b..bd4a608ac9f8d91106f4c30d0705031bd2e26f18 100644
--- a/src/tags/clover-video.marko
+++ b/src/tags/clover-video.marko
@@ -34,7 +34,7 @@ export interface Input {
 <define/Inner>
   <video
     ...{ id }
-    class={ "clover-video": noFigure }
+    class={ "clover-video": noFigure, minimal: noFigure && minimal }
     data-src=file.path
     poster=poster ? `/file${poster.path}` : null
     width=width
diff --git a/src/tags/image.tsx b/src/tags/image.tsx
index 233a0721257acc8e4a0ab126deeabab54a50d3e4..cc17d93a6028c4e81e600ceda35d98f1ded33521 100644
--- a/src/tags/image.tsx
+++ b/src/tags/image.tsx
@@ -35,7 +35,7 @@ export default function Image(
 
   return (
     <picture>
-      {["jxl", "avif", "webp"].map((ext) => (
+      {["jxl", "webp"].map((ext) => (
         <source
           type={`image/${ext}`}
           srcset={targetSizes.map((s) => `${base}:/${s}.${ext} ${s}w`)}
diff --git a/src/tags/photo-grid.css b/src/tags/photo-grid.css
index 83e1e18d4afcfeabd584256ea0fe8a28cfdba0f0..accfcfdcb3cd9deb03a35326c191f5fa9238479d 100644
--- a/src/tags/photo-grid.css
+++ b/src/tags/photo-grid.css
@@ -22,3 +22,9 @@ photo-grid-item {
     object-fit: cover;
   }
 }
+photo-grid + blockquote {
+  margin: 0 -4px;
+  border: none;
+  background-color: var(--primary);
+  color: black;
+}
diff --git a/src/tags/photo-grid.marko b/src/tags/photo-grid.marko
index 3afc331f9f1679e6665dfcded5e93b513c602dab..ad4890772ace242c196a8a83a290ef2b3cdfa75a 100644
--- a/src/tags/photo-grid.marko
+++ b/src/tags/photo-grid.marko
@@ -1,19 +1,18 @@
 import "./photo-grid.css";
 
-static const gap = 11;
-
 export interface Input {
   base?: string;
   cols: number[]; // weights
   rows?: number[]; // pixel heights, based on a 768px container
   style?: Marko.AttrStyle;
+  gapless?: boolean;
+  gap?: number;
   // images are placed left to right, top to bottom
   img: Marko.AttrTag<{
     src: string;
     w?: number; // column span
     h?: number; // row span
     s?: number; // skipped columns before placement
-    small?: unknown;
     mutedLoop?: boolean;
     align?: "top" | "center" | "bottom" | (string & {});
   }>;
@@ -39,7 +38,7 @@ static const alignments = {
   "right-end": "100% 50%",
 };
 
-<const/{ base, cols, style }=input>
+<const/{ base, cols, style, gapless, gap = gapless ? 4 : 11 }=input>
 <const/rows=input.rows ?? [325]>
 <const/colCount=input.cols.length>
 <const/rowSum=rows.reduce((a, b) => a + b, 0) + gap * (rows.length - 1)>
@@ -55,8 +54,8 @@ static const alignments = {
     return false;
   };
 
-  let x = 0,
-    y = 0;
+  let x = 0;
+  let y = 0;
   let result: Positioned[] = [];
   for (const img of input.img) {
     const w = img.w ?? 1;
@@ -97,6 +96,7 @@ static const alignments = {
     .map((x) => ((100 * x) / rowSum).toFixed(1) + "%")
     .join(" "),
   "aspect-ratio": `768/${rowSum}`,
+  gap: gap !== 11 ? gap + "px" : undefined,
   ...style,
 }>
   <for|{ x, y, w, h, src, align }| of=items>
-- 
2.54.0