Make image width full for LastBlogs and LastProjects

astro/src/components/web/LastAlbums.astro

@@ -0,0 +1,88 @@
+---
+import { getLastAlbums } from "@/content/photos/albums";
+import { getSettings } from "@/content/settings/settings";
+import CalendarIcon from "@/icons/CalendarIcon.astro";
+import { getImageUrl } from "@/lib/images";
+import { getAlbumRoute } from "@/lib/routing";
+import { Image } from "astro:assets";
+
+interface Props {
+    albums: LastGalleriesComponent;
+}
+
+function calculateSizeClasses(amount: number, length: number) {
+    if (amount === 2 || length <= 2) {
+        return "lg:w-[45%] w-full";
+    }
+    else {
+        return "lg:w-[31%] w-full";
+    }
+}
+
+const albums = Astro.props.albums;
+const settings = await getSettings();
+const lastAlbums = await getLastAlbums(albums.amount);
+const size = calculateSizeClasses(albums.amount, lastAlbums.length);
+
+const testAlbums = [...lastAlbums, ...lastAlbums, ...lastAlbums, ...lastAlbums];
+---
+
+{ settings.photo.enabled && (
+<div
+    id={`lastalbums-${albums.id}`}
+    class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-8 gap-x-18 w-full"
+>
+    <div class="flex flex-row justify-between items-center w-full">
+        <h2 class="text-4xl font-bold">{albums.title}</h2>
+        <div>
+            <a 
+                href={settings.photo.categoryIndex.indexRouteTemplate}
+                class="text-(--ptt) bg-(--ptc) hover:text-(--stt) hover:bg-(--stc) duration-200 py-3 px-4 rounded-full"
+            >
+                {albums.readMoreButtonText}
+            </a>
+        </div>
+    </div>
+
+    { testAlbums.length >= 4 ? (
+        <div class="grid lg:grid-cols-2 lg:grid-rows-2 grid-cols-1 grid-rows-4 gap-x-10 gap-y-8">
+            { testAlbums.map((album) => (
+                <a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
+                    <Image
+                        src={getImageUrl(album.thumbnail.url)}
+                        alt={album.title}
+                        class="flex rounded-2xl shadow-md w-full"
+                        width={600}
+                        height={315}
+                    />
+                    <h4 class="font-semibold text-[28px]">{album.title}</h4>
+                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                        <CalendarIcon width={20} height={20} />
+                        <div>{album.startDate}</div>
+                    </div>
+                </a>
+            )) }
+        </div>
+    
+    ) : (
+        <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
+            { lastAlbums.map((album) => (
+                <a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
+                    <Image
+                        src={getImageUrl(album.thumbnail.url)}
+                        alt={album.title}
+                        class="flex rounded-2xl shadow-md w-full"
+                        width={600}
+                        height={315}
+                    />
+                    <h4 class="font-semibold text-[28px]">{album.title}</h4>
+                    <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
+                        <CalendarIcon width={20} height={20} />
+                        <div>{album.startDate}</div>
+                    </div>
+                </a>
+            )) }
+        </div>
+    ) }
+</div>
+) }

astro/src/components/web/LastBlogs.astro

@@ -4,7 +4,6 @@ import { getSettings } from '@/content/settings/settings';
 import CalendarIcon from '@/icons/CalendarIcon.astro';
 import { getImageUrl } from '@/lib/images';
 import { getBlogRoute } from '@/lib/routing';
