removed @sveltejs/enhanced-img

huntabyte · Mar 14, 2024 · 5791548 · 5791548
1 parent 3de7912
commit 5791548
Show file tree

Hide file tree

Showing 12 changed files with 78 additions and 352 deletions.
diff --git a/apps/www/package.json b/apps/www/package.json
@@ -31,7 +31,6 @@
 		"@playwright/test": "^1.42.1",
 		"@prettier/sync": "0.3.0",
 		"@sveltejs/adapter-cloudflare": "4.1.0",
-		"@sveltejs/enhanced-img": "^0.1.8",
 		"@sveltejs/kit": "^2.5.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/d3-scale": "^4.0.8",

diff --git a/apps/www/src/lib/components/docs/dashboard/dashboard-page.svelte b/apps/www/src/lib/components/docs/dashboard/dashboard-page.svelte
@@ -16,13 +16,13 @@
 		TeamSwitcher,
 	} from "./index.js";
 	import DatePickerWithRange from "$lib/registry/new-york/example/date-picker-with-range.svelte";
-	import DashboardLight from "$lib/img/examples/dashboard-light.png?enhanced";
-	import DashboardDark from "$lib/img/examples/dashboard-dark.png?enhanced";
+	import DashboardLight from "$lib/img/examples/dashboard-light.png";
+	import DashboardDark from "$lib/img/examples/dashboard-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={DashboardLight} alt="Dashboard Light" class="block dark:hidden" />
-	<enhanced:img src={DashboardDark} alt="Dashboard Dark" class="hidden dark:block" />
+	<img src={DashboardLight} width={1280} height={866} alt="Dashboard" class="block dark:hidden" />
+	<img src={DashboardDark} width={1280} height={866} alt="Dashboard" class="hidden dark:block" />
 </div>
 <div class="hidden flex-col md:flex">
 	<div class="border-b">

diff --git a/apps/www/src/routes/+page.svelte b/apps/www/src/routes/+page.svelte
@@ -7,8 +7,8 @@
 	import { cn } from "$lib/utils.js";
 	import Mail from "./examples/mail/(components)/mail.svelte";
 	import { accounts, mails } from "./examples/mail/data.js";
-	import MailLight from "$lib/img/examples/mail-light.png?enhanced";
-	import MailDark from "$lib/img/examples/mail-dark.png?enhanced";
+	import MailLight from "$lib/img/examples/mail-light.png";
+	import MailDark from "$lib/img/examples/mail-dark.png";
 
 	export let data;
 </script>
@@ -54,8 +54,8 @@
 		class="overflow-hidden rounded-lg border bg-background shadow-md md:hidden md:shadow-xl"
 	>
 		<div class="md:hidden">
-			<enhanced:img src={MailLight} alt="Mail" class="block dark:hidden" />
-			<enhanced:img src={MailDark} alt="Mail" class="hidden dark:block" />
+			<img src={MailLight} width={1280} height={727} alt="Mail" class="block dark:hidden" />
+			<img src={MailDark} width={1280} height={727} alt="Mail" class="hidden dark:block" />
 		</div>
 	</section>
 	<section class="hidden md:block">

diff --git a/apps/www/src/routes/examples/authentication/+page.svelte b/apps/www/src/routes/examples/authentication/+page.svelte
@@ -1,13 +1,25 @@
 <script lang="ts">
 	import { Button } from "$lib/registry/default/ui/button/index.js";
 	import UserAuthForm from "./(components)/user-auth-form.svelte";
-	import AuthenticationLight from "$lib/img/examples/authentication-light.png?enhanced";
-	import AuthenticationDark from "$lib/img/examples/authentication-dark.png?enhanced";
+	import AuthenticationLight from "$lib/img/examples/authentication-light.png";
+	import AuthenticationDark from "$lib/img/examples/authentication-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={AuthenticationLight} alt="Authentication" class="block dark:hidden" />
-	<enhanced:img src={AuthenticationDark} alt="Authentication" class="hidden dark:block" />
+	<img
+		src={AuthenticationLight}
+		width={1280}
+		height={843}
+		alt="Authentication"
+		class="block dark:hidden"
+	/>
+	<img
+		src={AuthenticationDark}
+		width={1280}
+		height={843}
+		alt="Authentication"
+		class="hidden dark:block"
+	/>
 </div>
 <div
 	class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"

