nav color fixes, cache busting

This commit is contained in:
2026-07-24 15:26:36 -04:00
parent 4b663c014a
commit c66cd6d456
5 changed files with 22 additions and 77 deletions

View File

@@ -5,6 +5,7 @@
"dev": "vinxi dev", "dev": "vinxi dev",
"dev-flush": "vinxi dev --env-file=.env", "dev-flush": "vinxi dev --env-file=.env",
"build": "vinxi build", "build": "vinxi build",
"vercel-build": "rm -rf .vinxi .output node_modules/.vite && vinxi build",
"start": "NODE_OPTIONS='--import ./public/instrument.server.mjs' vinxi start", "start": "NODE_OPTIONS='--import ./public/instrument.server.mjs' vinxi start",
"test": "bun test", "test": "bun test",
"test:security": "bun test src/server/security/", "test:security": "bun test src/server/security/",

View File

@@ -4,7 +4,10 @@ import SunIcon from "./icons/SunIcon";
import { Typewriter } from "./Typewriter"; import { Typewriter } from "./Typewriter";
import { useDarkMode } from "~/context/darkMode"; import { useDarkMode } from "~/context/darkMode";
export function DarkModeToggle() { export function DarkModeToggle(
props: { shouldScale: boolean },
{ shouldScale = true }
) {
const { isDark, toggleDarkMode } = useDarkMode(); const { isDark, toggleDarkMode } = useDarkMode();
const [mounted, setMounted] = createSignal(false); const [mounted, setMounted] = createSignal(false);
@@ -15,7 +18,7 @@ export function DarkModeToggle() {
return ( return (
<button <button
onClick={toggleDarkMode} onClick={toggleDarkMode}
class="hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out hover:scale-105" class={`hover:bg-surface0 flex w-full items-center gap-3 rounded-lg p-3 transition-all duration-200 ease-in-out ${props.shouldScale ? "hover:scale-105" : ""}`}
aria-label="Toggle dark mode" aria-label="Toggle dark mode"
> >
<Show <Show

View File

@@ -13,55 +13,7 @@ import { A, useLocation } from "@solidjs/router";
import { useSite } from "~/context/SiteContext"; import { useSite } from "~/context/SiteContext";
import { useDarkMode } from "~/context/darkMode"; import { useDarkMode } from "~/context/darkMode";
import { NAV_CONFIG, BACK_TO_FRENO } from "~/lib/nav-config"; import { NAV_CONFIG, BACK_TO_FRENO } from "~/lib/nav-config";
import { DarkModeToggle } from "~/components/DarkModeToggle";
/** Simple SVG sun icon for dark mode toggle. */
function SunIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-5 w-5"
aria-hidden="true"
>
<circle cx="12" cy="12" r="4" />
<path d="M12 2v2" />
<path d="M12 20v2" />
<path d="M2 12h2" />
<path d="M20 12h2" />
<path d="m4.93 4.93 1.41 1.41" />
<path d="m17.66 17.66 1.41 1.41" />
<path d="m2 12h2" />
<path d="m20 12h2" />
<path d="m4.93 19.07 1.41-1.41" />
<path d="m17.66 6.34 1.41-1.41" />
</svg>
);
}
/** Simple SVG moon icon for dark mode toggle. */
function MoonIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-5 w-5"
aria-hidden="true"
>
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
<path d="M9 11a5 5 0 0 0 5.5 5.5" />
</svg>
);
}
export default function SubdomainHeader() { export default function SubdomainHeader() {
const site = useSite(); const site = useSite();
@@ -80,7 +32,10 @@ export default function SubdomainHeader() {
}; };
return ( return (
<header class="bg-base/80 border-surface0 sticky top-0 z-50 w-full border-b backdrop-blur-md"> <header
class="sticky top-0 z-50 w-full border-b backdrop-blur-md"
classList={{ "bg-base/80 border-surface0": site().headerOpaque }}
>
<div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4"> <div class="mx-auto flex h-14 max-w-7xl items-center justify-between px-4">
<A <A
href="/" href="/"
@@ -123,31 +78,7 @@ export default function SubdomainHeader() {
</Show> </Show>
)} )}
</For> </For>
<DarkModeToggle />
<a
href={BACK_TO_FRENO.href}
target="_blank"
rel="noopener noreferrer"
class="text-text/60 hover:text-text text-xs transition-colors"
>
{BACK_TO_FRENO.label}
</a>
{/* Dark mode toggle */}
<button
onClick={toggleDarkMode}
class="hover:bg-surface0/40 rounded-full p-2 transition-colors"
aria-label={
isDark() ? "Switch to light mode" : "Switch to dark mode"
}
>
<Show when={isDark()}>
<SunIcon />
</Show>
<Show when={!isDark()}>
<MoonIcon />
</Show>
</button>
</nav> </nav>
</div> </div>
</header> </header>

View File

@@ -35,6 +35,8 @@ export interface Site {
brandColor: string; brandColor: string;
/** Dark mode variant of the brand color (used when dark mode is active). */ /** Dark mode variant of the brand color (used when dark mode is active). */
brandColorDark?: string; brandColorDark?: string;
/** Whether the subdomain header should use a solid background (default: false for transparent). */
headerOpaque?: boolean;
/** Default OpenGraph image path (resolved against the site root). */ /** Default OpenGraph image path (resolved against the site root). */
ogDefaultImage: string; ogDefaultImage: string;
/** Favicon path for this site. */ /** Favicon path for this site. */
@@ -87,6 +89,7 @@ export const SITE_CONFIG: Record<SiteId, Site> = {
titleSuffix: " | Nessa", titleSuffix: " | Nessa",
brandColor: "#527640", brandColor: "#527640",
brandColorDark: "#6CA86C", brandColorDark: "#6CA86C",
headerOpaque: true,
ogDefaultImage: "/nessa/og-default.png", ogDefaultImage: "/nessa/og-default.png",
faviconPath: "/nessa/favicon.ico" faviconPath: "/nessa/favicon.ico"
}, },

View File

@@ -0,0 +1,7 @@
import type { APIEvent } from "@solidjs/start/server";
import { rest } from "../_lib";
export const GET = (event: APIEvent) =>
rest(async (caller) => {
return caller.lineage.jsonService.quest_events();
}, event);