Fix thumbnail for blog posts

astro/src/components/blogs/BlogPost.astro

@@ -4,14 +4,13 @@ import { getImageSize, getImageUrl } from '@/lib/images';
 import { markdownToHtml } from '@/lib/markdown';
 import { getTypographyClasses } from '@/styles/markdownClasses';
 import { Image } from 'astro:assets';
+import LastBlogs from '../web/LastBlogs.astro';
 
 interface Props {
     blog: BlogPost;
 }
 
 const { blog } = Astro.props;
-
-const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 1);
 ---
 
 <div
@@ -30,9 +29,9 @@ const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEng
         <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(blog.searchEngine.thumbnail.url)}
+                    src={blog.searchEngine.thumbnail.url}
-                    width={imageSize.width}
+                    width={blog.searchEngine.thumbnail.width}
-                    height={imageSize.height}
+                    height={blog.searchEngine.thumbnail.height}
                     alt={blog.title}
                     class="rounded-2xl"
                 />

astro/src/content/blogs/blogs.ts

@@ -5,7 +5,8 @@ import getBlogPost from '@/graphql/blogs/getBlog.graphql';
 import getLastBlogPosts from '@/graphql/blogs/getLastBlogPosts.graphql';
 import getPaginatedBlogs from '@/graphql/blogs/getPaginatedBlogs.graphql';
 import { formatDate } from "@/lib/dates";
-import { getImageSize } from "@/lib/images";
+import { getImageSize, getImageUrl } from "@/lib/images";
+import { getImage } from "astro:assets";
 
 export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]> {
     const client = await createDirectusConnection();
@@ -38,6 +39,11 @@ export async function getAllBlogs(settings: GlobalSettings): Promise<BlogPost[]>
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],
@@ -99,8 +105,15 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
         blogRecord["search_engine"][0]["thumbnail"]["created_on"]
     ];
 
-    const blogThumbnailImage =
+    const blogThumbnailImage = getImageSize(blogRecord["search_engine"][0]["thumbnail"]["width"], 
-        getImageSize(blogRecord["search_engine"][0]["thumbnail"]["width"], blogRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
+        blogRecord["search_engine"][0]["thumbnail"]["height"], 0.756);
+
+    const thumbnail = await getImage({
+        src: getImageUrl(blogRecord["search_engine"][0]["thumbnail"]["filename_disk"]),
+        width: blogThumbnailImage.width,
+        height: blogThumbnailImage.height,
+        format: "jpeg"
+    });
 
     const blog: BlogPost = {
         exists: true,
@@ -111,6 +124,11 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
         content: blogRecord["content"],
         date: blogRecord["date"],
         url: blogRecord["url"],
+        thumbnail: {
+            url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+            width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+            height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+        },
         searchEngine: {
             title: blogRecord["search_engine"][0]["title"],
             description: blogRecord["search_engine"][0]["description"],
@@ -118,7 +136,7 @@ export async function getBlog(settings: GlobalSettings, route: string): Promise<
             canonical: blogRecord["search_engine"][0]["canonical"],
             priority: blogRecord["search_engine"][0]["priority"],
             thumbnail: {
-                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                url: `${settings.website.domainName}${thumbnail.src}`,
                 width: blogThumbnailImage.width,
                 height: blogThumbnailImage.height
             }
@@ -181,6 +199,11 @@ export async function getLastBlogs(amount: number): Promise<BlogPost[]> {
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],
@@ -257,6 +280,11 @@ export async function getAllPaginatedBlogs(settings: GlobalSettings, page: numbe
             content: blogRecord["content"],
             date: blogRecord["date"],
             url: blogRecord["url"],
+            thumbnail: {
+                url: blogRecord["search_engine"][0]["thumbnail"]["filename_disk"],
+                width: blogRecord["search_engine"][0]["thumbnail"]["width"],
+                height: blogRecord["search_engine"][0]["thumbnail"]["height"]
+            },
             searchEngine: {
                 title: blogRecord["search_engine"][0]["title"],
                 description: blogRecord["search_engine"][0]["description"],

astro/src/lib/pages.ts

@@ -4,6 +4,8 @@ import { getAlbum } from "@/content/photos/albums";
 import { getAllCategories, getPhotoCategory } from "@/content/photos/categories";
 import { getPhotoFromHash } from "@/content/photos/photos";
 import { getProject } from "@/content/projects/projects";
+import { getImageSize } from "./images";
+import { getImage } from "astro:assets";
 
 export async function getPage(settings: GlobalSettings, route: string): Promise<PageType | null> {  
     // Blog Index  
@@ -198,7 +200,17 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
                 }
             }
         }
+
+        const resizedImage = getImageSize(webpageContent.searchEngine.thumbnail.width, 
+            webpageContent.searchEngine.thumbnail.height, 0.756);
         
+        const thumbnail = await getImage({
+            src: webpageContent.searchEngine.thumbnail.url,
+            width: resizedImage.width,
+            height: resizedImage.height,
+            format: "jpeg"
+        });
+
         return {
             route: route,
             pageType: "Webpage",
@@ -208,7 +220,14 @@ export async function getPage(settings: GlobalSettings, route: string): Promise<
                 id: webpageContent.id,
                 lastModified: webpageContent.lastModified,
                 url: webpageContent.url,
-                searchEngine: webpageContent.searchEngine,
+                searchEngine: {
+                    ...webpageContent.searchEngine,
+                    thumbnail: {
+                        url: `${settings.website.domainName}${thumbnail.src}`,
+                        width: resizedImage.width,
+                        height: resizedImage.height
+                    }
+                },
                 components: webpageContent.components
             }
         };

astro/src/types/blogs/blog.d.ts

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