diff --git a/apps/www/src/routes/examples/cards/+page.svelte b/apps/www/src/routes/examples/cards/+page.svelte
@@ -10,13 +10,13 @@
 		DemoContainer,
 		CardsTeamMembers,
 	} from "./(components)/index.js";
-	import CardsLight from "$lib/img/examples/cards-light.png?enhanced";
-	import CardsDark from "$lib/img/examples/cards-dark.png?enhanced";
+	import CardsLight from "$lib/img/examples/cards-light.png";
+	import CardsDark from "$lib/img/examples/cards-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={CardsLight} alt="Cards" class="block dark:hidden" />
-	<enhanced:img src={CardsDark} alt="Cards" class="hidden dark:block" />
+	<img src={CardsLight} width={1280} height={1214} alt="Cards" class="block dark:hidden" />
+	<img src={CardsDark} width={1280} height={1214} alt="Cards" class="hidden dark:block" />
 </div>
 <div
 	class="hidden items-start justify-center gap-6 rounded-lg p-8 md:grid lg:grid-cols-2 xl:grid-cols-3"

diff --git a/apps/www/src/routes/examples/forms/+layout.svelte b/apps/www/src/routes/examples/forms/+layout.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Separator } from "$lib/registry/new-york/ui/separator/index.js";
 	import SidebarNav from "./(components)/sidebar-nav.svelte";
