joe/next-portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Looking at adding a lightbox

Browse Source
This commit is contained in:
Joe Monk
2024-04-25 20:18:27 +01:00
parent 1e02cb3827
commit 6343dda1fa
14 changed files with 678 additions and 599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/layout.tsx
View File

@@ -20,7 +20,7 @@ export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>): JSX.Element {
}>): React.JSX.Element {
return (
<html className={`${inter.variable} font-sans`} lang="en">
<body className="min-h-screen flex flex-col bg-dracula-bg">

2
src/app/page.tsx
View File

@@ -1,6 +1,6 @@
import Sim from '@/components/sim';
export default function Home(): JSX.Element {
export default function Home(): React.JSX.Element {
return (
<>
<Sim/>

25
src/app/photos/page.tsx
View File

@@ -3,14 +3,15 @@ import { glob } from "glob";
import sharp from 'sharp';
import exifReader from 'exif-reader';
import { pick } from 'radash';
import Lightbox from "@/components/lightbox";
type ImageData = {
width: number,
height: number,
blur: string,
blur: `data:image/${string}`,
src: string,
camera?: string,
exif: Partial<{
ExposureProgram: number,
ExposureBiasValue: number,
FNumber: number,
ISOSpeedRatings: number,
@@ -24,30 +25,32 @@ export async function getImages(): Promise<{images: ImageData[]}> {
const photosGlob = await glob(`public/photos/**/*.{png,jpeg,jpg}`, {
nodir: true,
});
const images = photosGlob.map(async (fileName) => {
const { width, height, exif } = await sharp(fileName).metadata();
const blur = await sharp(fileName)
.resize({ width: 10, height: 10, fit: 'inside' })
.resize({ width: 12, height: 12, fit: 'inside' })
.toBuffer();
const exifData = exif ? exifReader(exif) : undefined;
return {
width: width ?? 10,
height: height ?? 10,
blur: blur.toString('base64'),
blur: `data:image/jpeg;base64,${blur.toString('base64')}` as `data:image/${string}`,
src: fileName.slice(6),
exif: pick(exifData?.Photo ?? {}, ['ExposureProgram', 'ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
camera: exifData?.Image?.Model,
exif: pick(exifData?.Photo ?? {}, ['ExposureBiasValue', 'FNumber', 'ISOSpeedRatings', 'FocalLength', 'DateTimeOriginal', 'LensModel'])
};
});
return { images: await Promise.all(images) };
}
export default async function Home(): Promise<JSX.Element> {
export default async function Home(): Promise<React.JSX.Element> {
const { images } = await getImages();
return (
<div className="grid gap-2 grid-cols-3">
<Lightbox imageData={images}>
{images.map((image) => (
<div className="relative" key={image.src}>
<Image
@@ -58,11 +61,11 @@ export default async function Home(): Promise<JSX.Element> {
loading="lazy"
width={image.width}
height={image.height}
blurDataURL={`data:image/jpeg;base64,${image.blur}`}
placeholder={`data:image/jpeg;base64,${image.blur}`}
blurDataURL={image.blur}
placeholder={image.blur}
/>
</div>
))}
</div>
</Lightbox>
);
}