itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Create last albums and fix filename_download in GraphQL

Browse Source
This commit is contained in:
itsfinniii
2026-03-28 13:00:12 +01:00
parent e2598c58cf
commit 0bb52c6818
8 changed files with 228 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
astro/src/components/web/LastAlbums.astro Normal file
View File

@@ -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>
) }

2
astro/src/components/webpage/Webpage.astro
View File

@@ -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>