Stan Runge
8275f1fb22
- health schema: vaccinations, body_measurements, workouts, nutrition_daily, sleep (generated hours), medications, hair_progress, appointments - migration with updated_at triggers; grants to personal_app only - /trackers/health overview with add/edit/delete, owner-gated (404 otherwise), noindex + private no-store, hidden from listings for non-owners - owner-only JSON/CSV import endpoint and scripts/health-import.ts
420 lines
15 KiB
Svelte
Executable File
420 lines
15 KiB
Svelte
Executable File
<script lang="ts">
|
|
import '../app.css';
|
|
import { onMount } from 'svelte';
|
|
import { resolve, asset } from '$app/paths';
|
|
import { dev } from '$app/env';
|
|
import { page } from '$app/state';
|
|
import { getSeo } from '#lib/seo.js';
|
|
import CopyButton from '#lib/components/CopyButton.svelte';
|
|
import ProjectIcon from '#lib/components/ProjectIcon.svelte';
|
|
import { projects, visibleTrackers } from '#lib/projects.js';
|
|
import { Button, buttonVariants } from '#lib/components/ui/button/index.js';
|
|
import * as Sheet from '#lib/components/ui/sheet/index.js';
|
|
import ArrowRight from 'lucide-svelte/icons/arrow-right';
|
|
import ChevronDown from 'lucide-svelte/icons/chevron-down';
|
|
import ExternalLink from 'lucide-svelte/icons/external-link';
|
|
import Menu from 'lucide-svelte/icons/menu';
|
|
import SiOsu from '~icons/simple-icons/osu';
|
|
import SiSteam from '~icons/simple-icons/steam';
|
|
import SiTwitch from '~icons/simple-icons/twitch';
|
|
import SiSpotify from '~icons/simple-icons/spotify';
|
|
import SiGithub from '~icons/simple-icons/github';
|
|
import SiYoutube from '~icons/simple-icons/youtube';
|
|
import SiLinkedin from '~icons/simple-icons/linkedin';
|
|
import SiInstagram from '~icons/simple-icons/instagram';
|
|
import SiX from '~icons/simple-icons/x';
|
|
import SiMail from '~icons/simple-icons/gmail';
|
|
import SiDiscord from '~icons/simple-icons/discord';
|
|
import SiSignal from '~icons/simple-icons/signal';
|
|
import SiWhatsapp from '~icons/simple-icons/whatsapp';
|
|
|
|
let { data, children } = $props();
|
|
const seo = $derived(getSeo(page.url.pathname, page.data, data.environment));
|
|
let menuOpen = $state(false);
|
|
// Which header dropdown is open (desktop): '/projects', '/trackers' or none.
|
|
let openMenu = $state<string | null>(null);
|
|
type ThemePreference = 'dark' | 'system' | 'light';
|
|
let theme = $state<ThemePreference>('dark');
|
|
const navigation = [
|
|
{ label: 'home', href: '/' },
|
|
{ label: 'projects', href: '/projects' },
|
|
{ label: 'trackers', href: '/trackers' },
|
|
{ label: 'blog', href: '/blog' },
|
|
{ label: 'lists', href: '/lists' }
|
|
] as const;
|
|
type MenuItem = { name: string; subtitle: string; href: string; external: boolean };
|
|
const menus: Record<string, { label: string; items: readonly MenuItem[] }> = $derived({
|
|
'/projects': { label: 'projects', items: projects },
|
|
'/trackers': { label: 'trackers', items: visibleTrackers(data.isOwner) }
|
|
});
|
|
const socialLinks = [
|
|
{ icon: SiMail, label: 'email', href: 'mailto:stan@stanrunge.dev' },
|
|
{ icon: SiGithub, label: 'github', href: 'https://github.com/stanrunge' },
|
|
{ icon: SiLinkedin, label: 'linkedin', href: 'https://linkedin.com/in/stanrunge' },
|
|
{ icon: SiX, label: 'x / twitter', href: 'https://x.com/stanrunge' },
|
|
{ icon: SiYoutube, label: 'youtube', href: 'https://youtube.com/@stanrunge' },
|
|
{ icon: SiInstagram, label: 'instagram', href: 'https://instagram.com/stan_runge' },
|
|
{ icon: SiTwitch, label: 'twitch', href: 'https://twitch.tv/stanrunge_' },
|
|
{
|
|
icon: SiSpotify,
|
|
label: 'spotify',
|
|
href: 'https://open.spotify.com/user/e3o3qr9z7fpsu4gur9zz4y1ld'
|
|
},
|
|
{ icon: SiSteam, label: 'steam', href: 'https://steamcommunity.com/id/stanrunge' },
|
|
{ icon: SiOsu, label: 'osu!', href: 'https://osu.ppy.sh/users/11212255' }
|
|
];
|
|
const copyLinks = [
|
|
{ icon: SiWhatsapp, label: 'WhatsApp', value: 'stanrunge' },
|
|
{ icon: SiDiscord, label: 'Discord', value: 'stanrunge' },
|
|
{ icon: SiSignal, label: 'Signal', value: 'stan.443' }
|
|
];
|
|
|
|
onMount(() => {
|
|
const preference = document.documentElement.dataset.themePreference;
|
|
theme = preference === 'light' || preference === 'system' ? preference : 'dark';
|
|
const systemTheme = window.matchMedia('(prefers-color-scheme: light)');
|
|
const onSystemThemeChange = () => {
|
|
if (theme === 'system') applyTheme('system');
|
|
};
|
|
systemTheme.addEventListener('change', onSystemThemeChange);
|
|
return () => systemTheme.removeEventListener('change', onSystemThemeChange);
|
|
});
|
|
|
|
function applyTheme(preference: ThemePreference) {
|
|
const resolvedTheme =
|
|
preference === 'system'
|
|
? window.matchMedia('(prefers-color-scheme: light)').matches
|
|
? 'light'
|
|
: 'dark'
|
|
: preference;
|
|
document.documentElement.dataset.themePreference = preference;
|
|
document.documentElement.dataset.theme = resolvedTheme;
|
|
document.documentElement.classList.toggle('dark', resolvedTheme === 'dark');
|
|
document
|
|
.querySelector('meta[name="theme-color"]')
|
|
?.setAttribute('content', resolvedTheme === 'light' ? '#ffffff' : '#000000');
|
|
}
|
|
|
|
function toggleTheme() {
|
|
theme = theme === 'dark' ? 'system' : theme === 'system' ? 'light' : 'dark';
|
|
applyTheme(theme);
|
|
try {
|
|
localStorage.setItem('theme', theme);
|
|
} catch {
|
|
// The selected theme still applies for this visit.
|
|
}
|
|
}
|
|
|
|
function current(href: string) {
|
|
return page.url.pathname === href || (href !== '/' && page.url.pathname.startsWith(href + '/'));
|
|
}
|
|
|
|
function handleMenuPointerEnter(event: PointerEvent, href: string) {
|
|
if (event.pointerType === 'touch') return;
|
|
openMenu = href;
|
|
}
|
|
|
|
function handleMenuPointerLeave(event: PointerEvent) {
|
|
if (event.pointerType === 'touch') return;
|
|
openMenu = null;
|
|
}
|
|
</script>
|
|
|
|
{#snippet themeIcon()}
|
|
<svg
|
|
viewBox="0 0 24 24"
|
|
width="22"
|
|
height="22"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.7"
|
|
stroke-linecap="round"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"
|
|
/>
|
|
<circle cx="12" cy="12" r="6" fill={theme === 'light' ? 'currentColor' : 'none'} />
|
|
{#if theme === 'system'}
|
|
<path d="M12 6a6 6 0 0 1 0 12Z" fill="currentColor" stroke="none" />
|
|
{/if}
|
|
</svg>
|
|
{/snippet}
|
|
|
|
<svelte:head>
|
|
{#if !dev}
|
|
<script
|
|
defer
|
|
src="https://analytics.stanrunge.dev/script.js"
|
|
data-website-id="47f2b385-188a-4776-a287-4889008ebac5"
|
|
></script>
|
|
{/if}
|
|
<title>{seo.title}</title>
|
|
<meta name="description" content={seo.description} />
|
|
<meta name="robots" content={seo.indexable ? 'index, follow' : 'noindex, nofollow'} />
|
|
<link rel="canonical" href={seo.url} />
|
|
<meta property="og:site_name" content="Stan Runge" />
|
|
<meta property="og:type" content={seo.type} />
|
|
<meta property="og:title" content={seo.title} />
|
|
<meta property="og:description" content={seo.description} />
|
|
<meta property="og:url" content={seo.url} />
|
|
<meta property="og:image" content={seo.image} />
|
|
<meta property="og:image:alt" content={seo.imageAlt} />
|
|
<meta property="og:image:width" content="793" />
|
|
<meta property="og:image:height" content="793" />
|
|
{#if seo.modifiedAt}<meta property="article:modified_time" content={seo.modifiedAt} />{/if}
|
|
<meta name="twitter:card" content="summary" />
|
|
<meta name="twitter:creator" content="@stanrunge" />
|
|
<meta name="twitter:title" content={seo.title} />
|
|
<meta name="twitter:description" content={seo.description} />
|
|
<meta name="twitter:image" content={seo.image} />
|
|
<meta name="twitter:image:alt" content={seo.imageAlt} />
|
|
</svelte:head>
|
|
|
|
<div class="flex min-h-screen flex-col bg-[var(--site-bg)] text-[var(--site-text)]">
|
|
<a
|
|
href="#main"
|
|
class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:bg-[var(--site-bg)] focus:px-4 focus:py-2"
|
|
>skip to content</a
|
|
>
|
|
<!--
|
|
Stacking: backdrop-blur makes the header its own stacking context, so the dropdown's z-50 only
|
|
counts inside it. Without a z-index of its own the header then sits at z-auto/0 and anything
|
|
positioned later in <main> (maps, chart tooltips, sticky headers) paints over the dropdown.
|
|
Fix: lift the header (relative z-50) and isolate <main> so page z-indexes stay inside it.
|
|
Dialogs/sheets/popovers are portalled to <body> and still render above both.
|
|
-->
|
|
<header class="relative z-50 border-b border-border bg-background/95 backdrop-blur">
|
|
<div class="mx-auto flex max-w-6xl items-center gap-3 px-4 py-3 sm:px-6">
|
|
<a
|
|
href={resolve('/')}
|
|
class="flex shrink-0 items-center gap-3 font-semibold tracking-tight"
|
|
aria-label="Stan Runge home"
|
|
>
|
|
<span class="h-7 w-7 overflow-hidden rounded-full bg-black"
|
|
><img
|
|
src={asset('favicon-32x32.png')}
|
|
alt=""
|
|
width="32"
|
|
height="32"
|
|
class="h-full w-full scale-[1.7]"
|
|
/></span
|
|
>
|
|
<span>stan runge</span>
|
|
</a>
|
|
<nav class="ml-auto hidden items-center gap-1 md:flex" aria-label="Main navigation">
|
|
{#each navigation as item (item.href)}
|
|
{#if menus[item.href]}
|
|
{@const menu = menus[item.href]}
|
|
<div
|
|
class="relative"
|
|
role="group"
|
|
aria-label={`${menu.label} menu`}
|
|
onpointerenter={(event) => handleMenuPointerEnter(event, item.href)}
|
|
onpointerleave={handleMenuPointerLeave}
|
|
>
|
|
<Button
|
|
href={resolve(item.href)}
|
|
variant={current(item.href) ? 'secondary' : 'ghost'}
|
|
size="sm"
|
|
class="cursor-pointer gap-1"
|
|
aria-label={`Browse ${menu.label}`}
|
|
aria-haspopup="true"
|
|
aria-expanded={openMenu === item.href}
|
|
onclick={() => (openMenu = null)}
|
|
onkeydown={(event) => {
|
|
if (event.key === 'Escape') openMenu = null;
|
|
}}>{item.label}<ChevronDown size={15} /></Button
|
|
>
|
|
{#if openMenu === item.href}
|
|
<div
|
|
class="absolute top-full left-0 z-50 max-h-[70vh] w-72 overflow-y-auto rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md"
|
|
aria-label={menu.label}
|
|
>
|
|
<a
|
|
href={resolve(item.href)}
|
|
class="flex items-center rounded-sm px-2 py-1.5 text-sm font-medium outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent"
|
|
>all {menu.label} <ArrowRight size={14} class="ml-auto" /></a
|
|
>
|
|
<div class="my-1 h-px bg-border"></div>
|
|
{#each menu.items as project (project.name)}
|
|
<!-- Internal project links use resolve; external URLs are from the project catalog. -->
|
|
<!-- eslint-disable svelte/no-navigation-without-resolve -->
|
|
<a
|
|
href={project.external ? project.href : resolve(project.href)}
|
|
rel={project.external ? 'external' : undefined}
|
|
class="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground focus-visible:bg-accent"
|
|
>
|
|
<span
|
|
class="flex size-8 shrink-0 items-center justify-center rounded border border-border bg-[var(--site-surface)] text-[var(--site-muted)]"
|
|
>
|
|
<ProjectIcon name={project.name} class="size-4" />
|
|
</span>
|
|
<span class="min-w-0"
|
|
><span class="block font-medium">{project.name}</span><span
|
|
class="block truncate text-xs text-muted-foreground"
|
|
>{project.subtitle}</span
|
|
></span
|
|
>
|
|
{#if project.external}<ExternalLink size={14} class="ml-auto shrink-0" />{/if}
|
|
</a>
|
|
<!-- eslint-enable svelte/no-navigation-without-resolve -->
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<Button
|
|
href={resolve(item.href)}
|
|
variant={current(item.href) ? 'secondary' : 'ghost'}
|
|
size="sm">{item.label}</Button
|
|
>
|
|
{/if}
|
|
{/each}
|
|
</nav>
|
|
<div class="hidden items-center gap-1 md:flex">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onclick={toggleTheme}
|
|
aria-label={`Theme: ${theme}. Switch mode`}
|
|
title={`Theme: ${theme}`}>{@render themeIcon()}</Button
|
|
>
|
|
{#if data.user}
|
|
<Button href={resolve('account')} variant="outline" size="sm" class="max-w-36 truncate"
|
|
>{data.user.name}</Button
|
|
>
|
|
{:else}
|
|
<Button
|
|
href={resolve(
|
|
`login?returnTo=${encodeURIComponent(page.url.pathname + page.url.search)}`
|
|
)}
|
|
variant="outline"
|
|
size="sm">sign in</Button
|
|
>
|
|
{/if}
|
|
</div>
|
|
<Sheet.Root bind:open={menuOpen}>
|
|
<Sheet.Trigger
|
|
class={buttonVariants({ variant: 'ghost', size: 'icon' }) + ' ml-auto md:hidden'}
|
|
aria-label="Open navigation"><Menu size={20} /></Sheet.Trigger
|
|
>
|
|
<Sheet.Content side="right" class="overflow-y-auto p-6">
|
|
<Sheet.Header
|
|
><Sheet.Title>stan runge</Sheet.Title><Sheet.Description>Navigation</Sheet.Description
|
|
></Sheet.Header
|
|
>
|
|
<nav class="flex flex-col gap-1" aria-label="Mobile navigation">
|
|
{#each navigation as item (item.href)}
|
|
<Button
|
|
href={resolve(item.href)}
|
|
variant={current(item.href) ? 'secondary' : 'ghost'}
|
|
class="justify-start"
|
|
onclick={() => (menuOpen = false)}>{item.label}</Button
|
|
>
|
|
{#if menus[item.href]}
|
|
<div class="ml-3 flex flex-col border-l border-border pl-3">
|
|
{#each menus[item.href].items as project (project.name)}
|
|
<Button
|
|
href={project.external ? project.href : resolve(project.href)}
|
|
variant="ghost"
|
|
size="sm"
|
|
class="justify-start"
|
|
onclick={() => (menuOpen = false)}>{project.name}</Button
|
|
>
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
{/each}
|
|
</nav>
|
|
<Sheet.Footer
|
|
class="mt-auto flex-row items-center justify-between border-t border-border pt-4"
|
|
>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onclick={toggleTheme}
|
|
aria-label={`Theme: ${theme}. Switch mode`}>{@render themeIcon()}</Button
|
|
>
|
|
{#if data.user}
|
|
<Button href={resolve('account')} variant="outline" onclick={() => (menuOpen = false)}
|
|
>account</Button
|
|
>
|
|
<form method="POST" action="/logout">
|
|
<Button type="submit" variant="outline">sign out</Button>
|
|
</form>
|
|
{:else}
|
|
<Button href={resolve('login')} variant="outline" onclick={() => (menuOpen = false)}
|
|
>sign in</Button
|
|
>
|
|
<Button
|
|
href={resolve('register')}
|
|
variant="outline"
|
|
onclick={() => (menuOpen = false)}>register</Button
|
|
>
|
|
{/if}
|
|
</Sheet.Footer>
|
|
</Sheet.Content>
|
|
</Sheet.Root>
|
|
</div>
|
|
</header>
|
|
<main id="main" class="isolate min-w-0 flex-1">{@render children()}</main>
|
|
<footer
|
|
class="mt-16 border-t border-[var(--site-border)]"
|
|
class:tracker-footer={page.route.id === '/projects/game-tracker'}
|
|
class:cod-footer={page.route.id === '/projects/game-tracker/call-of-duty/[slug]'}
|
|
>
|
|
<div class="mx-auto max-w-6xl space-y-5 px-4 py-8 text-[var(--site-muted)] sm:px-6">
|
|
<div class="flex flex-wrap items-center justify-between gap-3 text-base">
|
|
<span
|
|
>stan runge <span class="ml-2 font-mono text-xs" title="Deployed commit"
|
|
>{data.version.slice(0, 7)}</span
|
|
></span
|
|
>
|
|
<a
|
|
href="https://git.stanrunge.dev/stan/website"
|
|
rel="external"
|
|
class="inline-flex items-center gap-1 hover:text-[var(--site-text)]"
|
|
>source <ExternalLink size={14} aria-hidden="true" /></a
|
|
>
|
|
</div>
|
|
<nav class="flex flex-wrap items-center justify-center gap-1" aria-label="Social links">
|
|
{#each socialLinks as { icon: Icon, label, href } (label)}
|
|
<Button
|
|
{href}
|
|
variant="ghost"
|
|
size="icon-lg"
|
|
rel="external"
|
|
aria-label={label}
|
|
title={label}><Icon class="size-6" /></Button
|
|
>
|
|
{/each}
|
|
{#each copyLinks as item (item.label)}<CopyButton {...item} />{/each}
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
|
|
<style>
|
|
@media (min-width: 1100px) and (min-height: 700px) {
|
|
.cod-footer {
|
|
display: none;
|
|
}
|
|
}
|
|
@media (min-width: 1024px) and (min-height: 650px) {
|
|
.tracker-footer {
|
|
margin-top: 0;
|
|
}
|
|
.tracker-footer > div {
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
.tracker-footer nav {
|
|
display: none;
|
|
}
|
|
.tracker-footer > div > div {
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
</style>
|