-import type { ACTION_ERROR_CODES } from 'astro:actions';
 import { Image } from 'astro:assets';
 
 interface Props {
@@ -49,7 +48,7 @@ const size = calculateSizeClasses(blogs.amount, lastBlogs.length);
                 <Image
                     src={getImageUrl(blog.searchEngine.thumbnail.url)}
                     alt={blog.title}
-                    class="flex rounded-2xl shadow-md"
+                    class="flex rounded-2xl shadow-md w-full"
                     width={600}
                     height={315}
                 />

astro/src/components/web/LastProjects.astro

@@ -23,8 +23,6 @@ const projects = Astro.props.projects;
 const settings = await getSettings();
 const lastProjects = await getLastProjects(projects.amount);
 const size = calculateSizeClasses(projects.amount, lastProjects.length);
-
-console.log(lastProjects[0].searchEngine);
 ---
 
 { settings.project.enabled && (
@@ -50,7 +48,7 @@ console.log(lastProjects[0].searchEngine);
                 <Image
                     src={getImageUrl(project.searchEngine.thumbnail.url)}
                     alt={project.title}
-                    class="flex rounded-2xl shadow-md"
+                    class="flex rounded-2xl shadow-md w-full"
                     width={600}
                     height={315}
                 />

astro/src/components/webpage/Webpage.astro

@@ -8,6 +8,7 @@ import EquipmentTable from '../web/EquipmentTable.astro';
 import Reviews from '../web/Reviews.astro';
 import LastBlogs from '../web/LastBlogs.astro';
 import LastProjects from '../web/LastProjects.astro';
+import LastAlbums from '../web/LastAlbums.astro';
 
 interface Props {
     webpage: WebpageComponent[];
@@ -30,6 +31,7 @@ console.log(Astro.props.webpage);
             { component.component === "Reviews" && <Reviews reviews={component} /> }
             { component.component === "LastBlogs" && <LastBlogs blogs={component} /> }
             { component.component === "LastProjects" && <LastProjects projects={component} /> }
+            { component.component === "LastGalleries" && <LastAlbums albums={component} /> }
         </Fragment>
     )) }
 </div>

astro/src/content/photos/albums.ts

@@ -2,6 +2,7 @@ import { createDirectusConnection } from "@/lib/directus";
 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 { formatDate } from "@/lib/dates";
 
 export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum[]> {
@@ -22,6 +23,7 @@ export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum
         ];
 
         const album: PhotoAlbum = {
+            exists: true,
             type: "PhotoAlbum",
             title: albumRecord["title"],
             description: albumRecord["description"],
@@ -40,7 +42,7 @@ export async function getAllAlbums(settings: GlobalSettings): Promise<PhotoAlbum
                 }
             },
             thumbnail: {
-                url: albumRecord["thumbnail"]["filename_download"],
+                url: albumRecord["thumbnail"]["filename_disk"],
                 height: albumRecord["thumbnail"]["height"],
                 width: albumRecord["thumbnail"]["width"]
             },
@@ -98,6 +100,7 @@ export async function getAlbum(settings: GlobalSettings, route: string): Promise
     ];
 
     const album: PhotoAlbum = {
+        exists: true,
         type: "PhotoAlbum",
         title: albumRecord["title"],
         description: albumRecord["description"],
@@ -153,3 +156,80 @@ export async function getAlbum(settings: GlobalSettings, route: string): Promise
 
     return album;
 }
+
+export async function getLastAlbums(amount: number) {
+    const client = await createDirectusConnection();
+    const result = await client.query(print(getLastAlbumsQuery), {
+        date: formatDate(new Date(), "%Y-%M-%D"),
+        limit: amount
+    });
+
+    let albums: PhotoAlbum[] = [];
+
+    result["Photo_Albums"].forEach((albumRecord: any) => {
+        let dates: string[] = [
+            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/getAlbum.graphql

@@ -9,7 +9,7 @@ query getAllAlbums($route: String!) {
         thumbnail {
             id,
             created_on,
-            filename_download,
+            filename_disk,
             width,
             height
         },
@@ -27,7 +27,7 @@ query getAllAlbums($route: String!) {
                 thumbnail {
                     id,
                     created_on,
-                    filename_download,
+                    filename_disk,
                     width,
                     height
                 }

astro/src/graphql/photos/getAlbums.graphql

@@ -9,7 +9,7 @@ query getAllAlbums($date: String!) {
         thumbnail {
             id,
             created_on,
-            filename_download,
+            filename_disk,
             width,
             height
         },
@@ -27,7 +27,7 @@ query getAllAlbums($date: String!) {
                 thumbnail {
                     id,
                     created_on,
-                    filename_download,
+                    filename_disk,
                     width,
                     height
                 }

astro/src/graphql/photos/getCategories.graphql

@@ -9,7 +9,7 @@ query getAllCategories {
         thumbnail {
             id,
             created_on,
-            filename_download,
+            filename_disk,
             width,
             height
         }

astro/src/graphql/photos/getLastAlbums.graphql

@@ -0,0 +1,51 @@
+query getLastAlbums($date: String!, $limit: Int!) {
+    Photo_Albums(sort: ["-start_date", "-date_created"], filter: { status: { _eq: "published" }, start_date: { _lte: $date }, category: { Photo_Categories_id: { status: { _eq: "published" } } } }, limit: $limit) {
+        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/graphql/photos/getPhotos.graphql

@@ -9,7 +9,7 @@ query getPhotos($albumUrl: String!) {
         thumbnail {
             id,
             created_on,
-            filename_download,
+            filename_disk,
             width,
             height
         },
@@ -27,7 +27,7 @@ query getPhotos($albumUrl: String!) {
                 thumbnail {
                     id,
                     created_on,
-                    filename_download,
+                    filename_disk,
                     width,
                     height
                 }