-	import FormsLight from "$lib/img/examples/forms-light.png?enhanced";
-	import FormsDark from "$lib/img/examples/forms-dark.png?enhanced";
+	import FormsLight from "$lib/img/examples/forms-light.png";
+	import FormsDark from "$lib/img/examples/forms-dark.png";
 
 	const sidebarNavItems = [
 		{
@@ -29,8 +29,8 @@
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={FormsLight} alt="Forms" class="block dark:hidden" />
-	<enhanced:img src={FormsDark} alt="Forms" class="hidden dark:block" />
+	<img src={FormsLight} width={1280} height={791} alt="Forms" class="block dark:hidden" />
+	<img src={FormsDark} width={1280} height={791} alt="Forms" class="hidden dark:block" />
 </div>
 <div class="hidden space-y-6 p-10 pb-16 md:block">
 	<div class="space-y-0.5">

diff --git a/apps/www/src/routes/examples/mail/(components)/mail.svelte b/apps/www/src/routes/examples/mail/(components)/mail.svelte
@@ -12,8 +12,8 @@
 	import * as Tabs from "$lib/registry/new-york/ui/tabs/index.js";
 	import Search from "lucide-svelte/icons/search";
 	import type { Account, Mail } from "../data.js";
-	import MailLight from "$lib/img/examples/mail-light.png?enhanced";
-	import MailDark from "$lib/img/examples/mail-dark.png?enhanced";
+	import MailLight from "$lib/img/examples/mail-light.png";
+	import MailDark from "$lib/img/examples/mail-dark.png";
 
 	export let accounts: Account[];
 	export let mails: Mail[];
@@ -39,8 +39,8 @@
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={MailLight} alt="Mail" class="block dark:hidden" />
-	<enhanced:img src={MailDark} alt="Mail" class="hidden dark:block" />
+	<img src={MailLight} width={1280} height={1114} alt="Mail" class="block dark:hidden" />
+	<img src={MailDark} width={1280} height={1114} alt="Mail" class="hidden dark:block" />
 </div>
 <div class="hidden md:block">
 	<Resizable.PaneGroup

diff --git a/apps/www/src/routes/examples/music/+page.svelte b/apps/www/src/routes/examples/music/+page.svelte
@@ -7,13 +7,13 @@
 	import { AlbumArtwork, Sidebar, Menu, PodcastEmptyPlaceholder } from "./(components)/index.js";
 	import { playlists } from "./(data)/playlists.js";
 	import { listenNowAlbums, madeForYouAlbums } from "./(data)/albums.js";
-	import MusicLight from "$lib/img/examples/music-light.png?enhanced";
-	import MusicDark from "$lib/img/examples/music-dark.png?enhanced";
+	import MusicLight from "$lib/img/examples/music-light.png";
+	import MusicDark from "$lib/img/examples/music-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={MusicLight} alt="Music" class="block dark:hidden" />
-	<enhanced:img src={MusicDark} alt="Music" class="hidden dark:block" />
+	<img src={MusicLight} width={1280} height={1114} alt="Music" class="block dark:hidden" />
+	<img src={MusicDark} width={1280} height={1114} alt="Music" class="hidden dark:block" />
 </div>
 <div class="hidden md:block">
 	<Menu />

diff --git a/apps/www/src/routes/examples/playground/+page.svelte b/apps/www/src/routes/examples/playground/+page.svelte
@@ -19,13 +19,25 @@
 	} from "./(components)/index.js";
 	import { models, types } from "./(data)/models.js";
 	import { presets } from "./(data)/presets.js";
-	import PlaygroundLight from "$lib/img/examples/playground-light.png?enhanced";
-	import PlaygroundDark from "$lib/img/examples/playground-dark.png?enhanced";
+	import PlaygroundLight from "$lib/img/examples/playground-light.png";
+	import PlaygroundDark from "$lib/img/examples/playground-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={PlaygroundLight} alt="Playground" class="block dark:hidden" />
-	<enhanced:img src={PlaygroundDark} alt="Playground" class="hidden dark:block" />
+	<img
+		src={PlaygroundLight}
+		width={1280}
+		height={916}
+		alt="Playground"
+		class="block dark:hidden"
+	/>
+	<img
+		src={PlaygroundDark}
+		width={1280}
+		height={916}
+		alt="Playground"
+		class="hidden dark:block"
+	/>
 </div>
 <div class="hidden h-full flex-col md:flex">
 	<div

diff --git a/apps/www/src/routes/examples/tasks/+page.svelte b/apps/www/src/routes/examples/tasks/+page.svelte
@@ -2,13 +2,13 @@
 	import DataTable from "./(components)/data-table.svelte";
 	import UserNav from "./(components)/user-nav.svelte";
 	import data from "./(data)/tasks.json";
-	import TasksLight from "$lib/img/examples/tasks-light.png?enhanced";
-	import TasksDark from "$lib/img/examples/tasks-dark.png?enhanced";
+	import TasksLight from "$lib/img/examples/tasks-light.png";
+	import TasksDark from "$lib/img/examples/tasks-dark.png";
 </script>
 
 <div class="md:hidden">
-	<enhanced:img src={TasksLight} alt="Tasks" class="block dark:hidden" />
-	<enhanced:img src={TasksDark} alt="Tasks" class="hidden dark:block" />
+	<img src={TasksLight} alt="Tasks" class="block dark:hidden" />
+	<img src={TasksDark} alt="Tasks" class="hidden dark:block" />
 </div>
 <div class="hidden h-full flex-1 flex-col space-y-8 p-8 md:flex">
 	<div class="flex items-center justify-between space-y-2">

diff --git a/apps/www/vite.config.ts b/apps/www/vite.config.ts
@@ -1,9 +1,8 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vitest/config";
-import { enhancedImages } from "@sveltejs/enhanced-img";
 
 export default defineConfig({
-	plugins: [enhancedImages(), sveltekit()],
+	plugins: [sveltekit()],
 	test: {
 		include: ["src/**/*.{test,spec}.{js,ts}"],
 	},