Custom search engine

Witherbomb47 · Apr 14, 2024 · 430acf9 · 430acf9
1 parent 99e8f97
commit 430acf9
Show file tree

Hide file tree

Showing 14 changed files with 69 additions and 55 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -105,9 +105,9 @@
 - [x] Update settings layout
 - [x] More languages
 - [x] Update app icons and names
+- [x] Custom search engine
 
 # Todo
-- [ ] Custom search engine
 - [ ] Change transport (Eproxy, Libcurl, Bare)
 - [ ] Change Wisp URL and Bare URL
 - [ ] Games

diff --git a/src/assets/searchEngineData.json b/src/assets/searchEngineData.json
@@ -0,0 +1,10 @@
+{
+    "google": "https://www.google.com/search?q=%s",
+    "duckduckgo": "https://duckduckgo.com/?q=%s&ia=web",
+    "bing": "https://www.bing.com/search?q=%s",
+    "yahoo": "https://search.yahoo.com/search?p=%s",
+    "brave": "https://search.brave.com/search?q=%s",
+    "qwant": "https://www.qwant.com/?q=%s&t=web",
+    "searxng": "https://searx.si/search?q=%s",
+    "ecosia": "https://www.ecosia.org/search?method=index&q=%s"
+}
diff --git a/src/components/head.tsx b/src/components/head.tsx
@@ -1,11 +1,12 @@
 import { useEffect } from "preact/hooks";
 import { useGlobalState } from "@ekwoka/preact-global-state";
 import { seti18Locale } from "../util/locale";
+import searchEngineData from "../assets/searchEngineData.json";
 
 function Head({ pageTitle }: HeadTypes) {
     const [theme, setTheme] = useGlobalState<string>("theme", localStorage.getItem("metallic/theme") || "default");
     const [service, setService] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
-    const [searchEngine, setSearchEngine] = useGlobalState<string>("engine", localStorage.getItem("metallic/engine") || "google");
+    const [searchEngine, setSearchEngine] = useGlobalState<string>("engine", localStorage.getItem("metallic/engine") || searchEngineData.google);
     const [title, setTitle] = useGlobalState<string>("title", localStorage.getItem("metallic/title") || "");
     const [icon, setIcon] = useGlobalState<string>("icon", localStorage.getItem("metallic/icon") || "");
     const [locale, setLocale] = useGlobalState<string>("locale", localStorage.getItem("metallic/locale") || "en");

diff --git a/src/locales/ar.json b/src/locales/ar.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "محرك البحث"
             },
