Refactor, move some fa icons to dedicated components. Eventually get …

…rid of fontawesome css hopefully.
titaniumnetwork-dev · Oct 12, 2024 · 4ce7d5a · 4ce7d5a
1 parent 9a48ae3
commit 4ce7d5a
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 19 deletions.
diff --git a/public/sw.js b/public/sw.js
@@ -15,7 +15,7 @@ function loadExtensionScripts() {
       let store = transaction.objectStore("InstalledExtensions");
       let request = store.getAll();
       request.onsuccess = () => {
-        let extensions = request.result;
+        let extensions = request.result.filter((extension) => extension.type != "theme");
         extensions.forEach((extension) => {
           eval(atob(extension.scriptCopy));
           const func = self[extension.entryNamespace][extension.entryFunc];

diff --git a/src/components/UI/MarketplaceIcon.astro b/src/components/UI/MarketplaceIcon.astro
@@ -1,30 +1,31 @@
 ---
+import Paintbrush from "@components/icons/paintbrush.astro";
+import Scroll from "@components/icons/scroll.astro";
+
 const { type } = Astro.props;
 
 type Props = {
   type: ExtType;
 };
 
-let icon = "fa-solid fa-paintbrush";
-let abbrTitle = "Style";
-
-if (type === "page" || type === "serviceWorker") {
-  icon = "fa-solid fa-scroll";
-  abbrTitle = "Script";
-}
+const abbrTitle = type === "theme" ? "Theme" : "Script";
 ---
 
 <div class="marketplace-icon">
   <abbr title={abbrTitle}>
-    <i class={icon + " fa-lg marketplace-icon"}></i>
+    {type === "theme" ? <Paintbrush class="icon" /> : <Scroll class="icon" />}
   </abbr>
 </div>
 
-<style>
+<style is:global>
   .marketplace-icon {
     width: 32px;
     filter: brightness(0.8);
     align-self: flex-start;
     padding-bottom: 1rem;
   }
+
+  .mp-icon {
+    height: 24px;
+  }
 </style>
diff --git a/src/components/icons/paintbrush.astro b/src/components/icons/paintbrush.astro
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="var(--text-color)" class="mp-icon">
+    <path d="M339.3 367.1c27.3-3.9 51.9-19.4 67.2-42.9L568.2 74.1c12.6-19.5 9.4-45.3-7.6-61.2S517.7-4.4 499.1 9.6L262.4 187.2c-24 18-38.2 46.1-38.4 76.1L339.3 367.1zm-19.6 25.4l-116-104.4C143.9 290.3 96 339.6 96 400c0 3.9 .2 7.8 .6 11.6C98.4 429.1 86.4 448 68.8 448L64 448c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0c61.9 0 112-50.1 112-112c0-2.5-.1-5-.2-7.5z" />
+</svg>
diff --git a/src/components/icons/scroll.astro b/src/components/icons/scroll.astro
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="var(--text-color)" class="mp-icon">
+    <path d="M0 80l0 48c0 17.7 14.3 32 32 32l16 0 48 0 0-80c0-26.5-21.5-48-48-48S0 53.5 0 80zM112 32c10 13.4 16 30 16 48l0 304c0 35.3 28.7 64 64 64s64-28.7 64-64l0-5.3c0-32.4 26.3-58.7 58.7-58.7L480 320l0-192c0-53-43-96-96-96L112 32zM464 480c61.9 0 112-50.1 112-112c0-8.8-7.2-16-16-16l-245.3 0c-14.7 0-26.7 11.9-26.7 26.7l0 5.3c0 53-43 96-96 96l176 0 96 0z" />
+</svg>
diff --git a/src/components/ts/marketplace.ts b/src/components/ts/marketplace.ts
@@ -1,8 +1,8 @@
 import "notyf/notyf.min.css";
 import { Notyf } from "notyf";
 import marketplaceManifest from "../../json/marketplace.json";
-const installButtons = document.getElementsByClassName("btn-install");
 import IDBManager, { loadIDBPromise } from "./IDBManager";
+const installButtons = document.getElementsByClassName("btn-install");
 
 const extManifest = marketplaceManifest as ExtensionMetadataJSON;
 

diff --git a/src/pages/[lang]/marketplace.astro b/src/pages/[lang]/marketplace.astro
@@ -11,7 +11,7 @@ export const getStaticPaths = () => {
 };
 ---
 
-<Layout title="Marketplace | Alu" optionalStylesheets={["https://site-assets.fontawesome.com/releases/v6.6.0/css/all.css"]}>
+<Layout title="Marketplace | Alu">
   <div id="main-content">
     <h1 class="title-text">Marketplace</h1>
     <p class="title-desc">(WIP) Install custom extensions for Alu!</p>

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -36,14 +36,9 @@ import SchemaData from "@components/SchemaData.astro";
       import instantiateAlu from "@components/ts/Alu";
       instantiateAlu();
       const lang = Alu.store.get("lang");
-      const redirect = (loc: string) => (window.location.href = loc);
+      const redirect = (loc: string) => window.location.href = loc;
       if (lang) {
-        try {
-          redirect(`/${lang.value}/`);
-        } catch {
-          localStorage.clear();
-          window.location.reload();
-        }
+        redirect(`/${lang.value}/`);
       } else {
         const lang = navigator.language;
         if (lang.includes("ja")) {

diff --git a/tsconfig.json b/tsconfig.json
@@ -5,6 +5,7 @@
     "baseUrl": ".",
     "paths": {
       "@components/*": ["src/components/*"],
+      "@icons/*": ["src/icons/*"],
       "@i18n/*": ["src/i18n/*"],
       "@json/*": ["src/json/*"]
     }