v0.1.1

.github/workflows/check-format.yml

@@ -3,10 +3,10 @@ name: Check Wallpapers Format
 on:
   push:
     paths:
-      - 'wallpapers/**'
+      - 'app/static/wallpapers/**'
   pull_request:
     paths:
-      - 'wallpapers/**'
+      - 'app/static/wallpapers/**'
 
 jobs:
   check-extensions:
@@ -18,7 +18,7 @@ jobs:
       - name: Validate file format and naming conventions
         run: |
           # Loop through all wallpaper files
-          cd "./wallpapers"
+          cd "./app/static/wallpapers"
           for file in *; do
             if [[ -f "$file" ]]; then
               filename=$file

README.md

@@ -29,6 +29,7 @@ A curated collection of high-quality wallpapers, organized by tags.
 ## **Contributing Guidelines**  
 
 To maintain quality and consistency, please follow these rules when adding wallpapers:  
+Wallpapers are stored in the `./app/static/wallpapers` directory.
 
 ### **File Naming Convention**  
 

app/generateFileList.js

@@ -0,0 +1,34 @@
+import { readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
+import { join, extname } from 'path';
+import { imageSize } from 'image-size';
+
+const staticDir = './static/wallpapers';
+const outputFile = './static/files.json';
+
+function getFiles(dir) {
+  return readdirSync(dir)
+    .filter(file => !file.startsWith('.'))
+    .map(file => {
+      const filePath = join(dir, file);
+      const stats = statSync(filePath);
+      const sizeInMB = (stats.size / (1024 * 1024)).toFixed(2); // Taille en MB
+
+      let dimensions = { width: 0, height: 0 };
+      if (['.jpg', '.png', '.gif'].includes(extname(file).toLowerCase())) {
+        const buffer = readFileSync(filePath);
+        dimensions = imageSize(buffer);
+      }
+
+      return {
+        filename: file,
+        size: sizeInMB,
+        width: dimensions.width || 0,
+        height: dimensions.height || 0
+      };
+    });
+}
+
+const files = getFiles(staticDir);
+writeFileSync(outputFile, JSON.stringify(files, null, 2));
+
+console.log(`✅ Liste des fichiers générée dans ${outputFile}`);

app/src/routes/+layout.svelte

@@ -1,10 +1,49 @@
 <script lang="ts">
 	import '../app.css';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { ChevronRight, Moon, Sun } from '@lucide/svelte';
+	import { toggleMode } from 'mode-watcher';
 	import { ModeWatcher } from 'mode-watcher';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
 	let { children } = $props();
+
+	const version = 'v0.1.1';
+	const owner = 'anotherhadi';
+	const repo = 'awesome-wallpapers';
 </script>
 
 <ModeWatcher />
 <Toaster />
-{@render children()}
+<div class="relative flex min-h-[100vh] flex-col gap-5 bg-background">
+	<p class="absolute right-2 top-2 m-2 text-muted-foreground">{version}</p>
+	<Button onclick={toggleMode} variant="ghost" size="icon" class="absolute left-2 right-2 m-2">
+		<Sun
+			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+		/>
+		<Moon
+			class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+		/>
+		<span class="sr-only">Toggle theme</span>
+	</Button>
+
+	<header class="flex h-96 w-full flex-col items-center justify-center gap-5 bg-primary/20">
+		<Badge class="gap-2" href={'https://github.com/' + owner + '/' + repo} target="_blank"
+			>Check the github repo <ChevronRight size={16} /></Badge
+		>
+		<h1 class="m-0">Awesome Wallpapers</h1>
+		<p class="text-muted-foreground">Open-source wallpapers collection from {owner}/{repo}</p>
+	</header>
+
+	<main class="px-10">
+		{@render children()}
+	</main>
+
+	<div class="mt-32"></div>
+	<div
+		class="absolute bottom-0 flex h-32 w-full flex-col items-center justify-center gap-4 bg-primary/20"
+	>
+		<img src="/favicon.png" alt="logo" class="w-5 rounded-md" />
+		<p class="text-muted-foreground">@anotherhadi</p>
+	</div>
+</div>

app/src/routes/+page.svelte

@@ -1,42 +1,57 @@
 <script lang="ts">
-	import { AspectRatio } from '$lib/components/ui/aspect-ratio';
-	import * as Drawer from '$lib/components/ui/drawer/index.js';
-	import Badge from '$lib/components/ui/badge/badge.svelte';
-	import Button from '$lib/components/ui/button/button.svelte';
-	import { Copy, Download, Moon, Sun } from '@lucide/svelte';
-	import { Info, ChevronRight, ChevronsUpDown } from '@lucide/svelte';
-	import axios from 'axios';
 	import { onMount } from 'svelte';
-	import { toast } from 'svelte-sonner';
-	import Filters from './filters.svelte';
 	import Loading from './loading.svelte';
+	import Filters from './filters.svelte';
 	import Input from '$lib/components/ui/input/input.svelte';
-	import { toggleMode } from 'mode-watcher';
+	import { AspectRatio } from '$lib/components/ui/aspect-ratio';
+	import Button from '$lib/components/ui/button/button.svelte';
+	import { Copy, Download, Info } from '@lucide/svelte';
+	import * as Drawer from '$lib/components/ui/drawer/index.js';
+	import { toast } from 'svelte-sonner';
+	import Badge from '$lib/components/ui/badge/badge.svelte';
 
 	type Wallpaper = {
 		name: string;
 		filename: string;
+		tags: string[];
 		size: string;
 		width: number;
 		height: number;
-		tags: string[];
-		more: boolean;
 		hovered: boolean;
-		sha256: string;
 	};
 
-	const version = 'v0.1.0';
+	let wallpapers: Wallpaper[] = [];
+	let tags: string[] = [];
+	let selectedTags: string[] = [];
+	let search: string = '';
+	let loading: boolean = false;
+	let isLoadingMore: boolean = false; // Etat pour savoir si de nouveaux wallpapers sont en train de charger
+	let allWallpapers: Wallpaper[] = [];
+	let currentPage: number = 0;
+	const wallpapersPerPage: number = 20;
+
 	const owner = 'anotherhadi';
 	const repo = 'awesome-wallpapers';
-	const path = 'wallpapers';
+	const path = 'app/static/wallpapers';
-	const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
 
-	let search: string = $state('');
+	function parseFilename(filename: string) {
-	let wallpapers: Wallpaper[] = $state([]);
+		let [namePart, ...tagsArray] = filename.split('.')[0].split('_');
-	const batchSize = 10;
+		let tagsPart = tagsArray.join('_');
+		let name = namePart.replace(/-/g, ' ').replace(/\b\w/, (l: string) => l.toUpperCase());
+		let fileTags = tagsPart ? tagsPart.split('_') : [];
 
-	let allTags: string[] = $state([]);
+		fileTags.forEach((tag: string) => {
-	let selectedTags: string[] = $state([]);
+			if (!tags.includes(tag)) {
+				tags.push(tag);
+			}
+		});
+
+		return {
+			name,
+			filename,
+			tags: fileTags
+		};
+	}
 
 	const copyToClipboard = (text: string) => {
 		navigator.clipboard
@@ -45,240 +60,195 @@
 			.catch(() => toast.error('Failed to copy'));
 	};
 
-	const fetchWallpapers = async () => {
+	async function fetchWallpapers() {
-		try {
+		const res = await fetch('/files.json');
-			const response = await axios.get(apiUrl, {
+		const fileData: { filename: string; size: string; width: number; height: number }[] =
-				headers: { Accept: 'application/vnd.github.v3+json' }
+			await res.json();
-			});
 
-			if (Array.isArray(response.data)) {
+		// Map to Wallpaper objects
-				const files = response.data;
+		allWallpapers = fileData.map((file) => {
-				// Traitement par lots
+			let { name, filename, tags: fileTags } = parseFilename(file.filename);
-				for (let i = 0; i < files.length; i += batchSize) {
-					const batch = files.slice(i, i + batchSize);
-					const batchResults = await Promise.all(
-						batch.map(async (file) => {
-							console.log(file);
-							let [namePart, ...tagsArray] = file.name.split('.')[0].split('_');
-							let tagsPart = tagsArray.join('_');
-							let name = namePart
-								.replace(/-/g, ' ')
-								.replace(/\b\w/, (l: string) => l.toUpperCase());
-							let tags = tagsPart ? tagsPart.split('_') : [];
-							let size = (file.size / 1024 / 1024).toFixed(2);
 
-							tags.forEach((tag: string) => {
+			return {
-								if (!allTags.includes(tag)) {
+				name,
-									allTags.push(tag);
+				filename,
-								}
+				tags: fileTags,
-							});
+				size: file.size,
+				width: file.width,
+				height: file.height,
+				hovered: false
+			};
+		});
 
-							const img = new Image();
+		// Initially load the first set of wallpapers
-							img.src = `https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${file.name}`;
+		loadMoreWallpapers();
+	}
 
-							return new Promise<Wallpaper>((resolve) => {
+	function loadMoreWallpapers() {
-								img.onload = () => {
+		if (loading || isLoadingMore || currentPage * wallpapersPerPage >= allWallpapers.length) return;
-									resolve({
+		isLoadingMore = true;
-										name,
+
-										filename: file.name,
+		// Load next batch of wallpapers
-										tags,
+		const nextWallpapers = allWallpapers.slice(
-										size,
+			currentPage * wallpapersPerPage,
-										width: img.width,
+			(currentPage + 1) * wallpapersPerPage
-										height: img.height,
+		);
-										more: false,
+		wallpapers = [...wallpapers, ...nextWallpapers];
-										hovered: false,
+		currentPage++;
-										sha256: 'sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA='
+		isLoadingMore = false;
-									});
+	}
-								};
+
-							});
+	// Handle scroll event
-						})
+	function onScroll() {
-					);
+		const scrollPosition = window.scrollY + window.innerHeight;
-					wallpapers = [...wallpapers, ...batchResults];
+		const bottomPosition = document.documentElement.scrollHeight;
-					// Optionnel : attendre un peu avant de charger le batch suivant
+
-					await new Promise((r) => setTimeout(r, 100));
+		if (scrollPosition >= bottomPosition - 100) {
-				}
+			// Load more wallpapers when reaching the bottom
-			} else {
+			loadMoreWallpapers();
-				console.error('Error');
-			}
-		} catch (error) {
-			console.error('Error: ', error);
 		}
-	};
+	}
 
-	onMount(fetchWallpapers);
+	onMount(() => {
+		fetchWallpapers();
+		window.addEventListener('scroll', onScroll);
+
+		return () => {
+			window.removeEventListener('scroll', onScroll);
+		};
+	});
 </script>
 
-<div class="relative flex min-h-[100vh] flex-col gap-5 bg-background">
+<div class="flex gap-5 px-2 py-4">
-	<p class="absolute right-2 top-2 m-2 text-muted-foreground">{version}</p>
+	<Input class="h-8" placeholder="Search..." bind:value={search} />
-	<Button onclick={toggleMode} variant="ghost" size="icon" class="absolute left-2 right-2 m-2">
+	<Filters title="Tags" options={tags} bind:selectedValues={selectedTags} />
-		<Sun
+</div>
-			class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-		/>
-		<Moon
-			class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-		/>
-		<span class="sr-only">Toggle theme</span>
-	</Button>
 
-	<header class="flex h-96 w-full flex-col items-center justify-center gap-5 bg-primary/20">
+{#if wallpapers.length === 0}
-		<Badge class="gap-2" href={'https://github.com/' + owner + '/' + repo} target="_blank"
+	<Loading />
-			>Check the github repo <ChevronRight size={16} /></Badge
+{:else}
-		>
+	<div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
-		<h1 class="m-0">Awesome Wallpapers</h1>
+		{#each wallpapers as wallpaper}
-		<p class="text-muted-foreground">Open-source wallpapers collection from {owner}/{repo}</p>
+			{#if selectedTags.length === 0 || selectedTags.some((tag) => wallpaper.tags.includes(tag))}
-	</header>
+				{#if wallpaper.name.toLowerCase().includes(search.toLowerCase())}
-
+					<div class="rounded-t-md bg-muted/5">
-	<main class="px-10">
+						<div class="relative">
-		<div class="flex gap-5 px-2 py-4">
+							<AspectRatio
-			<Input class="h-8" placeholder="Search..." bind:value={search} />
+								ratio={16 / 9}
-			<Filters title="Tags" options={allTags} bind:selectedValues={selectedTags} />
+								class="w-full rounded-md bg-muted"
-		</div>
+								onmouseenter={() => (wallpaper.hovered = true)}
-		{#if wallpapers.length === 0}
+								onmouseleave={() => (wallpaper.hovered = false)}
-			<Loading />
+							>
-		{:else}
+								{#if wallpaper.hovered}
-			<div class="grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
+									<div
-				{#each wallpapers as wallpaper}
+										class="absolute bottom-0 left-0 right-0 top-0 z-[10] flex items-center justify-center bg-primary/50"
-					{#if selectedTags.length === 0 || selectedTags.some( (tag) => wallpaper.tags.includes(tag) )}
-						{#if wallpaper.name.toLowerCase().includes(search.toLowerCase())}
-							<div class="rounded-t-md bg-muted/5">
-								<div class="relative">
-									<AspectRatio
-										ratio={16 / 9}
-										class="w-full rounded-md bg-muted"
-										onmouseenter={() => (wallpaper.hovered = true)}
-										onmouseleave={() => (wallpaper.hovered = false)}
 									>
-										{#if wallpaper.hovered}
-											<div
-												class="absolute bottom-0 left-0 right-0 top-0 z-[10] flex items-center justify-center bg-primary/50"
-											>
-												<Button
-													href={`https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${wallpaper.filename}`}
-													target="_blank">Download</Button
-												>
-											</div>
-										{/if}
-										<img
-											src={`https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${wallpaper.filename}`}
-											alt={wallpaper.name + ' wallpaper'}
-											class="h-full w-full rounded-md object-cover"
-										/>
-									</AspectRatio>
-								</div>
-								<div class="flex w-full items-center justify-between p-2">
-									{wallpaper.name}
-									<div class="flex gap-2">
-										<Drawer.Root>
-											<Drawer.Trigger>
-												<Button size="icon" variant="ghost" class="h-6 w-6">
-													<Info />
-												</Button>
-											</Drawer.Trigger>
-											<Drawer.Content>
-												<div class="m-auto w-full max-w-3xl select-text">
-													<Drawer.Header>
-														<Drawer.Title>{wallpaper.name}</Drawer.Title>
-													</Drawer.Header>
-													<div class="p-4 pb-0">
-														<p>
-															<span class="text-muted-foreground">Filename:</span>
-															{wallpaper.filename}
-														</p>
-														<p><span class="text-muted-foreground">Name:</span> {wallpaper.name}</p>
-														<p>
-															<span class="text-muted-foreground">Size:</span>
-															{wallpaper.size} Mb
-														</p>
-														<p>
-															<span class="text-muted-foreground">Resolution:</span>
-															{wallpaper.width}x{wallpaper.height}
-														</p>
-														<p>
-															<span class="text-muted-foreground">Tags:</span>
-															{#each wallpaper.tags as tag}
-																<Badge variant="outline">{tag}</Badge>
-															{/each}
-														</p>
-														<p class="mt-2">
-															<span class="text-muted-foreground">Nix fetchurl:</span>
-														</p>
-
-														<div class="relative">
-															<Button
-																size="icon"
-																variant="ghost"
-																class="absolute right-2 top-2 h-6 w-6"
-																onclick={() => {
-																	let content = `
-image = pkgs.fetchurl {
-  url = "https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/main/${path}/${wallpaper.filename}";
-  sha256 = "${wallpaper.sha256}";
-};`;
-																	copyToClipboard(content);
-																}}
-															>
-																<Copy />
-															</Button>
-
-															<pre
-																id={wallpaper.filename}
-																class="mb-4 mt-2 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 px-2 py-4 text-white dark:bg-zinc-900">
-image = pkgs.fetchurl &lbrace;
-  url = "https://raw.githubusercontent.com/{owner}/{repo}/refs/heads/main/{path}/{wallpaper.filename}";
-  sha256 = "{wallpaper.sha256}";
-&rbrace;;</pre>
-														</div>
-													</div>
-													<Drawer.Footer>
-														<Drawer.Close>Close</Drawer.Close>
-													</Drawer.Footer>
-												</div>
-											</Drawer.Content>
-										</Drawer.Root>
 										<Button
-											size="icon"
-											variant="ghost"
-											class="h-6 w-6"
-											onclick={() => (wallpaper.more = !wallpaper.more)}
-										>
-											<ChevronsUpDown />
-										</Button>
-										<Button
-											size="icon"
-											variant="ghost"
-											class="h-6 w-6"
 											href={`https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${wallpaper.filename}`}
-											target="_blank"
+											target="_blank">Download</Button
 										>
-											<Download />
-										</Button>
-									</div>
-								</div>
-								{#if wallpaper.more}
-									<div class="px-2 py-1">
-										<p><span class="text-muted-foreground">Name:</span> {wallpaper.name}</p>
-										<p><span class="text-muted-foreground">Size:</span> {wallpaper.size} Mb</p>
-										<p>
-											<span class="text-muted-foreground">Resolution:</span>
-											{wallpaper.width}x{wallpaper.height}
-										</p>
-										<p>
-											<span class="text-muted-foreground">Tags:</span>
-											{#each wallpaper.tags as tag}
-												<Badge variant="outline">{tag}</Badge>
-											{/each}
-										</p>
 									</div>
 								{/if}
+								<img
+									src={`/wallpapers/${wallpaper.filename}`}
+									alt={wallpaper.name + ' wallpaper'}
+									class="h-full w-full rounded-md object-cover"
+								/>
+							</AspectRatio>
+						</div>
+						<div class="flex w-full items-center justify-between p-2">
+							{wallpaper.name}
+							<div class="flex gap-2">
+								<Drawer.Root>
+									<Drawer.Trigger>
+										<Button size="icon" variant="ghost" class="h-6 w-6">
+											<Info />
+										</Button>
+									</Drawer.Trigger>
+									<Drawer.Content>
+										<div class="m-auto w-full max-w-3xl select-text">
+											<Drawer.Header>
+												<Drawer.Title>{wallpaper.name}</Drawer.Title>
+											</Drawer.Header>
+											<div class="p-4 pb-0">
+												<p>
+													<span class="text-muted-foreground">Filename:</span>
+													{wallpaper.filename}
+												</p>
+												<p><span class="text-muted-foreground">Name:</span> {wallpaper.name}</p>
+												<p>
+													<span class="text-muted-foreground">Size:</span>
+													{wallpaper.size} Mb
+												</p>
+												<p>
+													<span class="text-muted-foreground">Resolution:</span>
+													{wallpaper.width}x{wallpaper.height}
+												</p>
+												<p>
+													<span class="text-muted-foreground">Tags:</span>
+													{#if wallpaper.tags.length === 0}
+														<span class="text-muted-foreground">No tags</span>
+													{:else}
+														{#each wallpaper.tags as tag}
+															<Badge variant="outline">{tag}</Badge>
+														{/each}
+													{/if}
+												</p>
+												<p class="mt-2">
+													<span class="text-muted-foreground">Nix fetchurl:</span>
+												</p>
+
+												<div class="relative">
+													<Button
+														size="icon"
+														variant="ghost"
+														class="absolute right-2 top-2 h-6 w-6"
+														onclick={() => {
+															let content = `
+image = pkgs.fetchurl {
+  url = "https://raw.githubusercontent.com/${owner}/${repo}/refs/heads/main/${path}/${wallpaper.filename}";
+  sha256 = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
+};`;
+															copyToClipboard(content);
+														}}
+													>
+														<Copy />
+													</Button>
+
+													<pre
+														id={wallpaper.filename}
+														class="mb-4 mt-2 max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 px-2 py-4 text-white dark:bg-zinc-900">
+image = pkgs.fetchurl &lbrace;
+  url = "https://raw.githubusercontent.com/{owner}/{repo}/refs/heads/main/{path}/{wallpaper.filename}";
+  sha256 = "sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA";
+&rbrace;;</pre>
+												</div>
+											</div>
+											<Drawer.Footer>
+												<Drawer.Close>Close</Drawer.Close>
+											</Drawer.Footer>
+										</div>
+									</Drawer.Content>
+								</Drawer.Root>
+								<Button
+									size="icon"
+									variant="ghost"
+									class="h-6 w-6"
+									href={`https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${wallpaper.filename}`}
+									target="_blank"
+								>
+									<Download />
+								</Button>
 							</div>
-						{/if}
+						</div>
-					{/if}
+					</div>
-				{/each}
+				{/if}
-			</div>
+			{/if}
-		{/if}
+		{/each}
-	</main>
+	</div>
-</div>
+	{#if isLoadingMore}
-<div class="mt-5 flex h-32 w-full flex-col items-center justify-center gap-4 bg-primary/20">
+		<div class="mt-4 flex justify-center">
-	<img src="/favicon.png" alt="logo" class="w-5 rounded-md" />
+			<Loading />
-	<p class="text-muted-foreground">@anotherhadi</p>
+		</div>
-</div>
+	{/if}
+{/if}

app/static/files.json

@@ -0,0 +1,632 @@
+[
+  {
+    "filename": "a-car-and-a-cloud.png",
+    "size": "1.13",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "a-street-in-the-dark.png",
+    "size": "3.99",
+    "width": 2560,
+    "height": 1440
+  },
+  {
+    "filename": "alone-cloud_dark.png",
+    "size": "1.07",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "another-one.png",
+    "size": "1.94",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "another-sky_light.png",
+    "size": "3.52",
+    "width": 2560,
+    "height": 1600
+  },
+  {
+    "filename": "aurora.png",
+    "size": "37.80",
+    "width": 6016,
+    "height": 3900
+  },
+  {
+    "filename": "barcode_minimalist_dark.png",
+    "size": "0.47",
+    "width": 1512,
+    "height": 982
+  },
+  {
+    "filename": "black-and-white-forest_minimalist_black-and-white.png",
+    "size": "2.95",
+    "width": 3888,
+    "height": 2187
+  },
+  {
+    "filename": "black-oil-2_dark.png",
+    "size": "1.04",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "black-oil-3_dark.png",
+    "size": "2.35",
+    "width": 5760,
+    "height": 3840
+  },
+  {
+    "filename": "black-oil_dark.png",
+    "size": "8.56",
+    "width": 7952,
+    "height": 5304
+  },
+  {
+    "filename": "cat-watching-the-star_pixelart_purple_animated.gif",
+    "size": "0.20",
+    "width": 1916,
+    "height": 1078
+  },
+  {
+    "filename": "cat-watching-the-star_pixelart_purple_static.png",
+    "size": "0.02",
+    "width": 1916,
+    "height": 1078
+  },
+  {
+    "filename": "catstraunaut_blue.png",
+    "size": "2.81",
+    "width": 2205,
+    "height": 1240
+  },
+  {
+    "filename": "cloud-in-the-sky_purple.png",
+    "size": "6.79",
+    "width": 4496,
+    "height": 2529
+  },
+  {
+    "filename": "clouds-dodge-the-moon-2.png",
+    "size": "1.96",
+    "width": 2560,
+    "height": 1600
+  },
+  {
+    "filename": "clouds-in-the-sky-2.png",
+    "size": "6.65",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "clouds-in-the-sky-3.png",
+    "size": "1.53",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "clouds-in-the-sky-4_light.png",
+    "size": "2.11",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "clouds-in-the-sky.png",
+    "size": "1.63",
+    "width": 1620,
+    "height": 1080
+  },
+  {
+    "filename": "coffee-shop.png",
+    "size": "0.93",
+    "width": 1139,
+    "height": 640
+  },
+  {
+    "filename": "degirled.png",
+    "size": "4.28",
+    "width": 5000,
+    "height": 2186
+  },
+  {
+    "filename": "diner-lonely-road.png",
+    "size": "4.80",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "drawing_art_dark.png",
+    "size": "3.22",
+    "width": 2560,
+    "height": 1440
+  },
+  {
+    "filename": "dry-your-laundry.png",
+    "size": "0.36",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "forest-under-the-clouds.png",
+    "size": "11.64",
+    "width": 4288,
+    "height": 2848
+  },
+  {
+    "filename": "free-astronaut.png",
+    "size": "1.11",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "fuji_dark.png",
+    "size": "3.61",
+    "width": 4096,
+    "height": 2160
+  },
+  {
+    "filename": "fuji_light.png",
+    "size": "6.87",
+    "width": 4096,
+    "height": 2160
+  },
+  {
+    "filename": "galaxy-grey_pixelart.png",
+    "size": "5.01",
+    "width": 7680,
+    "height": 4320
+  },
+  {
+    "filename": "galaxy_dark.png",
+    "size": "1.79",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "galaxy_pixelart_purple.png",
+    "size": "0.08",
+    "width": 2275,
+    "height": 1280
+  },
+  {
+    "filename": "girl-watching-the-cloud_blue.png",
+    "size": "6.47",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "glacier-2.png",
+    "size": "0.97",
+    "width": 1920,
+    "height": 1344
+  },
+  {
+    "filename": "glacier-3.png",
+    "size": "0.64",
+    "width": 1920,
+    "height": 1344
+  },
+  {
+    "filename": "glacier.png",
+    "size": "0.82",
+    "width": 1920,
+    "height": 1344
+  },
+  {
+    "filename": "grey-mountains_grey.png",
+    "size": "6.06",
+    "width": 5472,
+    "height": 2976
+  },
+  {
+    "filename": "grey-road_grey.png",
+    "size": "2.07",
+    "width": 2880,
+    "height": 1800
+  },
+  {
+    "filename": "grue_blue.png",
+    "size": "1.61",
+    "width": 3206,
+    "height": 1800
+  },
+  {
+    "filename": "hand-blocking-the-sun_blue.png",
+    "size": "9.16",
+    "width": 7680,
+    "height": 4320
+  },
+  {
+    "filename": "horizon.png",
+    "size": "6.62",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "hue-1_minimalist.png",
+    "size": "1.24",
+    "width": 6000,
+    "height": 4000
+  },
+  {
+    "filename": "hue-2_minimalist.png",
+    "size": "0.58",
+    "width": 4000,
+    "height": 3000
+  },
+  {
+    "filename": "hue-3_minimalist.png",
+    "size": "1.09",
+    "width": 6000,
+    "height": 4000
+  },
+  {
+    "filename": "hue-4_minimalist.png",
+    "size": "1.33",
+    "width": 4001,
+    "height": 2251
+  },
+  {
+    "filename": "hue-5_minimalist.png",
+    "size": "32.70",
+    "width": 6016,
+    "height": 3900
+  },
+  {
+    "filename": "hue-6_minimalist_dark.png",
+    "size": "0.23",
+    "width": 1920,
+    "height": 1200
+  },
+  {
+    "filename": "hue-7_minimalist_dark.png",
+    "size": "0.34",
+    "width": 1920,
+    "height": 1200
+  },
+  {
+    "filename": "it-is-some-waves_dark.png",
+    "size": "5.35",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "it-is-the-ocean.png",
+    "size": "0.25",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "japan-moutains_black-and-white.png",
+    "size": "2.51",
+    "width": 4000,
+    "height": 4000
+  },
+  {
+    "filename": "lavender-cat_purple.png",
+    "size": "0.02",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "leef_dark_purple_minimalist.png",
+    "size": "0.91",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "lights-in-the-dark_dark.png",
+    "size": "0.14",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "lofi-setup_blue_purple.png",
+    "size": "3.34",
+    "width": 2912,
+    "height": 1486
+  },
+  {
+    "filename": "lofi-urban_blue.png",
+    "size": "13.10",
+    "width": 2184,
+    "height": 1224
+  },
+  {
+    "filename": "magma.png",
+    "size": "12.14",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "medusa_art_dark.png",
+    "size": "0.20",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "mosaic_dark.png",
+    "size": "9.52",
+    "width": 6016,
+    "height": 3900
+  },
+  {
+    "filename": "moutains-and-a-lac-night_purple.png",
+    "size": "0.49",
+    "width": 2048,
+    "height": 1152
+  },
+  {
+    "filename": "moutains-and-a-lac_black-and-white.png",
+    "size": "1.58",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "moutains-and-a-lac_blue.png",
+    "size": "1.53",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "moutains-and-stars_black.png",
+    "size": "0.63",
+    "width": 3840,
+    "height": 2400
+  },
+  {
+    "filename": "moutains-on-top-of-clouds.png",
+    "size": "0.19",
+    "width": 736,
+    "height": 414
+  },
+  {
+    "filename": "nasa-japan_dark.png",
+    "size": "0.06",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "night-forest_dark.png",
+    "size": "2.25",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "night-road_purple.png",
+    "size": "1.12",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "nix_minimalist_purple.png",
+    "size": "0.05",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "not-earth_dark.png",
+    "size": "3.54",
+    "width": 5120,
+    "height": 2880
+  },
+  {
+    "filename": "nothin-to-see-here_pink_dark.png",
+    "size": "6.47",
+    "width": 5586,
+    "height": 3724
+  },
+  {
+    "filename": "oneway-street_purple.png",
+    "size": "3.92",
+    "width": 2560,
+    "height": 1440
+  },
+  {
+    "filename": "openbox_dark.png",
+    "size": "0.30",
+    "width": 1080,
+    "height": 785
+  },
+  {
+    "filename": "paint-loop_art.png",
+    "size": "19.75",
+    "width": 6016,
+    "height": 3900
+  },
+  {
+    "filename": "pink-sea.png",
+    "size": "5.92",
+    "width": 2912,
+    "height": 1632
+  },
+  {
+    "filename": "pink-sky-moutains_minimalist.png",
+    "size": "0.69",
+    "width": 4096,
+    "height": 2160
+  },
+  {
+    "filename": "purple-japan_purple.png",
+    "size": "2.70",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "purple-moon_purple.png",
+    "size": "2.18",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "rains-dark_dark.png",
+    "size": "2.01",
+    "width": 1952,
+    "height": 1120
+  },
+  {
+    "filename": "rocket-launch_light.png",
+    "size": "6.42",
+    "width": 5160,
+    "height": 2160
+  },
+  {
+    "filename": "rocks-misty_light.png",
+    "size": "1.96",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "rose-sky_rose.png",
+    "size": "10.48",
+    "width": 5120,
+    "height": 2880
+  },
+  {
+    "filename": "sakura_pixelart_light_animated.gif",
+    "size": "0.80",
+    "width": 2240,
+    "height": 1085
+  },
+  {
+    "filename": "sakura_pixelart_light_static.png",
+    "size": "0.52",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "sea_blue.png",
+    "size": "6.54",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "snow-and-a-tree_white.png",
+    "size": "2.41",
+    "width": 5120,
+    "height": 3200
+  },
+  {
+    "filename": "snowy-japan-street.png",
+    "size": "3.18",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "space-2.png",
+    "size": "37.45",
+    "width": 6016,
+    "height": 3900
+  },
+  {
+    "filename": "space_dark.png",
+    "size": "0.50",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "strange-forms_blue_purple.png",
+    "size": "2.18",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "sun-is-shining.png",
+    "size": "1.83",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "sushi-keycap_dark.png",
+    "size": "1.23",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "the-cloud-is-hidding-the-moon_dark.png",
+    "size": "0.72",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "time-to-ski_blue.png",
+    "size": "5.46",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "tokyo-skyscraper_dark.png",
+    "size": "36.61",
+    "width": 6512,
+    "height": 4341
+  },
+  {
+    "filename": "tokyo.png",
+    "size": "1.04",
+    "width": 3840,
+    "height": 2160
+  },
+  {
+    "filename": "topology_dark.png",
+    "size": "3.73",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "train_light.png",
+    "size": "0.89",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "vanilla_pink_purple.png",
+    "size": "0.33",
+    "width": 1280,
+    "height": 640
+  },
+  {
+    "filename": "vector-moutains_blue_dark.png",
+    "size": "0.29",
+    "width": 5120,
+    "height": 2880
+  },
+  {
+    "filename": "velvet-moutains_minimalist_dark.png",
+    "size": "1.31",
+    "width": 5120,
+    "height": 2880
+  },
+  {
+    "filename": "wave-dark_minimalist_black-and-white.png",
+    "size": "0.17",
+    "width": 9893,
+    "height": 5565
+  },
+  {
+    "filename": "white-snow-and-a-tree_light.png",
+    "size": "0.41",
+    "width": 1920,
+    "height": 1080
+  },
+  {
+    "filename": "white-sphere_black-and-white.png",
+    "size": "0.85",
+    "width": 2560,
+    "height": 1440
+  },
+  {
+    "filename": "windows-by-night_dark.png",
+    "size": "7.00",
+    "width": 4510,
+    "height": 2537
+  },
+  {
+    "filename": "windows-problems_flat_minimalist.png",
+    "size": "0.07",
+    "width": 1920,
+    "height": 1080
+  }
+]

netlify.toml

@@ -1,5 +1,4 @@
 [build]
   base = "app"
   publish = "build"
-  command = "pnpm build"
+  command = "node generateFileList.js && pnpm build"
-  ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ."