Add albums to the project

astro/astro.config.mjs

@@ -11,6 +11,12 @@ export default defineConfig({
     domains: ['development.directus.itsfinniii.com']
   },
   vite: {
-    plugins: [tailwindcss(), graphql()]
+    plugins: [tailwindcss(), graphql()],
+    resolve: {
+      alias: {
+        react: "preact/compat",
+        "react-dom": "preact/compat",
+      },
+    },
   }
 });

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

@@ -14,6 +14,7 @@ import ProjectPost from "@/components/projects/ProjectPost.astro";
 import CategoryIndex from "@/components/photos/CategoryIndex.astro";
 import Category from "@/components/photos/Category.astro";
 import { getImageUrl } from "@/lib/images";
+import AlbumPage from "@/components/photos/AlbumPage.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -144,6 +145,22 @@ if (page === null || page.page === null || !page.page.exists) {
     </WebpageLayout>
 ) }
 
+{ page.pageType === "PhotoAlbum" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: page.page.category.title,
+            description: `See the photos in the ${page.page.category.title.toLowerCase()} category.`,
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: page.page.category.thumbnail
+    }}}>
+        <Fragment slot="content">
+            <AlbumPage album={page.page} />
+        </Fragment>
+    </WebpageLayout>
+) }
+
 { page.pageType === "Photo" && (
     <PhotoLayout settings={{
         searchEngine: {

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

@@ -10,3 +10,8 @@ type PhotoPage = {
         title: string;
     };
 }
+
+type PhotoAlbumItem = {
+    photo: PhotoProps;
+    url: string;
+}