feat: new logger

src/lib/converters/converter.svelte.ts

@@ -18,6 +18,7 @@ export class Converter {
 	 * @param to The format to convert to. Includes the dot.
 	 */
 	public ready: boolean = $state(false);
+
 	public async convert(
 		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		input: OmitBetterStrict<IFile, "extension">,

src/lib/converters/ffmpeg.svelte.ts

@@ -3,6 +3,7 @@ import { Converter } from "./converter.svelte";
 import type { OmitBetterStrict } from "$lib/types";
 import { FFmpeg } from "@ffmpeg/ffmpeg";
 import { browser } from "$app/environment";
+import { log } from "$lib/logger";
 
 export class FFmpegConverter extends Converter {
 	private ffmpeg: FFmpeg = null!;
@@ -16,7 +17,6 @@ export class FFmpegConverter extends Converter {
 		".ogg",
 		".aac",
 		".m4a",
-		".opus",
 		".wma",
 		".m4a",
 		".amr",
@@ -27,6 +27,7 @@ export class FFmpegConverter extends Converter {
 
 	constructor() {
 		super();
+		log(["converters", this.name], `created converter`);
 		if (!browser) return;
 		this.ffmpeg = new FFmpeg();
 		(async () => {

src/lib/converters/vips.svelte.ts

@@ -3,6 +3,7 @@ import { Converter } from "./converter.svelte";
 import VipsWorker from "$lib/workers/vips?worker";
 import { browser } from "$app/environment";
 import type { WorkerMessage, OmitBetterStrict } from "$lib/types";
+import { log } from "$lib/logger";
 
 export class VipsConverter extends Converter {
 	private worker: Worker = browser ? new VipsWorker() : null!;
@@ -30,6 +31,7 @@ export class VipsConverter extends Converter {
 
 	constructor() {
 		super();
+		log(["converters", this.name], `created converter`);
 		if (!browser) return;
 		this.worker.onmessage = (e) => {
 			const message: WorkerMessage = e.data;

src/lib/logger/index.ts

@@ -0,0 +1,42 @@
+import { browser } from "$app/environment";
+
+const randomColorFromStr = (str: string) => {
+	// generate a pleasant color from a string, using HSL
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		hash = str.charCodeAt(i) + ((hash << 5) - hash);
+	}
+	const h = hash % 360;
+	return `hsl(${h}, 75%, 71%)`;
+};
+
+const whiteOrBlack = (hsl: string) => {
+	// determine if the text should be white or black based on the background color
+	const [, , l] = hsl
+		.replace("hsl(", "")
+		.replace(")", "")
+		.split(",")
+		.map((v) => parseInt(v));
+	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)
+		return console.log(prefixes.map((p) => `[${p}]`).join(" "), ...args);
+	const prefixesWithMeta = prefixes.map((p) => ({
+		prefix: p,
+		bgColor: randomColorFromStr(p),
+		textColor: whiteOrBlack(randomColorFromStr(p)),
+	}));
+
+	console.log(
+		`%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,
+	);
+};

src/lib/store/index.svelte.ts

@@ -21,7 +21,6 @@ class Theme {
 	public dark = $state(false);
 	public toggle = () => {
 		this.dark = !this.dark;
-		console.log(this.dark);
 	};
 }
 

src/routes/+layout.ts

@@ -7,7 +7,9 @@ export const load = ({ data }) => {
 	const themeStr = getCookie("theme");
 	if (typeof themeStr === "undefined") {
 		theme.dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
-		setCookie("theme", theme.dark ? "dark" : "light");
+		setCookie("theme", theme.dark ? "dark" : "light", {
+			sameSite: "strict",
+		});
 	} else {
 		theme.dark = themeStr === "dark";
 	}

src/routes/+page.svelte

@@ -18,7 +18,6 @@
 					const converter = converters.find((c) =>
 						c.supportedFormats.includes(from),
 					);
-					console.log(converter);
 					if (!converter) resolve();
 					const to =
 						converter?.supportedFormats.find((f) => f !== from) ||