+            "customSearchEngine": {
+                "title": "محرك بحث مخصص",
+                "input": "عنوان URL يحتوي على %s بدلاً من الاستعلام"
+            },
             "open": {
                 "title": "يفتح",
                 "options": {
@@ -73,7 +77,7 @@
             },
             "children": {
                 "title": "خصوصية الأطفال",
-                "text": "نحن لا نجمع أي معلومات شخصية عن قصد من الأطفال الذين تقل أعمارهم عن 13 عامًا. إذا كان عمرك أقل من 13 عامًا، فيرجى عدم تقديم أي معلومات شخصية عبر موقعنا الإلكتروني."
+                "text": "نحن لا نجمع أي معلومات شخصية عن عمد من الأطفال الذين تقل أعمارهم عن 13 عامًا. إذا كان عمرك أقل من 13 عامًا، فيرجى عدم تقديم أي معلومات شخصية عبر موقعنا الإلكتروني."
             },
             "cookies": {
                 "title": "بسكويت",

diff --git a/src/locales/de.json b/src/locales/de.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "Suchmaschine"
             },
+            "customSearchEngine": {
+                "title": "Benutzerdefinierte Suchmaschine",
+                "input": "URL mit %s anstelle der Abfrage"
+            },
             "open": {
                 "title": "Offen",
                 "options": {

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "Search Engine"
             },
+            "customSearchEngine": {
+                "title": "Custom Search Engine",
+                "input": "URL with %s in place of query"
+            },
             "open": {
                 "title": "Open",
                 "options": {

diff --git a/src/locales/es.json b/src/locales/es.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "Buscador"
             },
+            "customSearchEngine": {
+                "title": "Motor de búsqueda personalizado",
+                "input": "URL con %s en lugar de consulta"
+            },
             "open": {
                 "title": "Abierto",
                 "options": {
@@ -73,7 +77,7 @@
             },
             "children": {
                 "title": "Privacidad de los niños",
-                "text": "No recopilamos intencionadamente ninguna información personal de niños menores de 13 años. Si es menor de 13 años, no envíe ninguna información personal a través de nuestro sitio web."
+                "text": "No recopilamos intencionalmente ninguna Información personal de niños menores de 13 años. Si es menor de 13 años, no envíe ninguna Información personal a través de nuestro sitio web."
             },
             "cookies": {
                 "title": "Galletas",

diff --git a/src/locales/fr.json b/src/locales/fr.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "Moteur de recherche"
             },
+            "customSearchEngine": {
+                "title": "Moteur de recherche personnalisé",
+                "input": "URL avec %s à la place de la requête"
+            },
             "open": {
                 "title": "Ouvrir",
                 "options": {

diff --git a/src/locales/hi.json b/src/locales/hi.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "खोज इंजन"
             },
+            "customSearchEngine": {
+                "title": "कस्टम खोज इंजन",
+                "input": "क्वेरी के स्थान पर %s वाला URL"
+            },
             "open": {
                 "title": "खुला",
                 "options": {
@@ -65,7 +69,7 @@
         "policy": {
             "consent": {
                 "title": "सहमति",
-                "text": "मेटालिक के लिए यह गोपनीयता सूचना (\"हम,\" \"हमें,\" या \"हमारा\"), बताती है कि जब आप हमारी सेवाओं का उपयोग करते हैं तो हम आपकी जानकारी कैसे और क्यों एकत्रित, संग्रहीत, उपयोग और/या साझा (\"प्रक्रिया\") कर सकते हैं (\"  {{host}}, या हमारी कोई भी वेबसाइट जो इस गोपनीयता सूचना से लिंक करती है।"
+                "text": "मेटालिक के लिए यह गोपनीयता सूचना (\"हम,\" \"हमें,\" या \"हमारा\"), बताती है कि जब आप हमारी सेवाओं का उपयोग करते हैं तो हम आपकी जानकारी कैसे और क्यों एकत्र, संग्रहीत, उपयोग और/या साझा (\"प्रक्रिया\") कर सकते हैं (\"  {{host}}, या हमारी कोई भी वेबसाइट जो इस गोपनीयता सूचना से लिंक करती है।"
             },
             "information": {
                 "title": "जानकारी का संग्रह",

diff --git a/src/locales/nl.json b/src/locales/nl.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "Zoekmachine"
             },
+            "customSearchEngine": {
+                "title": "Aangepaste zoekmachine",
+                "input": "URL met %s in plaats van de zoekopdracht"
+            },
             "open": {
                 "title": "Open",
                 "options": {

diff --git a/src/locales/zh.json b/src/locales/zh.json
@@ -30,6 +30,10 @@
             "searchEngine": {
                 "title": "搜索引擎"
             },
+            "customSearchEngine": {
+                "title": "自定义搜索引擎",
+                "input": "用 %s 代替查询的 URL"
+            },
             "open": {
                 "title": "打开",
                 "options": {

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -3,7 +3,6 @@ import { useGlobalState } from "@ekwoka/preact-global-state";
 import { Head } from "../components/head";
 import { Web, searchWeb } from "../components/web";
 import { SearchIcon } from "../assets/searchIcon";
-import { geSearchEngine } from "../util/getSearchEngine";
 import { CloseIcon } from "../assets/closeIcon";
 import { createBareClient } from "@tomphttp/bare-client";
 import { bare } from "../settings";
@@ -67,10 +66,10 @@ function Home() {
             if (e.target.value) {
                 switch (openUsing) {
                     case "default":
-                        await searchWeb(e.target.value, service, geSearchEngine(searchEngine), webOpen, setWebOpen, e.target, clearInput);
+                        await searchWeb(e.target.value, service, searchEngine, webOpen, setWebOpen, e.target, clearInput);
                         break;
                     case "direct":
-                        window.open(await searchURL(e.target.value, service, geSearchEngine(searchEngine)))
+                        window.open(await searchURL(e.target.value, service, searchEngine))
                         if (search && search.current) {
                             search.current.value = "";
                         }
@@ -79,7 +78,7 @@ function Home() {
                     case "about:blank":
                         const blank = window.open("")
                         if (blank) {
-                            blank.document.body.innerHTML = `<iframe style="height:100%; width: 100%; border: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: none" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" src="` + await searchURL(e.target.value, service, geSearchEngine(searchEngine)) + `"></iframe>`;
+                            blank.document.body.innerHTML = `<iframe style="height:100%; width: 100%; border: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: none" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" src="` + await searchURL(e.target.value, service, searchEngine) + `"></iframe>`;
                         }
                         if (search && search.current) {
                             search.current.value = "";
@@ -102,10 +101,10 @@ function Home() {
     async function clickSuggestion(suggestion: string) {
         switch (openUsing) {
             case "default":
-                await searchWeb(suggestion, service, geSearchEngine(searchEngine), webOpen, setWebOpen, search.current, clearInput);
+                await searchWeb(suggestion, service, searchEngine, webOpen, setWebOpen, search.current, clearInput);
                 break;
             case "direct":
-                window.open(await searchURL(suggestion, service, geSearchEngine(searchEngine)))
+                window.open(await searchURL(suggestion, service, searchEngine))
                 if (search && search.current) {
                     search.current.value = "";
                 }
@@ -114,7 +113,7 @@ function Home() {
             case "about:blank":
                 const blank = window.open("")
                 if (blank) {
-                    blank.document.body.innerHTML = `<iframe style="height:100%; width: 100%; border: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: none" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" src="` + await searchURL(suggestion, service, geSearchEngine(searchEngine)) + `"></iframe>`;
+                    blank.document.body.innerHTML = `<iframe style="height:100%; width: 100%; border: none; position: fixed; top: 0; right: 0; left: 0; bottom: 0; border: none" sandbox="allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts allow-top-navigation allow-top-navigation-by-user-activation" src="` + await searchURL(suggestion, service, searchEngine) + `"></iframe>`;
                 }
                 if (search && search.current) {
                     search.current.value = "";

diff --git a/src/pages/settings/search.tsx b/src/pages/settings/search.tsx
@@ -1,6 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { useGlobalState } from "@ekwoka/preact-global-state";
 import { SquareButton } from "../../interface/button";
+import { SquareInput } from "../../interface/input";
 import { rammerhead } from "../../settings";
 import { Obfuscated } from "../../util/obfuscate";
 import ultravioletLogo from "../../assets/services/ultravioletLogo.png";
@@ -14,11 +15,12 @@ import { BraveLogo } from "../../assets/searchEngines/braveLogo";
 import { QwantLogo } from "../../assets/searchEngines/qwantLogo";
 import { SearXNGLogo } from "../../assets/searchEngines/searXNGLogo";
 import { EcosiaLogo } from "../../assets/searchEngines/ecosiaLogo";
+import searchEngineData from "../../assets/searchEngineData.json";
 
 function SearchSettings() {
     const { t } = useTranslation();
     const [service, setService] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
-    const [searchEngine, setSearchEngine] = useGlobalState<string>("engine", localStorage.getItem("metallic/engine") || "google");
+    const [searchEngine, setSearchEngine] = useGlobalState<string>("engine", localStorage.getItem("metallic/engine") || searchEngineData.google);
     const [openUsing, setOpenUsing] = useGlobalState<string>("open", localStorage.getItem("metallic/open") || "default");
 
     return (
@@ -42,39 +44,43 @@ function SearchSettings() {
             </section>
             <h1 class="text-4xl font-bold my-8">{t("settings.search.searchEngine.title")}</h1>
             <section class="flex flex-wrap items-center gap-3">
-                <SquareButton active={searchEngine == "google"} onClick={() => setSearchEngine("google")}>
+                <SquareButton active={searchEngine == searchEngineData.google} onClick={() => setSearchEngine(searchEngineData.google)}>
                     <GoogleLogo />
                     <span class="font-bold">Google</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "duckduckgo"} onClick={() => setSearchEngine("duckduckgo")}>
+                <SquareButton active={searchEngine == searchEngineData.duckduckgo} onClick={() => setSearchEngine(searchEngineData.duckduckgo)}>
                     <DuckDuckGoLogo />
                     <span class="font-bold">DuckDuckGo</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "bing"} onClick={() => setSearchEngine("bing")}>
+                <SquareButton active={searchEngine == searchEngineData.bing} onClick={() => setSearchEngine(searchEngineData.bing)}>
                     <BingLogo />
                     <span class="font-bold">Bing</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "yahoo"} onClick={() => setSearchEngine("yahoo")}>
+                <SquareButton active={searchEngine == searchEngineData.yahoo} onClick={() => setSearchEngine(searchEngineData.yahoo)}>
                     <YahooLogo />
                     <span class="font-bold">Yahoo</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "brave"} onClick={() => setSearchEngine("brave")}>
+                <SquareButton active={searchEngine == searchEngineData.brave} onClick={() => setSearchEngine(searchEngineData.brave)}>
                     <BraveLogo />
                     <span class="font-bold">Brave</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "qwant"} onClick={() => setSearchEngine("qwant")}>
+                <SquareButton active={searchEngine == searchEngineData.qwant} onClick={() => setSearchEngine(searchEngineData.qwant)}>
                     <QwantLogo />
                     <span class="font-bold">Qwant</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "searxng"} onClick={() => setSearchEngine("searxng")}>
+                <SquareButton active={searchEngine == searchEngineData.searxng} onClick={() => setSearchEngine(searchEngineData.searxng)}>
                     <SearXNGLogo />
                     <span class="font-bold">SearXNG</span>
                 </SquareButton>
-                <SquareButton active={searchEngine == "ecosia"} onClick={() => setSearchEngine("ecosia")}>
+                <SquareButton active={searchEngine == searchEngineData.ecosia} onClick={() => setSearchEngine(searchEngineData.ecosia)}>
                     <EcosiaLogo />
                     <span class="font-bold">Ecosia</span>
                 </SquareButton>
             </section>
+            <h1 class="text-4xl font-bold my-8"><Obfuscated>{t("settings.search.customSearchEngine.title")}</Obfuscated></h1>
+            <section class="flex flex-wrap items-center gap-3">
+                <SquareInput placeholder={t("settings.search.customSearchEngine.input")} value={searchEngine} onInput={(e: any) => setSearchEngine(e.target.value)} />
+            </section>
             <h1 class="text-4xl font-bold my-8">{t("settings.search.open.title")}</h1>
             <section class="flex flex-wrap items-center gap-3">
                 <SquareButton active={openUsing == "default"} onClick={() => setOpenUsing("default")}>

diff --git a/src/util/getSearchEngine.ts b/src/util/getSearchEngine.ts