From db65ac52a3ad370d605813d4ae344b038a69960f Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Mon, 27 Apr 2026 14:37:13 +0200
Subject: [PATCH] Finish the photo page

---
 astro/astro.config.mjs                  |  1 +
 astro/src/build/files.ts                |  1 +
 astro/src/components/photos/Album.astro |  2 +-
 astro/src/components/photos/Album.tsx   |  2 -
 astro/src/components/photos/Photo.astro | 51 +++++++++++++++++++------
 astro/src/icons/ChevronUp.astro         | 10 +++++
 astro/src/icons/Close.astro             | 10 +++++
 astro/src/icons/Download.astro          | 10 +++++
 8 files changed, 73 insertions(+), 14 deletions(-)
 create mode 100644 astro/src/build/files.ts
 create mode 100644 astro/src/icons/ChevronUp.astro
 create mode 100644 astro/src/icons/Close.astro
 create mode 100644 astro/src/icons/Download.astro

diff --git a/astro/astro.config.mjs b/astro/astro.config.mjs
index 82cba77..6b14b5e 100644
--- a/astro/astro.config.mjs
+++ b/astro/astro.config.mjs
@@ -7,6 +7,7 @@ import graphql from '@rollup/plugin-graphql';
 // https://astro.build/config
 export default defineConfig({
   integrations: [preact()],
+  prefetch: true,
   image: {
     domains: ['development.directus.itsfinniii.com']
   },
diff --git a/astro/src/build/files.ts b/astro/src/build/files.ts
new file mode 100644
index 0000000..2393d6d
--- /dev/null
+++ b/astro/src/build/files.ts
@@ -0,0 +1 @@
+// This file gets files, and puts them in the public folder before starting the build.
diff --git a/astro/src/components/photos/Album.astro b/astro/src/components/photos/Album.astro
index c26d3a7..594f392 100644
--- a/astro/src/components/photos/Album.astro
+++ b/astro/src/components/photos/Album.astro
@@ -20,7 +20,7 @@ const sliceEndNumber = pageNumber * settings.photo.album.perPage;
 const remappedPhotos: PhotoAlbumGalleryItem[] = [];
 
 album.photos.slice(sliceStartNumber, sliceEndNumber).forEach((photo) => {
-    const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.67);
+    const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.756);
 
     remappedPhotos.push({
         id: photo.id,
diff --git a/astro/src/components/photos/Album.tsx b/astro/src/components/photos/Album.tsx
index c33c95f..dbea3fa 100644
--- a/astro/src/components/photos/Album.tsx
+++ b/astro/src/components/photos/Album.tsx
@@ -10,8 +10,6 @@ export function AlbumPhotos(props: { photos: PhotoAlbumGalleryItem[] }) {
     const [ containerWidth, setContainerWidth ] = useState<number | null>(null);
     const [ containerHeight, setContainerHeight ] = useState<number | null>(null);
 
-    console.log(LoadingSpinner);
-
     useEffect(() => {
         setHasMounted(true);
     }, []);
diff --git a/astro/src/components/photos/Photo.astro b/astro/src/components/photos/Photo.astro
index 1dd84ef..89d660c 100644
--- a/astro/src/components/photos/Photo.astro
+++ b/astro/src/components/photos/Photo.astro
@@ -1,8 +1,14 @@
 ---
 import { getAlbum } from '@/content/photos/albums';
 import { getSettings } from '@/content/settings/settings';
-import { getImageUrl } from '@/lib/images';
+import ChevronUp from '@/icons/ChevronUp.astro';
+import Download from '@/icons/Download.astro';
+import Close from '@/icons/Close.astro';
+import { getImageSize, getImageUrl } from '@/lib/images';
 import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
+import { getImage } from 'astro:assets';
+import { Image } from 'astro:assets';
+import { getPhotoHash } from '@/lib/hash';
 
 interface Props {
     page: PhotoPage;
@@ -32,40 +38,63 @@ const albumPageNumber = Math.ceil((photoIndex + 1) / settings.photo.album.perPag
 const returnUrl = albumPageNumber > 1 
     ? `${getAlbumRoute(settings.photo, album)}/${albumPageNumber}` 
     : getAlbumRoute(settings.photo, album);
+
+
+const resizedImageSize = getImageSize(photo.photo.width, photo.photo.height, 1);
+const downloadImageSize = getImageSize(photo.photo.width, photo.photo.height, 5);
+
+const downloadUrl = await getImage({
+    src: getImageUrl(photo.photo.url),
+    width: downloadImageSize.width,
+    height: downloadImageSize.height,
+    format: "jpeg",
+    quality: 100
+});
+
+const downloadFileName = `${album.url.replaceAll("/", "")}-${getPhotoHash(photo)}.jpeg`;
 ---
 
 <div class="h-screen flex flex-col justify-center items-center">
     <div class="flex flex-col justify-center items-center h-full">
-        <img
+        <Image
             src={getImageUrl(photo.photo.url)}
+            width={resizedImageSize.width}
+            height={resizedImageSize.height}
             alt={photo.text ?? ""}
             class="h-full w-full object-contain"
         />
     </div>
     
-    <div class="absolute top-8 right-8">
-        <a href={returnUrl}>Return</a>
+    <div class="flex flex-row gap-6 absolute top-8 right-8 text-white py-2.5 px-5 bg-[#000000aa] rounded-full z-10">
+        <a data-astro-prefetch href={downloadUrl.src} download={downloadFileName}>
+            <Download width={36} height={36} />
+        </a>
+        <a data-astro-prefetch href={returnUrl}>
+            <Close width={36} height={36} />
+        </a>
     </div>
 
     { photo.text !== null && (
-        <div class="absolute bottom-0 text-white text-xl bg-[#000000cc] w-full px-20 py-8">{photo.text.trim()}</div>
+        <div class="absolute bottom-0 text-white text-xl bg-[#000000aa] w-full px-20 py-8">{photo.text.trim()}</div>
     ) }
 
     { previousUrl !== null && (
-        <a 
+        <a
+            data-astro-prefetch
             href={previousUrl}
-            class="absolute left-8"
+            class="absolute left-8 text-white p-3 bg-[#000000aa] rounded-full z-10 rotate-270"
         >
-            Previous
+            <ChevronUp width={28} height={28} />
         </a>
     ) }
 
     { nextUrl !== null && (
-        <a 
+        <a
+            data-astro-prefetch
             href={nextUrl}
-            class="absolute right-8"
+            class="absolute right-8 text-white p-3 bg-[#000000aa] rounded-full z-10 rotate-90"
         >
-            Next
+            <ChevronUp width={28} height={28} />
         </a>
     ) }
 </div>
diff --git a/astro/src/icons/ChevronUp.astro b/astro/src/icons/ChevronUp.astro
new file mode 100644
index 0000000..e0153a5
--- /dev/null
+++ b/astro/src/icons/ChevronUp.astro
@@ -0,0 +1,10 @@
+---
+interface Props {
+    width?: number;
+    height?: number;
+}
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.width ?? "24"} height={Astro.props.height ?? "24"} viewBox="0 0 24 24">
+	<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m4 15l8-8l8 8" />
+</svg>
diff --git a/astro/src/icons/Close.astro b/astro/src/icons/Close.astro
new file mode 100644
index 0000000..7451cbb
--- /dev/null
+++ b/astro/src/icons/Close.astro
@@ -0,0 +1,10 @@
+---
+interface Props {
+    width?: number;
+    height?: number;
+}
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.width ?? "24"} height={Astro.props.height ?? "24"} viewBox="0 0 24 24">
+	<path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z" />
+</svg>
\ No newline at end of file
diff --git a/astro/src/icons/Download.astro b/astro/src/icons/Download.astro
new file mode 100644
index 0000000..61babc9
--- /dev/null
+++ b/astro/src/icons/Download.astro
@@ -0,0 +1,10 @@
+---
+interface Props {
+    width?: number;
+    height?: number;
+}
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" width={Astro.props.width ?? "24"} height={Astro.props.height ?? "24"} viewBox="0 0 24 24">
+	<path fill="currentColor" d="m12 16l-5-5l1.4-1.45l2.6 2.6V4h2v8.15l2.6-2.6L17 11zm-6 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
+</svg>