From d13bca500408a7e93c32ae13fd946ba9b7494319 Mon Sep 17 00:00:00 2001 From: Hadi <112569860+anotherhadi@users.noreply.github.com> Date: Thu, 27 Mar 2025 11:08:12 +0100 Subject: [PATCH] add search, footer, css correction --- app/src/routes/+page.svelte | 354 +++++++++++++++++++----------------- netlify.toml | 1 + 2 files changed, 188 insertions(+), 167 deletions(-) diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte index 42cecd1..4996212 100644 --- a/app/src/routes/+page.svelte +++ b/app/src/routes/+page.svelte @@ -10,6 +10,7 @@ import { toast } from 'svelte-sonner'; import Filters from './filters.svelte'; import Loading from './loading.svelte'; + import Input from '$lib/components/ui/input/input.svelte'; type Wallpaper = { name: string; @@ -23,12 +24,15 @@ sha256: string; }; + const version = 'v0.1.0'; const owner = 'anotherhadi'; const repo = 'awesome-wallpapers'; const path = 'wallpapers'; const apiUrl = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`; + let search: string = $state(''); let wallpapers: Wallpaper[] = $state([]); + const batchSize = 10; let allTags: string[] = $state([]); let selectedTags: string[] = $state([]); @@ -40,61 +44,71 @@ .catch(() => toast.error('Failed to copy')); }; - onMount(() => { - const fetchWallpapers = async () => { - try { - const response = await axios.get(apiUrl, { - headers: { Accept: 'application/vnd.github.v3+json' } - }); + const fetchWallpapers = async () => { + try { + const response = await axios.get(apiUrl, { + headers: { Accept: 'application/vnd.github.v3+json' } + }); - if (Array.isArray(response.data)) { - const promises = response.data.map(async (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); + if (Array.isArray(response.data)) { + const files = response.data; + // Traitement par lots + 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) => { - if (!allTags.includes(tag)) { - allTags.push(tag); - } - }); + tags.forEach((tag: string) => { + if (!allTags.includes(tag)) { + allTags.push(tag); + } + }); - const img = new Image(); - img.src = `https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${file.name}`; + const img = new Image(); + img.src = `https://raw.githubusercontent.com/${owner}/${repo}/main/${path}/${file.name}`; - return new Promise((resolve) => { - img.onload = () => { - resolve({ - name, - filename: file.name, - tags, - size, - width: img.width, - height: img.height, - more: false, - hovered: false, - sha256: 'sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=' - }); - }; - }); - }); - - wallpapers = await Promise.all(promises); - } else { - console.error('Error'); + return new Promise((resolve) => { + img.onload = () => { + resolve({ + name, + filename: file.name, + tags, + size, + width: img.width, + height: img.height, + more: false, + hovered: false, + sha256: 'sha256-AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=' + }); + }; + }); + }) + ); + wallpapers = [...wallpapers, ...batchResults]; + // Optionnel : attendre un peu avant de charger le batch suivant + await new Promise((r) => setTimeout(r, 100)); } - } catch (error) { - console.error('Error: ', error); + } else { + console.error('Error'); } - }; + } catch (error) { + console.error('Error: ', error); + } + }; - fetchWallpapers(); - }); + onMount(fetchWallpapers); -
+
+

{version}

Check the github repo Open-source wallpapers collection from {owner}/{repo}

-
-
+
+
+
{#if wallpapers.length === 0} {:else} -
+
{#each wallpapers as wallpaper} {#if selectedTags.length === 0 || selectedTags.some( (tag) => wallpaper.tags.includes(tag) )} -
-
- (wallpaper.hovered = true)} - onmouseleave={() => (wallpaper.hovered = false)} - > - {#if wallpaper.hovered} -
- +
+ (wallpaper.hovered = true)} + onmouseleave={() => (wallpaper.hovered = false)} + > + {#if wallpaper.hovered} +
-
- {/if} - {wallpaper.name - -
-
- {wallpaper.name} -
- - - - - -
- - {wallpaper.name} - -
-

- Filename: - {wallpaper.filename} -

-

Name: {wallpaper.name}

-

- Size: - {wallpaper.size} Mb -

-

- Resolution: - {wallpaper.width}x{wallpaper.height} -

-

- Tags: - {#each wallpaper.tags as tag} - {tag} - {/each} -

-

- Nix fetchurl: -

+ +
+ {/if} + {wallpaper.name + +
+
+ {wallpaper.name} +
+ + + + + +
+ + {wallpaper.name} + +
+

+ Filename: + {wallpaper.filename} +

+

Name: {wallpaper.name}

+

+ Size: + {wallpaper.size} Mb +

+

+ Resolution: + {wallpaper.width}x{wallpaper.height} +

+

+ Tags: + {#each wallpaper.tags as tag} + {tag} + {/each} +

+

+ Nix fetchurl: +

-
- + copyToClipboard(content); + }} + > + + - 
+															
 image = pkgs.fetchurl {
   url = "https://raw.githubusercontent.com/{owner}/{repo}/refs/heads/main/{path}/{wallpaper.filename}";
   sha256 = "{wallpaper.sha256}";
-}

+};
+
+ + Close +
- - Close - -
- - - - + + + + +
+ {#if wallpaper.more} +
+

Name: {wallpaper.name}

+

Size: {wallpaper.size} Mb

+

+ Resolution: + {wallpaper.width}x{wallpaper.height} +

+

+ Tags: + {#each wallpaper.tags as tag} + {tag} + {/each} +

+
+ {/if}
- {#if wallpaper.more} -
-

Name: {wallpaper.name}

-

Size: {wallpaper.size} Mb

-

- Resolution: - {wallpaper.width}x{wallpaper.height} -

-

- Tags: - {#each wallpaper.tags as tag} - {tag} - {/each} -

-
- {/if} -
+ {/if} {/if} {/each}
{/if}
- +
+ logo +

@anotherhadi

+
diff --git a/netlify.toml b/netlify.toml index 3026c9a..04952bd 100644 --- a/netlify.toml +++ b/netlify.toml @@ -2,3 +2,4 @@ base = "app" publish = "build" command = "pnpm build" + ignore = "git diff --quiet $CACHED_COMMIT_REF $COMMIT_REF ."