Merge pull request #166 from cohenerickson/rewrite

Reset UV naming & route specific headers

index.html

@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="color-scheme" content="light dark" />
     <title>Nebula</title>
-    <script src="/ultra/ultra.bundle.js"></script>
+    <script src="/uv/uv.bundle.js"></script>
-    <script src="/ultra/ultra.config.js"></script>
+    <script src="/uv/uv.config.js"></script>
     <script>
       if ("serviceWorker" in navigator) {
         window.addEventListener("load", () => {

public/ultra/ultra.config.js

@@ -1,11 +0,0 @@
-self.__uv$config = {
-  prefix: "/service/",
-  bare: "/bare/",
-  encodeUrl: Ultraviolet.codec.xor.encode,
-  decodeUrl: Ultraviolet.codec.xor.decode,
-  handler: "/ultra/ultra.handler.js",
-  client: "/ultra/ultra.client.js",
-  bundle: "/ultra/ultra.bundle.js",
-  config: "/ultra/ultra.config.js",
-  sw: "/ultra/ultra.sw.js"
-};

public/uv/uv.config.js

@@ -0,0 +1,11 @@
+self.__uv$config = {
+  prefix: "/service/",
+  bare: "/bare/",
+  encodeUrl: Ultraviolet.codec.xor.encode,
+  decodeUrl: Ultraviolet.codec.xor.decode,
+  handler: "/uv/uv.handler.js",
+  client: "/uv/uv.client.js",
+  bundle: "/uv/uv.bundle.js",
+  config: "/uv/uv.config.js",
+  sw: "/uv/uv.sw.js"
+};

src/components/HeaderRoute.tsx

@@ -0,0 +1,12 @@
+import { Header } from "./Header";
+
+export function HeaderRoute(props: { children: any }) {
+  return (
+    <div class="flex h-screen flex-col">
+      <Header />
+      <div class="flex-1 bg-primary">
+        <main class="h-full">{props.children}</main>
+      </div>
+    </div>
+  );
+}

src/index.tsx

@@ -13,18 +13,11 @@ import "./i18n";
 export function App() {
   return (
     <LocationProvider>
-      <div class="flex h-screen flex-col">
+      <Router>
-        <Header />
+        <Route path="/" component={Home} />
-        <div class="flex-1 bg-primary">
+        <Route path="/discord" component={DiscordPage} />
-          <main class="h-full">
+        <Route default component={NotFound} />
-            <Router>
+      </Router>
-              <Route path="/" component={Home} />
-              <Route path="/discord" component={DiscordPage} />
-              <Route default component={NotFound} />
-            </Router>
-          </main>
-        </div>
-      </div>
     </LocationProvider>
   );
 }

src/pages/Home.tsx

@@ -1,23 +1,26 @@
 import { useState } from "preact/hooks";
 import { useTranslation } from "react-i18next";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
   const { t } = useTranslation();
 
   return (
-    <div class="flex h-full items-center justify-center">
+    <HeaderRoute>
-      <input
+      <div class="flex h-full items-center justify-center">
-        onFocus={(e) => {
+        <input
-          setIsFocused(true);
+          onFocus={(e) => {
-        }}
+            setIsFocused(true);
-        onBlur={(e) => {
+          }}
-          setIsFocused(false);
+          onBlur={(e) => {
-        }}
+            setIsFocused(false);
-        type="text"
+          }}
-        class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
+          type="text"
-        placeholder={isFocused ? "" : t("home.placeholder")}
+          class="font-roboto h-14 w-80 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none"
-      ></input>
+          placeholder={isFocused ? "" : t("home.placeholder")}
-    </div>
+        ></input>
+      </div>
+    </HeaderRoute>
   );
 }

src/pages/_404.tsx

@@ -1,22 +1,26 @@
 import { useTranslation } from "react-i18next";
 import { Link } from "preact-router";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function NotFound() {
   const { t } = useTranslation();
+
   return (
-    <section class="h-full">
+    <HeaderRoute>
-      <div class="flex h-full flex-col items-center justify-center">
+      <section class="h-full">
-        <img src="/404.png" class="h-72"></img>
+        <div class="flex h-full flex-col items-center justify-center">
-        <div class="flex flex-col items-center p-6">
+          <img src="/404.png" class="h-72"></img>
-          <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
+          <div class="flex flex-col items-center p-6">
-          <span class="font-roboto text-3xl">404</span>
+            <p class="font-roboto text-4xl font-bold">{t("404.text")}</p>
+            <span class="font-roboto text-3xl">404</span>
+          </div>
+          <Link href="/">
+            <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("404.return")}
+            </button>
+          </Link>
         </div>
-        <Link href="/">
+      </section>
-          <button class="font-roboto h-14 w-44 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+    </HeaderRoute>
-            {t("404.return")}
-          </button>
-        </Link>
-      </div>
-    </section>
   );
 }

src/pages/discord.tsx

@@ -1,25 +1,29 @@
 import { useTranslation } from "react-i18next";
+import { HeaderRoute } from "../components/HeaderRoute";
 
 export function DiscordPage() {
   const { t } = useTranslation();
+
   return (
-    <section class="h-full">
+    <HeaderRoute>
-      <div class="flex h-full flex-col items-center justify-center">
+      <section class="h-full">
-        <div class="flex flex-col items-center p-6">
+        <div class="flex h-full flex-col items-center justify-center">
-          <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
+          <div class="flex flex-col items-center p-6">
-          <span class="font-roboto text-3xl">{t("discord.sub")}</span>
+            <p class="font-roboto text-4xl font-bold">{t("discord.title")}</p>
+            <span class="font-roboto text-3xl">{t("discord.sub")}</span>
+          </div>
+          <a href="https://discord.gg/unblocker" class="p-6">
+            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("discord.button1")}
+            </button>
+          </a>
+          <a href="/" class="p-6">
+            <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+              {t("discord.button2")}
+            </button>
+          </a>
         </div>
-        <a href="https://discord.gg/unblocker" class="p-6">
+      </section>
-          <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
+    </HeaderRoute>
-            {t("discord.button1")}
-          </button>
-        </a>
-        <a href="/" class="p-6">
-          <button class="font-roboto h-14 w-56 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none">
-            {t("discord.button2")}
-          </button>
-        </a>
-      </div>
-    </section>
   );
 }

vite.config.ts

@@ -11,10 +11,7 @@ export default defineConfig({
         {
           // .replace fixes weird paths on Windows
           src: `${uvPath}/uv.*.js`.replace(/\\/g, "/"),
-          rename: (name) => {
+          dest: "uv",
-            return `${name.replace(/^uv\./, "ultra.")}.js`;
-          },
-          dest: "ultra",
           overwrite: false
         }
       ]