-
- -
- - {#if PUB_ENV === "nightly"} -
- NIGHTLY -
- {/if} -
- -
- -
-
- -
- - -
- -
-
-
- {#key data.pathname} -
-
-
- {@render children()} -
-
-
- {/key} -
+
+ +
+ +
+ {@render children()} +
+ +
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 46ad001..a1bc9a0 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,4 +5,32 @@ // // ship fast n break things !! // -- nullptr + + import VertVBig from "$lib/assets/vert-bg.svg?component"; + import Uploader from "$lib/components/functional/Uploader.svelte"; + +
+ +
+ +
+
+
+
+

+ The file converter you'll love. +

+

+ All processing done on your device. No file size limit, no + ads, and completely open source. +

+
+
+ +
+
+
+
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte new file mode 100644 index 0000000..e69de29 diff --git a/tailwind.config.ts b/tailwind.config.ts index 2cc0fae..0cbde07 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -5,15 +5,21 @@ export default { content: ["./src/**/*.{html,js,svelte,ts}"], theme: { extend: { - colors: { - background: "var(--bg)", + backgroundColor: { + panel: "var(--bg-panel)", + "panel-accented": "var(--bg-panel-accented)", + separator: "var(--bg-separator)", + }, + textColor: { foreground: "var(--fg)", - "foreground-muted": "var(--fg-muted)", - "foreground-muted-alt": "var(--fg-muted-alt)", - "foreground-failure": "var(--fg-failure)", - "foreground-highlight": "var(--fg-highlight)", - "accent-background": "var(--accent-bg)", - "accent-foreground": "var(--accent-fg)", + muted: "var(--fg-muted)", + "on-accent": "var(--fg-on-accent)", + }, + colors: { + accent: "var(--accent)", + }, + boxShadow: { + panel: "var(--shadow-panel)", }, fontFamily: { display: "var(--font-display)", @@ -22,6 +28,9 @@ export default { blur: { xs: "2px", }, + borderRadius: { + "2.5xl": "1.25rem", + }, }, }, diff --git a/vite.config.ts b/vite.config.ts index d48daa2..56a46a8 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,5 +1,6 @@ import { sveltekit } from "@sveltejs/kit/vite"; import { defineConfig } from "vite"; +import svg from "@poppanator/sveltekit-svg"; export default defineConfig({ plugins: [ @@ -17,6 +18,19 @@ export default defineConfig({ }); }, }, + svg({ + includePaths: ["./src/lib/assets"], + svgoOptions: { + multipass: true, + plugins: [ + { + name: "preset-default", + params: { overrides: { removeViewBox: false } }, + }, + { name: "removeAttrs", params: { attrs: "(fill|stroke)" } }, + ], + }, + }), ], optimizeDeps: { exclude: [ From 36c6b19483af985b86334166e4acc2193cfa915b Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Fri, 15 Nov 2024 23:19:15 +0000 Subject: [PATCH 004/106] feat: converter page --- src/app.scss | 49 ++++-- .../functional/ConversionPanel.svelte | 36 ++++ src/lib/components/functional/Dropdown.svelte | 20 +-- src/lib/components/functional/Navbar.svelte | 60 +++++-- src/lib/components/functional/Uploader.svelte | 65 +++++++- src/lib/components/visual/Footer.svelte | 5 +- src/lib/components/visual/ProgressBar.svelte | 6 +- src/lib/components/visual/svg/VertVBig.svelte | 61 +++++++ src/lib/store/index.svelte.ts | 156 ++++++++++++++++++ src/lib/types/file.svelte.ts | 4 + src/routes/+layout.svelte | 26 ++- src/routes/+page.svelte | 4 +- src/routes/convert/+page.svelte | 99 +++++++++++ tailwind.config.ts | 5 + 14 files changed, 542 insertions(+), 54 deletions(-) create mode 100644 src/lib/components/functional/ConversionPanel.svelte create mode 100644 src/lib/components/visual/svg/VertVBig.svelte diff --git a/src/app.scss b/src/app.scss index 866f250..ec9eba2 100644 --- a/src/app.scss +++ b/src/app.scss @@ -31,16 +31,36 @@ } @mixin light { - --accent-bg: hsl(303, 73%, 81%); - --accent-fg: hsl(0, 0, 10%); - --bg: hsl(0, 0%, 100%); - --bg-transparent: hsla(0, 0%, 100%, 0.6); - --fg: hsl(0, 0%, 10%); + // general + --accent: hsl(303, 73%, 81%); + + // foregrounds + --fg: hsl(0, 0%, 0%); --fg-muted: hsl(0, 0%, 50%); - --fg-muted-alt: hsl(0, 0%, 75%); - --fg-highlight: hsl(303, 61%, 47%); - --fg-failure: hsl(0, 67%, 49%); - color-scheme: light; + --fg-on-accent: hsl(0, 0%, 0%); + + // backgrounds + --bg: hsl(0, 0%, 100%); + --bg-gradient: linear-gradient( + to bottom left, + hsla(235, 100%, 50%, 0.3), + hsla(235, 100%, 50%, 0) 75% + ), + linear-gradient( + to bottom right, + hsla(353, 100%, 50%, 0.4), + hsla(353, 100%, 50%, 0) 50% + ), + linear-gradient( + to bottom, + hsla(287, 100%, 50%, 0.2), + hsla(287, 100%, 50%, 0) + ); + --bg-panel: hsl(0, 0%, 100%); + --bg-panel-alt: hsl(0, 0%, 95%); + --bg-panel-accented: color-mix(in srgb, var(--accent) 35%, transparent); + --bg-separator: hsl(0, 0%, 88%); + --bg-button: var(--bg-panel-accented); } @mixin dark { @@ -69,10 +89,12 @@ hsla(353, 100%, 50%, 0.07), hsla(353, 100%, 50%, 0) 50% ); - color-scheme: dark; --bg-panel: hsl(225, 4%, 18%); --bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent); + --bg-panel-alt: hsl(220, 5%, 16%); --bg-separator: hsl(214, 4%, 32%); + + color-scheme: dark; } @media (prefers-color-scheme: dark) { @@ -98,7 +120,6 @@ body { @apply text-foreground font-body font-semibold overflow-x-hidden; width: 100vw; - background: var(--bg-gradient); background-color: var(--bg); background-size: 100vw 100vh; } @@ -109,15 +130,15 @@ body { } .btn { - @apply font-display flex items-center justify-center overflow-hidden relative cursor-pointer px-4 border-2 border-solid bg-background border-foreground-muted-alt rounded-xl p-2 focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none; + @apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 py-3 rounded-full focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none; transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease; } - .btn-highlight { - @apply bg-accent-background text-accent-foreground border-accent-background; + .btn.highlight { + @apply bg-accent text-on-accent; } h1, diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte new file mode 100644 index 0000000..e4fd90d --- /dev/null +++ b/src/lib/components/functional/ConversionPanel.svelte @@ -0,0 +1,36 @@ + + + +
+ + +
+
+ {#if files.requiredConverters.length === 1} +

Set all to

+ files.files.forEach((f) => (f.to = r))} + options={files.files[0]?.converter?.supportedFormats || []} + /> + {/if} +
+ diff --git a/src/lib/components/functional/Dropdown.svelte b/src/lib/components/functional/Dropdown.svelte index 429dc83..e9764ab 100644 --- a/src/lib/components/functional/Dropdown.svelte +++ b/src/lib/components/functional/Dropdown.svelte @@ -11,7 +11,11 @@ onselect?: (option: string) => void; }; - let { options, selected = $bindable(), onselect }: Props = $props(); + let { + options, + selected = $bindable(options[0]), + onselect, + }: Props = $props(); let open = $state(false); let hover = $state(false); @@ -31,10 +35,6 @@ toggle(); }; - $effect(() => { - selected = selected || options[0]; - }); - onMount(() => { const click = (e: MouseEvent) => { if (dropdown && !dropdown.contains(e.target as Node)) { @@ -49,15 +49,13 @@
+
+
+
+ {file.name} +
+
+
+
+ +
+ + +
+
+
+ +{/snippet} + +
+
+ {#each files.files as file, i (file.id)} + {@render fileItem(file, i)} + {/each} +
+
diff --git a/tailwind.config.ts b/tailwind.config.ts index 0cbde07..cac387d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -9,6 +9,11 @@ export default { panel: "var(--bg-panel)", "panel-accented": "var(--bg-panel-accented)", separator: "var(--bg-separator)", + button: "var(--bg-button)", + "panel-alt": "var(--bg-panel-alt)", + }, + borderColor: { + separator: "var(--bg-separator)", }, textColor: { foreground: "var(--fg)", From df72a1ff8a0e8a33dd5176c5ad8deef9443ff1e7 Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Fri, 15 Nov 2024 23:22:17 +0000 Subject: [PATCH 005/106] feat: upload button --- src/routes/convert/+page.svelte | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte index 8700d29..76a50ad 100644 --- a/src/routes/convert/+page.svelte +++ b/src/routes/convert/+page.svelte @@ -1,5 +1,6 @@ {/if} -
+
{#if items diff --git a/tailwind.config.ts b/tailwind.config.ts index cac387d..605c8ee 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -11,6 +11,7 @@ export default { separator: "var(--bg-separator)", button: "var(--bg-button)", "panel-alt": "var(--bg-panel-alt)", + badge: "var(--bg-badge)", }, borderColor: { separator: "var(--bg-separator)", @@ -19,6 +20,7 @@ export default { foreground: "var(--fg)", muted: "var(--fg-muted)", "on-accent": "var(--fg-on-accent)", + "on-badge": "var(--fg-on-badge)", }, colors: { accent: "var(--accent)", From c88112d2262108803db26e1a57ecb885b5d7b02b Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Sat, 16 Nov 2024 10:36:33 +0000 Subject: [PATCH 011/106] feat: badge animation --- src/lib/components/functional/Navbar.svelte | 36 +++++++++++++++++++-- 1 file changed, 34 insertions(+), 2 deletions(-) diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte index 2798307..dc00da6 100644 --- a/src/lib/components/functional/Navbar.svelte +++ b/src/lib/components/functional/Navbar.svelte @@ -60,7 +60,7 @@ {#if item.badge}
- {item.badge} + {#key item.badge} +
+ {item.badge} +
+ {/key}
{/if}
From ef20f76a85a7ef05e5f29e677f244e7414d6a0c4 Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Sat, 16 Nov 2024 11:51:41 +0000 Subject: [PATCH 012/106] feat: sliding navbar --- src/lib/components/functional/Navbar.svelte | 74 +++++++++++++++------ src/routes/convert/+page.svelte | 36 ++++++++++ 2 files changed, 88 insertions(+), 22 deletions(-) diff --git a/src/lib/components/functional/Navbar.svelte b/src/lib/components/functional/Navbar.svelte index dc00da6..41b2f5f 100644 --- a/src/lib/components/functional/Navbar.svelte +++ b/src/lib/components/functional/Navbar.svelte @@ -7,6 +7,8 @@ import { theme } from "$lib/store/index.svelte"; import { blur, duration } from "$lib/animation"; import { quintOut } from "svelte/easing"; + import { browser } from "$app/environment"; + import type { SvelteComponent } from "svelte"; type Props = { items: { @@ -19,17 +21,32 @@ }; let { items }: Props = $props(); + + let links = $state([]); + let container = $state(); + let containerRect = $derived(container?.getBoundingClientRect()); + $effect(() => { + $inspect(containerRect); + }); + + const linkRects = $derived(links.map((l) => l.getBoundingClientRect())); + + const selectedIndex = $derived( + items.findIndex((i) => i.activeMatch($page.url.pathname)), + ); -{#snippet link(item: (typeof items)[0])} +{#snippet link(item: (typeof items)[0], index: number)} {@const Icon = item.icon} @@ -117,23 +134,36 @@ {/snippet} - -
-
- +
+ + {#if linkRects[selectedIndex]} +
+ {/if} +
+
+ +
-
- {#each items as item (item.url)} - {@render link(item)} - {/each} -
- - + {#each items as item, i (item.url)} + {@render link(item, i)} + {/each} +
+ + +
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte index 7e54015..fe4f587 100644 --- a/src/routes/convert/+page.svelte +++ b/src/routes/convert/+page.svelte @@ -1,6 +1,8 @@ {#snippet fileItem(file: VertFile, index: number)} @@ -107,3 +110,36 @@ {/if}
+ +
+ {#if files.files.length === 1} +
+ {files.files[0].name} +
+ +
+
+ {/if} +
From e9e9feebbe571d63b4c80d6bdc1c1f3a9ffa5608 Mon Sep 17 00:00:00 2001 From: Realmy <163438634+RealmyTheMan@users.noreply.github.com> Date: Sat, 16 Nov 2024 13:02:29 +0100 Subject: [PATCH 013/106] Re-add full white background on landing --- src/routes/+page.svelte | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d1627e9..c1267f2 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,16 +11,20 @@
+
+
From 4a4efcfde010e78a7376b987844996d5ee6134c6 Mon Sep 17 00:00:00 2001 From: not-nullptr Date: Sat, 16 Nov 2024 12:07:40 +0000 Subject: [PATCH 014/106] fix: footer and nav opacity bug --- src/routes/+layout.svelte | 57 +++++++++++++++++++++++++++++++++++---- 1 file changed, 52 insertions(+), 5 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index bb70bd3..4569a3d 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -29,6 +29,7 @@ import Footer from "$lib/components/visual/Footer.svelte"; import { page } from "$app/stores"; import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte"; + import { fade } from "svelte/transition"; let { children, data } = $props(); let shouldGoBack = writable(false); @@ -104,22 +105,68 @@ >{/if} -
+
{#if items .find((i) => i.url === "/convert") ?.activeMatch($page.url.pathname)} - +
+ +
{/if}
-
- {@render children()} +
+ {#key data.pathname} +
+ {@render children()} +
+ {/key}
-
+
Date: Sat, 16 Nov 2024 13:27:57 +0000 Subject: [PATCH 015/106] feat: page transitions --- src/routes/+layout.svelte | 70 +++++++++++++++++++++++++++++++++------ src/routes/+page.svelte | 43 ++++++++++++++++-------- 2 files changed, 89 insertions(+), 24 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4569a3d..5f3a67e 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,6 +1,6 @@ @@ -154,25 +170,57 @@ blurMultiplier: 8, duration, easing: quintOut, + x: { + start: goingLeft ? -100 : 100, + end: 0, + }, + y: { + start: 72, + end: 0, + }, + origin: "top center", }} out:blur={{ blurMultiplier: 8, duration, easing: quintOut, + x: { + start: 0, + end: goingLeft ? 100 : -100, + }, + y: { + start: 0, + end: 72, + }, + origin: "top center", }} > - {@render children()} +
+ {@render children()} +
+
+
+
{/key}
-
-
-
+ class="fixed top-0 left-0 w-screen h-screen -z-40 pointer-events-none" + style="background: var(--bg-gradient);" + >
+{/if} diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index c1267f2..93db27a 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,35 +11,52 @@
-
- -
-
-

+

The file converter you'll love.

-

+

All processing done on your device. No file size limit, no ads, and completely open source.

-
+
+ + From 8c17117e432a40d3c253f05b0bc57e3ceed86f95 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 10:08:14 +0300 Subject: [PATCH 016/106] Adjust layout of pages makes it easier (at least for me) to handle pages --- src/routes/+layout.svelte | 189 ++++++++++++++++++-------------------- src/routes/+page.svelte | 49 +++++----- 2 files changed, 119 insertions(+), 119 deletions(-) diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 5f3a67e..dbb646a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -1,35 +1,24 @@ {/if} -
-
- - {#if items - .find((i) => i.url === "/convert") - ?.activeMatch($page.url.pathname)} +
+
+
+ + {#if items + .find((i) => i.url === "/convert") + ?.activeMatch($page.url.pathname)} +
+ +
+ {/if} +
+
+ +
+ {#key data.pathname}
- +
+
+ {@render children()} +
+
+
+
+
- {/if} + {/key}
-
- {#key data.pathname} -
-
- {@render children()} -
-
-
-
-
- {/key} -
- {#if data.pathname === "/"}
- -
+
+ +
-
-
-
-
-

- The file converter you'll love. -

-

+

+
+
+

+ The file converter you'll love. +

+

+ All processing done on your device. No file size limit, + no ads, and completely open source. +

+
+
- All processing done on your device. No file size limit, no - ads, and completely open source. -

-
-
- + +
From a99eccc25d17521cba0bfdf904a0c13bfb9d1e9d Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 14:13:05 +0300 Subject: [PATCH 017/106] Implement about page --- src/app.scss | 1 + src/routes/about/+page.svelte | 382 ++++++++++++++++++++++++++++++++++ 2 files changed, 383 insertions(+) diff --git a/src/app.scss b/src/app.scss index 60511bd..432a31d 100644 --- a/src/app.scss +++ b/src/app.scss @@ -96,6 +96,7 @@ --bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent); --bg-panel-alt: hsl(220, 6%, 25%); --bg-separator: hsl(220, 4%, 28%); + --bg-button: #43464C; --bg-badge: hsl(0, 0%, 100%); --shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15); diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index e69de29..8209efc 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -0,0 +1,382 @@ + + +{#snippet donor(name: string, amount: number | string, avatar: string)} +
+ {name} +

${amount}

+
+{/snippet} + +{#snippet contributor(name: string, role: string, avatar: string)} +
+ {name} +
+

{name}

+

{role}

+
+
+{/snippet} + +
+

+ + About +

+ +
+ +
+ + +

+ + Why VERT? +

+

+ File converters have always disappointed us. They're + ugly, riddled with ads, and most importantly; slow. We + decided to solve this problem once and for all by making an + alternative that solves all those problems, and then some.
+
+ All your files are converted completely on—device, which means + that there's no delay between sending and receiving the file + from a server, and that we never get to snoop on the files you + convert. +

+ + + + +

+ + Credits +

+ + +
+
+ {#each mainContribs as contrib} + {@const { name, role, avatar } = contrib} + {@render contributor(name, role, avatar)} + {/each} +
+
+ + +
+
+

GitHub Contributors

+

+ Big thanks to all these people for helping out! + + Want to help too? + +

+
+
+ {#each ghContribs as contrib} + {@const { name, avatar } = contrib} + {name} + {/each} +
+
+ +
+ + +
+ + +

+ + Resources +

+
+ + + Discord Server + + + + Source Code + +
+ + + + +
+

+ + Donate to VERT +

+

+ With your support, we can keep maintaining and improving + VERT. +

+
+ +
+
+ + + +
+
+ + + +
+ $ + +
+
+
+ +
+

+ Payments and subscription management
are handled through + Liberapay +

+ + +
+ + +
+
+

Our top donors

+

+ People like these fuel the things we love to do. + Thank you so much! +

+
+ +
+ {#each donors as dono} + {@const { name, amount, avatar } = dono} + {@render donor(name, amount, avatar)} + {/each} +
+
+ +
+
+
+ + From c7ca12a9242e797806bc26ad6e996da04d64a2cd Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 15:06:14 +0300 Subject: [PATCH 018/106] Componetize about page --- src/lib/sections/about/Credits.svelte | 71 +++++++ src/lib/sections/about/Donate.svelte | 113 +++++++++++ src/lib/sections/about/Resources.svelte | 38 ++++ src/lib/sections/about/Why.svelte | 27 +++ src/lib/sections/about/index.ts | 4 + src/routes/+page.svelte | 2 +- src/routes/about/+page.svelte | 250 +----------------------- 7 files changed, 260 insertions(+), 245 deletions(-) create mode 100644 src/lib/sections/about/Credits.svelte create mode 100644 src/lib/sections/about/Donate.svelte create mode 100644 src/lib/sections/about/Resources.svelte create mode 100644 src/lib/sections/about/Why.svelte create mode 100644 src/lib/sections/about/index.ts diff --git a/src/lib/sections/about/Credits.svelte b/src/lib/sections/about/Credits.svelte new file mode 100644 index 0000000..8644154 --- /dev/null +++ b/src/lib/sections/about/Credits.svelte @@ -0,0 +1,71 @@ + + +{#snippet contributor(name: string, role: string, avatar: string)} +
+ {name} +
+

{name}

+

{role}

+
+
+{/snippet} + + +

+ + Credits +

+ + +
+
+ {#each mainContribs as contrib} + {@const { name, role, avatar } = contrib} + {@render contributor(name, role, avatar)} + {/each} +
+
+ + +
+
+

GitHub Contributors

+

+ Big thanks to all these people for helping out! + + Want to help too? + +

+
+
+ {#each ghContribs as contrib} + {@const { name, avatar } = contrib} + {name} + {/each} +
+
+ \ No newline at end of file diff --git a/src/lib/sections/about/Donate.svelte b/src/lib/sections/about/Donate.svelte new file mode 100644 index 0000000..938aadc --- /dev/null +++ b/src/lib/sections/about/Donate.svelte @@ -0,0 +1,113 @@ + + +{#snippet donor(name: string, amount: number | string, avatar: string)} +
+ {name} +

${amount}

+
+{/snippet} + + +
+

+ + Donate to VERT +

+

+ With your support, we can keep maintaining and improving + VERT. +

+
+ +
+
+ + + +
+
+ + + +
+ $ + +
+
+
+ +
+

+ Payments and subscription management
are handled through + Liberapay +

+ + +
+ + +
+
+

Our top donors

+

+ People like these fuel the things we love to do. + Thank you so much! +

+
+ +
+ {#each donors as dono} + {@const { name, amount, avatar } = dono} + {@render donor(name, amount, avatar)} + {/each} +
+
+ \ No newline at end of file diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte new file mode 100644 index 0000000..cb1c03c --- /dev/null +++ b/src/lib/sections/about/Resources.svelte @@ -0,0 +1,38 @@ + + + +

+ + Resources +

+
+ + + Discord Server + + + + Source Code + +
+ \ No newline at end of file diff --git a/src/lib/sections/about/Why.svelte b/src/lib/sections/about/Why.svelte new file mode 100644 index 0000000..82d0b35 --- /dev/null +++ b/src/lib/sections/about/Why.svelte @@ -0,0 +1,27 @@ + + + +

+ + Why VERT? +

+

+ File converters have always disappointed us. They're + ugly, riddled with ads, and most importantly; slow. We + decided to solve this problem once and for all by making an + alternative that solves all those problems, and then some.
+
+ All your files are converted completely on—device, which means + that there's no delay between sending and receiving the file + from a server, and that we never get to snoop on the files you + convert. +

+ \ No newline at end of file diff --git a/src/lib/sections/about/index.ts b/src/lib/sections/about/index.ts new file mode 100644 index 0000000..1920e83 --- /dev/null +++ b/src/lib/sections/about/index.ts @@ -0,0 +1,4 @@ +export { default as Credits } from './Credits.svelte'; +export { default as Donate } from './Donate.svelte'; +export { default as Resources } from './Resources.svelte'; +export { default as Why } from './Why.svelte'; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3aa2803..4ee4f7d 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -11,7 +11,7 @@
- import Panel from "$lib/components/visual/Panel.svelte"; - import { - CalendarHeartIcon, - GithubIcon, - HandCoinsIcon, - HeartHandshakeIcon, - HeartIcon, - InfoIcon, - LinkIcon, - MessageCircleMoreIcon, - MessageCircleQuestionIcon, - WalletIcon, - } from "lucide-svelte"; + import * as About from "$lib/sections/about"; + import { InfoIcon } from "lucide-svelte"; const donors = [ { @@ -110,33 +99,6 @@ ]; -{#snippet donor(name: string, amount: number | string, avatar: string)} -
- {name} -

${amount}

-
-{/snippet} - -{#snippet contributor(name: string, role: string, avatar: string)} -
- {name} -
-

{name}

-

{role}

-
-
-{/snippet} -

- - -

- - Why VERT? -

-

- File converters have always disappointed us. They're - ugly, riddled with ads, and most importantly; slow. We - decided to solve this problem once and for all by making an - alternative that solves all those problems, and then some.
-
- All your files are converted completely on—device, which means - that there's no delay between sending and receiving the file - from a server, and that we never get to snoop on the files you - convert. -

- - - - -

- - Credits -

- - -
-
- {#each mainContribs as contrib} - {@const { name, role, avatar } = contrib} - {@render contributor(name, role, avatar)} - {/each} -
-
- - -
-
-

GitHub Contributors

-

- Big thanks to all these people for helping out! - - Want to help too? - -

-
-
- {#each ghContribs as contrib} - {@const { name, avatar } = contrib} - {name} - {/each} -
-
- + +
- - -

- - Resources -

-
- - - Discord Server - - - - Source Code - -
- - - - -
-

- - Donate to VERT -

-

- With your support, we can keep maintaining and improving - VERT. -

-
- -
-
- - - -
-
- - - -
- $ - -
-
-
- -
-

- Payments and subscription management
are handled through - Liberapay -

- - -
- - -
-
-

Our top donors

-

- People like these fuel the things we love to do. - Thank you so much! -

-
- -
- {#each donors as dono} - {@const { name, amount, avatar } = dono} - {@render donor(name, amount, avatar)} - {/each} -
-
- + +

From f8d4d546a88df04909dc050677ad16b7ec004d8a Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 15:54:39 +0300 Subject: [PATCH 019/106] Numerous changes - Set file.result to null when changing type (so the user remembers to redo the conversion by disabling dl btn) - If link is to external site, open in new tab, else open in current - Add animation when loading about page - Add underline to hyperlink in about - Fix conversion boxes misaligned - Fix footer links not clickable - Minor language changes --- .../functional/ConversionPanel.svelte | 7 +++- src/lib/components/visual/Footer.svelte | 8 +++- src/lib/sections/about/Credits.svelte | 2 +- src/lib/sections/about/Resources.svelte | 4 +- src/lib/sections/about/Why.svelte | 40 +++++++++---------- src/routes/+layout.svelte | 8 ++-- src/routes/+page.svelte | 4 +- src/routes/about/+page.svelte | 11 +++-- src/routes/convert/+page.svelte | 3 +- 9 files changed, 48 insertions(+), 39 deletions(-) diff --git a/src/lib/components/functional/ConversionPanel.svelte b/src/lib/components/functional/ConversionPanel.svelte index 846cdb7..408227c 100644 --- a/src/lib/components/functional/ConversionPanel.svelte +++ b/src/lib/components/functional/ConversionPanel.svelte @@ -1,7 +1,7 @@ @@ -28,7 +28,10 @@ {#if files.requiredConverters.length === 1}

Set all to

files.files.forEach((f) => (f.to = r))} + onselect={(r) => files.files.forEach((f) => { + f.to = r; + f.result = null; + })} options={files.files[0]?.converter?.supportedFormats || []} /> {/if} diff --git a/src/lib/components/visual/Footer.svelte b/src/lib/components/visual/Footer.svelte index 31a4689..fd47506 100644 --- a/src/lib/components/visual/Footer.svelte +++ b/src/lib/components/visual/Footer.svelte @@ -22,9 +22,13 @@ {#each links as [name, url] (name)}

•

- {name} + {name} + {/each}
diff --git a/src/lib/sections/about/Credits.svelte b/src/lib/sections/about/Credits.svelte index 8644154..3238081 100644 --- a/src/lib/sections/about/Credits.svelte +++ b/src/lib/sections/about/Credits.svelte @@ -47,7 +47,7 @@

Big thanks to all these people for helping out! - Discord Server + Discord server - Source Code + Source code

\ No newline at end of file diff --git a/src/lib/sections/about/Why.svelte b/src/lib/sections/about/Why.svelte index 82d0b35..6ecd9ad 100644 --- a/src/lib/sections/about/Why.svelte +++ b/src/lib/sections/about/Why.svelte @@ -4,24 +4,22 @@ -

- - Why VERT? -

-

- File converters have always disappointed us. They're - ugly, riddled with ads, and most importantly; slow. We - decided to solve this problem once and for all by making an - alternative that solves all those problems, and then some.
-
- All your files are converted completely on—device, which means - that there's no delay between sending and receiving the file - from a server, and that we never get to snoop on the files you - convert. -

- \ No newline at end of file +

+ + Why VERT? +

+

+ File converters have always disappointed us. They're ugly, + riddled with ads, and most importantly; slow. We decided to solve this + problem once and for all by making an alternative that solves all those + problems, and more.
+
+ All your files are converted completely on-device; this means that there's + no delay between sending and receiving the files from a server, and we never + get to snoop on the files you convert. +

+ diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index dbb646a..848a01a 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -190,14 +190,14 @@ {@render children()}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 4ee4f7d..2cff929 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -33,8 +33,8 @@ class="font-normal text-xl text-muted blur-in" style:--delay="60ms" > - All processing done on your device. No file size limit, - no ads, and completely open source. + All processing is done on your device. No file size + limit, no ads, and completely open source.

-
+

About

-
+
diff --git a/src/routes/convert/+page.svelte b/src/routes/convert/+page.svelte index fe4f587..20b0b50 100644 --- a/src/routes/convert/+page.svelte +++ b/src/routes/convert/+page.svelte @@ -69,6 +69,7 @@ file.result && (file.result = null)} />
+
+
+ - -
-
- - - -
- $ - -
-
-
+ +
+
+ + + +
+ $ + +
+
+
-
-

- Payments and subscription management
are handled through - Liberapay -

+
+

+ Payments and subscription management
are handled through Liberapay +

- -
+ +
- -
-
-

Our top donors

-

- People like these fuel the things we love to do. - Thank you so much! -

-
+
+
+

Our top donors

+ {#if donors && donors.length > 0} +

+ People like these fuel the things we love to do. Thank you + so much! +

+ {:else} +

+ Seems like no one has donated yet... so if you do, you will + pop up here! +

+ {/if} +
-
- {#each donors as dono} - {@const { name, amount, avatar } = dono} - {@render donor(name, amount, avatar)} - {/each} -
-
- \ No newline at end of file + {#if donors && donors.length > 0} +
+ {#each donors as dono} + {@const { name, amount, avatar } = dono} + {@render donor(name, amount, avatar)} + {/each} +
+ {/if} +
+ diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte index 96847c4..5d62153 100644 --- a/src/lib/sections/about/Resources.svelte +++ b/src/lib/sections/about/Resources.svelte @@ -4,35 +4,32 @@ -

- - Resources -

-
- - - Discord server - - - - Source code - -
- \ No newline at end of file +

+ + Resources +

+
+ + + Discord server + + + + Source code + +
+ diff --git a/src/lib/sections/about/index.ts b/src/lib/sections/about/index.ts index 1920e83..032009c 100644 --- a/src/lib/sections/about/index.ts +++ b/src/lib/sections/about/index.ts @@ -1,4 +1,4 @@ -export { default as Credits } from './Credits.svelte'; -export { default as Donate } from './Donate.svelte'; -export { default as Resources } from './Resources.svelte'; -export { default as Why } from './Why.svelte'; +export { default as Credits } from "./Credits.svelte"; +export { default as Donate } from "./Donate.svelte"; +export { default as Resources } from "./Resources.svelte"; +export { default as Why } from "./Why.svelte"; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 848a01a..c28ffa8 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -189,15 +189,15 @@
{@render children()}
-
+
From 8ec9546b7e7ee8b904092683b38e36073b9628c9 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 19:41:35 +0300 Subject: [PATCH 021/106] Fetch github contributors --- src/routes/about/+page.svelte | 126 +++++++++++++--------------------- 1 file changed, 49 insertions(+), 77 deletions(-) diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 39c3734..ed39002 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,102 +1,74 @@
From 24c5d418786f29cf708230249ef4782e959a8920 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 19:48:59 +0300 Subject: [PATCH 022/106] Add error to logger.ts --- src/lib/converters/vips.svelte.ts | 12 ++++++------ src/lib/logger/index.ts | 22 +++++++++++++++++++++- src/lib/store/index.svelte.ts | 6 +++--- src/routes/about/+page.svelte | 9 +++++---- 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/src/lib/converters/vips.svelte.ts b/src/lib/converters/vips.svelte.ts index bc91676..da35710 100644 --- a/src/lib/converters/vips.svelte.ts +++ b/src/lib/converters/vips.svelte.ts @@ -1,9 +1,9 @@ -import { VertFile } from "$lib/types"; -import { Converter } from "./converter.svelte"; -import VipsWorker from "$lib/workers/vips?worker&url"; import { browser } from "$app/environment"; -import type { WorkerMessage, OmitBetterStrict } from "$lib/types"; -import { log } from "$lib/logger"; +import { error, log } from "$lib/logger"; +import type { OmitBetterStrict, WorkerMessage } from "$lib/types"; +import { VertFile } from "$lib/types"; +import VipsWorker from "$lib/workers/vips?worker&url"; +import { Converter } from "./converter.svelte"; export class VipsConverter extends Converter { private worker: Worker = browser @@ -99,7 +99,7 @@ export class VipsConverter extends Converter { try { this.worker.postMessage(msg); } catch (e) { - console.error(e); + error(["converters", this.name], e); } }); } diff --git a/src/lib/logger/index.ts b/src/lib/logger/index.ts index 9cc2063..ee414ba 100644 --- a/src/lib/logger/index.ts +++ b/src/lib/logger/index.ts @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import { browser } from "$app/environment"; const randomColorFromStr = (str: string) => { @@ -20,7 +21,6 @@ const whiteOrBlack = (hsl: string) => { return l > 70 ? "black" : "white"; }; -// eslint-disable-next-line @typescript-eslint/no-explicit-any export const log = (prefix: string | string[], ...args: any[]) => { const prefixes = Array.isArray(prefix) ? prefix : [prefix]; if (!browser) @@ -40,3 +40,23 @@ export const log = (prefix: string | string[], ...args: any[]) => { ...args, ); }; + +export const error = (prefix: string | string[], ...args: any[]) => { + const prefixes = Array.isArray(prefix) ? prefix : [prefix]; + if (!browser) + return console.error(prefixes.map((p) => `[${p}]`).join(" "), ...args); + const prefixesWithMeta = prefixes.map((p) => ({ + prefix: p, + bgColor: randomColorFromStr(p), + textColor: whiteOrBlack(randomColorFromStr(p)), + })); + + console.error( + `%c${prefixesWithMeta.map(({ prefix }) => prefix).join(" %c")}`, + ...prefixesWithMeta.map( + ({ bgColor, textColor }, i) => + `color: ${textColor}; background-color: ${bgColor}; margin-left: ${i === 0 ? 0 : -6}px; padding: 0px 4px 0 4px; border-radius: 0px 9999px 9999px 0px;`, + ), + ...args, + ); +} diff --git a/src/lib/store/index.svelte.ts b/src/lib/store/index.svelte.ts index 5f35060..2c3f35f 100644 --- a/src/lib/store/index.svelte.ts +++ b/src/lib/store/index.svelte.ts @@ -1,6 +1,6 @@ import { browser } from "$app/environment"; import { converters } from "$lib/converters"; -import { log } from "$lib/logger"; +import { error, log } from "$lib/logger"; import { VertFile } from "$lib/types"; import JSCookie from "js-cookie"; import jsmediatags from "jsmediatags"; @@ -68,8 +68,8 @@ class Files { file.blobUrl = url; canvas.remove(); } - } catch (error) { - console.error(error); + } catch (e) { + error(["files"], e); } }; diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index ed39002..01fd85a 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -1,5 +1,5 @@ From 4a39b1b696c969e7c3c75f0c61ef8aa3eb422bbd Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 21:45:06 +0300 Subject: [PATCH 023/106] Link to GitHub profiles --- src/lib/sections/about/Credits.svelte | 44 +++++++++++++++------------ src/routes/about/+page.svelte | 31 +++++++++++-------- 2 files changed, 43 insertions(+), 32 deletions(-) diff --git a/src/lib/sections/about/Credits.svelte b/src/lib/sections/about/Credits.svelte index e19d1f5..652809e 100644 --- a/src/lib/sections/about/Credits.svelte +++ b/src/lib/sections/about/Credits.svelte @@ -5,18 +5,27 @@ let { mainContribs, ghContribs } = $props(); -{#snippet contributor(name: string, role: string, avatar: string)} +{#snippet contributor( + name: string, + github: string, + avatar: string, + role?: string, +)}
- {name} -
-

{name}

-

{role}

-
+ + {name} + + {#if role} +
+

{name}

+

{role}

+
+ {/if}
{/snippet} @@ -34,8 +43,8 @@
{#each mainContribs as contrib} - {@const { name, role, avatar } = contrib} - {@render contributor(name, role, avatar)} + {@const { name, github, avatar, role } = contrib} + {@render contributor(name, github, avatar, role)} {/each}
@@ -74,13 +83,8 @@ {#if ghContribs && ghContribs.length > 0}
{#each ghContribs as contrib} - {@const { name, avatar } = contrib} - {name} + {@const { name, github, avatar } = contrib} + {@render contributor(name, github, avatar)} {/each}
{/if} diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte index 01fd85a..649005c 100644 --- a/src/routes/about/+page.svelte +++ b/src/routes/about/+page.svelte @@ -12,9 +12,9 @@ interface Contributor { name: string; - github?: string; - role?: string; + github: string; avatar: string; + role?: string; } const donors: Donator[] = []; @@ -22,20 +22,20 @@ const mainContribs: Contributor[] = [ { name: "nullptr", - github: "not-nullptr", + github: "https://github.com/not-nullptr", role: "Lead developer; conversion backend, UI implementation", avatar: "https://avatars.githubusercontent.com/u/62841684?v=4", }, { name: "Realmy", - github: "RealmyTheMan", + github: "https://github.com/RealmyTheMan", role: "Lead designer; logo and branding, user interface design", avatar: "https://avatars.githubusercontent.com/u/163438634?v=4", }, { name: "JovannMC", - github: "JovannMC", - role: "Developer; lorem ipsum, UI implementation", + github: "https://github.com/JovannMC", + role: "Developer; UI implementation", avatar: "https://avatars.githubusercontent.com/u/45893380?v=4", }, ]; @@ -54,18 +54,25 @@ const allContribs = await response.json(); // Filter out main contributors - const mainContribNames = mainContribs.map( - (contrib) => contrib.github, + const mainContribNames = mainContribs.map((contrib) => + contrib.github.split("/").pop(), ); ghContribs = allContribs .filter( (contrib: { login: string }) => !mainContribNames.includes(contrib.login), ) - .map((contrib: { login: string; avatar_url: string }) => ({ - name: contrib.login, - avatar: contrib.avatar_url, - })); + .map( + (contrib: { + login: string; + avatar_url: string; + html_url: string; + }) => ({ + name: contrib.login, + avatar: contrib.avatar_url, + github: contrib.html_url, + }), + ); } catch (e) { error(["general"], `Error fetching GitHub contributors: ${e}`); } From ec8d8900c0a0df5b2e5a69d80c40158a4fd85234 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Tue, 31 Dec 2024 22:07:33 +0300 Subject: [PATCH 024/106] hoverable buttons --- src/app.scss | 12 ++++++++++++ src/lib/sections/about/Credits.svelte | 2 +- src/lib/sections/about/Donate.svelte | 18 +++++++++--------- src/lib/sections/about/Resources.svelte | 4 ++-- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/src/app.scss b/src/app.scss index 432a31d..ca5f1b1 100644 --- a/src/app.scss +++ b/src/app.scss @@ -131,6 +131,18 @@ body { background-size: 100vw 100vh; } +.hoverable { + @apply hover:scale-105 duration-200; +} + +.hoverable-md { + @apply hover:scale-110 duration-200; +} + +.hoverable-lg { + @apply hover:scale-[1.15] duration-200; +} + @layer components { select { @apply appearance-none; diff --git a/src/lib/sections/about/Credits.svelte b/src/lib/sections/about/Credits.svelte index 652809e..3d2385a 100644 --- a/src/lib/sections/about/Credits.svelte +++ b/src/lib/sections/about/Credits.svelte @@ -17,7 +17,7 @@ src={avatar} alt={name} title={name} - class="{role ? 'w-14 h-14' : 'w-10 h-10'} rounded-full" + class="{role ? 'w-14 h-14 hoverable-md' : 'w-10 h-10 hoverable-lg'} rounded-full" /> {#if role} diff --git a/src/lib/sections/about/Donate.svelte b/src/lib/sections/about/Donate.svelte index f9cf32a..6c9ae64 100644 --- a/src/lib/sections/about/Donate.svelte +++ b/src/lib/sections/about/Donate.svelte @@ -16,7 +16,7 @@ src={avatar} alt={name} title={name} - class="w-9 h-9 rounded-full" + class="w-9 h-9 rounded-full hoverable-lg" />

${amount}

@@ -38,31 +38,31 @@
-
+
-
@@ -82,10 +82,10 @@

diff --git a/src/lib/sections/about/Resources.svelte b/src/lib/sections/about/Resources.svelte index 5d62153..d1268d9 100644 --- a/src/lib/sections/about/Resources.svelte +++ b/src/lib/sections/about/Resources.svelte @@ -17,7 +17,7 @@ href="https://discord.gg/kqevGxYPak" target="_blank" rel="noopener noreferrer" - class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center" + class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable" > Discord server @@ -26,7 +26,7 @@ href="https://github.com/not-nullptr/VERT" target="_blank" rel="noopener noreferrer" - class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center" + class="flex-1 gap-2 p-4 rounded-full bg-button text-black dynadark:text-white flex items-center justify-center hoverable" > Source code From 839d129cabc1bd4453f755245630dba2a24aeb69 Mon Sep 17 00:00:00 2001 From: JovannMC Date: Wed, 1 Jan 2025 18:14:37 +0300 Subject: [PATCH 025/106] apply hoverable to .btn use @apply hoverable to .btn use hoverable on images --- src/app.scss | 2 +- src/lib/sections/about/Donate.svelte | 12 ++++++------ src/lib/sections/about/Resources.svelte | 4 ++-- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/app.scss b/src/app.scss index ca5f1b1..3386909 100644 --- a/src/app.scss +++ b/src/app.scss @@ -149,7 +149,7 @@ body { } .btn { - @apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none; + @apply bg-button flex items-center justify-center overflow-hidden relative cursor-pointer px-6 h-14 rounded-full font-medium focus:!outline-none hover:scale-105 duration-200 active:scale-95 disabled:opacity-50 disabled:pointer-events-none hoverable; transition: opacity 0.2s ease, transform 0.2s ease, diff --git a/src/lib/sections/about/Donate.svelte b/src/lib/sections/about/Donate.svelte index 6c9ae64..67bd92c 100644 --- a/src/lib/sections/about/Donate.svelte +++ b/src/lib/sections/about/Donate.svelte @@ -16,7 +16,7 @@ src={avatar} alt={name} title={name} - class="w-9 h-9 rounded-full hoverable-lg" + class="w-9 h-9 rounded-full" />

${amount}

@@ -47,22 +47,22 @@
-
@@ -82,7 +82,7 @@

+
{#if files.requiredConverters.length === 1} -

Set all to

+

Set all to

files.files.forEach((f) => { f.to = r; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4bc71f4..868cd5c 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -131,7 +131,7 @@