diff --git a/scripts/generate-assets.mjs b/scripts/generate-assets.mjs index 282ea0c..a0ca84d 100644 --- a/scripts/generate-assets.mjs +++ b/scripts/generate-assets.mjs @@ -107,7 +107,6 @@ const renderThumbnail = (photo, isCurrent) => { const dataAttributes = [ `data-photo-id="${photo.id}"`, `data-order="${photo.order}"`, - `data-caption="${escapeHtml(photo.caption)}"`, `data-frame-src="${photo.fallback.src}"`, `data-frame-sizes="${escapeHtml(frameSizes(photo))}"`, ].join(' '); @@ -123,7 +122,6 @@ const renderFrame = (photo) => `
frameSizes(photo), 'id="frame-image" decoding="async" fetchpriority="high"' )} -
${escapeHtml(photo.caption)}
`; const validateCatalog = (catalog) => { @@ -263,7 +261,6 @@ const generate = async () => { file: entry.file, order: entry.order, alt: entry.alt, - caption: entry.caption, orientation: metadata.width >= metadata.height ? 'landscape' : 'portrait', width: metadata.width, height: metadata.height, diff --git a/src/index.scss b/src/index.scss index 626ee3e..18a1066 100644 --- a/src/index.scss +++ b/src/index.scss @@ -152,7 +152,6 @@ img { margin: 0; display: grid; justify-items: center; - gap: var(--space-s); } .frame-figure picture { @@ -171,14 +170,6 @@ img { box-shadow: 0 0 0 1px rgb(32 33 36 / 16%); } -.frame-figure figcaption { - max-inline-size: min(42rem, 100%); - color: var(--color-ink); - font-size: 0.95rem; - line-height: 1.35; - text-align: center; -} - .slideshow-toggle { display: none; position: absolute; @@ -211,17 +202,14 @@ img { } .site-header { - grid-template-columns: auto minmax(0, 1fr); - column-gap: var(--space-s); padding: var(--space-s); } .slideshow-toggle { - position: static; + inset-inline: auto var(--space-s); } .site-header h1 { - justify-self: center; writing-mode: horizontal-tb; transform: none; font-size: clamp(1.5rem, 7vw, 2rem); diff --git a/src/photo-catalog.json b/src/photo-catalog.json index 759fab0..c2f5cd9 100644 --- a/src/photo-catalog.json +++ b/src/photo-catalog.json @@ -1,272 +1,218 @@ [ { "file": "_DSC1190-Edit.jpg", - "alt": "Portrait of a man in a burgundy sleeveless shirt standing with folded arms above a city view.", - "caption": "Portrait above the city" + "alt": "Portrait of a man in a burgundy sleeveless shirt standing with folded arms above a city view." }, { "file": "_DSC1484.jpg", - "alt": "A man smiling while drying a plate in a kitchen.", - "caption": "Kitchen portrait" + "alt": "A man smiling while drying a plate in a kitchen." }, { "file": "_DSC1834.jpg", - "alt": "A person sitting near dark rocks while waves crash into a sea cave.", - "caption": "Watching the surf" + "alt": "A person sitting near dark rocks while waves crash into a sea cave." }, { "file": "_DSC2313.jpg", - "alt": "Portrait of a man in a teal coat standing among autumn leaves.", - "caption": "Autumn portrait" + "alt": "Portrait of a man in a teal coat standing among autumn leaves." }, { "file": "_DSC2362.jpg", - "alt": "Portrait of a man with glasses leaning on a railing in a park.", - "caption": "Park portrait" + "alt": "Portrait of a man with glasses leaning on a railing in a park." }, { "file": "_DSC2674.jpg", - "alt": "A person in a hooded jacket walking down a narrow city street.", - "caption": "City walk" + "alt": "A person in a hooded jacket walking down a narrow city street." }, { "file": "_DSC8718-Edit.jpg", - "alt": "Defocused city lights glowing across a dark night skyline.", - "caption": "Night lights" + "alt": "Defocused city lights glowing across a dark night skyline." }, { "file": "adam.jpg", - "alt": "A man standing against a dark background in a black graphic T-shirt.", - "caption": "Adam" + "alt": "A man standing against a dark background in a black graphic T-shirt." }, { "file": "dorka-1.jpg", - "alt": "A woman in a white knit hat sitting outdoors on an autumn day.", - "caption": "Dorka" + "alt": "A woman in a white knit hat sitting outdoors on an autumn day." }, { "file": "kezdetazarovonalbol.jpg", - "alt": "A small plant stem silhouetted against warm yellow and orange light.", - "caption": "Small stem in warm light" + "alt": "A small plant stem silhouetted against warm yellow and orange light." }, { "file": "nap-2.jpg", - "alt": "The sun setting behind a mountain ridge over a field.", - "caption": "Sunset field" + "alt": "The sun setting behind a mountain ridge over a field." }, { "file": "nyomtatas-8.jpg", - "alt": "Close-up of ice crystals and frozen texture in blue light.", - "caption": "Ice crystals" + "alt": "Close-up of ice crystals and frozen texture in blue light." }, { "file": "nyomtatas-10.jpg", - "alt": "Warm abstract light passing through dried plants.", - "caption": "Dried plants in light" + "alt": "Warm abstract light passing through dried plants." }, { "file": "web-1-2.jpg", - "alt": "A city panorama seen through a coin-operated viewing telescope.", - "caption": "City lookout" + "alt": "A city panorama seen through a coin-operated viewing telescope." }, { "file": "web-1.jpg", - "alt": "Black and white stage scene with dancers performing before an audience.", - "caption": "Stage performance" + "alt": "Black and white stage scene with dancers performing before an audience." }, { "file": "web-2-2.jpg", - "alt": "Two zebras walking across a black and white landscape.", - "caption": "Zebras" + "alt": "Two zebras walking across a black and white landscape." }, { "file": "web-2.jpg", - "alt": "Coastal town and hillside beside a blue sea under a bright sky.", - "caption": "Coastal town" + "alt": "Coastal town and hillside beside a blue sea under a bright sky." }, { "file": "web-3-2.jpg", - "alt": "A woman walking away on a beach while carrying a bag.", - "caption": "Beach walk" + "alt": "A woman walking away on a beach while carrying a bag." }, { "file": "web-3.jpg", - "alt": "Black and white lake scene with a small boat under a bright sun.", - "caption": "Boat on the lake" + "alt": "Black and white lake scene with a small boat under a bright sun." }, { "file": "web-4-2.jpg", - "alt": "Black and white seascape with waves rolling toward weathered posts.", - "caption": "Sea posts" + "alt": "Black and white seascape with waves rolling toward weathered posts." }, { "file": "web-5.jpg", - "alt": "Candles glowing in the foreground with soft golden lights behind them.", - "caption": "Candles" + "alt": "Candles glowing in the foreground with soft golden lights behind them." }, { "file": "web-6.jpg", - "alt": "Aerial view over a city and river beneath broken clouds.", - "caption": "City and river" + "alt": "Aerial view over a city and river beneath broken clouds." }, { "file": "web-7.jpg", - "alt": "The Eiffel Tower lit at night against a dark sky.", - "caption": "Eiffel Tower at night" + "alt": "The Eiffel Tower lit at night against a dark sky." }, { "file": "web-8.jpg", - "alt": "Bare winter trees fading into a pale snowy background.", - "caption": "Winter trees" + "alt": "Bare winter trees fading into a pale snowy background." }, { "file": "web-10.jpg", - "alt": "A person in a dark jacket sitting on a bench and looking over water.", - "caption": "Looking across the water" + "alt": "A person in a dark jacket sitting on a bench and looking over water." }, { "file": "web-11.jpg", - "alt": "Black and white close-up portrait of a dog looking into the camera.", - "caption": "Dog portrait" + "alt": "Black and white close-up portrait of a dog looking into the camera." }, { "file": "web-12.jpg", - "alt": "Two people sitting by water under a vivid orange sunset.", - "caption": "Sunset by the water" + "alt": "Two people sitting by water under a vivid orange sunset." }, { "file": "web-13.jpg", - "alt": "Portrait of a woman standing beside a tree in green summer light.", - "caption": "Tree portrait" + "alt": "Portrait of a woman standing beside a tree in green summer light." }, { "file": "web-14.jpg", - "alt": "Golden sunlight reflecting on rippled water.", - "caption": "Sunlit ripples" + "alt": "Golden sunlight reflecting on rippled water." }, { "file": "web-17.jpg", - "alt": "A small green plant shoot backlit by bright sunlight.", - "caption": "Backlit sprout" + "alt": "A small green plant shoot backlit by bright sunlight." }, { "file": "web-18.jpg", - "alt": "Birds flying around pale stone sculpture details.", - "caption": "Birds and stone" + "alt": "Birds flying around pale stone sculpture details." }, { "file": "web-19.jpg", - "alt": "A bridge at night with blue lights and long yellow light trails.", - "caption": "Bridge light trails" + "alt": "A bridge at night with blue lights and long yellow light trails." }, { "file": "web-20.jpg", - "alt": "A seated man in a dark coat photographed at night with city lights behind him.", - "caption": "Night portrait" + "alt": "A seated man in a dark coat photographed at night with city lights behind him." }, { "file": "web-22.jpg", - "alt": "Silhouettes seen through large windows during a pink and blue sunset.", - "caption": "Window silhouettes" + "alt": "Silhouettes seen through large windows during a pink and blue sunset." }, { "file": "web-23.jpg", - "alt": "Tall clock tower and stone architecture with a bird flying nearby.", - "caption": "Clock tower" + "alt": "Tall clock tower and stone architecture with a bird flying nearby." }, { "file": "web-24.jpg", - "alt": "Portrait of a woman at night with bridge lights behind her.", - "caption": "Bridge portrait" + "alt": "Portrait of a woman at night with bridge lights behind her." }, { "file": "web-25.jpg", - "alt": "Portrait of a smiling man at night with blurred city lights behind him.", - "caption": "Smiling night portrait" + "alt": "Portrait of a smiling man at night with blurred city lights behind him." }, { "file": "web-26.jpg", - "alt": "Tall bridge lamps receding into a pale sky.", - "caption": "Bridge lamps" + "alt": "Tall bridge lamps receding into a pale sky." }, { "file": "web-42.jpg", - "alt": "Warm sunset over a grassy field with low hills in the distance.", - "caption": "Sunset hills" + "alt": "Warm sunset over a grassy field with low hills in the distance." }, { "file": "_DSC2636-sterling.jpg", - "alt": "A leaf-strewn forest path winding between autumn trees into misty green woodland under soft grey light.", - "caption": "Autumn forest path" + "alt": "A leaf-strewn forest path winding between autumn trees into misty green woodland under soft grey light." }, { "file": "_DSC2675-sterling.jpg", - "alt": "Tall conifer trees rising into pale morning mist beneath a soft grey sky.", - "caption": "Misty conifers" + "alt": "Tall conifer trees rising into pale morning mist beneath a soft grey sky." }, { "file": "_DSC2701-sterling.jpg", - "alt": "A winding earthen path through a misty evergreen forest with bare branches holding a few orange autumn leaves.", - "caption": "Misty forest path" + "alt": "A winding earthen path through a misty evergreen forest with bare branches holding a few orange autumn leaves." }, { "file": "20230703_211416_F9DA2848.jpg", - "alt": "Black-and-white view of a bicycle's handlebars before a city skyline of tall office towers.", - "caption": "Bicycle and skyline" + "alt": "Black-and-white view of a bicycle's handlebars before a city skyline of tall office towers." }, { "file": "20230703_211419_C25C2367.jpg", - "alt": "Sunlit dirt path winding through silhouetted pine trees in soft black-and-white woodland light.", - "caption": "Woodland path" + "alt": "Sunlit dirt path winding through silhouetted pine trees in soft black-and-white woodland light." }, { "file": "20230703_211420_C19E401F.jpg", - "alt": "Silhouetted pine trees in a misty forest with soft light filtering through their leaning trunks.", - "caption": "Pine silhouettes" + "alt": "Silhouetted pine trees in a misty forest with soft light filtering through their leaning trunks." }, { "file": "IMG_3907.JPG", - "alt": "White chalk cliffs topped with green grass descend to a pebble beach beside a pale grey sea.", - "caption": "White chalk cliffs" + "alt": "White chalk cliffs topped with green grass descend to a pebble beach beside a pale grey sea." }, { "file": "IMG_5297.JPG", - "alt": "The Berlin TV Tower seen from below, its sphere catching a sunburst against blue sky and clouds.", - "caption": "Tower sunburst" + "alt": "The Berlin TV Tower seen from below, its sphere catching a sunburst against blue sky and clouds." }, { "file": "IMG_5299.JPG", - "alt": "A bouquet of pink and cream roses in paper, with a dark cat ornament glowing behind in warm light.", - "caption": "Roses and cat" + "alt": "A bouquet of pink and cream roses in paper, with a dark cat ornament glowing behind in warm light." }, { "file": "colour-20.jpg", - "alt": "Empty chain swings in a fenced playground, lit by warm low sun with bright lens flare.", - "caption": "Empty swings" + "alt": "Empty chain swings in a fenced playground, lit by warm low sun with bright lens flare." }, { "file": "colour-7.jpg", - "alt": "Metal fire-escape stairs zigzag across a brick building beneath bare branches and a pale dusk sky.", - "caption": "Fire escape" + "alt": "Metal fire-escape stairs zigzag across a brick building beneath bare branches and a pale dusk sky." }, { "file": "colour-8.jpg", - "alt": "The BT Tower fades into mist above a pale building, framed by bare branches under grey sky.", - "caption": "Tower in mist" + "alt": "The BT Tower fades into mist above a pale building, framed by bare branches under grey sky." }, { "file": "colour-25.jpg", - "alt": "A red road-closed sign and yellow barriers before a bright orange perforated building facade under grey sky.", - "caption": "Road closed" + "alt": "A red road-closed sign and yellow barriers before a bright orange perforated building facade under grey sky." }, { "file": "colour-40.jpg", - "alt": "Aerial view over a hazy city with railway lines stretching toward the horizon beside a river.", - "caption": "Railways from above" + "alt": "Aerial view over a hazy city with railway lines stretching toward the horizon beside a river." }, { "file": "colour-41.jpg", - "alt": "Aerial view of a hazy city skyline at sunset, with golden light rays piercing through dark clouds.", - "caption": "Sunset rays" + "alt": "Aerial view of a hazy city skyline at sunset, with golden light rays piercing through dark clouds." } ] diff --git a/src/photos.test.ts b/src/photos.test.ts index 695ebe9..febfe97 100644 --- a/src/photos.test.ts +++ b/src/photos.test.ts @@ -7,7 +7,6 @@ const thumbnail = (id: string, order: number, alt: string): string => ` href="static/photos/${id}-2400.jpg" data-photo-id="${id}" data-order="${order}" - data-caption="${alt}" data-frame-src="static/photos/${id}-2400.jpg" data-frame-sizes="100vw" > @@ -89,7 +88,6 @@ describe('PhotoGallery', () => { expect(image?.alt).toBe('Second photo'); expect(image?.id).toBe('frame-image'); expect(image?.getAttribute('src')).toBe('static/photos/two-2400.jpg'); - expect(frame.querySelector('figcaption')?.textContent).toBe('Second photo'); expect( gallery .querySelector('[data-photo-id="two"]') diff --git a/src/photos.ts b/src/photos.ts index b528c99..c7c3115 100644 --- a/src/photos.ts +++ b/src/photos.ts @@ -37,8 +37,8 @@ export const wrapIndex = (value: number, count: number): number => { // Build the frame figure by cloning the thumbnail's own . The variant // files are identical to the frame's, so the only differences are the larger -// fallback src, the frame-appropriate `sizes`, and the caption — all carried on -// the thumbnail's data-* attributes by the asset generator. +// fallback src and the frame-appropriate `sizes` — both carried on the +// thumbnail's data-* attributes by the asset generator. const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => { const figure = document.createElement('figure'); figure.className = 'frame-figure'; @@ -70,11 +70,7 @@ const createFrameFigure = (thumbnail: HTMLAnchorElement): HTMLElement => { image.removeAttribute('loading'); image.decoding = 'async'; - const caption = document.createElement('figcaption'); - caption.id = 'frame-caption'; - caption.textContent = thumbnail.dataset.caption ?? ''; - - figure.append(picture, caption); + figure.append(picture); return figure; };