itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make first test for photos

Browse Source
This commit is contained in:
itsfinniii
2026-04-26 22:26:51 +02:00
parent 092d2a4458
commit fdc8a0aae6
5 changed files with 77 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
astro/src/components/photos/Album.astro
View File

@@ -42,7 +42,7 @@ album.photos.slice(sliceStartNumber, sliceEndNumber).forEach((photo) => {
<div class="flex flex-col gap-7"> <div class="flex flex-col gap-7">
<h1 class="text-5xl font-bold">{album.title}</h1> <h1 class="text-5xl font-bold">{album.title}</h1>
<AlbumPhotos client:only client:load photos={remappedPhotos} /> <AlbumPhotos client:only photos={remappedPhotos} />
{ totalAlbumPages > 1 && ( { totalAlbumPages > 1 && (
<Pagination <Pagination

2
astro/src/components/photos/Album.tsx
View File

@@ -10,6 +10,8 @@ export function AlbumPhotos(props: { photos: PhotoAlbumGalleryItem[] }) {
const [ containerWidth, setContainerWidth ] = useState<number | null>(null); const [ containerWidth, setContainerWidth ] = useState<number | null>(null);
const [ containerHeight, setContainerHeight ] = useState<number | null>(null); const [ containerHeight, setContainerHeight ] = useState<number | null>(null);
console.log(LoadingSpinner);
useEffect(() => { useEffect(() => {
setHasMounted(true); setHasMounted(true);
}, []); }, []);

71
astro/src/components/photos/Photo.astro Normal file
View File

@@ -0,0 +1,71 @@
---
import { getAlbum } from '@/content/photos/albums';
import { getSettings } from '@/content/settings/settings';
import { getImageUrl } from '@/lib/images';
import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
interface Props {
page: PhotoPage;
}
const photo = Astro.props.page;
const settings = await getSettings();
const album = await getAlbum(settings, photo.album.url);
const photoIndex = album.photos.findIndex(p => p.id === photo.id);
let previousUrl: string | null = null;
let nextUrl: string | null = null;
// Check for previous photo
if (photoIndex > 0) {
previousUrl = getPhotoRoute(settings.photo, album, album.photos[photoIndex - 1]);
}
// Check for next photo
if (photoIndex + 1 < album.photos.length) {
nextUrl = getPhotoRoute(settings.photo, album, album.photos[photoIndex + 1]);
}
const albumPageNumber = Math.ceil((photoIndex + 1) / settings.photo.album.perPage);
const returnUrl = albumPageNumber > 1
? `${getAlbumRoute(settings.photo, album)}/${albumPageNumber}`
: getAlbumRoute(settings.photo, album);
---
<div class="h-screen flex flex-col justify-center items-center">
<div class="flex flex-col justify-center items-center h-full">
<img
src={getImageUrl(photo.photo.url)}
alt={photo.text ?? ""}
class="h-full w-full object-contain"
/>
</div>
<div class="absolute top-8 right-8">
<a href={returnUrl}>Return</a>
</div>
{ photo.text !== null && (
<div class="absolute bottom-0 text-white text-xl bg-[#000000cc] w-full px-20 py-8">{photo.text.trim()}</div>
) }
{ previousUrl !== null && (
<a
href={previousUrl}
class="absolute left-8"
>
Previous
</a>
) }
{ nextUrl !== null && (
<a
href={nextUrl}
class="absolute right-8"
>
Next
</a>
) }
</div>

4
astro/src/layouts/PhotoLayout.astro
View File

@@ -76,9 +76,7 @@ const css = {
<!-- Scripts and Style --> <!-- Scripts and Style -->
</head> </head>
<body style={ css } class="bg-[#fcfcfc] flex flex-col min-h-screen"> <body style={ css } class="bg-neutral-950 flex flex-col min-h-screen">
<slot class="grow" name="content" /> <slot class="grow" name="content" />
<Footer />
</body> </body>
</html> </html>

3
astro/src/pages/[...route].astro
View File

@@ -15,6 +15,7 @@ import CategoryIndex from "@/components/photos/CategoryIndex.astro";
import Category from "@/components/photos/Category.astro"; import Category from "@/components/photos/Category.astro";
import AlbumPage from "@/components/photos/Album.astro"; import AlbumPage from "@/components/photos/Album.astro";
import { getImageUrl } from "@/lib/images"; import { getImageUrl } from "@/lib/images";
import Photo from "@/components/photos/Photo.astro";
export async function getStaticPaths() { export async function getStaticPaths() {
const settings = await getSettings(); const settings = await getSettings();
@@ -176,7 +177,7 @@ if (page === null || page.page === null || !page.page.exists) {
} }
}}}> }}}>
<Fragment slot="content"> <Fragment slot="content">
<div>{JSON.stringify(page.page)}</div> <Photo page={page.page} />
</Fragment> </Fragment>
</PhotoLayout> </PhotoLayout>
) } ) }