Finish the photo page

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']
   },

astro/src/build/files.ts

@@ -0,0 +1 @@
+// This file gets files, and puts them in the public folder before starting the build.

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,

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);
     }, []);

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">
+    <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 href={returnUrl}>Return</a>
+        <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>

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>

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>

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>