Create last albums and fix filename_download in GraphQL

astro/src/components/web/LastAlbums.astro

@@ -0,0 +1,87 @@
+---
+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>
+) }