From 4bb907823fd8d1a62fed718c2b816fdc45b85232 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Fri, 21 Feb 2025 02:13:12 +0500 Subject: [PATCH] feat/generator: update thumbnails grid view --- generate/build.tsx | 16 +++++++-- generate/data/items.json | 1 + generate/data/tags.json | 1 + generate/static/css/tailwind.css | 30 +++++++++++++++++ generate/static/js/initGalleries.js | 16 ++++----- generate/templates/Base.tsx | 3 +- generate/templates/YearPhotos.tsx | 52 ++++++++++++++++++++--------- 7 files changed, 91 insertions(+), 28 deletions(-) create mode 100644 generate/data/items.json create mode 100644 generate/data/tags.json diff --git a/generate/build.tsx b/generate/build.tsx index 67d3008..9dd8477 100644 --- a/generate/build.tsx +++ b/generate/build.tsx @@ -34,10 +34,17 @@ export interface Url { value: string; } +interface ThumbnailSize { + "256": string; + "512": string; + "1024": string; + "2048": string; +} + export interface Image { id: string; image: string; - thumbnail: string; + thumbnail: ThumbnailSize; alt: string; tags: string[]; urls: Url[]; @@ -86,7 +93,12 @@ if ( items[year].push({ id: doc.id, image: `${ENDPOINT}/${BUCKET}/${path}/${path}.${ext}`, - thumbnail: `${ENDPOINT}/${BUCKET}/${path}/${path}-512.${ext}`, + thumbnail: { + "256": `${ENDPOINT}/${BUCKET}/${path}/${path}-256.${ext}`, + "512": `${ENDPOINT}/${BUCKET}/${path}/${path}-512.${ext}`, + "1024": `${ENDPOINT}/${BUCKET}/${path}/${path}-1024.${ext}`, + "2048": `${ENDPOINT}/${BUCKET}/${path}/${path}-2048.${ext}` + }, alt: data.alt, tags: data.tags, urls: data.urls, diff --git a/generate/data/items.json b/generate/data/items.json new file mode 100644 index 0000000..26159ce --- /dev/null +++ b/generate/data/items.json @@ -0,0 +1 @@ +{"2025":[{"id":"IMG_20241225_133609_1.jpg","image":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1.jpg","thumbnail":{"256":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-256.jpg","512":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-512.jpg","1024":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-1024.jpg","2048":"https://s3.tebi.io/radiquum-photos/IMG_20241225_133609_1/IMG_20241225_133609_1-2048.jpg"},"alt":"","tags":[],"urls":[],"mimetype":"image/jpeg","width":3472,"height":4624,"date":1740078000000},{"id":"ilse-orsel-PIlkIuwFhd0-unsplash.jpg","image":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash.jpg","thumbnail":{"256":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-256.jpg","512":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-512.jpg","1024":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-1024.jpg","2048":"https://s3.tebi.io/radiquum-photos/ilse-orsel-PIlkIuwFhd0-unsplash/ilse-orsel-PIlkIuwFhd0-unsplash-2048.jpg"},"alt":"","tags":[],"urls":[],"mimetype":"image/jpeg","width":6960,"height":4640,"date":1740078000000}]} \ No newline at end of file diff --git a/generate/data/tags.json b/generate/data/tags.json new file mode 100644 index 0000000..0637a08 --- /dev/null +++ b/generate/data/tags.json @@ -0,0 +1 @@ +[] \ No newline at end of file diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css index 75fcc6c..a9e4ea8 100644 --- a/generate/static/css/tailwind.css +++ b/generate/static/css/tailwind.css @@ -533,6 +533,12 @@ .static { position: static; } + .\[grid-column\:span_2\] { + grid-column: span 2; + } + .\[grid-row\:span_2\] { + grid-row: span 2; + } .container { width: 100%; @media (width >= 40rem) { @@ -563,6 +569,9 @@ .flex { display: flex; } + .grid { + display: grid; + } .hidden { display: none; } @@ -578,6 +587,15 @@ .table { display: table; } + .aspect-\[1\/2\] { + aspect-ratio: 1/2; + } + .aspect-\[2\/1\] { + aspect-ratio: 2/1; + } + .aspect-square { + aspect-ratio: 1 / 1; + } .h-16 { height: calc(var(--spacing) * 16); } @@ -599,9 +617,21 @@ .resize { resize: both; } + .grid-flow-row-dense { + grid-auto-flow: row dense; + } + .grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } .items-center { align-items: center; } + .gap-2 { + gap: calc(var(--spacing) * 2); + } .gap-4 { gap: calc(var(--spacing) * 4); } diff --git a/generate/static/js/initGalleries.js b/generate/static/js/initGalleries.js index bb72b45..b1a218a 100644 --- a/generate/static/js/initGalleries.js +++ b/generate/static/js/initGalleries.js @@ -2,15 +2,13 @@ const galleries = document.querySelectorAll('[data-type="gallery"]'); galleries.forEach((item, idx) => { lightGallery(item, { - // plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom], - plugins: [lgThumbnail, lgHash, lgZoom], - // speed: 500, - // thumbnail: true, - // animateThumb: true, - // zoomFromOrigin: true, - // allowMediaOverlap: false, - // mode: 'lg-zoom-in-out', - // galleryId: Number(item.getAttribute('data-year')), + plugins: [lgThumbnail, lgHash, lgShare, lgFullscreen, lgZoom], + speed: 500, + thumbnail: true, + animateThumb: false, + zoomFromOrigin: false, + toggleThumb: true, + galleryId: Number(item.getAttribute('data-year')), hash: true, customSlideName: true, }); diff --git a/generate/templates/Base.tsx b/generate/templates/Base.tsx index 71d10ab..d473d26 100644 --- a/generate/templates/Base.tsx +++ b/generate/templates/Base.tsx @@ -33,10 +33,9 @@ export default function Base({ children, isDev }: BaseProps) { - + - diff --git a/generate/templates/YearPhotos.tsx b/generate/templates/YearPhotos.tsx index dd462ae..aea442a 100644 --- a/generate/templates/YearPhotos.tsx +++ b/generate/templates/YearPhotos.tsx @@ -12,21 +12,43 @@ export default function YearPhotos({ year, images }: YearPhotosProps) { {year} -
- {images.map((image) => ( - - {image.alt} - - ))} +
);