Obfuscate keywords, fix spelling, update version

Zzza38 · Feb 16, 2024 · 934c3a4 · 934c3a4
1 parent cfac06d
commit 934c3a4
Show file tree

Hide file tree

Showing 14 changed files with 355 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -107,7 +107,6 @@
 - [ ] Apps
 - [ ] Games
 - [ ] "Open" option in settings => search with: default, direct, about:blank
-- [ ] Obfuscate keywords
 
 ### Roadmap
 The roadmap has moved [here](https://github.com/orgs/cognetwork-dev/projects/1/views/1).
diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 </p>
 
 ## Features
-- Modern, clean design
+- Modern and clean design
 - Support for many popular sites
 - Customizable interface
 - Mobile support
@@ -25,7 +25,7 @@
 
 **Run**
 
-Run `npm start` to start the server. If no build if found, Metallic will attempt to build.
+Run `npm start` to start the server. If no build folder if found, Metallic will attempt to build.
 
 **Build**
 
@@ -39,10 +39,10 @@ Run `npm run dev` to run the app in development mode. Rammerhead will not work i
 
 **Themes**
 
-Themes can be changed from the [/src/themes.json](https://github.com/cognetwork-dev/Metallic/blob/main/src/themes.json) file. The file should be an array of objects using the format below.
+Themes can be configured from the [/src/themes.json](https://github.com/cognetwork-dev/Metallic/blob/main/src/themes.json) file. The file should be an array of objects using the format below.
 
 > [!IMPORTANT]  
-> Themes file will validated before building, starting the server, or starting the dev server.
+> Themes file will be validated before building, starting the server, or the dev server.
 
 ```yaml
 {

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "metallic",
-  "version": "2.0-beta",
+  "version": "2.0.0",
   "description": "A powerful web proxy built for speed and customization.",
   "repository": "https://github.com/cognetwork-dev/Metallic",
   "license": "MIT",
@@ -17,6 +17,7 @@
     "@ekwoka/preact-global-state": "^2.0.0",
     "@tomphttp/bare-client": "^2.2.0-alpha",
     "@tomphttp/bare-server-node": "^2.0.1",
+    "clsx": "^2.1.0",
     "ejs": "^3.1.9",
     "express": "^4.18.2",
     "hidden-from-bots-react": "^1.0.0",
@@ -26,6 +27,7 @@
     "preact": "^10.19.3",
     "preact-router": "^4.1.2",
     "rammerhead": "https://github.com/holy-unblocker/rammerhead/releases/download/v1.2.41-holy.5/rammerhead-1.2.41-holy.5.tgz",
+    "random-seed": "^0.3.0",
     "react-i18next": "^14.0.0",
     "tsx": "^4.7.0",
     "vite-plugin-minify": "^1.5.2",

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -1,15 +1,16 @@
 import { github, discord } from "../settings";
+import { Obfuscated } from "../util/obfuscate";
 
 function Footer() {
     return (
         <footer class="footer px-7 mt-auto mb-5 select-none flex items-center justify-between">
             <div>
-                © Metallic 2022 - {new Date().getFullYear()}
+                <Obfuscated>© Metallic 2022</Obfuscated> - {new Date().getFullYear()}
             </div>
             <div class="flex items-center justify-center gap-1.5">
-                <a class="hover:underline" href={github}>GitHub</a>
+                <a class="hover:underline" href={github}><Obfuscated>GitHub</Obfuscated></a>
                 <span>/</span>
-                <a class="hover:underline" href={discord}>Discord</a>
+                <a class="hover:underline" href={discord}><Obfuscated>Discord</Obfuscated></a>
                 <span>/</span>
                 <a class="hover:underline" href="/privacy">Privacy</a>
             </div>

diff --git a/src/components/nav.tsx b/src/components/nav.tsx
@@ -6,6 +6,7 @@ import { HomeIcon } from "../assets/homeIcon";
 import { AppsIcon } from "../assets/appsIcon";
 import { GamesIcon } from "../assets/gamesIcon";
 import { SettingsIcon } from "../assets/settingsIcon";
+import { Obfuscated } from '../util/obfuscate';
 
 function Nav() {
     const { t } = useTranslation();
@@ -31,7 +32,7 @@ function Nav() {
                 <Link href="/games">
                     <Button active={true}>
                         <GamesIcon />
-                        <span class="font-bold sr-only sm:not-sr-only">{t("nav.games")}</span>
+                        <span class="font-bold sr-only sm:not-sr-only"><Obfuscated>{t("nav.games")}</Obfuscated></span>
                     </Button>
                 </Link>
                 <Link href="/settings/search">

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,5 +1,6 @@
 import { render } from 'preact';
 import { Router, Route } from 'preact-router';
+import { ObfuscateLayout } from './util/obfuscate';
 
 import { Home } from "./pages/home";
 import { Settings } from './pages/settings';
@@ -15,6 +16,7 @@ import './style/index.css';
 function App() {
     return (
         <>
+            <ObfuscateLayout />
             <Nav />
             <main class="main p-7">
                 <Router>

diff --git a/src/pages/home.tsx b/src/pages/home.tsx
@@ -7,6 +7,7 @@ import { geSearchEngine } from "../util/getSearchEngine";
 import { CloseIcon } from "../assets/closeIcon";
 import { createBareClient } from "@tomphttp/bare-client";
 import { bare } from "../settings";
+import { Obfuscated } from "../util/obfuscate";
 
 function Home() {
     const [service] = useGlobalState<string>("service", localStorage.getItem("metallic/service") || "ultraviolet");
@@ -85,11 +86,11 @@ function Home() {
             <Web open={webOpen} setOpen={setWebOpen} />
             {theme == "hub" ? (
                 <h1 class="title mt-32 mb-8 sm:mb-16 flex items-center justify-center">
-                    <span class="text-4xl sm:text-6xl font-bold text-center font-title">Metal</span>
-                    <span class="text-4xl sm:text-6xl font-bold text-center font-title bg-secondary rounded p-1 ml-1 text-textInverse">lic</span>
+                    <span class="text-4xl sm:text-6xl font-bold text-center font-title"><Obfuscated>Metal</Obfuscated></span>
+                    <span class="text-4xl sm:text-6xl font-bold text-center font-title bg-secondary rounded p-1 ml-1 text-textInverse"><Obfuscated>lic</Obfuscated></span>
                 </h1>
             ) : (
-                <h1 class="title text-4xl sm:text-6xl font-bold text-center mt-32 mb-8 sm:mb-16 font-title">Metallic</h1>
+                <h1 class="title text-4xl sm:text-6xl font-bold text-center mt-32 mb-8 sm:mb-16 font-title"><Obfuscated>Metallic</Obfuscated></h1>
             )}
             <div class="flex flex-col items-center justify-center">
                 <div class={"bg-secondary w-[600px] h-14 flex items-center justify-center" + (suggestions.length ? " rounded-[28px_28px_0_0]" : " rounded-full")}>
@@ -104,7 +105,7 @@ function Home() {
                 </div>
                 <div class={"bg-secondary rounded-[0_0_28px_28px] w-[600px]" + (!suggestions.length ? " hidden" : "")}>
                     {suggestions.map((suggestion: string) => (
-                        <div onClick={() => clickSuggestion(suggestion)} class="h-14 flex items-center cursor-pointer px-4 select-none" key={suggestion}>{suggestion}</div>
+                        <div onClick={() => clickSuggestion(suggestion)} class="h-14 flex items-center cursor-pointer px-4 select-none" key={suggestion}><Obfuscated>{suggestion}</Obfuscated></div>
                     ))}
                 </div>
             </div>

diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
@@ -6,6 +6,7 @@ import { SearchIcon } from "../assets/searchIcon";
 import { TabIcon } from "../assets/tabIcon";
 import { AppearanceIcon } from "../assets/appearanceIcon";
 import { LocaleIcon } from "../assets/localeIcon";
+import { Obfuscated } from "../util/obfuscate";
 
 import { AppearanceSettings } from "./settings/appearance";
 import { SearchSettings } from "./settings/search";
@@ -22,19 +23,19 @@ function Settings() {
                 <aside class="flex flex-col gap-4 sticky top-[108px] self-start">
                     <Link activeClassName="bg-secondary text-textInverse settingsButtonActive" class="settingsButton rounded-lg px-4 py-2 select-none cursor-pointer h-10 flex items-center gap-1.5 w-auto sm:w-72" href="/settings/search">
                         <SearchIcon />
-                        <span class="font-bold sr-only sm:not-sr-only">{t("settings.tabs.search")}</span>
+                        <span class="font-bold sr-only sm:not-sr-only"><Obfuscated>{t("settings.tabs.search")}</Obfuscated></span>
                     </Link>
                     <Link activeClassName="bg-secondary text-textInverse settingsButtonActive" class="settingsButton rounded-lg px-4 py-2 select-none cursor-pointer h-10 flex items-center gap-1.5 w-auto sm:w-72" href="/settings/tab">
                         <TabIcon />
-                        <span class="font-bold #555 sr-only sm:not-sr-only">{t("settings.tabs.tab")}</span>
+                        <span class="font-bold #555 sr-only sm:not-sr-only"><Obfuscated>{t("settings.tabs.tab")}</Obfuscated></span>
                     </Link>
                     <Link activeClassName="bg-secondary text-textInverse settingsButtonActive" class="settingsButton rounded-lg px-4 py-2 select-none cursor-pointer h-10 flex items-center gap-1.5 w-auto sm:w-72" href="/settings/appearance">
                         <AppearanceIcon />
-                        <span class="font-bold #555 sr-only sm:not-sr-only">{t("settings.tabs.appearance")}</span>
+                        <span class="font-bold #555 sr-only sm:not-sr-only"><Obfuscated>{t("settings.tabs.appearance")}</Obfuscated></span>
                     </Link>
                     <Link activeClassName="bg-secondary text-textInverse settingsButtonActive" class="settingsButton rounded-lg px-4 py-2 select-none cursor-pointer h-10 flex items-center gap-1.5 w-auto sm:w-72" href="/settings/locale">
                         <LocaleIcon />
-                        <span class="font-bold #555 sr-only sm:not-sr-only">{t("settings.tabs.locale")}</span>
+                        <span class="font-bold #555 sr-only sm:not-sr-only"><Obfuscated>{t("settings.tabs.locale")}</Obfuscated></span>
                     </Link>
                 </aside>
                 <section>

diff --git a/src/pages/settings/appearance.tsx b/src/pages/settings/appearance.tsx
@@ -2,6 +2,7 @@ import { useGlobalState } from "@ekwoka/preact-global-state";
 import { useTranslation } from "react-i18next";
 import { SquareButton } from "../../interface/button";
 import themes from "../../themes.json"
+import { Obfuscated } from "../../util/obfuscate";
 
 function AppearanceSettings() {
     const { t } = useTranslation();
@@ -14,7 +15,7 @@ function AppearanceSettings() {
                 {themes.map((themeItem: any) => (
                     <SquareButton active={theme == themeItem.id} onClick={() => setTheme(themeItem.id)}>
                         <div class="w-4 h-4 rounded-full" style={{ background: themeItem.theme.primary }}></div>
-                        <span class="font-bold">{themeItem.name}</span>
+                        <span class="font-bold"><Obfuscated>{themeItem.name}</Obfuscated></span>
                     </SquareButton>
                 ))}
             </section>

diff --git a/src/pages/settings/search.tsx b/src/pages/settings/search.tsx
@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { useGlobalState } from "@ekwoka/preact-global-state";
 import { SquareButton } from "../../interface/button";
 import { rammerhead } from "../../settings";
+import { Obfuscated } from "../../util/obfuscate";
 import ultravioletLogo from "../../assets/services/ultravioletLogo.png";
 import dynamicLogo from "../../assets/services/dynamicLogo.png";
 import rammerheadLogo from "../../assets/services/rammerheadLogo.png";
@@ -25,16 +26,16 @@ function SearchSettings() {
             <section class="flex flex-wrap items-center gap-3">
                 <SquareButton active={service == "ultraviolet"} onClick={() => setService("ultraviolet")}>
                     <img draggable={false} height="24" width="24" src={ultravioletLogo} loading="lazy" />
-                    <span class="font-bold">Ultraviolet</span>
+                    <span class="font-bold"><Obfuscated>Ultraviolet</Obfuscated></span>
                 </SquareButton>
                 <SquareButton active={service == "dynamic"} onClick={() => setService("dynamic")}>
                     <img draggable={false} height="24" width="24" src={dynamicLogo} loading="lazy" />
-                    <span class="font-bold">Dynamic</span>
+                    <span class="font-bold"><Obfuscated>Dynamic</Obfuscated></span>
                 </SquareButton>
                 {rammerhead ? (
                     <SquareButton active={service == "rammerhead"} onClick={() => setService("rammerhead")}>
                         <img draggable={false} height="24" width="24" src={rammerheadLogo} loading="lazy" />
-                        <span class="font-bold">Rammerhead</span>
+                        <span class="font-bold"><Obfuscated>Rammerhead</Obfuscated></span>
                     </SquareButton>
                 ) : null}
             </section>

diff --git a/src/pages/settings/tab.tsx b/src/pages/settings/tab.tsx
@@ -10,6 +10,7 @@ import googleClassroomLogo from "../../assets/cloakingIcons/googleclassroom.png"
 import khanAcademyLogo from "../../assets/cloakingIcons/khanacademy.ico";
 import googleDriveLogo from "../../assets/cloakingIcons/googledrive.png";
 import edpuzzleLogo from "../../assets/cloakingIcons/edpuzzle.png";
+import { Obfuscated } from "../../util/obfuscate";
 
 function TabSettings() {
     const { t } = useTranslation();
@@ -27,7 +28,7 @@ function TabSettings() {
 
     return (
         <>
-            <h1 class="text-4xl font-bold mb-8">{t("settings.tab.tabMask.title")}</h1>
+            <h1 class="text-4xl font-bold mb-8"><Obfuscated>{t("settings.tab.tabMask.title")}</Obfuscated></h1>
             <section class="flex flex-wrap items-center gap-3">
                 <RoundButton active={title == "" && icon == ""} onClick={() => resetTab()}>
                     <CloseIcon />
@@ -54,7 +55,7 @@ function TabSettings() {
                     <img draggable={false} height="24" width="24" src={edpuzzleLogo} loading="lazy" />
                 </RoundButton>
             </section>
-            <h1 class="text-4xl font-bold my-8">{t("settings.tab.customTabMask.title")}</h1>
+            <h1 class="text-4xl font-bold my-8"><Obfuscated>{t("settings.tab.customTabMask.title")}</Obfuscated></h1>
             <section class="flex flex-wrap items-center gap-3">
                 <SquareInput placeholder={t("settings.tab.customTabMask.titleInput")} value={title} onInput={(e: any) => setTitle(e.target.value)} />
                 <SquareInput placeholder={t("settings.tab.customTabMask.iconInput")} value={icon} onInput={(e: any) => setIcon(e.target.value)} />

diff --git a/src/settings.ts b/src/settings.ts
@@ -1,7 +1,8 @@
 const bare = new URL("/bare/", window.location.href);
+const obfuscate = true;
 const rammerhead = true;
 const github = "https://github.com/cognetwork-dev/Metallic";
 const discord = "https://discord.com/invite/yk33HZSZkU";
 const privacyPolicyUpdated = 1707797140659;
 
-export { bare, rammerhead, github, discord, privacyPolicyUpdated };
+export { bare, obfuscate, rammerhead, github, discord, privacyPolicyUpdated };