ob/ob248.com
1
0
Fork 0
mirror of https://github.com/hex248/ob248.com.git synced 2026-02-07 18:23:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

more biome fixes

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-14 23:20:08 +00:00
parent 10ce0f65c9
commit 6e5e73bb2b
3 changed files with 165 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

336
src/components/CommandPalette.astro
View File

@@ -2,10 +2,6 @@
import { Icon } from "astro-icon/components"; import { Icon } from "astro-icon/components";
import type { AstroModule, ProjectMetadata } from "../pages/index.astro"; import type { AstroModule, ProjectMetadata } from "../pages/index.astro";
type Props = {};
const {} = Astro.props;
const options = [{ name: "home", location: "/" }]; const options = [{ name: "home", location: "/" }];
options.push({ options.push({
name: "GitHub", name: "GitHub",
@@ -31,195 +27,183 @@ Object.values(import.meta.glob<AstroModule>("../pages/projects/*.astro", { eager
--- ---
<script> <script>
let commandPaletteOpen = false; let commandPaletteOpen = false;
let selectedOptionIndex = 0; let selectedOptionIndex = 0;
const noResults = document.getElementById("no-results"); const noResults = document.getElementById("no-results");
const updateOptions = () => { const updateOptions = () => {
const input = document const input = document
.getElementById("command-palette") .getElementById("command-palette")
?.getElementsByTagName("input")[0]; ?.getElementsByTagName("input")[0];
if (!input) return; if (!input) return;
const query = input.value.toLowerCase(); const query = input.value.toLowerCase();
console.log(query); console.log(query);
const optionElements = document const optionElements = document
.getElementById("command-palette") .getElementById("command-palette")
?.getElementsByTagName("a"); ?.getElementsByTagName("a");
if (!optionElements) return; if (!optionElements) return;
for (let i = 0; i < optionElements.length; i++) { for (let i = 0; i < optionElements.length; i++) {
const optionElement = optionElements[i]; const optionElement = optionElements[i];
const optionName = optionElement.textContent?.toLowerCase() || ""; const optionName = optionElement.textContent?.toLowerCase() || "";
if (optionName.includes(query)) { if (optionName.includes(query)) {
optionElement.classList.remove("hidden"); optionElement.classList.remove("hidden");
} else { } else {
optionElement.classList.add("hidden"); optionElement.classList.add("hidden");
} }
// if the selectedOptionIndex is hidden, move it to the next visible option // if the selectedOptionIndex is hidden, move it to the next visible option
if ( if (
i === selectedOptionIndex && i === selectedOptionIndex &&
optionElement.classList.contains("hidden") optionElement.classList.contains("hidden")
) { ) {
let found = false; let found = false;
for (let j = 0; j < optionElements.length; j++) { for (let j = 0; j < optionElements.length; j++) {
const nextIndex = const nextIndex = (selectedOptionIndex + j) % optionElements.length;
(selectedOptionIndex + j) % optionElements.length; if (!optionElements[nextIndex].classList.contains("hidden")) {
if ( selectedOptionIndex = nextIndex;
!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;
showSelection(); 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(); }
}; if (allHidden) {
(window as any).toggleCommandPalette = toggleCommandPalette; selectedOptionIndex = 0;
noResults?.removeAttribute("hidden");
} else {
noResults?.setAttribute("hidden", "true");
}
}
};
(window as any).updateOptions = updateOptions;
const keydownHandler = (e: KeyboardEvent) => { const showSelection = () => {
try { const commandPalette = document.getElementById("command-palette");
if (!e) return; if (!commandPalette) return;
const key = (e.key || "").toLowerCase(); let options = commandPalette.getElementsByTagName("a");
const isCtrl = !!e.ctrlKey; for (let i = 0; i < options.length; i++) {
if (isCtrl && (key === "k" || key === "p")) { options[i].classList.remove("text-ayu-accent", "font-bold");
toggleCommandPalette(); }
if (options.length > 0) {
options[selectedOptionIndex].classList.add(
"text-ayu-accent",
"font-bold"
);
}
};
e.preventDefault(); const toggleCommandPalette = () => {
} const commandPalette = document.getElementById("command-palette");
if (key === "escape" && commandPaletteOpen) { if (!commandPalette) return;
toggleCommandPalette(); commandPaletteOpen = !commandPaletteOpen;
e.preventDefault(); commandPalette.classList.toggle("hidden");
} if (commandPaletteOpen) {
if ( commandPalette.getElementsByTagName("input")[0]?.focus();
(key === "arrowdown" || key === "arrowup") && selectedOptionIndex = 0;
commandPaletteOpen showSelection();
) { }
const optionElements = document const input = commandPalette.getElementsByTagName("input")[0];
.getElementById("command-palette") if (input) {
?.getElementsByTagName("a"); input.value = "";
if (optionElements) { }
const operation = key === "arrowdown" ? 1 : -1; updateOptions();
selectedOptionIndex = };
(selectedOptionIndex + (window as any).toggleCommandPalette = toggleCommandPalette;
operation +
optionElements.length) %
optionElements.length;
showSelection();
}
e.preventDefault();
}
if (key === "enter" && commandPaletteOpen) { const keydownHandler = (e: KeyboardEvent) => {
const optionElements = document try {
.getElementById("command-palette") if (!e) return;
?.getElementsByTagName("a"); const key = (e.key || "").toLowerCase();
if (optionElements && optionElements[selectedOptionIndex]) { const isCtrl = !!e.ctrlKey;
window.location.href = if (isCtrl && (key === "k" || key === "p")) {
optionElements[selectedOptionIndex].href; toggleCommandPalette();
}
} e.preventDefault();
} catch (err) { }
console.error("Command palette key handler error:", err); 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.addEventListener("keydown", keydownHandler);
document.removeEventListener("keydown", keydownHandler);
}); window.addEventListener("unload", () => {
document.removeEventListener("keydown", keydownHandler);
});
</script> </script>
<style> <style>
#command-palette a:hover { #command-palette a:hover {
color: var(--ayu-accent); color: var(--ayu-accent);
} }
</style> </style>
<div <div
id="command-palette" id="command-palette"
onclick="toggleCommandPalette()" onclick="toggleCommandPalette()"
class="hidden fixed top-0 left-0 w-full h-full bg-ayu-bg-50percent flex items-center justify-center z-50" class="hidden fixed top-0 left-0 w-full h-full bg-ayu-bg-50percent flex items-center justify-center z-50"
> >
<div <div
onclick="event.stopPropagation()" onclick="event.stopPropagation()"
class="bg-ayu-bg border-ayu-accent border-2 rounded-xl w-[60%] max-w-2xl" 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"> <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"> <span class="flex items-center no-select p-4 pr-2 gap-2">
<Icon <Icon name="mdi:toy-brick-search" class="w-6 h-6" />search:</span
name="mdi:toy-brick-search" >
class="w-6 h-6" <input
/>search:</span oninput="updateOptions()"
> placeholder=""
<input class="p-4 pl-0 focus:outline-none flex-grow"
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>
<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> </div>

8
src/pages/index.astro
View File

@@ -50,7 +50,7 @@ function parseDate(dateStr: string): Date {
if (lower.includes(monthName)) { if (lower.includes(monthName)) {
const yearMatch = dateStr.match(/\b(20\d{2})\b/); const yearMatch = dateStr.match(/\b(20\d{2})\b/);
if (yearMatch) { 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 // fallback: try to extract any year
const yearMatch = dateStr.match(/\b(20\d{2})\b/); const yearMatch = dateStr.match(/\b(20\d{2})\b/);
if (yearMatch) { if (yearMatch) {
return new Date(parseInt(yearMatch[1]), 0, 1); return new Date(parseInt(yearMatch[1], 10), 0, 1);
} }
return new Date(0); return new Date(0);
@@ -76,7 +76,9 @@ const projects: ProjectMetadata[] = Object.values(
const allTags = new Set<string>(); const allTags = new Set<string>();
projects.forEach((project) => { 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)); const sortedTags = Array.from(allTags).sort((a, b) => a.localeCompare(b));

1
src/styles/global.css
View File

@@ -301,7 +301,6 @@ body {
.no-select { .no-select {
user-select: none; user-select: none;
-moz-user-select: none; -moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
-o-user-select: none; -o-user-select: none;
} }