codey/codey.lol
1
0
Fork 0
Code Issues Pull Requests Activity

- feat: Enhance LyricSearch and Memes components with new features and styling improvements

Browse Source 
Bump major version -> 0.3
This commit is contained in:
codey
2025-11-25 10:04:05 -05:00
parent 05aa48af14
commit 8500cd6e67
7 changed files with 587 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/layouts/Nav.astro
View File

@@ -1,31 +1,58 @@
---
import { metaData } from "../config";
import { metaData, API_URL } from "../config";
import { Icon } from "astro-icon/components";
import ExitToApp from '@mui/icons-material/ExitToApp';
const isLoggedIn = Astro.cookies.get('access_token') || Astro.cookies.get('refresh_token');
const padlockIconSvg = `
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2.2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M8.5 11V9a3.5 3.5 0 1 1 7 0v2" />
<rect x="7" y="11" width="10" height="8.5" rx="1.8" />
<circle cx="12" cy="15" r="1.2" fill="currentColor" />
</svg>
`;
const externalLinkIconSvg = `
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
`;
const navItems = [
{ label: "Home", href: "/" },
{ label: "Radio", href: "/radio" },
{ label: "Memes", href: "/memes" },
{ label: "Lighting", href: "/lighting", auth: true },
{ label: "TRip", href: "/TRip", auth: true },
{ label: "Status", href: "https://status.boatson.boats", icon: ExitToApp },
{ label: "Git", href: "https://kode.boatson.boats", icon: ExitToApp },
// ...(isLoggedIn ? [{ label: "Logout", href: "#", onClick: "handleLogout()" }] : []), # todo
{ label: "Lighting", href: "/lighting", auth: true, icon: "padlock" },
{ label: "TRip", href: "/TRip", auth: true, icon: "padlock" },
{ label: "Status", href: "https://status.boatson.boats", icon: "external" },
{ label: "Git", href: "https://kode.boatson.boats", icon: "external" },
...(isLoggedIn ? [{ label: "Logout", href: "#logout", onclick: "handleLogout()" }] : []),
];
const currentPath = Astro.url.pathname;
---
<script is:inline>
<script is:inline define:vars={{ API_URL }}>
toggleTheme = () => {
const currentTheme = document.documentElement.getAttribute("data-theme");
const newTheme = currentTheme === "dark" ? "light" : "dark";
document.dispatchEvent(new CustomEvent("set-theme", { detail: newTheme }));
}
window.handleLogout = async () => {
try {
await fetch(`${API_URL}/auth/logout`, {
method: "POST",
credentials: "include",
});
} catch (error) {
console.error("Logout failed", error);
} finally {
window.location.href = "/";
}
};
// Mobile menu toggle
function initMobileMenu() {
const menuBtn = document.getElementById('mobile-menu-btn');
@@ -91,6 +118,7 @@ const currentPath = Astro.url.pathname;
// Re-initialize after view transitions
document.addEventListener('astro:page-load', initMobileMenu);
</script>
<nav class="w-full px-4 sm:px-6 py-4 bg-transparent sticky top-0 z-50 backdrop-blur-sm bg-white/80 dark:bg-[#121212]/80 border-b border-neutral-200/50 dark:border-neutral-800/50">
@@ -124,17 +152,19 @@ const currentPath = Astro.url.pathname;
<a
href={item.href}
class={isActive
? "flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900"
: "flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
? "flex items-center gap-0 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900"
: "flex items-center gap-0 px-2.5 py-1.5 rounded-md text-xs font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
}
target={isExternal ? "_blank" : undefined}
rel={(isExternal || isAuthedPath) ? "external" : undefined}
onclick={item.onclick}
>
{item.label}
{item.icon === ExitToApp && (
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
{item.icon === "external" && (
<span class="inline-flex ml-0.5" aria-hidden="true" set:html={externalLinkIconSvg}></span>
)}
{item.icon === "padlock" && (
<span class="inline-flex" aria-hidden="true" set:html={padlockIconSvg}></span>
)}
</a>
</li>
@@ -210,17 +240,19 @@ const currentPath = Astro.url.pathname;
<a
href={item.href}
class={isActive
? "flex items-center justify-between px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900"
: "flex items-center justify-between px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
? "flex items-center gap-0 px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 bg-neutral-900 dark:bg-neutral-100 text-white dark:text-neutral-900"
: "flex items-center gap-0 px-4 py-3 rounded-lg text-base font-medium transition-all duration-200 text-neutral-700 dark:text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
}
target={isExternal ? "_blank" : undefined}
rel={(isExternal || isAuthedPath) ? "external" : undefined}
onclick={item.onclick}
>
<span>{item.label}</span>
{item.icon === ExitToApp && (
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
</svg>
{item.icon === "external" && (
<span class="inline-flex ml-0.5" aria-hidden="true" set:html={externalLinkIconSvg}></span>
)}
{item.icon === "padlock" && (
<span class="inline-flex" aria-hidden="true" set:html={padlockIconSvg}></span>
)}
</a>
</li>