Initial gallery

package-lock.json

@@ -10,7 +10,8 @@
 			"dependencies": {
 				"@sveltejs/adapter-node": "^4.0.1",
 				"@sveltejs/adapter-static": "^3.0.1",
-				"@sveltejs/adapter-vercel": "^5.1.0"
+				"@sveltejs/adapter-vercel": "^5.1.0",
+				"photoswipe": "^5.4.3"
 			},
 			"devDependencies": {
 				"@sveltejs/adapter-auto": "^3.0.0",
@@ -3428,6 +3429,14 @@
 				"is-reference": "^3.0.0"
 			}
 		},
+		"node_modules/photoswipe": {
+			"version": "5.4.3",
+			"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-5.4.3.tgz",
+			"integrity": "sha512-9UC6oJBK4oXFZ5HcdlcvGkfEHsVrmE4csUdCQhEjHYb3PvPLO3PG7UhnPuOgjxwmhq5s17Un5NUdum01LgBDng==",
+			"engines": {
+				"node": ">= 0.12.0"
+			}
+		},
 		"node_modules/picocolors": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",

package.json

@@ -36,6 +36,7 @@
 	"dependencies": {
 		"@sveltejs/adapter-node": "^4.0.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/adapter-vercel": "^5.1.0"
+		"@sveltejs/adapter-vercel": "^5.1.0",
+		"photoswipe": "^5.4.3"
 	}
 }

src/routes/+page.svelte

@@ -3,10 +3,22 @@
 	import AltDownload from './icons/AltDownload.svelte';
 	import Terminal from './icons/Terminal.svelte';
 	import Check from './icons/Check.svelte';
+	import PhotoSwipeLightbox from 'photoswipe/lightbox';
+	import PhotoSwipe from 'photoswipe';
+	import 'photoswipe/style.css';
+	import { onMount } from 'svelte';
 
 	let downloadIsPressed = false;
 	let checksumSwayIsPressed = false;
 	let checksumRiverIsPressed = false;
+
+	onMount(() => {
+		let lightbox = new PhotoSwipeLightbox({
+			gallery: '#sway-screenshots',
+			children: 'a',
+			pswpModule: () => import('photoswipe'),
+		});
+		lightbox.init();})
 </script>
 
 <div class="flex justify-center items-center flex-col text-center bg-[#2a2b3c]">
@@ -84,7 +96,20 @@
 			</div>
 		</div>
 		<div class="flex-1 m-5">
-			<img alt="" src="sway.png">
+			<div class="" id="sway-screenshots">
+				<a href="sway.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="979"
+					 target="_blank">
+					<img style="display: inline" src="sway.png" alt="" height="244px" width="480" />
+				</a>
+				<a href="sway.png"
+					 data-pswp-width="1920"
+					 data-pswp-height="979"
+					 target="_blank">
+					<img style="display: inline" src="sway.png" alt="" height="244px" width="480" />
+				</a>
+			</div>
 		</div>
 	</div>
 </div>