Add category albums page

astro/src/components/photos/Category.astro

@@ -0,0 +1,51 @@
+---
+import { getCategoryAlbums } from "@/content/photos/albums";
+import { getSettings } from "@/content/settings/settings";
+import { getImageUrl } from "@/lib/images";
+import { getAlbumRoute } from "@/lib/routing";
+import { Image } from "astro:assets";
+
+interface Props {
+    category: PhotoCategory;
+}
+
+const category = Astro.props.category;
+const settings = await getSettings();
+const categoryAlbums = await getCategoryAlbums(settings, category.category);
+
+console.log(categoryAlbums);
+---
+
+<div
+    id={`categoryindex`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
+>
+    <div class="flex flex-col justify-center items-center gap-2.5">
+        <h1 class="text-5xl font-bold">{categoryAlbums[0].category.title}</h1>
+    </div>
+
+    <div class="flex flex-col gap-5">
+        { categoryAlbums.map((album) => (
+            <div class="flex flex-row justify-center items-center">
+                <a href={getAlbumRoute(settings.photo, album)} class="group relative block w-[70%] overflow-hidden rounded-2xl shadow-md">
+                    <div>
+                        <Image
+                            src={getImageUrl(album.thumbnail.url)}
+                            alt={album.title}
+                            width="1200"
+                            height="630"
+                            class="rounded-2xl transition-transform duration-300 group-hover:scale-102"
+                        />
+
+                        <div class="absolute inset-0 bg-black/70 flex items-center justify-center p-6 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                            <h3 class="text-white text-5xl font-bold text-center tracking-tight">
+                                {album.title}
+                            </h3>
+                        </div>
+                    </div>
+                </a>
+            </div>
+        )) }
+    </div>
+</div>
+

astro/src/content/photos/albums.ts

@@ -3,6 +3,7 @@ import { print } from "graphql";
 import getAlbums from '@/graphql/photos/getAlbums.graphql';
 import getAlbumItem from '@/graphql/photos/getAlbum.graphql';
 import getLastAlbumsQuery from '@/graphql/photos/getLastAlbums.graphql';
+import getCategoryAlbumQuery from '@/graphql/photos/getCategoryAlbum.graphql';
 import { formatDate } from "@/lib/dates";
 
 export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum[]> {
@@ -233,3 +234,82 @@ export async function getLastAlbums(amount: number) {
 
     return albums;
 }
+
+export async function getCategoryAlbums(settings: GlobalSettings, route: string): Promise<PhotoAlbum[]> {
+    const client = await createDirectusConnection();
+    const result = await client.query(print(getCategoryAlbumQuery), {
+        date: formatDate(new Date(), "%Y-%M-%D"),
+        categoryUrl: `/${route}`
+    });
+
+    let albums: PhotoAlbum[] = [];
+
+    result["Photo_Albums"].forEach((albumRecord: any) => {
+        let dates: string[] = [
+            settings.website.lastModified.toISOString(),
+            settings.photo.lastModified.toISOString(),
+            albumRecord["date_created"],
+            albumRecord["date_updated"],
+            albumRecord["thumbnail"]["created_on"],
+        ];
+
+        const album: PhotoAlbum = {
+            exists: true,
+            type: "PhotoAlbum",
+            title: albumRecord["title"],
+            description: albumRecord["description"],
+            url: albumRecord["url"],
+            startDate: albumRecord["start_date"],
+            endDate: albumRecord["end_date"],
+            location: albumRecord["location"],
+            category: {
+                id: albumRecord["category"][0]["Photo_Categories_id"]["id"],
+                title: albumRecord["category"][0]["Photo_Categories_id"]["title"],
+                url: albumRecord["category"][0]["Photo_Categories_id"]["url"],
+                thumbnail: {
+                    url: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["filename_disk"],
+                    height: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["height"],
+                    width: albumRecord["category"][0]["Photo_Categories_id"]["thumbnail"]["width"]
+                }
+            },
+            thumbnail: {
+                url: albumRecord["thumbnail"]["filename_disk"],
+                height: albumRecord["thumbnail"]["height"],
+                width: albumRecord["thumbnail"]["width"]
+            },
+            photos: [],
+            lastModified: new Date()
+        };
+
+        albumRecord["photos"].forEach((photoRecord: any) => {
+            album.photos.push({
+                id: photoRecord["id"],
+                photo: {
+                    url: photoRecord["photo"]["filename_disk"],
+                    width: photoRecord["photo"]["width"],
+                    height: photoRecord["photo"]["height"]
+                },
+                text: photoRecord["text"]
+            });
+
+            dates.push(photoRecord["date_created"]);
+            dates.push(photoRecord["date_updated"]);
+            dates.push(photoRecord["photo"]["created_on"]);
+        });
+        
+        if (dates.filter(e => e !== null).length === 0) {
+            album.lastModified = new Date();
+        }
+        else {
+            const sortedDates: string[] = dates.sort((a: string, b: string) => {
+                return new Date(b).getTime() - new Date(a).getTime();
+            });
+
+            album.lastModified = new Date(sortedDates[0]);
+        }
+
+        albums.push(album);
+    });
+
+    return albums;
+}

astro/src/graphql/photos/getCategoryAlbum.graphql

@@ -0,0 +1,51 @@
+query getCategoryAlbums($date: String!, $categoryUrl: String!) {
+    Photo_Albums(sort: ["-start_date", "-date_created"], filter: { status: { _eq: "published" }, start_date: { _lte: $date }, category: { Photo_Categories_id: { status: { _eq: "published" }, url: { _eq: $categoryUrl } } } }) {
+        id,
+        date_created,
+        date_updated,
+        title,
+        description,
+        url,
+        thumbnail {
+            id,
+            created_on,
+            filename_disk,
+            width,
+            height
+        },
+        start_date,
+        end_date,
+        location,
+        category {
+            Photo_Categories_id {
+                id,
+                status,
+                date_created,
+                date_updated,
+                title,
+                url,
+                thumbnail {
+                    id,
+                    created_on,
+                    filename_disk,
+                    width,
+                    height
+                }
+            }
+        },
+        photos(filter: { status: { _eq: "published" } }) {
+            id,
+            date_created,
+            date_updated,
+            photo {
+                id,
+                created_on,
+                filename_disk,
+                width,
+                height
+            },
+            text,
+            sort
+        }
+    }
+}

astro/src/lib/pages.ts

@@ -118,7 +118,7 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
             page: {
                 type: "PhotoCategory",
                 exists: true,
-                category: params["category"],
+                category: params["C"],
                 pageNumber: params["page"] !== undefined ? Number(params["page"]) : 1
             }
         };

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

@@ -11,6 +11,7 @@ import Webpage from "@/components/webpage/Webpage.astro";
 import BlogPost from "@/components/blogs/BlogPost.astro";
 import ProjectPost from "@/components/projects/ProjectPost.astro";
 import CategoryIndex from "@/components/photos/CategoryIndex.astro";
+import Category from "@/components/photos/Category.astro";
 
 export async function getStaticPaths() {
     const settings = await getSettings();
@@ -163,6 +164,26 @@ if (page === null || page.page === null || !page.page.exists) {
     </WebpageLayout>
 ) }
 
+{ page.pageType === "PhotoCategory" && (
+    <WebpageLayout settings={{
+        searchEngine: {
+            title: "Projects",
+            description: "",
+            allowCrawlers: true,
+            canonical: null,
+            priority: 65,
+            thumbnail: {
+                url: "",
+                width: 1200,
+                height: 630
+            }
+    }}}>
+        <Fragment slot="content">
+            <Category category={page.page} />
+        </Fragment>
+    </WebpageLayout>
+) }
+
 { page.pageType === "Photo" && (
     <WebpageLayout settings={{
         searchEngine: {