From f69951942257b048266683ce01784029d750eea0 Mon Sep 17 00:00:00 2001
From: Katja Lutz <mail@katjalutz.ch>
Date: Wed, 22 Jun 2022 19:09:17 +0200
Subject: [PATCH] feat: implement vite config

---
 vite.config.ts | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 vite.config.ts

diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..e0daf4d
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,54 @@
+import { defineConfig } from "vite";
+import solid from "solid-start";
+import Icons from "unplugin-icons/vite";
+import { promises as fs } from "fs";
+
+const cleanSvg = (svgString: string) => {
+  const foundSvgs = new RegExp("^[\\s\\S]*(<svg[\\s\\S]*)$", "m").exec(
+    svgString
+  );
+  if (!foundSvgs || !foundSvgs[1]) {
+    throw new Error("Svg was not readable");
+  }
+
+  let result = foundSvgs[1];
+  result = result.replaceAll("\n", "");
+  // Removing aria attributes because they screw up the lighthouse score :/
+  result = result.replaceAll(/aria-\S+=".*?"/g, "");
+
+  return result;
+};
+
+export default defineConfig({
+  plugins: [
+    Icons({
+      compiler: "solid",
+      customCollections: {
+        custom: {
+          icon: () =>
+            fs.readFile("./assets/icon-path.svg", "utf-8").then(cleanSvg),
+          "lufrai-logo": () =>
+            fs
+              .readFile("./assets/lufrai/logo-current.svg", "utf-8")
+              .then(cleanSvg),
+          "lufrai-logo-www": () =>
+            fs
+              .readFile("./assets/lufrai/logo-www-current.svg", "utf-8")
+              .then(cleanSvg),
+        },
+      },
+      iconCustomizer(collection, icon, props) {
+        if (collection !== "custom") {
+          return;
+        }
+
+        // TODO: Icons should be coded like this: <AppIcon width="1em" height="100%" /> but this results in a rendering issue:
+        // Discussion: https://discord.com/channels/722131463138705510/722167424186843267/989162440342241281
+        // Workaround: We manually set width/height = 100% and override width css classes
+        props.width = "100%";
+        props.height = "100%";
+      },
+    }),
+    solid(),
+  ],
+});