File size: 7,351 Bytes
01fcadf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
---
import Logo from "@components/Logo.astro";
import Layout from "@layouts/Layout.astro";
import { getLangFromUrl, useTranslations } from "../../i18n/utils";
export function getStaticPaths() {
const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
return STATIC_PATHS;
}
export const prerender = true;
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
import { VERSION } from "astro:env/client";
---
<Layout title="Nebula">
<div
class="flex flex-wrap mt-16 justify-center content-center w-full bg-primary fixed inset-0 h-[calc(100%-4rem)] z-0 flex-col items-center"
>
<div
class="w-full flex flex-col justify-center items-center content-center h-2/4"
>
<div class="flex flex-row items-center mb-8">
<div class="h-32 w-32 fill-navbar-text-color">
<Logo />
</div>
<h1
class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
>
nebula.
</h1>
</div>
<input
id="nebula-input"
class="transition-all duration-300 font-roboto h-14 rounded-t-2xl w-10/12 rounded-b-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text roboto focus:outline-none md:w-3/12"
placeholder={t("home.placeholder")}
/>
<div
id="omnibox"
class="hidden p-1 transition-all duration-300 flex flex-col w-10/12 md:w-3/12 h-full flex-grow bg-input text-center items-center rounded-b-2xl border-input-border-color border-b border-r border-l"
>
</div>
</div>
<iframe
id="neb-iframe"
class="hidden z-100 w-full h-full absolute top-0 bottom-0 bg-primary"
src="/loading"></iframe>
<div
id="version"
class="flex flex-row w-full absolute bottom-4 pr-4 pl-4 text-text-color h-6 justify-between font-roboto"
>
<p>Version: {VERSION}</p>
<p>© Nebula Services 2024</p>
</div>
</div>
</Layout>
<script>
import { setTransport, getSWStuff } from "@utils/registerSW"; //../../utils/registerSW.ts
import { pageLoad } from "@utils/events";
import { SupportedSites } from "@utils/siteSupport";
import {
SearchEngines,
Settings,
cloak,
settings,
} from "@utils/settings/index";
import { search } from "@utils/search"; //../../utils/search.ts
import { BareClient } from "@mercuryworkshop/bare-mux";
type Suggestion = {
phrase: string;
};
async function proxy(term: string) {
const searchEngine = localStorage.getItem(
Settings.ProxySettings.searchEngine
);
const openIn = localStorage.getItem(Settings.ProxySettings.openIn);
let proxyUrl: any =
__uv$config!.prefix +
__uv$config.encodeUrl!(
search(
term,
searchEngine ? SearchEngines[searchEngine] : SearchEngines.ddg
)
);
if (openIn === "a:b" || openIn === "blob") {
return cloak(
openIn as string,
"https://google.com",
`${window.location.origin}${proxyUrl}`
);
} else if (openIn === "direct") {
return (window.location.href = proxyUrl as string);
} else {
return proxyUrl;
}
}
async function uv(iframe: HTMLIFrameElement, term: string) {
const { sw, conn } = getSWStuff();
await setTransport(
conn,
localStorage.getItem(Settings.ProxySettings.transport) as string
);
await settings.marketPlaceSettings.handlePlugins(sw);
iframe.classList.remove("hidden");
const url = await proxy(term);
if (url) {
iframe.src = url;
}
}
//we need to rerun this on every page load
pageLoad(async () => {
const input = document.getElementById("nebula-input") as HTMLInputElement;
const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
const omnibox = document.getElementById("omnibox") as HTMLDivElement;
const copyright = document.getElementById("version") as HTMLDivElement;
const client = new BareClient();
input?.addEventListener("keypress", async function (event: any) {
if (event.key === "Enter") {
copyright.classList.add("hidden");
if (
localStorage.getItem(Settings.ProxySettings.proxy) === "automatic"
) {
const key = SupportedSites[input?.value];
switch (key) {
case "uv":
uv(iframe, input?.value);
break;
default:
uv(iframe, input?.value);
break;
}
} else if (
localStorage.getItem(Settings.ProxySettings.proxy) === "uv"
) {
uv(iframe, input?.value);
}
}
});
input?.addEventListener("input", async function () {
omnibox.innerHTML = "";
const value = input?.value;
input.classList.remove("rounded-b-2xl");
omnibox.classList.remove("hidden");
if (value.length === 0) {
input.classList.add("rounded-b-2xl");
omnibox.classList.add("hidden");
}
if (value.length >= 3) {
const data = await client.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`);
const dataRes = await data.json();
const filteredData = dataRes.slice(0, 8); //Trim to only about 8 results. Any more and our omnibox dies
if (filteredData) {
omnibox.innerHTML = "";
filteredData.map((results: Suggestion) => {
let span = document.createElement("span");
let pTag = document.createElement("p");
span.classList.add(
"cursor-pointer",
"font-roboto",
"border-b",
"border-input-border-color",
"last:rounded-b-xl",
"last:border-none",
"text-ellipsis",
"whitespace-nowrap",
"w-full",
"text-input-text",
"h-9",
"text-xl",
"text-align-center",
"overflow-hidden",
"flex",
"items-center",
"justify-center",
"hover:bg-lighter",
"active:bg-primary"
);
span.addEventListener("click", function () {
//When the box is clicked, we want to fill the omnibox and hit enter. This allows us to re-use the existing event listener on the input.
const event = new KeyboardEvent("keypress", {
key: "Enter",
code: "Enter",
which: 13,
keyCode: 13,
});
input.value = results.phrase;
input.dispatchEvent(event);
});
pTag.classList.add(
"cursor-pointer",
"text-ellipsis",
"text-center",
"w-full",
"overflow-hidden",
"whitespace-nowrap"
);
pTag.innerText = results.phrase;
span.appendChild(pTag);
omnibox.appendChild(span);
});
}
}
});
});
</script>
|