Radiquum/radiquum.github.io--photos
1
0
Fork 0
mirror of https://github.com/Radiquum/photos.git synced 2025-04-05 15:54:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat/generator: update thumbnails grid view

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-21 02:13:12 +05:00
parent 27b0d27f01
commit 4bb907823f
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
7 changed files with 91 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
generate/build.tsx
View file

@ -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,

1
generate/data/items.json Normal file
View file

@ -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}]}

1
generate/data/tags.json Normal file
View file

@ -0,0 +1 @@
[]

30
generate/static/css/tailwind.css
View file

@ -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);
}

16
generate/static/js/initGalleries.js
View file

@ -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,
});

3
generate/templates/Base.tsx
View file

@ -33,10 +33,9 @@ export default function Base({ children, isDev }: BaseProps) {
<script src="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/plugins/fullscreen/lg-fullscreen.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lightgallery.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-share.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-thumbnail.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-zoom.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-transitions.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.8.2/css/lg-fullscreen.min.css" />
</head>

34
generate/templates/YearPhotos.tsx
View file

@ -12,21 +12,43 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
{year}
</h2>
<div className="" id={`gallery-${year}`} data-type="gallery" data-year={year}>
{images.map((image) => (
<div
className="grid grid-cols-6 grid-flow-row-dense gap-2"
id={`gallery-${year}`}
data-type="gallery"
data-year={year}
>
{images.map((image) => {
const aspectRatio = image.width / image.height;
return (
<a
href={image.image}
className="lg:w-1/3 lg:h-1/3 sm:w-1/2 sm:h-1/2 p-2"
className={`w-full h-full ${
aspectRatio < 0.95 ? "[grid-row:span_2] aspect-[1/2]" : aspectRatio > 1.05 ? "[grid-column:span_2] aspect-[2/1]" : "aspect-square"
}`}
key={`${year}-${image.id}`}
data-slide-name={image.id}
data-src={image.thumbnail[2048]}
data-lg-size={`512-100-480, 1200-513-960, 2048-1201`}
data-responsive={`${image.thumbnail[512]} 480, ${image.thumbnail[1024]} 960`}
data-srcset={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 960w, ${image.thumbnail[2048]} 1920w`}
data-sizes="(max-width: 600px) 480px,
(max-width: 1200px) 960px,
1920px"
data-download-url={image.image}
>
<img
src={image.thumbnail}
className="w-full h-full object-cover rounded-lg"
src={image.thumbnail[512]}
srcSet={`${image.thumbnail[512]} 480w, ${image.thumbnail[1024]} 960w, ${image.thumbnail[2048]} 1920w`}
sizes="(max-width: 600px) 480px,
(max-width: 1200px) 960px,
1920px"
className="w-full h-full object-cover"
alt={image.alt}
/>
</a>
))}
);
})}
</div>
</div>
);