Fix long standing bug with settings and lint.

This commit is contained in:
wearrrrr 2024-02-20 13:58:27 -06:00
parent 1cab054da7
commit 5246e6e83b
5 changed files with 130 additions and 137 deletions

View file

@ -42,7 +42,7 @@ const rammerheadScopes = [
const rammerheadSession = /^\/[a-z0-9]{32}/;
function shouldRouteRh(req) {
const url = new URL(req.url, 'http://0.0.0.0');
const url = new URL(req.url, "http://0.0.0.0");
return rammerheadScopes.includes(url.pathname) || rammerheadSession.test(url.pathname);
}
@ -91,20 +91,19 @@ app.get("/search", async (req, res) => {
try {
const { query } = req.query;
const response = await fetch(
`http://api.duckduckgo.com/ac?q=${query}&format=json`
).then((apiRes) => apiRes.json());
const response = await fetch(`http://api.duckduckgo.com/ac?q=${query}&format=json`).then(
(apiRes) => apiRes.json()
);
res.send(response);
} catch (err) {
res.redirect(302, "/404.html");
}
});
app.get('*', function(req, res){
res.redirect(302, '/404.html');
app.get("*", function (req, res) {
res.redirect(302, "/404.html");
});
console.log(chalk.gray("Starting Alu..."));
console.log(chalk.green("Alu started successfully!"));
server.on("listening", () => {

View file

@ -29,40 +29,39 @@ const t = useTranslations(lang);
</div>
</div>
<style>
.wave-svg-container {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
overflow: hidden;
height: 300px;
filter: brightness(1.5);
}
<style>
.wave-svg-container {
bottom: 0;
left: 0;
position: absolute;
width: 100%;
z-index: -1;
overflow: hidden;
height: 300px;
filter: brightness(1.5);
}
.footer {
display: flex;
flex-direction: column;
justify-content: space-around;
color: var(--text-color);
position: relative;
padding-top: 200px;
gap: 50px;
}
.footer-top,
.footer-bottom {
width: 90%;
margin: 0 auto;
}
.footer {
display: flex;
flex-direction: column;
justify-content: space-around;
color: var(--text-color);
position: relative;
padding-top: 200px;
gap: 50px;
}
.footer-top,
.footer-bottom {
width: 90%;
margin: 0 auto;
}
.footer-title {
font-size: 20px;
}
.footer-title {
font-size: 20px;
}
a {
color: var(--text-color);
}
</style>
</div>
a {
color: var(--text-color);
}
</style>
</div>

View file

@ -47,14 +47,14 @@ const t = useTranslations(lang);
<div id="current-content"></div>
</div>
<script is:inline>
document.addEventListener("astro:after-swap", () => {
window.currentlySelectedTab = "";
document.removeEventListener("setting-tabChange", determineListener);
});
window.currentlySelectedTab;
window.loadedContentStorage = {};
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
function settingsLoad() {
document.addEventListener("astro:after-swap", () => {
window.currentlySelectedTab = "";
document.removeEventListener("setting-tabChange", determineListener);
});
window.currentlySelectedTab;
window.loadedContentStorage = {};
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
let contentToLoad = document.getElementById("content-" + tab.id);
if (contentToLoad) {
window.loadedContentStorage[tab.id] = contentToLoad.innerHTML;
@ -159,17 +159,6 @@ const t = useTranslations(lang);
}
});
});
// Array.from(item.children).forEach((item) => {
// item.addEventListener('click', () => {
// localStorage.setItem(localStorageItem, item.dataset.setting)
// applySavedLocalStorage(localStorageItem, dropdownID)
// closeDropdown(item.parentElement.id);
// if (typeof optionalCallback == "function") {
// optionalCallback();
// }
// })
// })
}
function applyInputListeners(item, localStorageItem) {
@ -353,6 +342,11 @@ const t = useTranslations(lang);
break;
}
}
}
document.addEventListener('astro:after-swap', () => {
settingsLoad()
})
settingsLoad()
</script>
<style is:global>
.content-hidden {

View file

@ -16,7 +16,13 @@ export function getStaticPaths() {
<h1 class="title-text">{t("menu.welcome")}</h1>
<div class="form-wrapper">
<form class="url-input-form" id="url-input-form">
<input class="url-input" id="url-input" type="text" placeholder={t("menu.search")} autocomplete="off" />
<input
class="url-input"
id="url-input"
type="text"
placeholder={t("menu.search")}
autocomplete="off"
/>
<div id="search-suggestions"></div>
<div id="loading-content">Loading...</div>
<div id="top-bar"></div>
@ -37,12 +43,9 @@ export function getStaticPaths() {
<h2>How can I contribute to the development of Alu?</h2>
<p>
Spreading the word of Alu is a great start, but if you really enjoy Alu, and want private
links, consider supporting me through Patreon! You can support me
<Link
href="https://www.patreon.com/wearr/membership"
newTab
linkTextContent="Here!"
/>, thank you for helping to make Alu great!
links, consider supporting me through Patreon! You can support me
<Link href="https://www.patreon.com/wearr/membership" newTab linkTextContent="Here!" />,
thank you for helping to make Alu great!
</p>
</div>
</div>
@ -50,80 +53,78 @@ export function getStaticPaths() {
</Layout>
<script>
type Suggestion = {
phrase: string;
}
const debounce = (func: Function, delay: number): (...args: any[]) => void => {
let debounceTimer: NodeJS.Timeout;
return function (this: Function, ...args: any[]) {
const context: any = this;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
type Suggestion = {
phrase: string;
};
const debounce = (func: Function, delay: number): ((...args: any[]) => void) => {
let debounceTimer: NodeJS.Timeout;
return function (this: Function, ...args: any[]) {
const context: any = this;
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
func.apply(context, args);
}, delay);
};
};
async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
if (!urlInput) throw new Error("urlInput is null");
if (!searchSuggestions) throw new Error("searchSuggestions is null");
let url = urlInput.value;
let request = await fetch("/search?query=" + url);
let data = await request.json();
searchSuggestions.innerHTML = "";
data.map((suggestion: Suggestion) => {
let suggestionElement = document.createElement("div");
// For some reason css classes weren't working T^T.
suggestionElement.style.cursor = "pointer";
suggestionElement.style.marginTop = "5px";
suggestionElement.innerText = suggestion.phrase;
suggestionElement.addEventListener("click", () => {
console.log("here")
urlInput.value = suggestion.phrase;
// I can't be bothered to extend the window object, so I'm just going to use any
(window as any).loadFormContent();
});
searchSuggestions.appendChild(suggestionElement);
});
if (data.length === 0) {
urlInput.classList.remove("search-results");
searchSuggestions.style.opacity = "0";
} else {
urlInput.classList.add("search-results");
searchSuggestions.style.opacity = "1";
}
}
function addEventListeners() {
let urlInput = document.getElementById("url-input") as HTMLInputElement;
let searchSuggestions = document.getElementById('search-suggestions') as HTMLDivElement;
// Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
if (!urlInput || !searchSuggestions) return;
urlInput.addEventListener('focus', () => {
if (!searchSuggestions) {
throw new Error("searchSuggestions is null");
}
if (searchSuggestions.children.length > 0) {
searchSuggestions.style.opacity = "1";
searchSuggestions.style.pointerEvents = "all";
urlInput.classList.add("search-results");
}
})
urlInput.addEventListener('blur', () => {
searchSuggestions.style.opacity = "0";
setTimeout(() => {
searchSuggestions.style.pointerEvents = "none";
}, 200);
urlInput.classList.remove("search-results")
})
urlInput.addEventListener("keyup", () => {
debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
async function sendAPIRequest(urlInput: HTMLInputElement, searchSuggestions: HTMLDivElement) {
if (!urlInput) throw new Error("urlInput is null");
if (!searchSuggestions) throw new Error("searchSuggestions is null");
let url = urlInput.value;
let request = await fetch("/search?query=" + url);
let data = await request.json();
searchSuggestions.innerHTML = "";
data.map((suggestion: Suggestion) => {
let suggestionElement = document.createElement("div");
// For some reason css classes weren't working T^T.
suggestionElement.style.cursor = "pointer";
suggestionElement.style.marginTop = "5px";
suggestionElement.innerText = suggestion.phrase;
suggestionElement.addEventListener("click", () => {
console.log("here");
urlInput.value = suggestion.phrase;
// I can't be bothered to extend the window object, so I'm just going to use any
(window as any).loadFormContent();
});
searchSuggestions.appendChild(suggestionElement);
});
if (data.length === 0) {
urlInput.classList.remove("search-results");
searchSuggestions.style.opacity = "0";
} else {
urlInput.classList.add("search-results");
searchSuggestions.style.opacity = "1";
}
document.addEventListener('astro:after-swap', addEventListeners);
addEventListeners();
}
function addEventListeners() {
let urlInput = document.getElementById("url-input") as HTMLInputElement;
let searchSuggestions = document.getElementById("search-suggestions") as HTMLDivElement;
// Silently return if the required elements aren't found, this prevents the console from getting cluttered with errors.
if (!urlInput || !searchSuggestions) return;
urlInput.addEventListener("focus", () => {
if (!searchSuggestions) {
throw new Error("searchSuggestions is null");
}
if (searchSuggestions.children.length > 0) {
searchSuggestions.style.opacity = "1";
searchSuggestions.style.pointerEvents = "all";
urlInput.classList.add("search-results");
}
});
urlInput.addEventListener("blur", () => {
searchSuggestions.style.opacity = "0";
setTimeout(() => {
searchSuggestions.style.pointerEvents = "none";
}, 200);
urlInput.classList.remove("search-results");
});
urlInput.addEventListener("keyup", () => {
debounce(sendAPIRequest, 300).apply(null, [urlInput, searchSuggestions]);
});
}
document.addEventListener("astro:after-swap", addEventListeners);
addEventListeners();
</script>
<style>

View file

@ -2,6 +2,6 @@
"extends": "astro/tsconfigs/strict",
"exclude": ["node_modules/**", "dist/**"],
"compilerOptions": {
"verbatimModuleSyntax": false,
"verbatimModuleSyntax": false
}
}