Spaces:
Paused
Paused
File size: 7,297 Bytes
46c7a16 | 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 | ---
import { Icon } from 'astro-icon/components';
import FrameManager from '@components/FrameManager.astro';
---
<FrameManager />
<div class="flex grow flex-row justify-left items-center">
<a aria-label="home" href="/" class="ml-0 inline no-underline mx-[20px] text-[20px] cursor-pointer">
<svg class="w-[35px] h-[35px]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 365.37 365.37"><defs> <style> .cls-1{ fill:none; stroke-width:18px;} .cls-1, .cls-2 { stroke: var(--accent); stroke-miterlimit:10;} .cls-2 { fill: var(--accent); stroke-width:5px;} </style> </defs><circle class="cls-1" cx="182.68" cy="182.68" r="173.68"></circle><path class="cls-2" d="M210.41,66.38A115.27,115.27,0,0,1,70.52,248.19,134,134,0,1,0,210.41,66.38Z" transform="translate(-17.32 -17.32)"></path></svg>
</a>
<div id="form-stuff" class="flex grow flex-col transition-all duration-200">
<div class="flex flex-row">
<input class="flex grow h-[42px] text-[14px] border-none bg-inherit outline-none" id="form-input" form="search-form" placeholder="Search the web"></input>
<button aria-label="submit form" class="h-[14px] bg-transparent submit border-none p-[10px] cursor-pointer text-[--accent]" id="form-submit" form="search-form">
<Icon name="fa-solid:search" />
</button>
</div>
<div id="search-suggestions" class="hidden w-full flex flex-col"></div>
</div>
<script>
import { BareClient } from "@mercuryworkshop/bare-mux";
//simple script I wrote so I don't have to repeat myself (located at: src/ts/serviceWorker.ts)
import { initServiceWorker } from "@scripts/serviceWorker.ts";
let scram: typeof ScramjetController;
//sets the style of the iframe and enables the little panel at the top
async function prox(term: string, sj?: typeof ScramjetController) {
let url;
if (localStorage.getItem("incog||proxy") === "uv") {
url = __uv$config!.prefix + __uv$config.encodeUrl!(search(term, localStorage.getItem("incog||search") as string))
}
else if (localStorage.getItem("incog||proxy") === "sj") {
url = sj.encodeUrl(search(term, localStorage.getItem("incog||search") as string));
}
const iframe = document.getElementById("iframe") as HTMLIFrameElement;
const frameManager = document.getElementById("framemanager") as HTMLElement;
frameManager.classList.remove("hidden");
iframe.classList.remove("hidden");
iframe.src = url as string || "/load";
if (!iframe) {
return;
}
}
document.addEventListener("DOMContentLoaded", async () => {
scram = initServiceWorker().then(async (sj): Promise<typeof ScramjetController> => {
console.log('SW active');
return sj;
});
});
//define all of our events and if there is a link proxy it and set the history to /
document.addEventListener("astro:page-load", async function () {
let links: URLSearchParams = new URLSearchParams(window.location.search);
const link = links.get('link');
const client = new BareClient();
scram = await scram;
//this is in a try {} catch {} as to not pollute the console with errors
//it will error due to this running on every page and not just this one
try {
if (link) {
prox(search(localStorage.getItem("incog||proxy") === "uv" ? __uv$config.decodeUrl!(link): scram.decodeUrl(link), localStorage.getItem("incog||search") as string), scram);
history.pushState({}, "", "/");
}
const formInput = document.getElementById("form-input") as HTMLInputElement;
document.getElementById("form-submit")?.addEventListener("click", async function () {
const iframe = document.getElementById("iframe") as HTMLIFrameElement;
if (!iframe) {
return;
}
prox(formInput?.value, scram);
})
document.getElementById("form-input")?.addEventListener("keypress", async function (event: any) {
if (event.key === "Enter") {
const iframe = document.getElementById("iframe") as HTMLIFrameElement;
if (!iframe) {
return;
}
prox(formInput?.value, scram);
}
})
document.getElementById("form-input")?.addEventListener("input", async function() {
document.getElementById("form-stuff")?.classList.add("absolute", "top-0", "left-0", "w-full", "h-full", "px-[15%]", "bg-[--background]");
document.getElementById("form-input")?.classList.add("h-[80px]");
document.getElementById("form-submit")?.classList.remove("h-[14px]");
document.getElementById("form-submit")?.classList.add("h-[80px]");
document.getElementById("search-suggestions")?.classList.remove("hidden")
const value = formInput?.value
if (value.length === 0) {
document.getElementById("form-stuff")?.classList.remove("absolute", "top-0", "left-0", "w-full", "h-full", "px-[15%]", "bg-[--background]");
document.getElementById("form-input")?.classList.remove("h-[80px]");
document.getElementById("form-submit")?.classList.add("h-[14px]");
document.getElementById("form-submit")?.classList.remove("h-[80px]");
document.getElementById("search-suggestions")?.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();
if (dataRes) {
const searchSuggestions = document.getElementById("search-suggestions") as HTMLElement
searchSuggestions.innerHTML = "";
dataRes.map((results: Suggestion) => {
let span = document.createElement("span")
span.classList.add("border-t-[1px]", "border-t-[--border-color]", "cursor-pointer", "hover:brightness-75", "text-[20px]", "py-[35px]");
span.id = "search-result"
span.innerText = results.phrase;
span.addEventListener("click", function() {
prox(results.phrase)
})
searchSuggestions.appendChild(span);
})
}
}
})
} catch (_) {}
})
</script>
</div>
|