this repo has no description
🚸 Prevent layout shift on work grids
+8
-12
+8
-12
src/components/WorksGrid.astro
+8
-12
src/components/WorksGrid.astro
···
6
6
import Translated from "./Translated.astro";
7
7
import WIPIndicator from "./WIPIndicator.astro";
8
8
import { setCssColors } from "../colors";
9
+
import { imageAttrs } from "../pages/works/media";
9
10
10
11
interface Props {
11
12
works: InferEntrySchema<"works">[];
···
38
39
);
39
40
}
40
41
41
-
function findThumbnailSourcemap(
42
+
function findThumbnailBlock(
42
43
content: InferEntrySchema<"works">["content"],
43
44
sourcePath: string,
44
45
) {
···
46
47
.flatMap(([_, { blocks }]) => blocks)
47
48
.find(
48
49
(block) => block.type === "media" && block.relativeSource === sourcePath,
49
-
)?.thumbnails;
50
+
);
50
51
51
52
if (!sourcemap)
52
53
return Object.values(content)
53
54
.flatMap(({ blocks }) => blocks)
54
-
.find(({ type }) => type === "media")?.thumbnails;
55
+
.find(({ type }) => type === "media");
55
56
56
57
return sourcemap;
57
58
}
···
61
62
Object.entries(
62
63
groupBy(
63
64
Astro.props.works.filter((w) =>
64
-
findThumbnailSourcemap(w.content, w.metadata.thumbnail ?? ""),
65
+
findThumbnailBlock(w.content, w.metadata.thumbnail ?? ""),
65
66
),
66
67
({ metadata }) =>
67
68
preferredDate(metadata)?.getFullYear().toString() ?? "Unknown",
···
86
87
metadata: { wip, colors, started, finished, thumbnail },
87
88
}) => {
88
89
const date = preferredDate({ started, finished });
89
-
const thumb = findThumbnailSourcemap(content, thumbnail ?? "");
90
+
const thumb = findThumbnailBlock(content, thumbnail ?? "")!;
91
+
const attrs = imageAttrs(thumb);
90
92
return (
91
93
thumb && (
92
94
<a href={`/${id}`}>
93
95
<article style={setCssColors(colors)}>
94
96
{
95
97
<img
96
-
srcset={Object.entries(thumb)
97
-
.map(
98
-
([size, path]) =>
99
-
`https://media.gwen.works/${path} ${size}w`,
100
-
)
101
-
.join(", ")}
102
-
alt=""
98
+
{...attrs}
103
99
style={{
104
100
width: "100%",
105
101
height: "auto",