Add Photo Album pages

astro/src/components/photos/Album.astro

@@ -1,19 +1,23 @@
 ---
-import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
+import { getPhotoRoute } from '@/lib/routing';
 import { AlbumPhotos } from './Album.tsx';
 import { getImageSize, getImageUrl } from '@/lib/images';
 import { getSettings } from '@/content/settings/settings';
 
 interface Props {
-    album: PhotoAlbum;
+    page: PhotoAlbumPage;
 }
 
 const settings = await getSettings();
-const album = Astro.props.album;
+const album = Astro.props.page;
+const pageNumber = Astro.props.page.pageNumber;
+
+const startNumber = (pageNumber - 1) * settings.photo.album.perPage;
+const endNumber = pageNumber * settings.photo.album.perPage;
 
 const remappedPhotos: PhotoAlbumGalleryItem[] = [];
 
-album.photos.forEach((photo) => {
+album.photos.slice(startNumber, endNumber).forEach((photo) => {
     const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.67);
 
     remappedPhotos.push({

astro/src/lib/pages.ts

@@ -147,7 +147,10 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
         return {
             route: route,
             pageType: "PhotoAlbum",
-            page: photoAlbum
+            page: {
+                ...photoAlbum,
+                pageNumber: params["page"] !== undefined ? Number(params['page']) : 1
+            }
         };
     }
     // Photograph

astro/src/pages/[...route].astro

@@ -156,7 +156,7 @@ if (page === null || page.page === null || !page.page.exists) {
             thumbnail: page.page.category.thumbnail
     }}}>
         <Fragment slot="content">
-            <AlbumPage album={page.page} />
+            <AlbumPage page={page.page} />
         </Fragment>
     </WebpageLayout>
 ) }

astro/src/types/pages/page.d.ts

@@ -41,6 +41,6 @@ type PageType =
   | { pageType: "ProjectPost"; page: ProjectPost; route: string }
   | { pageType: "PhotoCategoryIndex"; page: PhotoCategoryIndex; route: string }
   | { pageType: "PhotoCategory"; page: PhotoCategory; route: string }
-  | { pageType: "PhotoAlbum"; page: PhotoAlbum; route: string }
+  | { pageType: "PhotoAlbum"; page: PhotoAlbumPage; route: string }
   | { pageType: "Photo"; page: PhotoPage; route: string }
   | { pageType: "Unknown"; page: null; route: string };

astro/src/types/photos/album.d.ts

@@ -20,6 +20,29 @@ type PhotoAlbum = {
     lastModified: Date;
 }
 
+type PhotoAlbumPage = {
+    type: "PhotoAlbum";
+    exists: boolean;
+    pageNumber: number;
+
+    id: string;
+
+    title: string;
+    url: string;
+    description: string | null;
+
+    thumbnail: PhotoProps;
+
+    startDate: string;
+    endDate: string | null;
+    location: string | null;
+
+    category: PhotoAlbumCategory;
+    photos: PhotoAlbumPhoto[];
+
+    lastModified: Date;
+}
+
 type PhotoAlbumCategory = {
     id: string;
     title: string;