Create function to calculate the new width and height of an image

astro/src/lib/images.ts

@@ -1,3 +1,22 @@
 export function getImageUrl(url: string) {
     return `${import.meta.env.DIRECTUS_URL}assets/${url}`;
 }
+
+export function getImageSize(width: number, height: number, targetMegapixels: number): ResizedImageResponse {
+    const originalPixels = width * height;
+    const targetPixels = targetMegapixels * 1000 * 1000;
+
+    if (originalPixels >= targetPixels) {
+        return {
+            width,
+            height
+        }
+    }
+
+    const scale = Math.sqrt(targetPixels / originalPixels);
+
+    return {
+        width: Math.round(scale * width),
+        height: Math.round(scale * height)
+    }
+}

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

@@ -30,8 +30,6 @@ const settings = await getSettings();
 const pathName = Astro.url.pathname === "/" ? "/" : Astro.url.pathname.replace(/\/$/, "");
 const page = await getPage(settings, pathName);
 
-console.log(pathName);
-
 if (page === null || page.page === null || !page.page.exists) {
     return new Response("Page not found.", {
         status: 404,
@@ -73,7 +71,7 @@ if (page === null || page.page === null || !page.page.exists) {
 { page.page.type === "BlogPost" && (
     <BlogLayout settings={{
         searchEngine: page.page.searchEngine,
-        tags: []
+        tags: page.page.tags.map((tag) => tag.text)
     }}>
         <Fragment slot="content">
             <BlogPost blog={page.page} />
@@ -104,7 +102,7 @@ if (page === null || page.page === null || !page.page.exists) {
 { page.page.type === "ProjectPost" && (
     <ProjectLayout settings={{
         searchEngine: page.page.searchEngine,
-        tags: []
+        tags: page.page.tags.map((tag) => tag.text)
     }}>
         <Fragment slot="content">
             <ProjectPost project={page.page} />

astro/src/types/common/images.d.ts

@@ -3,3 +3,8 @@ type PhotoProps = {
     width: number;
     height: number;
 }
+
+type ResizedImageResponse = {
+    width: number;
+    height: number;
+}