Merge pull request #3 from not-nullptr/main

Merge changes on main

.env.example

@@ -0,0 +1,2 @@
+PUB_HOSTNAME=vert.sh # only gets used for plausible (for now)
+PUB_PLAUSIBLE_URL=https://plausible.example.com # can be empty

README.md

@@ -1,38 +1,5 @@
-# sv
+# VERT
 
-Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+VERT is a file conversion utility that uses WebAssembly to convert files on your device instead of a cloud. Check out the live instance at [vert.sh](https://vert.sh).
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npx sv create
-
-# create a new project in my-app
-npx sv create my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
+VERT is built in Svelte and TypeScript.

src/lib/converters/index.ts

@@ -1,4 +1,3 @@
-import { MagickConverter } from "./magick.svelte";
 import { VipsConverter } from "./vips.svelte";
 
-export const converters = [new VipsConverter(), new MagickConverter()];
+export const converters = [new VipsConverter()];

src/lib/store/index.svelte.ts

@@ -12,6 +12,7 @@ class Files {
 		}[]
 	>([]);
 	public conversionTypes = $state<string[]>([]);
+	public conversionTypesReverse = $derived(this.conversionTypes.reverse());
 	public beenToConverterPage = $state(false);
 	public shouldShowAlert = $derived(
 		!this.beenToConverterPage && this.files.length > 0,

src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
 	import { fly } from "svelte/transition";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
+	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
 	let { children, data } = $props();
 
 	let navWidth = $state(1);
@@ -40,6 +41,11 @@
 	<meta name="theme-color" content="#F2ABEE" />
 	<meta property="og:image" content={featuredImage} />
 	<meta property="twitter:image" content={featuredImage} />
+	{#if PUB_PLAUSIBLE_URL}<script
+			defer
+			data-domain={PUB_HOSTNAME || "vert.sh"}
+			src="{PUB_PLAUSIBLE_URL}/js/script.js"
+		></script>{/if}
 </svelte:head>
 
 <div

src/routes/about/+page.svelte

@@ -55,8 +55,8 @@
 	</h2>
 	<p class="mt-6 text-transition" style="--delay: {4 * multiplier}ms">
 		As of right now, VERT only supports image conversion of most popular
-		formats. Don't worry though, as we'll add support for more formats in
-		the future!
+		formats. Don't worry though, as we'll add more options and support for
+		more formats in the future!
 	</p>
 
 	<h2

src/routes/convert/+page.svelte

@@ -8,7 +8,6 @@
 	import { ArrowRight, XIcon } from "lucide-svelte";
 	import { onMount } from "svelte";
 	import { quintOut } from "svelte/easing";
-	import { downloadZip } from "client-zip";
 
 	const reversed = $derived(files.files.slice().reverse());
 
@@ -144,6 +143,7 @@
 			a.remove();
 			return;
 		}
+		const { downloadZip } = await import("client-zip");
 		const blob = await downloadZip(dlFiles, "converted.zip").blob();
 		const url = URL.createObjectURL(blob);
 		const a = document.createElement("a");
@@ -299,7 +299,9 @@
 										<Dropdown
 											options={converter.supportedFormats}
 											bind:selected={files
-												.conversionTypes[i]}
+												.conversionTypes[
+												files.files.length - i - 1
+											]}
 											onselect={() => {
 												file.result = null;
 											}}
@@ -323,7 +325,9 @@
 										<Dropdown
 											options={converter.supportedFormats}
 											bind:selected={files
-												.conversionTypes[i]}
+												.conversionTypes[
+												files.files.length - 1 - i
+											]}
 											onselect={() => {
 												file.result = null;
 											}}

svelte.config.js

@@ -12,6 +12,10 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
 		adapter: adapter(),
+		env: {
+			publicPrefix: "PUB_",
+			privatePrefix: "PRI_",
+		},
 	},
 };