mirror of
https://github.com/NebulaServices/Nebula.git
synced 2025-05-13 03:50:02 -04:00
fix font
This commit is contained in:
parent
835cb237d7
commit
fc414951d1
6 changed files with 4728 additions and 5425 deletions
|
@ -31,8 +31,6 @@
|
|||
"@mercuryworkshop/epoxy-transport": "2.1.13",
|
||||
"@mercuryworkshop/libcurl-transport": "^1.3.10",
|
||||
"@playform/compress": "^0.1.4",
|
||||
"@rubynetwork/rammerhead": "^1.3.5",
|
||||
"@rubynetwork/rammerhead-browser": "^1.0.9",
|
||||
"@titaniumnetwork-dev/ultraviolet": "^3.2.7",
|
||||
"@svelte-drama/suspense": "0.5.1",
|
||||
"@types/node": "^22.7.5",
|
||||
|
|
9640
pnpm-lock.yaml
generated
9640
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load diff
|
@ -1,19 +1,25 @@
|
|||
:root {
|
||||
--background-primary: #191724;
|
||||
--background-lighter: #16121f;
|
||||
--navbar-color: #26233a;
|
||||
--navbar-height: 60px;
|
||||
--navbar-text-color: #7967dd;
|
||||
--navbar-link-color: #e0def4;
|
||||
--navbar-link-hover-color: gray;
|
||||
--navbar-font: "Roboto";
|
||||
--input-text-color: #e0def4;
|
||||
--input-placeholder-color: white;
|
||||
--input-background-color: #1f1d2e;
|
||||
--input-border-color: #eb6f92;
|
||||
--input-border-size: 1.3px;
|
||||
--navbar-logo-filter: none;
|
||||
--dropdown-option-hover-color: #312a49;
|
||||
--tab-color: var(--black);
|
||||
--border-color: #16121f;
|
||||
--background-primary: #191724;
|
||||
--background-lighter: #16121f;
|
||||
--navbar-color: #26233a;
|
||||
--navbar-height: 60px;
|
||||
--navbar-text-color: #7967dd;
|
||||
--navbar-link-color: #e0def4;
|
||||
--navbar-link-hover-color: gray;
|
||||
--navbar-font: "Roboto";
|
||||
--input-text-color: #e0def4;
|
||||
--input-placeholder-color: white;
|
||||
--input-background-color: #1f1d2e;
|
||||
--input-border-color: #eb6f92;
|
||||
--input-border-size: 1.3px;
|
||||
--navbar-logo-filter: none;
|
||||
--dropdown-option-hover-color: #312a49;
|
||||
--tab-color: var(--black);
|
||||
--border-color: #16121f;
|
||||
}
|
||||
|
||||
.roboto {
|
||||
font-family: "Roboto", sans-serif;
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
|
@ -1,43 +1,33 @@
|
|||
import { createServer } from "node:http";
|
||||
import rammerhead from "@rubynetwork/rammerhead";
|
||||
import { FastifyServerFactory, FastifyServerFactoryHandler, RawServerDefault } from "fastify";
|
||||
import {
|
||||
FastifyServerFactory,
|
||||
FastifyServerFactoryHandler,
|
||||
RawServerDefault,
|
||||
} from "fastify";
|
||||
import wisp from "wisp-server-node";
|
||||
import { LOG_LEVEL, WispOptions } from "wisp-server-node/dist/Types.js";
|
||||
import { parsedDoc } from "./config.js";
|
||||
|
||||
const rh = rammerhead.createRammerhead({
|
||||
logLevel: parsedDoc.server.server.logging ? "debug" : "disabled",
|
||||
reverseProxy: parsedDoc.server.rammerhead.reverseproxy,
|
||||
disableLocalStorageSync: parsedDoc.server.rammerhead.localstorage_sync ? false : true,
|
||||
disableHttp2: parsedDoc.server.rammerhead.http2 ? false : true
|
||||
});
|
||||
|
||||
const wispOptions: WispOptions = {
|
||||
logLevel: parsedDoc.server.server.logging ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE,
|
||||
pingInterval: 30
|
||||
logLevel: parsedDoc.server.server.logging ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE,
|
||||
pingInterval: 30,
|
||||
};
|
||||
|
||||
const serverFactory: FastifyServerFactory = (
|
||||
handler: FastifyServerFactoryHandler
|
||||
handler: FastifyServerFactoryHandler
|
||||
): RawServerDefault => {
|
||||
const httpServer = createServer();
|
||||
httpServer.on("request", (req, res) => {
|
||||
if (rammerhead.shouldRouteRh(req)) {
|
||||
rammerhead.routeRhRequest(rh, req, res);
|
||||
} else {
|
||||
handler(req, res);
|
||||
}
|
||||
});
|
||||
httpServer.on("upgrade", (req, socket, head) => {
|
||||
if (rammerhead.shouldRouteRh(req)) {
|
||||
rammerhead.routeRhUpgrade(rh, req, socket, head);
|
||||
} else if (parsedDoc.server.server.wisp) {
|
||||
if (req.url?.endsWith("/wisp/")) {
|
||||
wisp.routeRequest(req, socket as any, head, wispOptions);
|
||||
}
|
||||
}
|
||||
});
|
||||
return httpServer;
|
||||
const httpServer = createServer();
|
||||
httpServer.on("request", (req, res) => {
|
||||
handler(req, res);
|
||||
});
|
||||
httpServer.on("upgrade", (req, socket, head) => {
|
||||
if (parsedDoc.server.server.wisp) {
|
||||
if (req.url?.endsWith("/wisp/")) {
|
||||
wisp.routeRequest(req, socket as any, head, wispOptions);
|
||||
}
|
||||
}
|
||||
});
|
||||
return httpServer;
|
||||
};
|
||||
|
||||
export { serverFactory };
|
||||
|
|
|
@ -4,8 +4,8 @@ import Header from "@components/Header.astro";
|
|||
import MobileNavigation from "@components/MobileNavigation.astro";
|
||||
import SettingsLoader from "@components/settings/Loader.astro";
|
||||
interface Props {
|
||||
title: string;
|
||||
noHeader?: string;
|
||||
title: string;
|
||||
noHeader?: string;
|
||||
}
|
||||
|
||||
const { title, noHeader } = Astro.props;
|
||||
|
@ -17,7 +17,7 @@ const { title, noHeader } = Astro.props;
|
|||
<SettingsLoader transition:persist />
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="description" content="Astro description" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" id="favicon" />
|
||||
<link
|
||||
rel="stylesheet"
|
||||
|
@ -30,14 +30,20 @@ const { title, noHeader } = Astro.props;
|
|||
href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap"
|
||||
as="style"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link rel="preload" href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
|
||||
/>
|
||||
<link
|
||||
rel="preload"
|
||||
href="https://fonts.gstatic.com/s/roboto/v32/KFOmCnqEu92Fr1Mu4mxK.woff2"
|
||||
as="font"
|
||||
type="font/woff2"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<meta name="generator" content={Astro.generator} />
|
||||
<title>{title}</title>
|
||||
<ViewTransitions />
|
||||
</head>
|
||||
<body class="h-full bg-primary">
|
||||
{!noHeader && <Header /> }
|
||||
{!noHeader && <Header />}
|
||||
<div class="h-full z-10 w-full fixed">
|
||||
<slot />
|
||||
</div>
|
||||
|
@ -82,70 +88,67 @@ const { title, noHeader } = Astro.props;
|
|||
});
|
||||
</script>
|
||||
<style>
|
||||
#mobileNavMenu {
|
||||
-webkit-transition-duration: 600ms;
|
||||
transition-duration: 600ms;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
#mobileNavMenu {
|
||||
-webkit-transition-duration: 600ms;
|
||||
transition-duration: 600ms;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style is:global>
|
||||
.roboto {
|
||||
font-family: var(--font-family), Roboto;
|
||||
}
|
||||
/* Custom scrollbar because the default ones look like ASS */
|
||||
::-webkit-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-moz-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-moz-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-moz-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-moz-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-ms-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-ms-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-ms-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-ms-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-o-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-o-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-o-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-o-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
</style>
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-moz-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-moz-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-moz-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-moz-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-ms-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-ms-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-ms-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-ms-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
::-o-scrollbar {
|
||||
width: 0.5rem;
|
||||
height: 0.5rem;
|
||||
}
|
||||
::-o-scrollbar-track {
|
||||
background: var(--navbar-color);
|
||||
}
|
||||
::-o-scrollbar-thumb {
|
||||
background: var(--navbar-text-color);
|
||||
}
|
||||
::-o-scrollbar-thumb:hover {
|
||||
background: var(--navbar-link-color);
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -3,8 +3,11 @@ 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;
|
||||
const STATIC_PATHS = [
|
||||
{ params: { lang: "en_US" } },
|
||||
{ params: { lang: "jp" } },
|
||||
];
|
||||
return STATIC_PATHS;
|
||||
}
|
||||
export const prerender = true;
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
|
@ -13,13 +16,19 @@ 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-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 font-bold text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto">
|
||||
<h1
|
||||
class="font-roboto whitespace-nowrap text-navbar-text-color sm:visible text-5xl sm:text-7xl roboto"
|
||||
>
|
||||
nebula.
|
||||
</h1>
|
||||
</div>
|
||||
|
@ -37,163 +46,188 @@ import { VERSION } from "astro:env/client";
|
|||
<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>
|
||||
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 { initSw, setTransport, loadProxyScripts } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
|
||||
import { pageLoad } from "@utils/events";
|
||||
import { initSw, setTransport, loadProxyScripts } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
|
||||
import { pageLoad } from "@utils/events";
|
||||
import { RammerheadEncode } from "@rubynetwork/rammerhead-browser";
|
||||
import { SupportedSites } from "@utils/siteSupport";
|
||||
import {
|
||||
SearchEngines,
|
||||
Settings,
|
||||
cloak,
|
||||
settings
|
||||
cloak,
|
||||
settings,
|
||||
} from "@utils/settings/index";
|
||||
import { search } from "@utils/search.ts"; //../../utils/search.ts
|
||||
import { client as libcurlClient } from "@utils/libcurl";
|
||||
import { client as libcurlClient } from "@utils/libcurl";
|
||||
type Suggestion = {
|
||||
phrase: string;
|
||||
};
|
||||
async function proxy(term: string, rh: boolean) {
|
||||
const searchEngine = localStorage.getItem(Settings.ProxySettings.searchEngine);
|
||||
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));
|
||||
let proxyUrl: any =
|
||||
__uv$config!.prefix +
|
||||
__uv$config.encodeUrl!(
|
||||
search(
|
||||
term,
|
||||
searchEngine ? SearchEngines[searchEngine] : SearchEngines.ddg
|
||||
)
|
||||
);
|
||||
if (rh) {
|
||||
proxyUrl = await RammerheadEncode(search(term, searchEngine ? SearchEngines[searchEngine] : SearchEngines.ddg));
|
||||
proxyUrl = await RammerheadEncode(
|
||||
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 cloak(
|
||||
openIn as string,
|
||||
"https://google.com",
|
||||
`${window.location.origin}${proxyUrl}`
|
||||
);
|
||||
} else if (openIn === "direct") {
|
||||
return (window.location.href = proxyUrl as string);
|
||||
}
|
||||
else {
|
||||
} else {
|
||||
return proxyUrl;
|
||||
}
|
||||
}
|
||||
async function uv(iframe: HTMLIFrameElement, term: string) {
|
||||
const conn = await loadProxyScripts();
|
||||
await setTransport(conn, localStorage.getItem(Settings.ProxySettings.transport) as string);
|
||||
const sw = await initSw();
|
||||
await settings.marketPlaceSettings.handlePlugins(sw);
|
||||
iframe.classList.remove("hidden");
|
||||
const url = await proxy(term, false);
|
||||
if (url) {
|
||||
iframe.src = url;
|
||||
}
|
||||
const conn = await loadProxyScripts();
|
||||
await setTransport(
|
||||
conn,
|
||||
localStorage.getItem(Settings.ProxySettings.transport) as string
|
||||
);
|
||||
const sw = await initSw();
|
||||
await settings.marketPlaceSettings.handlePlugins(sw);
|
||||
iframe.classList.remove("hidden");
|
||||
const url = await proxy(term, false);
|
||||
if (url) {
|
||||
iframe.src = url;
|
||||
}
|
||||
}
|
||||
async function rh(iframe: HTMLIFrameElement, term: string) {
|
||||
iframe.classList.remove("hidden");
|
||||
const url = await proxy(term, true);
|
||||
if (url) {
|
||||
iframe.src = "/" + url as string;
|
||||
iframe.src = ("/" + url) as string;
|
||||
}
|
||||
}
|
||||
//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;
|
||||
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;
|
||||
case "rh":
|
||||
rh(iframe, input?.value);
|
||||
break;
|
||||
default:
|
||||
uv(iframe, input?.value);
|
||||
break;
|
||||
}
|
||||
}
|
||||
else if (localStorage.getItem(Settings.ProxySettings.proxy) === "uv") {
|
||||
uv(iframe, input?.value);
|
||||
}
|
||||
else if (localStorage.getItem(Settings.ProxySettings.proxy) === "rh") {
|
||||
rh(iframe, input?.value);
|
||||
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;
|
||||
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;
|
||||
case "rh":
|
||||
rh(iframe, input?.value);
|
||||
break;
|
||||
default:
|
||||
uv(iframe, input?.value);
|
||||
break;
|
||||
}
|
||||
} else if (
|
||||
localStorage.getItem(Settings.ProxySettings.proxy) === "uv"
|
||||
) {
|
||||
uv(iframe, input?.value);
|
||||
} else if (
|
||||
localStorage.getItem(Settings.ProxySettings.proxy) === "rh"
|
||||
) {
|
||||
rh(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) {
|
||||
await libcurlClient.initLibcurl();
|
||||
const data = await libcurlClient.fetchFromLibcurl(
|
||||
`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`,
|
||||
'json'
|
||||
) as [];
|
||||
const filteredData = data.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);
|
||||
}
|
||||
});
|
||||
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) {
|
||||
await libcurlClient.initLibcurl();
|
||||
const data = (await libcurlClient.fetchFromLibcurl(
|
||||
`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`,
|
||||
"json"
|
||||
)) as [];
|
||||
const filteredData = data.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,
|
||||
});
|
||||
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);
|
||||
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>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue