mirror of
https://github.com/hex248/ob248.com.git
synced 2026-02-07 18:23:04 +00:00
more biome fixes
This commit is contained in:
@@ -2,10 +2,6 @@
|
||||
import { Icon } from "astro-icon/components";
|
||||
import type { AstroModule, ProjectMetadata } from "../pages/index.astro";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const {} = Astro.props;
|
||||
|
||||
const options = [{ name: "home", location: "/" }];
|
||||
options.push({
|
||||
name: "GitHub",
|
||||
@@ -31,195 +27,183 @@ Object.values(import.meta.glob<AstroModule>("../pages/projects/*.astro", { eager
|
||||
---
|
||||
|
||||
<script>
|
||||
let commandPaletteOpen = false;
|
||||
let selectedOptionIndex = 0;
|
||||
const noResults = document.getElementById("no-results");
|
||||
let commandPaletteOpen = false;
|
||||
let selectedOptionIndex = 0;
|
||||
const noResults = document.getElementById("no-results");
|
||||
|
||||
const updateOptions = () => {
|
||||
const input = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("input")[0];
|
||||
if (!input) return;
|
||||
const query = input.value.toLowerCase();
|
||||
console.log(query);
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (!optionElements) return;
|
||||
for (let i = 0; i < optionElements.length; i++) {
|
||||
const optionElement = optionElements[i];
|
||||
const optionName = optionElement.textContent?.toLowerCase() || "";
|
||||
if (optionName.includes(query)) {
|
||||
optionElement.classList.remove("hidden");
|
||||
} else {
|
||||
optionElement.classList.add("hidden");
|
||||
}
|
||||
const updateOptions = () => {
|
||||
const input = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("input")[0];
|
||||
if (!input) return;
|
||||
const query = input.value.toLowerCase();
|
||||
console.log(query);
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (!optionElements) return;
|
||||
for (let i = 0; i < optionElements.length; i++) {
|
||||
const optionElement = optionElements[i];
|
||||
const optionName = optionElement.textContent?.toLowerCase() || "";
|
||||
if (optionName.includes(query)) {
|
||||
optionElement.classList.remove("hidden");
|
||||
} else {
|
||||
optionElement.classList.add("hidden");
|
||||
}
|
||||
|
||||
// if the selectedOptionIndex is hidden, move it to the next visible option
|
||||
if (
|
||||
i === selectedOptionIndex &&
|
||||
optionElement.classList.contains("hidden")
|
||||
) {
|
||||
let found = false;
|
||||
for (let j = 0; j < optionElements.length; j++) {
|
||||
const nextIndex =
|
||||
(selectedOptionIndex + j) % optionElements.length;
|
||||
if (
|
||||
!optionElements[nextIndex].classList.contains("hidden")
|
||||
) {
|
||||
selectedOptionIndex = nextIndex;
|
||||
showSelection();
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
let allHidden = true;
|
||||
for (let j = 0; j < optionElements.length; j++) {
|
||||
if (!optionElements[j].classList.contains("hidden")) {
|
||||
allHidden = false;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (allHidden) {
|
||||
selectedOptionIndex = 0;
|
||||
noResults?.removeAttribute("hidden");
|
||||
} else {
|
||||
noResults?.setAttribute("hidden", "true");
|
||||
}
|
||||
}
|
||||
};
|
||||
(window as any).updateOptions = updateOptions;
|
||||
|
||||
const showSelection = () => {
|
||||
const commandPalette = document.getElementById("command-palette");
|
||||
if (!commandPalette) return;
|
||||
let options = commandPalette.getElementsByTagName("a");
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
options[i].classList.remove("text-ayu-accent", "font-bold");
|
||||
}
|
||||
if (options.length > 0) {
|
||||
options[selectedOptionIndex].classList.add(
|
||||
"text-ayu-accent",
|
||||
"font-bold"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const toggleCommandPalette = () => {
|
||||
const commandPalette = document.getElementById("command-palette");
|
||||
if (!commandPalette) return;
|
||||
commandPaletteOpen = !commandPaletteOpen;
|
||||
commandPalette.classList.toggle("hidden");
|
||||
if (commandPaletteOpen) {
|
||||
commandPalette.getElementsByTagName("input")[0]?.focus();
|
||||
selectedOptionIndex = 0;
|
||||
// if the selectedOptionIndex is hidden, move it to the next visible option
|
||||
if (
|
||||
i === selectedOptionIndex &&
|
||||
optionElement.classList.contains("hidden")
|
||||
) {
|
||||
let found = false;
|
||||
for (let j = 0; j < optionElements.length; j++) {
|
||||
const nextIndex = (selectedOptionIndex + j) % optionElements.length;
|
||||
if (!optionElements[nextIndex].classList.contains("hidden")) {
|
||||
selectedOptionIndex = nextIndex;
|
||||
showSelection();
|
||||
found = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
const input = commandPalette.getElementsByTagName("input")[0];
|
||||
if (input) {
|
||||
input.value = "";
|
||||
}
|
||||
|
||||
let allHidden = true;
|
||||
for (let j = 0; j < optionElements.length; j++) {
|
||||
if (!optionElements[j].classList.contains("hidden")) {
|
||||
allHidden = false;
|
||||
break;
|
||||
}
|
||||
updateOptions();
|
||||
};
|
||||
(window as any).toggleCommandPalette = toggleCommandPalette;
|
||||
}
|
||||
if (allHidden) {
|
||||
selectedOptionIndex = 0;
|
||||
noResults?.removeAttribute("hidden");
|
||||
} else {
|
||||
noResults?.setAttribute("hidden", "true");
|
||||
}
|
||||
}
|
||||
};
|
||||
(window as any).updateOptions = updateOptions;
|
||||
|
||||
const keydownHandler = (e: KeyboardEvent) => {
|
||||
try {
|
||||
if (!e) return;
|
||||
const key = (e.key || "").toLowerCase();
|
||||
const isCtrl = !!e.ctrlKey;
|
||||
if (isCtrl && (key === "k" || key === "p")) {
|
||||
toggleCommandPalette();
|
||||
const showSelection = () => {
|
||||
const commandPalette = document.getElementById("command-palette");
|
||||
if (!commandPalette) return;
|
||||
let options = commandPalette.getElementsByTagName("a");
|
||||
for (let i = 0; i < options.length; i++) {
|
||||
options[i].classList.remove("text-ayu-accent", "font-bold");
|
||||
}
|
||||
if (options.length > 0) {
|
||||
options[selectedOptionIndex].classList.add(
|
||||
"text-ayu-accent",
|
||||
"font-bold"
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
if (key === "escape" && commandPaletteOpen) {
|
||||
toggleCommandPalette();
|
||||
e.preventDefault();
|
||||
}
|
||||
if (
|
||||
(key === "arrowdown" || key === "arrowup") &&
|
||||
commandPaletteOpen
|
||||
) {
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (optionElements) {
|
||||
const operation = key === "arrowdown" ? 1 : -1;
|
||||
selectedOptionIndex =
|
||||
(selectedOptionIndex +
|
||||
operation +
|
||||
optionElements.length) %
|
||||
optionElements.length;
|
||||
showSelection();
|
||||
}
|
||||
e.preventDefault();
|
||||
}
|
||||
const toggleCommandPalette = () => {
|
||||
const commandPalette = document.getElementById("command-palette");
|
||||
if (!commandPalette) return;
|
||||
commandPaletteOpen = !commandPaletteOpen;
|
||||
commandPalette.classList.toggle("hidden");
|
||||
if (commandPaletteOpen) {
|
||||
commandPalette.getElementsByTagName("input")[0]?.focus();
|
||||
selectedOptionIndex = 0;
|
||||
showSelection();
|
||||
}
|
||||
const input = commandPalette.getElementsByTagName("input")[0];
|
||||
if (input) {
|
||||
input.value = "";
|
||||
}
|
||||
updateOptions();
|
||||
};
|
||||
(window as any).toggleCommandPalette = toggleCommandPalette;
|
||||
|
||||
if (key === "enter" && commandPaletteOpen) {
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (optionElements && optionElements[selectedOptionIndex]) {
|
||||
window.location.href =
|
||||
optionElements[selectedOptionIndex].href;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Command palette key handler error:", err);
|
||||
const keydownHandler = (e: KeyboardEvent) => {
|
||||
try {
|
||||
if (!e) return;
|
||||
const key = (e.key || "").toLowerCase();
|
||||
const isCtrl = !!e.ctrlKey;
|
||||
if (isCtrl && (key === "k" || key === "p")) {
|
||||
toggleCommandPalette();
|
||||
|
||||
e.preventDefault();
|
||||
}
|
||||
if (key === "escape" && commandPaletteOpen) {
|
||||
toggleCommandPalette();
|
||||
e.preventDefault();
|
||||
}
|
||||
if ((key === "arrowdown" || key === "arrowup") && commandPaletteOpen) {
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (optionElements) {
|
||||
const operation = key === "arrowdown" ? 1 : -1;
|
||||
selectedOptionIndex =
|
||||
(selectedOptionIndex + operation + optionElements.length) %
|
||||
optionElements.length;
|
||||
showSelection();
|
||||
}
|
||||
};
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", keydownHandler);
|
||||
if (key === "enter" && commandPaletteOpen) {
|
||||
const optionElements = document
|
||||
.getElementById("command-palette")
|
||||
?.getElementsByTagName("a");
|
||||
if (optionElements && optionElements[selectedOptionIndex]) {
|
||||
window.location.href = optionElements[selectedOptionIndex].href;
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Command palette key handler error:", err);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("unload", () => {
|
||||
document.removeEventListener("keydown", keydownHandler);
|
||||
});
|
||||
document.addEventListener("keydown", keydownHandler);
|
||||
|
||||
window.addEventListener("unload", () => {
|
||||
document.removeEventListener("keydown", keydownHandler);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#command-palette a:hover {
|
||||
color: var(--ayu-accent);
|
||||
}
|
||||
#command-palette a:hover {
|
||||
color: var(--ayu-accent);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div
|
||||
id="command-palette"
|
||||
onclick="toggleCommandPalette()"
|
||||
class="hidden fixed top-0 left-0 w-full h-full bg-ayu-bg-50percent flex items-center justify-center z-50"
|
||||
id="command-palette"
|
||||
onclick="toggleCommandPalette()"
|
||||
class="hidden fixed top-0 left-0 w-full h-full bg-ayu-bg-50percent flex items-center justify-center z-50"
|
||||
>
|
||||
<div
|
||||
onclick="event.stopPropagation()"
|
||||
class="bg-ayu-bg border-ayu-accent border-2 rounded-xl w-[60%] max-w-2xl"
|
||||
>
|
||||
<div class="flex text-2xl border-ayu-accent w-full border-b-2">
|
||||
<span class="flex items-center no-select p-4 pr-2 gap-2">
|
||||
<Icon
|
||||
name="mdi:toy-brick-search"
|
||||
class="w-6 h-6"
|
||||
/>search:</span
|
||||
>
|
||||
<input
|
||||
oninput="updateOptions()"
|
||||
placeholder=""
|
||||
class="p-4 pl-0 focus:outline-none flex-grow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-xl p-2 text-ayu-fg-secondary gap-2">
|
||||
{
|
||||
options.map((option, index) => (
|
||||
<a
|
||||
href={option.location}
|
||||
class="rounded-lg p-2 border-2 border-transparent"
|
||||
>
|
||||
{index}: {option.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<span id="no-results" class="p-2" hidden>no results found.</span>
|
||||
</div>
|
||||
<div
|
||||
onclick="event.stopPropagation()"
|
||||
class="bg-ayu-bg border-ayu-accent border-2 rounded-xl w-[60%] max-w-2xl"
|
||||
>
|
||||
<div class="flex text-2xl border-ayu-accent w-full border-b-2">
|
||||
<span class="flex items-center no-select p-4 pr-2 gap-2">
|
||||
<Icon name="mdi:toy-brick-search" class="w-6 h-6" />search:</span
|
||||
>
|
||||
<input
|
||||
oninput="updateOptions()"
|
||||
placeholder=""
|
||||
class="p-4 pl-0 focus:outline-none flex-grow"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col text-xl p-2 text-ayu-fg-secondary gap-2">
|
||||
{
|
||||
options.map((option, index) => (
|
||||
<a
|
||||
href={option.location}
|
||||
class="rounded-lg p-2 border-2 border-transparent"
|
||||
>
|
||||
{index}: {option.name}
|
||||
</a>
|
||||
))
|
||||
}
|
||||
<span id="no-results" class="p-2" hidden>no results found.</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -50,7 +50,7 @@ function parseDate(dateStr: string): Date {
|
||||
if (lower.includes(monthName)) {
|
||||
const yearMatch = dateStr.match(/\b(20\d{2})\b/);
|
||||
if (yearMatch) {
|
||||
return new Date(parseInt(yearMatch[1]), monthIndex, 1);
|
||||
return new Date(parseInt(yearMatch[1], 10), monthIndex, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -58,7 +58,7 @@ function parseDate(dateStr: string): Date {
|
||||
// fallback: try to extract any year
|
||||
const yearMatch = dateStr.match(/\b(20\d{2})\b/);
|
||||
if (yearMatch) {
|
||||
return new Date(parseInt(yearMatch[1]), 0, 1);
|
||||
return new Date(parseInt(yearMatch[1], 10), 0, 1);
|
||||
}
|
||||
|
||||
return new Date(0);
|
||||
@@ -76,7 +76,9 @@ const projects: ProjectMetadata[] = Object.values(
|
||||
|
||||
const allTags = new Set<string>();
|
||||
projects.forEach((project) => {
|
||||
project.tags?.forEach((tag) => allTags.add(tag));
|
||||
project.tags?.forEach((tag) => {
|
||||
allTags.add(tag);
|
||||
});
|
||||
});
|
||||
|
||||
const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));
|
||||
|
||||
@@ -301,7 +301,6 @@ body {
|
||||
.no-select {
|
||||
user-select: none;
|
||||
-moz-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user