Merge branch 'titaniumnetwork-dev:main' into main

public/marketplace/dracula-theme/theme.css

@@ -5,5 +5,5 @@
   --accent-color-brighter: #2d2f3c;
   --text-color: #f8f8f2;
   --text-color-accent: #dddddd;
-  --dropdown-background-color: #6272a4;
+  --dropdown-background-color: #343b52;
 }

src/components/SettingsContent/CreditsTab.astro

@@ -21,6 +21,9 @@ const t = i18n.inferLangUseTranslations(Astro.url);
     <p class="credit-item">
       Rosé Pine Theme - <Link href="https://rosepinetheme.com/" newTab>Rosé Pine</Link>
     </p>
+    <p class="credit-item">
+      French Translations - <Link href="https://github.com/notboeing747" newTab>notboeing747</Link>
+    </p>
   </div>
 </div>
 

src/components/SettingsContent/CustomizationTab.astro

@@ -14,16 +14,17 @@ const themeList = [
 const languageList = [
   { name: "English", value: "en" },
   { name: "日本語", value: "jp" },
+  { name: "Français", value: "fr"}
 ];
 ---
 
 <div class="settings-container">
   <div class="setting__theme">
-    <label aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
+    <label for="dropdown__selected-theme" aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
     <Dropdown buttonNameDefault="Alu" localStorageKey="alu__selectedTheme" dropdownList={themeList} id="dropdown__selected-theme" />
   </div>
   <div class="setting__language">
-    <label aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
+    <label for="dropdown__selected-language" aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
     <Dropdown buttonNameDefault="English" localStorageKey="alu__selectedLanguage" dropdownList={languageList} id="dropdown__selected-language" />
   </div>
 </div>

src/components/SettingsContent/ProxyTab.astro

@@ -38,19 +38,19 @@ const wispURLList = [
 
 <div class="settings-container">
   <div class="setting__selected-proxy">
-    <label aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
+    <label for="dropdown__selected-proxy" aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
     <Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="alu__selectedProxy" id="dropdown__selected-proxy" />
   </div>
   <div class="setting__search-engine">
-    <label aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
+    <label for="dropdown__search-engine" aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
     <Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="alu__searchEngine" id="dropdown__search-engine" />
   </div>
   <div class="setting__open_with">
-    <label aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
+    <label for="dropdown__open-with" aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
     <Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
   </div>
   <div class="setting__wisp_url">
-    <label aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
+    <label for="dropdown__wisp-url" aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
     <Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
   </div>
   <div class="setting__bare_url">
@@ -58,7 +58,7 @@ const wispURLList = [
     <Input height="50px" inputName="bare-url" />
   </div>
   <div class="setting__transport">
-    <label aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
+    <label for="dropdown__transport" aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
     <Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="alu__selectedTransport" id="dropdown__transport" />
   </div>
 </div>

src/components/ThemeLoader.astro

@@ -1,14 +1,5 @@
 <script>
   import IDBManager from "@components/ts/IDBManager";
-  const tempDB = await IDBManager.loadIDBPromise("AluDB", 1);
-  if (tempDB instanceof Event) {
-    // Something has gone wrong, and the IDB can't be loaded, so we'll delete it and recreate it.
-    IDBManager.DeleteIDB("AluDB");
-    throw new Error("IDB has failed to load - It has been deleted and will be recreated when you refresh the page.");
-  }
-  if (!IDBManager.ValidateStoreExists("InstalledExtensions")) {
-    IDBManager.CreateStore("InstalledExtensions", { keyPath: "slug" });
-  }
 
   function switchTheme() {
     let currentTheme = localStorage.getItem("alu__selectedTheme");
@@ -32,9 +23,6 @@
   const idb = IDBManager.loadIDB("AluDB", 1);
 
   idb.onsuccess = () => {
-    const db = idb.result;
-    IDBManager.SetIDB(db);
-
     let store = IDBManager.GetStore("InstalledExtensions", "readonly");
     store.getAll().onsuccess = (event) => {
       const result = (event.target as IDBRequest).result;
@@ -42,20 +30,20 @@
         result.forEach((extension: IExtensionMetadata) => {
           if (extension.type === "theme" && extension.themeName) {
             // Load theme CSS
-            window.loadedThemeAtob = atob(extension.scriptCopy!);
+            console.log("Attempting to load theme", extension.themeName);
-            loadStyleFromAtob();
+            loadStyleFromAtob(atob(extension.scriptCopy!));
 
             document.addEventListener("astro:after-swap", () => {
-              loadStyleFromAtob();
+              loadStyleFromAtob(atob(extension.scriptCopy!));
             });
           }
         });
       }
     };
   };
-  function loadStyleFromAtob() {
+  function loadStyleFromAtob(style: string) {
-    const style = document.createElement("style");
+    const styleEl = document.createElement("style");
-    style.textContent = window.loadedThemeAtob;
+    styleEl.textContent = style;
-    document.head.appendChild(style);
+    document.head.appendChild(styleEl);
   }
 </script>

src/i18n/ui.ts

@@ -1,9 +1,11 @@
 import en from "./en.json";
 import jp from "./jp.json";
+import fr from "./fr.json";
 
 export const defaultLang = "en";
 
 export const ui = {
   en,
   jp,
+  fr,
 };

src/i18n/utils.ts

@@ -3,7 +3,7 @@ import { ui, defaultLang } from "./ui";
 type LanguageKeys = keyof typeof ui;
 type TranslationKeys = keyof (typeof ui)[typeof defaultLang];
 
-export const STATIC_PATHS = [{ params: { lang: "en" } }, { params: { lang: "jp" } }];
+export const STATIC_PATHS = [{ params: { lang: "en" } }, { params: { lang: "jp" } }, { params: { lang: "fr" } }];
 
 function getLangFromUrl(url: URL) {
   // comma lol

src/layouts/Layout.astro

@@ -55,6 +55,16 @@ const { title, optionalPreloads } = Astro.props;
 
       gtag("config", "G-P1JX4G9KSF");
     </script>
+    <script>
+      import IDBManager from "@components/ts/IDBManager";
+      if (!window.idb) {
+        let db = await IDBManager.loadIDBPromise("AluDB", 1);
+        if (db instanceof IDBDatabase) {
+          window.idb = db;
+        }
+      }
+
+    </script>
     <meta name="generator" content={Astro.generator} />
     <title>{title}</title>
     <ViewTransitions />

src/pages/[lang]/index.astro

@@ -50,7 +50,7 @@ export function getStaticPaths() {
           <h2>{t("faq.contributeToAlu")}</h2>
           <p>
             {t("faq.contributeToAlu.answer.segment1")}
-            <Link href="https://www.patreon.com/wearr" newTab>{t("faq.contributeToAlu.answer.patreonLinkText")}</Link>
+            <Link href="https://www.patreon.com/wearr/membership" newTab>{t("faq.contributeToAlu.answer.patreonLinkText")}</Link>
             {t("faq.contributeToAlu.answer.segment2")}
           </p>
         </div>

src/pages/[lang]/settings.astro

@@ -55,13 +55,6 @@ export function getStaticPaths() {
       <div id="current-content"></div>
     </div>
   </main>
-  <script>
-    import IDBManager from "@components/ts/IDBManager";
-    let db = await IDBManager.loadIDBPromise("AluDB", 1);
-    if (db instanceof IDBDatabase) {
-      window.idb = db;
-    }
-  </script>
   <script is:inline>
     window.loadedContentStorage = {};
     window.currentlySelectedTab;
@@ -90,7 +83,6 @@ export function getStaticPaths() {
           setTimeout(() => {
             currentContent.innerHTML = window.loadedContentStorage[tabID];
             currentContent.style.opacity = "1";
-            document.dispatchEvent(new CustomEvent("setting-tabChange", { detail: tabID }));
             document.dispatchEvent(new CustomEvent("setting-tabLoad", { detail: tabID }));
           }, 250);
         }
@@ -204,19 +196,21 @@ export function getStaticPaths() {
       function addThemeToDropdown(extension) {
         let dropdown = document.getElementById("dropdown__selected-theme-menu");
         if (dropdown) {
+          // TODO: Figure out why addThemeToDropdown is being called 6 times
+          // This when you go from another page and back to settings->customization.
+          let duplicateItem = Array.from(dropdown.children).find((item) => {
+            return item.dataset.setting == extension.themeName;
+          });
+          if (duplicateItem) return;
           let themeItem = document.createElement("li");
           themeItem.classList.add("dropdown-item");
           themeItem.dataset.setting = extension.themeName;
           themeItem.textContent = extension.title;
           dropdown.appendChild(themeItem);
-        } else {
-          setTimeout(() => {
-            addThemeToDropdown(extension);
-          }, 1000);
         }
       }
 
-      document.addEventListener("setting-tabChange", determineListener);
+      document.addEventListener("setting-tabLoad", determineListener);
 
       loadContent("setting-tab-proxy");
 
@@ -388,15 +382,8 @@ export function getStaticPaths() {
         let currentLanguage = window.location.pathname.split("/")[1];
         // Do nothing.. because we're already on the page.
         if (value == currentLanguage) return;
-        switch (value) {
+          window.location.href = `/${value}/settings`;
-          case "en":
-            window.location.href = "/en/settings/";
-            break;
-          case "jp":
-            window.location.href = "/jp/settings/";
-            break;
         }
-      }
     }
     document.addEventListener("astro:after-swap", () => {
       setTimeout(() => {

src/pages/index.astro

@@ -26,17 +26,7 @@ import { ViewTransitions } from "astro:transitions";
       if (currentLang) {
         try {
           let parsed = JSON.parse(currentLang).value;
-          switch (parsed) {
+          redirect(`/${parsed}/`);
-            case "en":
-              redirect("/en/");
-              break;
-            case "jp":
-              redirect("/jp/");
-              break;
-            default:
-              redirect("/en/");
-              break;
-          }
         } catch {
           localStorage.clear();
           window.location.reload();
@@ -45,6 +35,9 @@ import { ViewTransitions } from "astro:transitions";
         if (navigator.language.includes("ja")) {
           localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "jp" }));
           redirect("/jp/");
+        } else if (navigator.language.includes("fr")) {
+          localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "fr" }));
+          redirect("/fr/");
         } else {
           localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "en" }));
           redirect("/en/");