this repo has no description
1
fork

Configure Feed

Select the types of activity you want to include in your feed.

🚸 Prevent layout shift on work grids

+8 -12
+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",