From 076d367f2607e3c81214b2a11d557214b7bf9f65 Mon Sep 17 00:00:00 2001 From: Valexr Date: Wed, 18 Sep 2024 11:35:23 +0200 Subject: [PATCH] updeps --- package.json | 6 +- src/lib/images.ts | 151 ++++++++++++++++++++++++++-------------------- 2 files changed, 87 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index b400140..8db9128 100644 --- a/package.json +++ b/package.json @@ -15,12 +15,12 @@ }, "devDependencies": { "@types/luxon": "^3.4.2", - "@types/node": "^22.5.4", + "@types/node": "^22.5.5", "esbuild": "^0.23.1", - "esbuild-svelte": "^0.8.1", + "esbuild-svelte": "^0.8.2", "luxon": "^3.5.0", "svelte": "^4.2.19", "svelte-preprocess": "^6.0.2", - "typescript": "^5.5.4" + "typescript": "^5.6.2" } } \ No newline at end of file diff --git a/src/lib/images.ts b/src/lib/images.ts index 8d803e4..aae2980 100644 --- a/src/lib/images.ts +++ b/src/lib/images.ts @@ -1,91 +1,108 @@ +import { type } from "os"; import { cacheable } from "./cacheable"; type Size = { - width: number; - height: number; -} + width: number; + height: number; +}; type ImageSchema = { - id: number; - alt: string; - src: string; - width: number; - height: number; -} + id: number; + alt: string; + src: string; + width: number; + height: number; +}; type Slide = { - id?: string | number; - src?: string; - alt?: string; - width?: string | number; - height?: string | number; - [key: string]: unknown; -} + id?: string | number; + src?: string; + alt?: string; + width?: string | number; + height?: string | number; + [key: string]: unknown; +}; -export const images = createImages() +export const images = createImages(); function createImages() { - type API = [string, number, string] - const { subscribe, set, get, update } = cacheable>('County_Images', [], true) + type API = [string, number, string]; + const { subscribe, set, get, update } = cacheable>( + "County_Images", + [], + true, + ); - async function load() { - if (!get().length) { - const url = './assets/photos.json'; - const res = await fetch(url); - set(await res.json()); - } - back() + async function load() { + if (!get().length) { + const url = "./assets/photos.json"; + const res = await fetch(url); + set(await res.json()); } + back(); + } - function back() { - const [{ src, alt }] = prepare(); - // await addImageProcess(src) - // const img = new Image(); - // img.src = src - // await img.decode(); - document.documentElement.style.cssText = ` + function back() { + const [{ src, alt }] = prepare(); + // await addImageProcess(src) + // const img = new Image(); + // img.src = src + // await img.decode(); + document.documentElement.style.cssText = ` background: url(${src}) center no-repeat; background-size: cover; `; - document.documentElement.title = alt - } - - function prepare(limit = 1, size = { width: window.innerWidth, height: window.innerHeight }) { - const indexes = Array.from({ length: limit }, () => Math.floor(Math.random() * 24644)); - return get().reduce( - (acc: ImageSchema[], [src, aspectRatio, author], id) => { - if (indexes.includes(id)) { - const source = { width: size.height * (aspectRatio / 10), height: size.height }; - const max = { width: size.width, height: size.height }; - const query = `?w=${ratio(applyRatio(source, max).width)}`; + document.documentElement.title = alt; + } - acc.push({ - id, - src: `https://images.unsplash.com/photo-${src}${query}`, - alt: `Image by ${author} from Unsplash`, - ...applyRatio(source, max), - }); - } - return acc; - }, - [] - ); + function prepare( + limit = 1, + size = { width: window.innerWidth, height: window.innerHeight }, + ) { + const indexes = Array.from({ length: limit }, () => + Math.floor(Math.random() * 24644), + ); + return get().reduce( + (acc: ImageSchema[], [src, aspectRatio, author], id) => { + if (indexes.includes(id)) { + const source = { + width: size.height * (aspectRatio / 10), + height: size.height, + }; + const max = { width: size.width, height: size.height }; + const query = `?w=${ratio(applyRatio(source, max).width)}`; - function ratio(size: number) { - return size * devicePixelRatio; + acc.push({ + id, + src: `https://images.unsplash.com/photo-${src}${query}`, + alt: `Image by ${author} from Unsplash`, + ...applyRatio(source, max), + }); } + return acc; + }, + [], + ); - function applyRatio(src: Size, size: Size): Size { - const ratio = Math.min(size.width / src.width, size.height, src.height); - return { - width: Math.round(src.width * ratio), - height: Math.round(src.height * ratio), - }; - }; + function ratio(size: number) { + return size * devicePixelRatio; } - return { - subscribe, set, update, load, prepare, back, + function applyRatio(src: Size, size: Size): Size { + const ratio = Math.min(size.width / src.width, size.height, src.height); + return { + width: Math.round(src.width * ratio), + height: Math.round(src.height * ratio), + }; } -} + } + return { + subscribe, + set, + update, + load, + prepare, + back, + }; +}