Update some metadata for the photo category page

astro/src/components/photos/Category.astro

@@ -11,7 +11,7 @@ interface Props {
 
 const category = Astro.props.category;
 const settings = await getSettings();
-const categoryAlbums = await getCategoryAlbums(settings, category.category);
+const categoryAlbums = await getCategoryAlbums(settings, category.category.url);
 
 console.log(categoryAlbums);
 ---

astro/src/content/photos/albums.ts

@@ -239,7 +239,7 @@ export async function getCategoryAlbums(settings: GlobalSettings, route: string)
     const client = await createDirectusConnection();
     const result = await client.query(print(getCategoryAlbumQuery), {
         date: formatDate(new Date(), "%Y-%M-%D"),
-        categoryUrl: `/${route}`
+        categoryUrl: route
     });
 
     let albums: PhotoAlbum[] = [];

astro/src/content/photos/categories.ts

@@ -1,6 +1,7 @@
 import { createDirectusConnection } from "@/lib/directus";
 import { print } from "graphql";
 import getCategories from '@/graphql/photos/getCategories.graphql';
+import getCategory from '@/graphql/photos/getCategory.graphql';
 
 export async function getAllCategories(settings: GlobalSettings): Promise<PhotoAlbumCategory[]> {
     const client = await createDirectusConnection();
@@ -23,3 +24,26 @@ export async function getAllCategories(settings: GlobalSettings): Promise<PhotoA
 
     return categories;
 }
+
+export async function getPhotoCategory(url: string): Promise<PhotoAlbumCategory> {
+    const client = await createDirectusConnection();
+    const result = await client.query(print(getCategory), {
+        url: url
+    });
+
+    const item = result["Photo_Categories"][0];
+
+    let categories: PhotoAlbumCategory = {
+        id: item["id"],
+        title: item["title"],
+        url: item["url"],
+        thumbnail: {
+            url: item["thumbnail"]["filename_disk"],
+            width: item["thumbnail"]["width"],
+            height: item["thumbnail"]["height"]
+        }
+    };
+
+    return categories;
+}
+

astro/src/graphql/photos/getCategory.graphql

@@ -0,0 +1,17 @@
+query getAllCategories($url: String!) {
+    Photo_Categories(filter: { status: { _eq: "published" }, url: { _eq: $url } }) {
+        id,
+        date_created,
+        date_updated,
+        status,
+        title,
+        url,
+        thumbnail {
+            id,
+            created_on,
+            filename_disk,
+            width,
+            height
+        }
+    }
+}

astro/src/lib/pages.ts

@@ -1,7 +1,7 @@
 import { getBlog } from "@/content/blogs/blogs";
 import { getWebpage } from "@/content/pages/pages";
 import { getAlbum } from "@/content/photos/albums";
-import { getAllCategories } from "@/content/photos/categories";
+import { getAllCategories, getPhotoCategory } from "@/content/photos/categories";
 import { getPhotoFromHash } from "@/content/photos/photos";
 import { getProject } from "@/content/projects/projects";
 
@@ -117,13 +117,15 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
             params[key] = match[i + 1];
         });
 
+        const category = await getPhotoCategory(`/${params["C"]}`);
+
         return {
             route: route,
             pageType: "PhotoCategory",
             page: {
                 type: "PhotoCategory",
                 exists: true,
-                category: params["C"],
+                category: category,
                 pageNumber: params["page"] !== undefined ? Number(params["page"]) : 1
             }
         };

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

@@ -152,11 +152,7 @@ if (page === null || page.page === null || !page.page.exists) {
             allowCrawlers: true,
             canonical: null,
             priority: 65,
-            thumbnail: {
-                url: page.page.category.thumbnail.url,
-                width: 1200,
-                height: 630
-            }
+            thumbnail: page.page.category.thumbnail
     }}}>
         <Fragment slot="content">
             <CategoryIndex />
@@ -167,16 +163,12 @@ if (page === null || page.page === null || !page.page.exists) {
 { page.pageType === "PhotoCategory" && (
     <WebpageLayout settings={{
         searchEngine: {
-            title: "",
+            title: page.page.category.title,
             description: "",
             allowCrawlers: true,
             canonical: null,
             priority: 65,
-            thumbnail: {
-                url: "",
-                width: 1200,
-                height: 630
-            }
+            thumbnail: page.page.category.thumbnail
     }}}>
         <Fragment slot="content">
             <Category category={page.page} />

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

@@ -35,6 +35,6 @@ type PhotoCategory = {
     type: "PhotoCategory";
     exists: boolean;
     
-    category: string;
+    category: PhotoAlbumCategory;
     pageNumber: number;
 }