fix: improve image optimization

KodingDev · KodingDev · commit 37091800e52d · 2023-03-12T23:13:02.000+11:00
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -9,7 +9,12 @@ export declare namespace App {
   // interface Error {}
   // interface Platform {}
 
-  declare module '*&picture' {
+  declare module '*?image' {
+    const out: Picture;
+    export default out;
+  }
+
+  declare module '*?avatar' {
     const out: Picture;
     export default out;
   }
diff --git a/src/components/clients/ClientCallToAction.svelte b/src/components/clients/ClientCallToAction.svelte
@@ -7,7 +7,7 @@
   export let href: string = client.href;
 </script>
 
-<CallToAction {href} picture={client.banner}>
+<CallToAction {href} picture={client.banner} picMaxWidth="40vw">
   <div class="flex flex-col gap-3 p-6 md:p-10">
     <div class="flex flex-row items-center">
       <!-- Status Dot -->
@@ -20,7 +20,7 @@
     <!-- Avatar & Name -->
     <div class="flex flex-row items-center gap-4">
       {#if client.avatar}
-        <Image picture={client.avatar} class="h-11 w-11 rounded-lg" />
+        <Image alt="{client.name} Avatar" maxWidth="5vw" picture={client.avatar} class="h-11 w-11 rounded-lg" />
       {/if}
 
       <span class="text-2xl font-bold">{client.name}</span>
diff --git a/src/components/interactive/CallToAction.svelte b/src/components/interactive/CallToAction.svelte
@@ -6,13 +6,15 @@
 
   export let href: string;
   export let picture: Picture | undefined;
+
+  export let picMaxWidth = '100%';
 </script>
 
 <a {href} {...getLinkProps(href)} class="relative flex overflow-clip rounded-xl border border-white/25 transition-all hover:scale-[101%] hover:shadow-xl">
   <div class="absolute inset-0">
     <!-- Picture -->
     {#if picture}
-      <Image {picture} class="h-full w-full object-cover object-top" alt="Cover" />
+      <Image {picture} class="h-full w-full object-cover object-top" alt="Cover" maxWidth={picMaxWidth} />
       <div class="absolute top-0 left-0 z-[1] h-full w-full bg-gradient-to-b from-transparent to-black/60" />
     {:else}
       <!-- Cool ass gradient instead -->
diff --git a/src/components/interactive/Link.svelte b/src/components/interactive/Link.svelte
@@ -21,7 +21,7 @@
   {/if}
 
   {#if picture}
-    <Image width="30px" height="30px" class={picClass} {picture} alt={picAlt} />
+    <Image maxWidth="5vw" class={picClass} {picture} alt={picAlt} />
   {/if}
 
   <h1 class:group-hover:animate-pulse={style === 'back'}><slot /></h1>
diff --git a/src/components/layout/NavBar.svelte b/src/components/layout/NavBar.svelte
@@ -9,7 +9,7 @@
 <div class="flex h-24 border-b border-b-white/10">
   <div class="my-auto flex w-full flex-row items-center">
     <!-- Avatar -->
-    <Image class="aspect-square h-11 w-11 rounded-xl object-cover object-top" picture={FEATURED_ARTIST.commission.images[0]} alt="Logo" />
+    <Image maxWidth="5vw" class="aspect-square h-11 w-11 rounded-xl object-cover object-top" picture={FEATURED_ARTIST.commission.images[0]} alt="Logo" />
     <div class="flex-grow md:hidden" />
 
     <!-- Navigation -->
diff --git a/src/lib/data/blog/tests/meta.ts b/src/lib/data/blog/tests/meta.ts
@@ -1,5 +1,5 @@
 import type { PostMetadata } from '$lib/data/blog';
-import cover from './images/ball.png?w=512;1280;1920&picture';
+import cover from './images/ball.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/clients/fadecloud/meta.ts b/src/lib/data/clients/fadecloud/meta.ts
@@ -1,8 +1,8 @@
 import type { Client } from '$lib/data/clients';
-import CubeGeneratorIsland from './assets/cube-generator-island.png?w=512;1280;1920&picture';
+import CubeGeneratorIsland from './assets/cube-generator-island.png?image';
 import CubeGeneratorPlace from './assets/cube-generator-place.mp4';
-import avatar from './avatar.png?w=100;200;300&picture';
-import banner from './banner.png?w=512;1280;1920&picture';
+import avatar from './avatar.png?avatar';
+import banner from './banner.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/clients/innitgg/meta.ts b/src/lib/data/clients/innitgg/meta.ts
@@ -1,10 +1,10 @@
 import type { Client } from '$lib/data/clients';
-import MapCasino from './assets/map-casino.png?w=512;1280;1920&picture';
-import MapCult from './assets/map-cult.png?w=512;1280;1920&picture';
-import MapLobby from './assets/map-lobby.png?w=512;1280;1920&picture';
-import MapRoyale from './assets/map-royale.png?w=512;1280;1920&picture';
-import avatar from './avatar.jpg?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
+import MapCasino from './assets/map-casino.png?image';
+import MapCult from './assets/map-cult.png?image';
+import MapLobby from './assets/map-lobby.png?image';
+import MapRoyale from './assets/map-royale.png?image';
+import avatar from './avatar.jpg?avatar';
+import banner from './banner.jpg?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/clients/katalyst/meta.ts b/src/lib/data/clients/katalyst/meta.ts
@@ -1,11 +1,11 @@
 import type { Client } from '$lib/data/clients';
-import avatar from './avatar.jpg?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import banner from './banner.jpg?image';
 
-import CraftadiaAvatar from './assets/craftadia-avatar.png?w=100;200;300&picture';
-import CraftadiaBank from './assets/craftadia-bank.png?w=512;1280;1920&picture';
-import CraftadiaTreasureMerchant from './assets/craftadia-treasure-merchant.png?w=512;1280;1920&picture';
-import CraftadiaWheel from './assets/craftadia-wheel.png?w=512;1280;1920&picture';
+import CraftadiaAvatar from './assets/craftadia-avatar.png?avatar';
+import CraftadiaBank from './assets/craftadia-bank.png?image';
+import CraftadiaTreasureMerchant from './assets/craftadia-treasure-merchant.png?image';
+import CraftadiaWheel from './assets/craftadia-wheel.png?image';
 
 export default {
   name: 'Katalyst Media',
diff --git a/src/lib/data/clients/mcparty/meta.ts b/src/lib/data/clients/mcparty/meta.ts
@@ -1,13 +1,13 @@
 import type { Client } from '$lib/data/clients';
 
-import avatar from './avatar.png?w=100;200;300&picture';
-import banner from './banner.png?w=512;1280;1920&picture';
+import avatar from './avatar.png?avatar';
+import banner from './banner.png?image';
 
-import MasayoshiAvatar from './assets/masayoshi-avatar.png?w=100;200;300&picture';
-import MasayoshiGamesBanner1 from './assets/masayoshi-games-banner.jpg?w=512;1280;1920&picture';
+import MasayoshiAvatar from './assets/masayoshi-avatar.png?avatar';
+import MasayoshiGamesBanner1 from './assets/masayoshi-games-banner.jpg?image';
 
-import McPartyBlizzard from './assets/mcparty-blizzard.png?w=512;1280;1920&picture';
-import McPartyLobby from './assets/mcparty-lobby.png?w=512;1280;1920&picture';
+import McPartyBlizzard from './assets/mcparty-blizzard.png?image';
+import McPartyLobby from './assets/mcparty-lobby.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/clients/origin-realms/meta.ts b/src/lib/data/clients/origin-realms/meta.ts
@@ -1,11 +1,11 @@
 import type { Client } from '$lib/data/clients';
 
-import avatar from './avatar.png?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
+import avatar from './avatar.png?avatar';
+import banner from './banner.jpg?image';
 
-import OEAvatar from './assets/oe-avatar.png?w=100;200;300&picture';
+import OEAvatar from './assets/oe-avatar.png?avatar';
 import OEInterpolation from './assets/oe-interpolation.mp4';
-import OESettings from './assets/oe-settings.png?w=512;1280;1920&picture';
+import OESettings from './assets/oe-settings.png?image';
 
 export default {
   name: 'Origin Realms',
diff --git a/src/lib/data/clients/oxywire/meta.ts b/src/lib/data/clients/oxywire/meta.ts
@@ -1,6 +1,6 @@
 import type { Client } from '$lib/data/clients';
-import StickyMCBanner from './assets/stickymc-banner.png?w=512;1280;1920&picture';
-import avatar from './avatar.png?w=100;200;300&picture';
+import StickyMCBanner from './assets/stickymc-banner.png?image';
+import avatar from './avatar.png?avatar';
 
 export default {
   name: 'OxyWire',
diff --git a/src/lib/data/clients/sk1er/meta.ts b/src/lib/data/clients/sk1er/meta.ts
@@ -1,11 +1,11 @@
 import type { Client } from '$lib/data/clients';
 
-import avatar from './avatar.jpg?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import banner from './banner.jpg?image';
 
-import HyperiumAvatar from './assets/hyperium-avatar.png?w=100;200;300&picture';
-import HyperiumMenu from './assets/hyperium-menu.jpg?w=512;1280;1920&picture';
-import HyperiumSettings from './assets/hyperium-settings.jpeg?w=512;1280;1920&picture';
+import HyperiumAvatar from './assets/hyperium-avatar.png?avatar';
+import HyperiumMenu from './assets/hyperium-menu.jpg?image';
+import HyperiumSettings from './assets/hyperium-settings.jpeg?image';
 
 export default {
   name: 'Sk1er LLC',
diff --git a/src/lib/data/clients/speedsilver/meta.ts b/src/lib/data/clients/speedsilver/meta.ts
@@ -1,8 +1,8 @@
 import type { Client } from '$lib/data/clients';
-import avatar from './avatar.jpg?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
-import CivilizationIgn from './assets/civilization-ign.png?w=512;1280;1920&picture';
-import CivilizationUpcomingTest from './assets/civilization-upcoming-test.png?w=512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import banner from './banner.jpg?image';
+import CivilizationIgn from './assets/civilization-ign.png?image';
+import CivilizationUpcomingTest from './assets/civilization-upcoming-test.png?image';
 
 export default {
   name: 'SpeedSilver',
diff --git a/src/lib/data/clients/utiliti/meta.ts b/src/lib/data/clients/utiliti/meta.ts
@@ -1,6 +1,6 @@
 import type { Client } from '$lib/data/clients';
-import avatar from './avatar.jpg?w=100;200;300&picture';
-import banner from './banner.jpg?w=512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import banner from './banner.jpg?image';
 
 export default {
   name: 'UTILITI',
diff --git a/src/lib/data/commissions/ally/artist.ts b/src/lib/data/commissions/ally/artist.ts
@@ -1,5 +1,5 @@
 import type { ArtistData } from '$lib/data/commissions';
-import Commission2 from './images/2.png?w=256;512;1280;1920&picture';
+import Commission2 from './images/2.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/alpha/artist.ts b/src/lib/data/commissions/alpha/artist.ts
@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpeg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
-import Commission1BG from './images/1-bg.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpeg?avatar';
+import Commission1 from './images/1.png?image';
+import Commission1BG from './images/1-bg.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/amber/artist.ts b/src/lib/data/commissions/amber/artist.ts
@@ -1,9 +1,9 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
+import avatar from './avatar.jpg?avatar';
 
-import Commission1 from './images/1.jpg?w=256;512;1280;1920&picture';
-import Commission2 from './images/2.png?w=256;512;1280;1920&picture';
-import Commission3 from './images/3.png?w=256;512;1280;1920&picture';
+import Commission1 from './images/1.jpg?image';
+import Commission2 from './images/2.png?image';
+import Commission3 from './images/3.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/amiee/artist.ts b/src/lib/data/commissions/amiee/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission2 from './images/2.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission2 from './images/2.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/andredan/artist.ts b/src/lib/data/commissions/andredan/artist.ts
@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
-import Commission1Paper from './images/1-paper.jpg?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
+import Commission1Paper from './images/1-paper.jpg?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/charwiewie/artist.ts b/src/lib/data/commissions/charwiewie/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/hiss/artist.ts b/src/lib/data/commissions/hiss/artist.ts
@@ -1,5 +1,5 @@
 import type { ArtistData } from '$lib/data/commissions';
-import Commission1 from './images/1.jpg?w=256;512;1280;1920&picture';
+import Commission1 from './images/1.jpg?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/kinneticto/artist.ts b/src/lib/data/commissions/kinneticto/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpeg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpeg?avatar';
+import Commission1 from './images/1.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/livillon/artist.ts b/src/lib/data/commissions/livillon/artist.ts
@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1Set1 from './images/1-set1.png?w=256;512;1280;1920&picture';
-import Commission1Set2 from './images/1-set2.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1Set1 from './images/1-set1.png?image';
+import Commission1Set2 from './images/1-set2.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/midge/artist.ts b/src/lib/data/commissions/midge/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/peachy/artist.ts b/src/lib/data/commissions/peachy/artist.ts
@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
-import Commission1Banner from './images/1-banner.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
+import Commission1Banner from './images/1-banner.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/siomi/artist.ts b/src/lib/data/commissions/siomi/artist.ts
@@ -1,8 +1,8 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
-import Commission1NoWings from './images/1-no-wings.png?w=256;512;1280;1920&picture';
-import Commission2 from './images/2.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
+import Commission1NoWings from './images/1-no-wings.png?image';
+import Commission2 from './images/2.png?image';
 
 export default {
   name: 'Siomi',
diff --git a/src/lib/data/commissions/sophie/artist.ts b/src/lib/data/commissions/sophie/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/tof/artist.ts b/src/lib/data/commissions/tof/artist.ts
@@ -1,7 +1,7 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission3 from './images/3.png?w=256;512;1280;1920&picture';
-import Commission3Banner from './images/3-banner.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission3 from './images/3.png?image';
+import Commission3Banner from './images/3-banner.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/data/commissions/tutta/artist.ts b/src/lib/data/commissions/tutta/artist.ts
@@ -1,6 +1,6 @@
 import type { ArtistData } from '$lib/data/commissions';
-import avatar from './avatar.jpg?w=50;100;200;300&picture';
-import Commission1 from './images/1.png?w=256;512;1280;1920&picture';
+import avatar from './avatar.jpg?avatar';
+import Commission1 from './images/1.png?image';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
diff --git a/src/lib/util/html.ts b/src/lib/util/html.ts
@@ -14,3 +14,17 @@ export const getLinkProps = (href: string): { target?: string; rel?: string } =>
     }),
   };
 };
+
+/**
+ * Format a Date to a human-readable string.
+ *
+ * @param date The date to format
+ * @returns The formatted date
+ */
+export const formatDate = (date: Date): string => {
+  return new Intl.DateTimeFormat('en-US', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+  }).format(date);
+};
diff --git a/src/routes/art/+page.svelte b/src/routes/art/+page.svelte
diff --git a/src/routes/art/[artist]/[slug]/+page.svelte b/src/routes/art/[artist]/[slug]/+page.svelte
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
diff --git a/src/routes/clients/[slug]/+page.svelte b/src/routes/clients/[slug]/+page.svelte
diff --git a/vite.config.ts b/vite.config.ts
