xevion/xevion.dev
1
0
Fork 0
mirror of https://github.com/Xevion/xevion.dev.git synced 2026-01-31 06:26:44 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: formatting and accessibility improvements across admin components

Browse Source 
- Enforce consistent code formatting via ESLint rules
- Add accessibility enhancements (input IDs, labels, ARIA attributes)
- Replace Svelte store initialization patterns with reactive $effect
- Use $derived for reactive computed values
- Update error-codes and og-types indentation to spaces
- Add TypeScript definitions for html-minifier-terser
- Use resolve() for internal links in error and login pages
This commit is contained in:
Xevion
2026-01-06 14:39:21 -06:00
parent ae83569fd7
commit b3dd1954d3
29 changed files with 446 additions and 246 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/eslint.config.js
+10
View File
@@ -25,6 +25,16 @@ export default ts.config(
parser: ts.parser,
},
},
rules: {
// Disable resolve() requirement for dynamic hrefs in components
"svelte/no-navigation-without-resolve": "off",
},
},
{
files: ["**/*.svelte.ts"],
languageOptions: {
parser: ts.parser,
},
},
{
ignores: ["build/", ".svelte-kit/", "dist/"],
web/src/html-minifier-terser.d.ts
Vendored
+22
View File
@@ -0,0 +1,22 @@
declare module "html-minifier-terser" {
export interface Options {
collapseBooleanAttributes?: boolean;
collapseWhitespace?: boolean;
conservativeCollapse?: boolean;
decodeEntities?: boolean;
html5?: boolean;
ignoreCustomComments?: RegExp[];
minifyCSS?: boolean;
minifyJS?: boolean;
removeAttributeQuotes?: boolean;
removeComments?: boolean;
removeOptionalTags?: boolean;
removeRedundantAttributes?: boolean;
removeScriptTypeAttributes?: boolean;
removeStyleLinkTypeAttributes?: boolean;
sortAttributes?: boolean;
sortClassName?: boolean;
}
export function minify(html: string, options?: Options): string;
}
web/src/lib/admin-types.ts
+6 -1
View File
@@ -78,7 +78,12 @@ export interface AuthSession {
expiresAt: string; // ISO 8601
}
export type SocialPlatform = "github" | "linkedin" | "discord" | "email" | "pgp";
export type SocialPlatform =
| "github"
| "linkedin"
| "discord"
| "email"
| "pgp";
export interface SocialLink {
id: string;
web/src/lib/api.ts
+109 -26
View File
@@ -9,9 +9,6 @@ import type {
CreateTagData,
UpdateTagData,
SiteSettings,
SiteIdentity,
SocialLink,
AdminPreferences,
} from "./admin-types";
// ============================================================================
@@ -19,30 +16,110 @@ import type {
// ============================================================================
// Mock data storage (in-memory for now)
let MOCK_TAGS: AdminTag[] = [
{ id: "tag-1", slug: "rust", name: "Rust", createdAt: "2024-01-15T10:00:00Z" },
{ id: "tag-2", slug: "typescript", name: "TypeScript", createdAt: "2024-01-16T10:00:00Z" },
const MOCK_TAGS: AdminTag[] = [
{
id: "tag-1",
slug: "rust",
name: "Rust",
createdAt: "2024-01-15T10:00:00Z",
},
{
id: "tag-2",
slug: "typescript",
name: "TypeScript",
createdAt: "2024-01-16T10:00:00Z",
},
{ id: "tag-3", slug: "web", name: "Web", createdAt: "2024-01-17T10:00:00Z" },
{ id: "tag-4", slug: "cli", name: "CLI", createdAt: "2024-01-18T10:00:00Z" },
{ id: "tag-5", slug: "api", name: "API", createdAt: "2024-01-19T10:00:00Z" },
{ id: "tag-6", slug: "database", name: "Database", createdAt: "2024-01-20T10:00:00Z" },
{ id: "tag-7", slug: "svelte", name: "Svelte", createdAt: "2024-01-21T10:00:00Z" },
{ id: "tag-8", slug: "python", name: "Python", createdAt: "2024-01-22T10:00:00Z" },
{ id: "tag-9", slug: "machine-learning", name: "Machine Learning", createdAt: "2024-01-23T10:00:00Z" },
{ id: "tag-10", slug: "docker", name: "Docker", createdAt: "2024-01-24T10:00:00Z" },
{ id: "tag-11", slug: "kubernetes", name: "Kubernetes", createdAt: "2024-01-25T10:00:00Z" },
{ id: "tag-12", slug: "react", name: "React", createdAt: "2024-01-26T10:00:00Z" },
{ id: "tag-13", slug: "nextjs", name: "Next.js", createdAt: "2024-01-27T10:00:00Z" },
{ id: "tag-14", slug: "tailwind", name: "Tailwind CSS", createdAt: "2024-01-28T10:00:00Z" },
{ id: "tag-15", slug: "graphql", name: "GraphQL", createdAt: "2024-01-29T10:00:00Z" },
{ id: "tag-16", slug: "postgres", name: "PostgreSQL", createdAt: "2024-01-30T10:00:00Z" },
{ id: "tag-17", slug: "redis", name: "Redis", createdAt: "2024-01-31T10:00:00Z" },
{
id: "tag-6",
slug: "database",
name: "Database",
createdAt: "2024-01-20T10:00:00Z",
},
{
id: "tag-7",
slug: "svelte",
name: "Svelte",
createdAt: "2024-01-21T10:00:00Z",
},
{
id: "tag-8",
slug: "python",
name: "Python",
createdAt: "2024-01-22T10:00:00Z",
},
{
id: "tag-9",
slug: "machine-learning",
name: "Machine Learning",
createdAt: "2024-01-23T10:00:00Z",
},
{
id: "tag-10",
slug: "docker",
name: "Docker",
createdAt: "2024-01-24T10:00:00Z",
},
{
id: "tag-11",
slug: "kubernetes",
name: "Kubernetes",
createdAt: "2024-01-25T10:00:00Z",
},
{
id: "tag-12",
slug: "react",
name: "React",
createdAt: "2024-01-26T10:00:00Z",
},
{
id: "tag-13",
slug: "nextjs",
name: "Next.js",
createdAt: "2024-01-27T10:00:00Z",
},
{
id: "tag-14",
slug: "tailwind",
name: "Tailwind CSS",
createdAt: "2024-01-28T10:00:00Z",
},
{
id: "tag-15",
slug: "graphql",
name: "GraphQL",
createdAt: "2024-01-29T10:00:00Z",
},
{
id: "tag-16",
slug: "postgres",
name: "PostgreSQL",
createdAt: "2024-01-30T10:00:00Z",
},
{
id: "tag-17",
slug: "redis",
name: "Redis",
createdAt: "2024-01-31T10:00:00Z",
},
{ id: "tag-18", slug: "aws", name: "AWS", createdAt: "2024-02-01T10:00:00Z" },
{ id: "tag-19", slug: "devops", name: "DevOps", createdAt: "2024-02-02T10:00:00Z" },
{ id: "tag-20", slug: "security", name: "Security", createdAt: "2024-02-03T10:00:00Z" },
{
id: "tag-19",
slug: "devops",
name: "DevOps",
createdAt: "2024-02-02T10:00:00Z",
},
{
id: "tag-20",
slug: "security",
name: "Security",
createdAt: "2024-02-03T10:00:00Z",
},
];
let MOCK_PROJECTS: AdminProject[] = [
const MOCK_PROJECTS: AdminProject[] = [
{
id: "proj-1",
slug: "portfolio-site",
@@ -167,7 +244,8 @@ let MOCK_PROJECTS: AdminProject[] = [
id: "proj-9",
slug: "security-scanner",
title: "Security Scanner",
description: "Automated security vulnerability scanner for web applications",
description:
"Automated security vulnerability scanner for web applications",
status: "active",
githubRepo: "xevion/sec-scanner",
demoUrl: null,
@@ -197,7 +275,8 @@ let MOCK_PROJECTS: AdminProject[] = [
id: "proj-11",
slug: "deployment-tools",
title: "Deployment Automation Tools",
description: "CLI tools for automated deployments to multiple cloud providers",
description:
"CLI tools for automated deployments to multiple cloud providers",
status: "active",
githubRepo: "xevion/deploy-tools",
demoUrl: null,
@@ -270,7 +349,7 @@ let MOCK_PROJECTS: AdminProject[] = [
},
];
let MOCK_EVENTS: AdminEvent[] = [
const MOCK_EVENTS: AdminEvent[] = [
{
id: "evt-1",
timestamp: "2025-01-06T10:30:00Z",
@@ -455,7 +534,9 @@ export async function getAdminProjects(): Promise<AdminProject[]> {
return [...MOCK_PROJECTS].sort((a, b) => b.priority - a.priority);
}
export async function getAdminProject(id: string): Promise<AdminProject | null> {
export async function getAdminProject(
id: string,
): Promise<AdminProject | null> {
// TODO: Replace with apiFetch(`/admin/api/projects/${id}`) when backend ready
await new Promise((resolve) => setTimeout(resolve, 50));
return MOCK_PROJECTS.find((p) => p.id === id) || null;
@@ -743,7 +824,9 @@ export async function getSettings(): Promise<SiteSettings> {
return structuredClone(MOCK_SETTINGS);
}
export async function updateSettings(settings: SiteSettings): Promise<SiteSettings> {
export async function updateSettings(
settings: SiteSettings,
): Promise<SiteSettings> {
// TODO: Replace with apiFetch('/admin/api/settings', { method: 'PUT', body: JSON.stringify(settings) })
await new Promise((resolve) => setTimeout(resolve, 200));
web/src/lib/components/admin/Button.svelte
+8 -3
View File
@@ -33,8 +33,7 @@
"bg-transparent text-admin-text border border-zinc-700 hover:border-zinc-600 hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
danger:
"bg-red-600 text-white hover:bg-red-500 focus-visible:ring-red-500 shadow-sm hover:shadow",
ghost:
"text-admin-text hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
ghost: "text-admin-text hover:bg-zinc-800/50 focus-visible:ring-zinc-500",
};
const sizeStyles = {
@@ -47,7 +46,13 @@
{#if href}
<a
{href}
class={cn(baseStyles, variantStyles[variant], sizeStyles[size], "cursor-pointer", className)}
class={cn(
baseStyles,
variantStyles[variant],
sizeStyles[size],
"cursor-pointer",
className,
)}
aria-disabled={disabled}
>
{@render children?.()}
web/src/lib/components/admin/EventLog.svelte
+15 -7
View File
@@ -34,28 +34,30 @@
<OverlayScrollbarsComponent
options={{
scrollbars: { autoHide: "leave", autoHideDelay: 800 }
scrollbars: { autoHide: "leave", autoHideDelay: 800 },
}}
defer
style="max-height: {maxHeight}"
>
<div class="divide-y divide-zinc-800/50 bg-zinc-950">
{#each events as event}
{#each events as event (event.id)}
{@const levelColors = {
info: "text-cyan-500/60",
warning: "text-amber-500/70",
error: "text-rose-500/70"
error: "text-rose-500/70",
}}
{@const levelLabels = {
info: "INFO",
warning: "WARN",
error: "ERR"
error: "ERR",
}}
<div class="hover:bg-zinc-900/50 transition-colors">
<div class="px-4 py-1.5">
<div class="flex items-center justify-between gap-4 text-xs">
<div class="flex items-center gap-2.5 flex-1 min-w-0">
<span class={`${levelColors[event.level]} font-mono font-medium shrink-0 w-10`}>
<span
class={`${levelColors[event.level]} font-mono font-medium shrink-0 w-10`}
>
{levelLabels[event.level]}
</span>
<span class="text-zinc-300 truncate">
@@ -82,9 +84,15 @@
</div>
{#if showMetadata && expandedEventId === event.id && event.metadata}
<div class="px-4 pb-2">
<div class="bg-zinc-900 border border-zinc-800 rounded p-3 text-[11px]">
<div
class="bg-zinc-900 border border-zinc-800 rounded p-3 text-[11px]"
>
<p class="text-zinc-500 mb-2 font-medium">Metadata:</p>
<pre class="text-zinc-400 overflow-x-auto">{JSON.stringify(event.metadata, null, 2)}</pre>
<pre class="text-zinc-400 overflow-x-auto">{JSON.stringify(
event.metadata,
null,
2,
)}</pre>
</div>
</div>
{/if}
web/src/lib/components/admin/Input.svelte
+25 -9
View File
@@ -3,7 +3,14 @@
interface Props {
label?: string;
type?: "text" | "number" | "email" | "password" | "url" | "textarea" | "select";
type?:
| "text"
| "number"
| "email"
| "password"
| "url"
| "textarea"
| "select";
value: string | number;
placeholder?: string;
disabled?: boolean;
@@ -17,9 +24,9 @@
}
let {
label,
type = "text",
value = $bindable(""),
value = $bindable(),
label,
placeholder,
disabled = false,
required = false,
@@ -31,15 +38,21 @@
oninput,
}: Props = $props();
// Generate unique ID for accessibility
const inputId = `input-${Math.random().toString(36).substring(2, 11)}`;
const inputStyles =
"block w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder:text-zinc-500 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50 transition-colors";
const errorStyles = error
? "border-red-500 focus:border-red-500 focus:ring-red-500"
: "";
const errorStyles = $derived(
error ? "border-red-500 focus:border-red-500 focus:ring-red-500" : "",
);
function handleInput(e: Event) {
const target = e.target as HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
const target = e.target as
| HTMLInputElement
| HTMLTextAreaElement
| HTMLSelectElement;
const newValue = type === "number" ? Number(target.value) : target.value;
value = newValue;
oninput?.(newValue);
@@ -48,7 +61,7 @@
<div class={cn("space-y-1.5", className)}>
{#if label}
<label class="block text-sm font-medium text-admin-text">
<label for={inputId} class="block text-sm font-medium text-admin-text">
{label}
{#if required}
<span class="text-red-500">*</span>
@@ -58,6 +71,7 @@
{#if type === "textarea"}
<textarea
id={inputId}
bind:value
{placeholder}
{disabled}
@@ -68,6 +82,7 @@
></textarea>
{:else if type === "select"}
<select
id={inputId}
bind:value
{disabled}
{required}
@@ -77,12 +92,13 @@
{#if placeholder}
<option value="" disabled>{placeholder}</option>
{/if}
{#each options as option}
{#each options as option (option.value)}
<option value={option.value}>{option.label}</option>
{/each}
</select>
{:else}
<input
id={inputId}
{type}
bind:value
{placeholder}
web/src/lib/components/admin/Modal.svelte
+5 -3
View File
@@ -1,5 +1,4 @@
<script lang="ts">
import { cn } from "$lib/utils";
import Button from "./Button.svelte";
interface Props {
@@ -47,11 +46,14 @@
<div
class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4"
onclick={handleBackdropClick}
role="dialog"
aria-modal="true"
onkeydown={(e) => e.key === "Escape" && handleCancel()}
role="presentation"
tabindex="-1"
>
<div
class="relative w-full max-w-md rounded-xl bg-zinc-900 border border-zinc-800 p-8 shadow-xl shadow-black/50"
role="dialog"
aria-modal="true"
>
{#if title}
<h2 class="text-lg font-semibold text-zinc-50 mb-2">
web/src/lib/components/admin/ProjectForm.svelte
+35 -35
View File
@@ -2,7 +2,12 @@
import Button from "./Button.svelte";
import Input from "./Input.svelte";
import TagPicker from "./TagPicker.svelte";
import type { AdminProject, AdminTag, CreateProjectData, ProjectStatus } from "$lib/admin-types";
import type {
AdminProject,
AdminTag,
CreateProjectData,
ProjectStatus,
} from "$lib/admin-types";
interface Props {
project?: AdminProject | null;
@@ -19,18 +24,32 @@
}: Props = $props();
// Form state
let title = $state(project?.title ?? "");
let slug = $state(project?.slug ?? "");
let description = $state(project?.description ?? "");
let status = $state<ProjectStatus>(project?.status ?? "active");
let githubRepo = $state(project?.githubRepo ?? "");
let demoUrl = $state(project?.demoUrl ?? "");
let icon = $state(project?.icon ?? "");
let priority = $state(project?.priority ?? 0);
let selectedTagIds = $state<string[]>(project?.tags.map(t => t.id) ?? []);
let title = $state("");
let slug = $state("");
let description = $state("");
let status = $state<ProjectStatus>("active");
let githubRepo = $state("");
let demoUrl = $state("");
let icon = $state("");
let priority = $state(0);
let selectedTagIds = $state<string[]>([]);
// Initialize form from project prop
$effect(() => {
if (project) {
title = project.title;
slug = project.slug;
description = project.description;
status = project.status;
githubRepo = project.githubRepo ?? "";
demoUrl = project.demoUrl ?? "";
icon = project.icon ?? "";
priority = project.priority;
selectedTagIds = project.tags.map((t) => t.id);
}
});
let submitting = $state(false);
let slugTouched = $state(false);
const statusOptions = [
{ value: "active", label: "Active" },
@@ -45,11 +64,10 @@
.toLowerCase()
.replace(/[^\w\s-]/g, "")
.replace(/[\s_-]+/g, "-")
.replace(/^-+|-+$/g, "")
.replace(/^-+|-+$/g, ""),
);
function handleSlugInput(value: string | number) {
slugTouched = true;
slug = value as string;
}
@@ -76,8 +94,6 @@
submitting = false;
}
}
</script>
<form onsubmit={handleSubmit} class="space-y-6">
@@ -170,15 +186,8 @@
<!-- Media Upload Placeholder -->
<div class="space-y-1.5">
<label class="block text-sm font-medium text-admin-text">
Media
</label>
<Button
type="button"
variant="secondary"
disabled
class="w-full"
>
<div class="block text-sm font-medium text-admin-text">Media</div>
<Button type="button" variant="secondary" disabled class="w-full">
<i class="fa-solid fa-upload mr-2"></i>
Upload Images/Videos (Coming Soon)
</Button>
@@ -189,17 +198,8 @@
<!-- Actions -->
<div class="flex justify-end gap-3 pt-4 border-t border-admin-border">
<Button
variant="secondary"
href="/admin/projects"
>
Cancel
</Button>
<Button
type="submit"
variant="primary"
disabled={submitting || !title}
>
<Button variant="secondary" href="/admin/projects">Cancel</Button>
<Button type="submit" variant="primary" disabled={submitting || !title}>
{submitting ? "Saving..." : submitLabel}
</Button>
</div>
web/src/lib/components/admin/Sidebar.svelte
+15 -7
View File
@@ -24,17 +24,22 @@
interface NavItem {
href: string;
label: string;
icon: any;
icon: import("svelte").Component;
badge?: number;
}
const navItems: NavItem[] = [
const navItems = $derived<NavItem[]>([
{ href: "/admin", label: "Dashboard", icon: IconLayoutDashboard },
{ href: "/admin/projects", label: "Projects", icon: IconFolder, badge: projectCount },
{
href: "/admin/projects",
label: "Projects",
icon: IconFolder,
badge: projectCount,
},
{ href: "/admin/tags", label: "Tags", icon: IconTags, badge: tagCount },
{ href: "/admin/events", label: "Events", icon: IconList },
{ href: "/admin/settings", label: "Settings", icon: IconSettings },
];
]);
const pathname = $derived($page.url.pathname as string);
@@ -67,7 +72,7 @@
<aside
class={cn(
"fixed left-0 top-0 z-40 h-screen w-64 border-r border-zinc-800 bg-admin-bg transition-transform lg:translate-x-0",
mobileMenuOpen ? "translate-x-0" : "-translate-x-full"
mobileMenuOpen ? "translate-x-0" : "-translate-x-full",
)}
>
<div class="flex h-full flex-col">
@@ -81,14 +86,14 @@
<!-- Navigation -->
<nav class="flex-1 space-y-0.5 p-3">
{#each navItems as item}
{#each navItems as item (item.href)}
<a
href={item.href}
class={cn(
"flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-all relative",
isActive(item.href)
? "bg-zinc-800/50 text-zinc-50 before:absolute before:left-0 before:top-1 before:bottom-1 before:w-0.5 before:bg-indigo-500 before:rounded-r"
: "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/30"
: "text-zinc-400 hover:text-zinc-200 hover:bg-zinc-800/30",
)}
>
<item.icon class="w-4 h-4 flex-shrink-0" />
@@ -127,5 +132,8 @@
<div
class="fixed inset-0 z-30 bg-black/50 lg:hidden"
onclick={() => (mobileMenuOpen = false)}
onkeydown={(e) => e.key === "Escape" && (mobileMenuOpen = false)}
role="presentation"
tabindex="-1"
></div>
{/if}
web/src/lib/components/admin/Table.svelte
+3 -1
View File
@@ -9,7 +9,9 @@
let { class: className, children }: Props = $props();
</script>
<div class={cn("overflow-x-auto rounded-lg border border-admin-border", className)}>
<div
class={cn("overflow-x-auto rounded-lg border border-admin-border", className)}
>
<table class="w-full text-sm">
{@render children?.()}
</table>
web/src/lib/components/admin/TagPicker.svelte
+10 -6
View File
@@ -23,16 +23,19 @@
let dropdownOpen = $state(false);
let inputRef: HTMLInputElement | undefined = $state();
// Generate unique ID for accessibility
const inputId = `tagpicker-${Math.random().toString(36).substring(2, 11)}`;
const selectedTags = $derived(
availableTags.filter((tag) => selectedTagIds.includes(tag.id))
availableTags.filter((tag) => selectedTagIds.includes(tag.id)),
);
const filteredTags = $derived(
availableTags.filter(
(tag) =>
!selectedTagIds.includes(tag.id) &&
tag.name.toLowerCase().includes(searchTerm.toLowerCase())
)
tag.name.toLowerCase().includes(searchTerm.toLowerCase()),
),
);
function addTag(tagId: string) {
@@ -59,7 +62,7 @@
<div class={cn("space-y-1.5", className)}>
{#if label}
<label class="block text-sm font-medium text-admin-text">
<label for={inputId} class="block text-sm font-medium text-admin-text">
{label}
</label>
{/if}
@@ -70,7 +73,7 @@
class="min-h-[42px] w-full rounded-md border border-admin-border bg-admin-panel px-3 py-2"
>
<div class="flex flex-wrap gap-2">
{#each selectedTags as tag}
{#each selectedTags as tag (tag.id)}
<span
class="inline-flex items-center gap-1 rounded-full bg-blue-500/10 px-2.5 py-0.5 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-500/20"
>
@@ -88,6 +91,7 @@
<!-- Search input -->
<input
id={inputId}
bind:this={inputRef}
type="text"
bind:value={searchTerm}
@@ -104,7 +108,7 @@
<div
class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border border-admin-border bg-admin-panel py-1 shadow-lg"
>
{#each filteredTags as tag}
{#each filteredTags as tag (tag.id)}
<button
type="button"
class="w-full px-3 py-2 text-left text-sm text-admin-text hover:bg-admin-hover transition-colors"
web/src/routes/+error.svelte
+2 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { resolve } from "$app/paths";
import AppWrapper from "$lib/components/AppWrapper.svelte";
import { page } from "$app/stores";
@@ -27,7 +28,7 @@
<p class="mb-8 text-2xl text-zinc-400">{message}</p>
{#if showHomeLink}
<a
href="/"
href={resolve("/")}
class="inline-block rounded-sm bg-zinc-900 px-4 py-2 text-zinc-100 transition-colors hover:bg-zinc-800"
>
Return home
web/src/routes/admin/+layout.server.ts
+1 -4
View File
@@ -19,10 +19,7 @@ export const load: LayoutServerLoad = async ({ request, url }) => {
}
// For other paths, include next parameter
throw redirect(
302,
`/admin/login?next=${encodeURIComponent(targetPath)}`
);
throw redirect(302, `/admin/login?next=${encodeURIComponent(targetPath)}`);
}
return {
web/src/routes/admin/+layout.svelte
+7 -5
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { resolve } from "$app/paths";
import { page } from "$app/stores";
import Sidebar from "$lib/components/admin/Sidebar.svelte";
import AppWrapper from "$lib/components/AppWrapper.svelte";
@@ -10,7 +11,6 @@
let { children, data } = $props();
let stats = $state<AdminStats | null>(null);
let loading = $state(true);
const pathname = $derived($page.url.pathname as string);
const isLoginPage = $derived(pathname === "/admin/login");
@@ -23,14 +23,16 @@
stats = await getAdminStats();
} catch (error) {
console.error("Failed to load stats:", error);
} finally {
loading = false;
}
}
// Sync authStore with server session on mount
$effect(() => {
if (data?.session?.authenticated && data.session.username && !authStore.isAuthenticated) {
if (
data?.session?.authenticated &&
data.session.username &&
!authStore.isAuthenticated
) {
authStore.setSession(data.session.username);
}
});
@@ -44,7 +46,7 @@
function handleLogout() {
authStore.logout();
goto("/admin/login");
goto(resolve("/admin/login"));
}
</script>
web/src/routes/admin/+page.svelte
+11 -12
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import { resolve } from "$app/paths";
import Button from "$lib/components/admin/Button.svelte";
import EventLog from "$lib/components/admin/EventLog.svelte";
import { getAdminEvents } from "$lib/api";
@@ -51,20 +52,20 @@
<Button variant="secondary" href="/admin/projects">
View All Projects
</Button>
<Button variant="secondary" href="/admin/tags">
Manage Tags
</Button>
<Button variant="secondary" href="/admin/events">
View Events
</Button>
<Button variant="secondary" href="/admin/tags">Manage Tags</Button>
<Button variant="secondary" href="/admin/events">View Events</Button>
</div>
<!-- Recent Events -->
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20">
<div class="flex items-center justify-between px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800">
<div
class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20"
>
<div
class="flex items-center justify-between px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800"
>
<h2 class="text-sm font-medium text-zinc-300">Recent Events</h2>
<a
href="/admin/events"
href={resolve("/admin/events")}
class="text-sm text-indigo-400 hover:text-indigo-300 transition-colors"
>
View all →
@@ -72,9 +73,7 @@
</div>
{#if recentEvents.length === 0}
<p class="text-sm text-zinc-500 text-center py-8">
No events yet
</p>
<p class="text-sm text-zinc-500 text-center py-8">No events yet</p>
{:else}
<EventLog events={recentEvents} maxHeight="400px" />
{/if}
web/src/routes/admin/events/+page.svelte
+11 -13
View File
@@ -31,14 +31,10 @@
}
}
// Load events on mount and when filters change
$effect(() => {
loadEvents();
});
// Reload when filters change
$effect(() => {
filterLevel;
filterTarget;
void filterLevel;
void filterTarget;
loadEvents();
});
</script>
@@ -57,7 +53,9 @@
</div>
<!-- Filters -->
<div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
<div
class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
>
<h3 class="text-sm font-medium text-zinc-400 mb-4">Filters</h3>
<div class="grid gap-4 md:grid-cols-2">
<Input
@@ -77,15 +75,15 @@
<!-- Events Log -->
{#if loading}
<div class="text-center py-12 text-zinc-500">
Loading events...
</div>
<div class="text-center py-12 text-zinc-500">Loading events...</div>
{:else if events.length === 0}
<div class="text-center py-12">
<p class="text-zinc-500">No events found</p>
</div>
{:else}
<div class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20">
<div
class="rounded-xl border border-zinc-800 bg-zinc-900/50 overflow-hidden shadow-sm shadow-black/20"
>
<div class="px-6 py-3.5 bg-zinc-800/30 border-b border-zinc-800">
<h2 class="text-sm font-medium text-zinc-300">
Event Log
@@ -94,7 +92,7 @@
</span>
</h2>
</div>
<EventLog events={events} maxHeight="600px" showMetadata={true} />
<EventLog {events} maxHeight="600px" showMetadata={true} />
</div>
{/if}
</div>
web/src/routes/admin/login/+page.svelte
+3 -4
View File
@@ -1,5 +1,6 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { resolve } from "$app/paths";
import { page } from "$app/stores";
import Button from "$lib/components/admin/Button.svelte";
import Input from "$lib/components/admin/Input.svelte";
@@ -42,9 +43,7 @@
<div class="flex min-h-screen items-center justify-center px-4">
<div class="w-full max-w-md space-y-4">
<!-- Login Form -->
<div
class="rounded-lg bg-admin-panel p-8 shadow-2xl shadow-zinc-500/20"
>
<div class="rounded-lg bg-admin-panel p-8 shadow-2xl shadow-zinc-500/20">
<form onsubmit={handleSubmit} class="space-y-6">
<Input
label="Username"
@@ -86,7 +85,7 @@
<!-- Back to site link -->
<div class="text-center">
<a
href="/"
href={resolve("/")}
class="text-sm text-admin-text-muted hover:text-admin-text transition-colors"
>
← Back to site
web/src/routes/admin/projects/+page.svelte
+7 -9
View File
@@ -84,9 +84,7 @@
<div class="flex items-center justify-between">
<div>
<h1 class="text-xl font-semibold text-zinc-50">Projects</h1>
<p class="mt-1 text-sm text-zinc-500">
Manage your project portfolio
</p>
<p class="mt-1 text-sm text-zinc-500">Manage your project portfolio</p>
</div>
<Button variant="primary" href="/admin/projects/new">
<IconPlus class="w-4 h-4 mr-2" />
@@ -96,13 +94,13 @@
<!-- Projects Table -->
{#if loading}
<div class="text-center py-12 text-zinc-500">
Loading projects...
</div>
<div class="text-center py-12 text-zinc-500">Loading projects...</div>
{:else if projects.length === 0}
<div class="text-center py-12">
<p class="text-zinc-500 mb-4">No projects yet</p>
<Button variant="primary" href="/admin/projects/new">Create your first project</Button>
<Button variant="primary" href="/admin/projects/new"
>Create your first project</Button
>
</div>
{:else}
<Table>
@@ -129,7 +127,7 @@
</tr>
</thead>
<tbody class="divide-y divide-zinc-800/50">
{#each projects as project}
{#each projects as project (project.id)}
<tr class="hover:bg-zinc-800/30 transition-colors">
<td class="px-4 py-3">
<div class="flex items-center gap-3">
@@ -150,7 +148,7 @@
</td>
<td class="px-4 py-3">
<div class="flex flex-wrap gap-1">
{#each project.tags.slice(0, 3) as tag}
{#each project.tags.slice(0, 3) as tag (tag.id)}
<Badge variant="default">{tag.name}</Badge>
{/each}
{#if project.tags.length > 3}
web/src/routes/admin/projects/[id]/+page.svelte
+20 -10
View File
@@ -1,9 +1,16 @@
<script lang="ts">
import { page } from "$app/stores";
import { goto } from "$app/navigation";
import { resolve } from "$app/paths";
import ProjectForm from "$lib/components/admin/ProjectForm.svelte";
import { getAdminProject, getAdminTags, updateAdminProject } from "$lib/api";
import type { AdminProject, AdminTag, AdminTagWithCount, CreateProjectData, UpdateProjectData } from "$lib/admin-types";
import type {
AdminProject,
AdminTag,
AdminTagWithCount,
CreateProjectData,
UpdateProjectData,
} from "$lib/admin-types";
const projectId = $derived(($page.params as { id: string }).id);
@@ -19,16 +26,18 @@
]);
project = projectData;
tags = tagsWithCounts.map((t: AdminTagWithCount): AdminTag => ({
tags = tagsWithCounts.map(
(t: AdminTagWithCount): AdminTag => ({
id: t.id,
slug: t.slug,
name: t.name,
createdAt: t.createdAt
}));
createdAt: t.createdAt,
}),
);
} catch (error) {
console.error("Failed to load data:", error);
alert("Failed to load project");
goto("/admin/projects");
goto(resolve("/admin/projects"));
} finally {
loading = false;
}
@@ -44,7 +53,7 @@
id: projectId,
};
await updateAdminProject(updateData);
goto("/admin/projects");
goto(resolve("/admin/projects"));
}
</script>
@@ -63,13 +72,14 @@
<!-- Form -->
{#if loading}
<div class="text-center py-12 text-admin-text-muted">
Loading...
</div>
<div class="text-center py-12 text-admin-text-muted">Loading...</div>
{:else if !project}
<div class="text-center py-12">
<p class="text-admin-text-muted mb-4">Project not found</p>
<a href="/admin/projects" class="text-blue-400 hover:text-blue-300">
<a
href={resolve("/admin/projects")}
class="text-blue-400 hover:text-blue-300"
>
← Back to projects
</a>
</div>
web/src/routes/admin/projects/new/+page.svelte
+13 -8
View File
@@ -1,8 +1,13 @@
<script lang="ts">
import { goto } from "$app/navigation";
import { resolve } from "$app/paths";
import ProjectForm from "$lib/components/admin/ProjectForm.svelte";
import { getAdminTags, createAdminProject } from "$lib/api";
import type { AdminTag, AdminTagWithCount, CreateProjectData } from "$lib/admin-types";
import type {
AdminTag,
AdminTagWithCount,
CreateProjectData,
} from "$lib/admin-types";
let tags = $state<AdminTag[]>([]);
let loading = $state(true);
@@ -10,12 +15,14 @@
async function loadTags() {
try {
const tagsWithCounts = await getAdminTags();
tags = tagsWithCounts.map((t: AdminTagWithCount): AdminTag => ({
tags = tagsWithCounts.map(
(t: AdminTagWithCount): AdminTag => ({
id: t.id,
slug: t.slug,
name: t.name,
createdAt: t.createdAt
}));
createdAt: t.createdAt,
}),
);
} catch (error) {
console.error("Failed to load tags:", error);
} finally {
@@ -29,7 +36,7 @@
async function handleSubmit(data: CreateProjectData) {
await createAdminProject(data);
goto("/admin/projects");
goto(resolve("/admin/projects"));
}
</script>
@@ -48,9 +55,7 @@
<!-- Form -->
{#if loading}
<div class="text-center py-12 text-admin-text-muted">
Loading...
</div>
<div class="text-center py-12 text-admin-text-muted">Loading...</div>
{:else}
<div class="rounded-lg border border-admin-border bg-admin-panel p-6">
<ProjectForm
web/src/routes/admin/settings/[[tab]]/+page.svelte
+20 -9
View File
@@ -22,7 +22,9 @@
let activeTab = $derived.by(() => {
const params = $page.params as { tab?: string };
const tab = params.tab as Tab | undefined;
return tab && ["identity", "social", "admin"].includes(tab) ? tab : "identity";
return tab && ["identity", "social", "admin"].includes(tab)
? tab
: "identity";
});
// Form state - will be populated when settings load
@@ -98,6 +100,7 @@
}
function navigateToTab(tab: Tab) {
// eslint-disable-next-line svelte/no-navigation-without-resolve
goto(`/admin/settings/${tab}`, { replaceState: true });
}
</script>
@@ -127,7 +130,7 @@
"pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
activeTab === "identity"
? "border-indigo-500 text-zinc-50"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
)}
onclick={() => navigateToTab("identity")}
>
@@ -139,7 +142,7 @@
"pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
activeTab === "social"
? "border-indigo-500 text-zinc-50"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
)}
onclick={() => navigateToTab("social")}
>
@@ -151,7 +154,7 @@
"pb-3 px-1 text-sm font-medium border-b-2 transition-colors",
activeTab === "admin"
? "border-indigo-500 text-zinc-50"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700"
: "border-transparent text-zinc-400 hover:text-zinc-300 hover:border-zinc-700",
)}
onclick={() => navigateToTab("admin")}
>
@@ -161,10 +164,14 @@
</div>
<!-- Tab Content -->
<div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
<div
class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
>
{#if activeTab === "identity"}
<div class="space-y-4">
<h3 class="text-base font-medium text-zinc-200 mb-4">Site Identity</h3>
<h3 class="text-base font-medium text-zinc-200 mb-4">
Site Identity
</h3>
<Input
label="Display Name"
type="text"
@@ -204,7 +211,7 @@
</p>
<div class="space-y-3">
{#each formData.socialLinks as link}
{#each formData.socialLinks as link (link.id)}
{@const Icon = getSocialIcon(link.platform)}
<div
class="rounded-lg border border-zinc-800 bg-zinc-900/50 p-4 hover:border-zinc-700 transition-colors"
@@ -215,7 +222,9 @@
</div>
<div class="flex-1 space-y-3">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-zinc-200">{link.label}</span>
<span class="text-sm font-medium text-zinc-200"
>{link.label}</span
>
<label class="flex items-center gap-2 cursor-pointer">
<span class="text-xs text-zinc-500">Visible</span>
<input
@@ -238,7 +247,9 @@
</div>
{:else if activeTab === "admin"}
<div class="space-y-4">
<h3 class="text-base font-medium text-zinc-200 mb-4">Admin Preferences</h3>
<h3 class="text-base font-medium text-zinc-200 mb-4">
Admin Preferences
</h3>
<Input
label="Session Timeout"
type="number"
web/src/routes/admin/tags/+page.svelte
+24 -9
View File
@@ -3,8 +3,17 @@
import Input from "$lib/components/admin/Input.svelte";
import Table from "$lib/components/admin/Table.svelte";
import Modal from "$lib/components/admin/Modal.svelte";
import { getAdminTags, createAdminTag, updateAdminTag, deleteAdminTag } from "$lib/api";
import type { AdminTagWithCount, CreateTagData, UpdateTagData } from "$lib/admin-types";
import {
getAdminTags,
createAdminTag,
updateAdminTag,
deleteAdminTag,
} from "$lib/api";
import type {
AdminTagWithCount,
CreateTagData,
UpdateTagData,
} from "$lib/admin-types";
import IconPlus from "~icons/lucide/plus";
import IconX from "~icons/lucide/x";
@@ -148,7 +157,10 @@
Manage project tags and categories
</p>
</div>
<Button variant="primary" onclick={() => (showCreateForm = !showCreateForm)}>
<Button
variant="primary"
onclick={() => (showCreateForm = !showCreateForm)}
>
{#if showCreateForm}
<IconX class="w-4 h-4 mr-2" />
{:else}
@@ -160,7 +172,9 @@
<!-- Create Form -->
{#if showCreateForm}
<div class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20">
<div
class="rounded-xl border border-zinc-800 bg-zinc-900 p-6 shadow-sm shadow-black/20"
>
<h3 class="text-base font-medium text-zinc-200 mb-4">Create New Tag</h3>
<div class="grid gap-4 md:grid-cols-2">
<Input
@@ -194,9 +208,7 @@
<!-- Tags Table -->
{#if loading}
<div class="text-center py-12 text-zinc-500">
Loading tags...
</div>
<div class="text-center py-12 text-zinc-500">Loading tags...</div>
{:else if tags.length === 0}
<div class="text-center py-12">
<p class="text-zinc-500 mb-4">No tags yet</p>
@@ -223,7 +235,7 @@
</tr>
</thead>
<tbody class="divide-y divide-zinc-800/50">
{#each tags as tag}
{#each tags as tag (tag.id)}
<tr class="hover:bg-zinc-800/30 transition-colors">
{#if editingId === tag.id}
<!-- Edit mode -->
@@ -315,7 +327,10 @@
<div class="rounded-md bg-zinc-800/50 border border-zinc-700 p-3">
<p class="font-medium text-zinc-200">{deleteTarget.name}</p>
<p class="text-sm text-zinc-500">
Used in {deleteTarget.projectCount} project{deleteTarget.projectCount === 1 ? "" : "s"}
Used in {deleteTarget.projectCount} project{deleteTarget.projectCount ===
1
? ""
: "s"}
</p>
</div>
{/if}
web/src/routes/errors/[code]/+page.svelte
-1
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import { resolve } from "$app/paths";
import AppWrapper from "$components/AppWrapper.svelte";
import Dots from "$lib/components/Dots.svelte";
let { data } = $props();
web/src/routes/internal/ogp/+page.svelte
+2 -1
View File
@@ -2,6 +2,7 @@
import { onMount } from "svelte";
import { browser } from "$app/environment";
import type { PageData } from "./$types";
import { resolve } from "$app/paths";
let { data }: { data: PageData } = $props();
@@ -62,7 +63,7 @@
<div class="examples">
<h2>Example URLs:</h2>
<ul>
<li><a href="/internal/ogp?type=index">Index page</a></li>
<li><a href={resolve("/internal/ogp")}>Index page</a></li>
<li><a href="/internal/ogp?type=projects">Projects page</a></li>
<li>
<a href="/internal/ogp?type=project&id=example-id"
web/vite-plugin-json-logger.ts
+1 -1
View File
@@ -25,6 +25,7 @@ function railwayFormatter(record: LogRecord): string {
}
function stripAnsi(str: string): string {
// eslint-disable-next-line no-control-regex
return str.replace(/\u001b\[[0-9;]*m/g, "").trim();
}
@@ -115,7 +116,6 @@ export function jsonLogger(): Plugin {
server = s;
const logger = getLogger(["vite"]);
const originalPrintUrls = server.printUrls;
server.printUrls = () => {
const urls = server.resolvedUrls;
if (urls) {