Release v3.10.0

langs/es.js

@@ -0,0 +1,19 @@
+let es = {
+    'Close': 'Cerrar',
+    'Theme': 'Tema',
+    'Welcome to Catalyst!': 'Bienvenidos a Catalyst',
+    'Customize Catalyst': 'Personalizar Catalyst',
+    'Home': 'Casa',
+    'Preferences': 'Preferencias',
+    'Inspect Tab': 'Pestaña Inspeccionar',
+    'Development': 'Desarrollo',
+    'Download Page': 'Descargar Página',
+    'Changes': 'Cambios',
+    'Autocomplete': 'Autocompletar',
+    'Sets a custom theme': 'Establece un tema personalizado',
+    'Search Autocomplete': 'Búsqueda Autocompletar',
+    'Reset Preferences': 'Restablecer preferencias',
+    'Advanced': 'Advancado'
+};
+
+module.exports = es;

main/preload.js

@@ -1,11 +1,41 @@
 const path = require('path');
 const { ipcRenderer, contextBridge } = require('electron');
+const i18n = require('vanilla-i18n')
+const es = require('../langs/es.js')
 
 const dat = require(path.join(__dirname, '../package.json'),);
 
+function applyTranslations(element) {
+    var all = document.body.getElementsByTagName(element);
+
+    for (var i = 0, max = all.length; i < max; i++) {
+        if (all[i].querySelector("span") == null) {
+            all[i].innerText = all[i].innerText.translate(lang)
+        }
+    }
+}
+
 window.addEventListener('DOMContentLoaded', () => {
     document.getElementById('ver').innerText = 'v' + dat.version;
     document.getElementById('pref-ver').innerText = 'v' + dat.version;
+
+        lang = localStorage.getItem('catalyst.localization.language')
+        switch(lang) {
+            case "es":
+                i18n.setTranslate(es, 'es')
+                break;
+            default:
+                break;
+        }
+        i18n.setTranslate(lang, lang)
+        applyTranslations('button', lang)
+        applyTranslations('p', lang)
+        applyTranslations('h1', lang)
+        applyTranslations('h2', lang)
+        applyTranslations('h3', lang)
+        applyTranslations('li', lang)
+        applyTranslations('label', lang)
+        applyTranslations('button', lang)
 });
 
 contextBridge.exposeInMainWorld('native', {

package.json

@@ -1,6 +1,6 @@
 {
     "name": "catalyst",
-    "version": "3.9.5",
+    "version": "3.10.0-beta.1",
     "description": "A minimal Electron Web Browser",
     "main": "main/main.js",
     "private": true,
@@ -32,6 +32,7 @@
         "cross-fetch": "^4.0.0",
         "electron-context-menu": "^3.6.1",
         "electron-squirrel-startup": "^1.0.1",
+        "vanilla-i18n": "^1.0.8",
         "material-symbols": "^0.27.2"
     },
     "build": {

src/home.html

@@ -20,6 +20,7 @@
     }
 
     .widgets {
+        display: none;
         margin: 32pt;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
@@ -170,6 +171,7 @@ <h1>Shortcuts</h1>
 
         if (preferences.homewidgets) { 
             setInterval(updateTime, 1000);
+            widgets.display = 'unset';
         }
     </script>
 

src/index.html

@@ -41,17 +41,17 @@
         <div class="hidden" id="more-menu">
             <ul>
                 <li class="moreMenuItem" onclick="togglePreferences()"><span
-                        class="material-symbols-rounded">settings</span>Preferences</li>
+                        class="material-symbols-rounded">settings</span><p>Preferences</p></li>
                 <li class="moreMenuItem" onclick="inspectTab()"><span
-                        class="material-symbols-rounded">search</span>Inspect Tab</li>
+                        class="material-symbols-rounded">search</span><p>Inspect Tab</p></li>
                 <li class="moreMenuItem" onClick="createTab('https://github.com/JaydenDev/Catalyst/issues/new')"><span
-                        class="material-symbols-rounded">bug_report</span>Feedback</li>
+                        class="material-symbols-rounded">bug_report</span><p>Feedback</p></li>
                 <li class="moreMenuItem" onClick="createTab('https://github.com/JaydenDev/Catalyst')"><span
-                        class="material-symbols-rounded">code</span>Development</li>
+                        class="material-symbols-rounded">code</span><p>Development</p></li>
                 <li class="moreMenuItem" onClick="downloadCurrentPage()" class="moreMenuItem"><span
-                        class="material-symbols-rounded">download</span>Download Page</li>
+                        class="material-symbols-rounded">download</span><p>Download Page</p></li>
                 <li class="moreMenuItem" id="changelogbtn" onClick="openChangeLog()" class="moreMenuItem"><span
-                        class="material-symbols-rounded">update</span><span id="ver"></span>&nbsp;Changes</li>
+                        class="material-symbols-rounded">update</span><span id="ver"></span>&nbsp;<p>Changes</p></li>
             </ul>
         </div>
     </div>
@@ -145,6 +145,13 @@ <h1>Preferences</h1>
             <input id="pref-esb" type="checkbox">
             <br />
             <p>Enable the sidebar.</p>
+            <br />
+            <label for="lang">Experimental Language</label>
+            <select name="lang" id="lang">
+                <option value="en">English (Default)</option>
+                <option value="es">Español (Spanish)</option>
+            </select>
+            <p>Have Catalyst be displayed in another language.</p>
         </div>
         <br />
         <div style="margin-left: 16pt;">

src/preferences.js

@@ -136,6 +136,15 @@ enginespref.onchange = (event) => {
 
 enginespref.value = localStorage.getItem('engine') || '1';
 
+var langpref = document.querySelector('#lang');
+langpref.onchange = (event) => {
+    var index = langpref.value;
+    localStorage.setItem('catalyst.localization.language', index);
+    alert('Restart required to apply change.')
+};
+
+langpref.value = localStorage.getItem('catalyst.localization.language') || 'en'
+
 function changePrefTab(itm) {
     document.querySelector(`#${itm}`).classList.remove('hidden');
     others = document.querySelector('#preferences-box').getElementsByTagName('*');

styles.css

@@ -5,9 +5,9 @@
 }
 
 :root {
-    --primary: #818cf8;
-    --secondary: #6366f1;
-    --tertiary: #4f46e5;
+    --tertiary: #a5b4fc;
+    --secondary: #818cf8;
+    --primary: #6366f1;
     --userchrome-btn-primary: var(--primary);
     --userchrome-btn-secondary: var(--secondary);
     --button-primary: #a855f7;
@@ -69,11 +69,11 @@ body {
 }
 
 .active-tab {
-    background-color: var(--tertiary);
+    background-color: var(--secondary);
 }
 
 .tab:hover {
-    background-color: var(--secondary);
+    background-color: var(--tertiary);
 }
 
 #userchrome button {
@@ -346,7 +346,7 @@ ul {
     width: fit-content;
     height: fit-content;
     color: var(--foreground);
-    background-color: var(--secondary);
+    background-color: var(--primary);
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }