Fix thumbnail for Project Posts

astro/src/components/projects/ProjectPost.astro

@@ -30,7 +30,7 @@ const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.sea
         <div class="aspect-1200/630 w-full max-w-full overflow-hidden">
             <div class="w-full h-full rounded-2xl shadow-md object-cover">
                 <Image
-                    src={getImageUrl(project.searchEngine.thumbnail.url)}
+                    src={project.searchEngine.thumbnail.url}
                     width={imageSize.width}
                     height={imageSize.height}
                     alt={project.title}

astro/src/content/projects/projects.ts

@@ -4,7 +4,8 @@ import { print } from "graphql";
 import getProjects from '@/graphql/projects/getProjects.graphql';
 import getProjectPost from '@/graphql/projects/getProject.graphql';
 import getLastProjectsQuery from '@/graphql/projects/getLastProjects.graphql';
-import { getImageSize } from "@/lib/images";
+import { getImageSize, getImageUrl } from "@/lib/images";
+import { getImage } from "astro:assets";
 
 export async function getAllProjects(settings: GlobalSettings): Promise<ProjectPost[]> {
     const client = await createDirectusConnection();
@@ -25,8 +26,8 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
             projectRecord["search_engine"][0]["thumbnail"]["created_on"]
         ];
 
-        const projectThumbnailImage =
+        const projectThumbnailImage = getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"], 
-            getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"], projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756)
+            projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
 
         const project: ProjectPost = {
             exists: true,
@@ -37,6 +38,11 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
             content: projectRecord["content"],
             date: projectRecord["date"],
             url: projectRecord["url"],
+            thumbnail: {
+                url: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
+                width: projectRecord["search_engine"][0]["thumbnail"]["width"],
+                height: projectRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: projectRecord["search_engine"][0]["title"],
                 description: projectRecord["search_engine"][0]["description"],
@@ -44,7 +50,7 @@ export async function getAllProjects(settings: GlobalSettings): Promise<ProjectP
                 canonical: projectRecord["search_engine"][0]["canonical"],
                 priority: projectRecord["search_engine"][0]["priority"],
                 thumbnail: {
-                    url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                    url: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
                     width: projectThumbnailImage.width,
                     height: projectThumbnailImage.height
                 }
@@ -98,8 +104,15 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
         projectRecord["search_engine"][0]["thumbnail"]["created_on"]
     ];
 
-    const projectThumbnailImage =
+    const projectThumbnailImage = getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"],
-        getImageSize(projectRecord["search_engine"][0]["thumbnail"]["width"], projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756)
+        projectRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
+
+    const thumbnail = await getImage({
+        src: getImageUrl(projectRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
+        width: projectThumbnailImage.width,
+        height: projectThumbnailImage.height,
+        format: "jpeg"
+    });
 
     const project: ProjectPost = {
         type: "ProjectPost",
@@ -111,6 +124,11 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
         content: projectRecord["content"],
         date: projectRecord["date"],
         url: projectRecord["url"],
+        thumbnail: {
+            url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+            width: projectRecord["search_engine"][0]["thumbnail"]["width"],
+            height: projectRecord["search_engine"][0]["thumbnail"]["height"]
+        },
         searchEngine: {
             title: projectRecord["search_engine"][0]["title"],
             description: projectRecord["search_engine"][0]["description"],
@@ -118,7 +136,7 @@ export async function getProject(settings: GlobalSettings, route: string): Promi
             canonical: projectRecord["search_engine"][0]["canonical"],
             priority: projectRecord["search_engine"][0]["priority"],
             thumbnail: {
-                url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                url: `${settings.website.domainName}${thumbnail.src}`,
                 width: projectThumbnailImage.width,
                 height: projectThumbnailImage.height
             }
@@ -181,6 +199,11 @@ export async function getLastProjects(amount: number): Promise<ProjectPost[]> {
             content: projectRecord["content"],
             date: projectRecord["date"],
             url: projectRecord["url"],
+            thumbnail: {
+                url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: projectRecord["search_engine"][0]["thumbnail"]["width"],
+                height: projectRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: projectRecord["search_engine"][0]["title"],
                 description: projectRecord["search_engine"][0]["description"],
@@ -257,6 +280,11 @@ export async function getAllPaginatedProjects(settings: GlobalSettings, page: nu
             content: projectRecord["content"],
             date: projectRecord["date"],
             url: projectRecord["url"],
+            thumbnail: {
+                url: projectRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: projectRecord["search_engine"][0]["thumbnail"]["width"],
+                height: projectRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: projectRecord["search_engine"][0]["title"],
                 description: projectRecord["search_engine"][0]["description"],

astro/src/types/projects/project.d.ts

@@ -8,6 +8,8 @@ type ProjectPost = {
     date: string;
     content: string;
 
+    thumbnail: PhotoProps;
+
     tags: Tag[];
 
     searchEngine: SearchEngine;