vert/src/routes/+page.svelte

121 lines
3.5 KiB
Svelte

<script lang="ts">
import { goto } from "$app/navigation";
import Uploader from "$lib/components/functional/Uploader.svelte";
import { converters } from "$lib/converters";
import { files } from "$lib/store/index.svelte";
import { Check } from "lucide-svelte";
let ourFiles = $state<File[]>();
const runUpload = () => {
files.files = [
...files.files,
...(ourFiles || []).map((f) => ({
file: f,
from: "." + f.name.split(".").slice(-1),
to: converters[0].supportedFormats[0],
blobUrl: URL.createObjectURL(f),
id: Math.random().toString(36).substring(2),
})),
];
ourFiles = [];
if (files.files.length > 0 && !files.beenToConverterPage)
goto("/convert");
};
// const convertAllFiles = async () => {
// const promises = files.files?.map(async (file, i) => {
// let conversionType = files.conversionTypes[i];
// const converter = converters[0];
// const convertedFile = await converter.convert(
// {
// name: file.name,
// buffer: await file.arrayBuffer(),
// },
// conversionType,
// );
// files.downloadFns[i] = () => {
// const url = URL.createObjectURL(
// new Blob([convertedFile.buffer]),
// );
// const a = document.createElement("a");
// a.href = url;
// if (conversionType.startsWith("."))
// conversionType = conversionType.slice(1);
// a.download = `${file.name}.${conversionType}`;
// a.target = "_self";
// a.click();
// URL.revokeObjectURL(url);
// };
// });
// if (promises) await Promise.all(promises);
// };
</script>
<svelte:head>
<title>VERT.sh — Free, fast, and awesome file convert</title>
<meta
name="title"
content="VERT.sh — Free, fast, and awesome file convert"
/>
<meta
name="description"
content="With VERT you can convert images to PNG, JPG, WEBP, GIF, AVIF, and more. No ads, no tracking, open source, and all processing is done on your device."
/>
<meta property="og:type" content="website" />
<meta
property="og:title"
content="VERT.sh — Free, fast, and awesome file convert"
/>
<meta
property="og:description"
content="With VERT you can convert images to PNG, JPG, WEBP, GIF, AVIF, and more. No ads, no tracking, open source, and all processing is done on your device."
/>
<meta property="twitter:card" content="summary_large_image" />
<meta
property="twitter:title"
content="VERT.sh — Free, fast, and awesome file convert"
/>
<meta
property="twitter:description"
content="With VERT you can convert images to PNG, JPG, WEBP, GIF, AVIF, and more. No ads, no tracking, open source, and all processing is done on your device."
/>
</svelte:head>
{#snippet sellingPoint(text: string)}
<li class="flex items-center gap-4">
<div
class="h-8 w-8 bg-accent-background text-accent-foreground rounded-full flex items-center justify-center"
>
<Check />
</div>
<span class="text-lg">{text}</span>
</li>
{/snippet}
<div class="[@media(max-height:768px)]:block mt-10">
<Uploader bind:files={ourFiles} onupload={runUpload} />
</div>
<div class="text-center mt-20">
<h1 class="text-3xl font-display">
Free, fast, and awesome file converting
</h1>
<div class="flex justify-center mt-10">
<div class="grid gap-4">
{@render sellingPoint("Very fast, all processing done on device")}
{@render sellingPoint("No ads, and open source")}
{@render sellingPoint("Beautiful and straightforward UI")}
</div>
</div>
</div>
<style>
/* for this page specifically */
:global(html, body) {
height: 100%;
}
</style>