xyroscar/resona
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

formatting files, removing unused app sidebar

Browse Source
This commit is contained in:
xyroscar
2025-11-24 16:19:09 -08:00
parent 9cb60f7473
commit 653a23f805
5 changed files with 114 additions and 290 deletions
Download Patch File Download Diff File Expand all files Collapse all files

198
src/lib/components/app-sidebar.svelte
View File

@@ -1,198 +0,0 @@
<script lang="ts" module>
// sample data
const data = {
versions: ["1.0.1", "1.1.0-alpha", "2.0.0-beta1"],
navMain: [
{
title: "Getting Started",
url: "#",
items: [
{
title: "Installation",
url: "#",
},
{
title: "Project Structure",
url: "#",
},
],
},
{
title: "Building Your Application",
url: "#",
items: [
{
title: "Routing",
url: "#",
},
{
title: "Data Fetching",
url: "#",
isActive: true,
},
{
title: "Rendering",
url: "#",
},
{
title: "Caching",
url: "#",
},
{
title: "Styling",
url: "#",
},
{
title: "Optimizing",
url: "#",
},
{
title: "Configuring",
url: "#",
},
{
title: "Testing",
url: "#",
},
{
title: "Authentication",
url: "#",
},
{
title: "Deploying",
url: "#",
},
{
title: "Upgrading",
url: "#",
},
{
title: "Examples",
url: "#",
},
],
},
{
title: "API Reference",
url: "#",
items: [
{
title: "Components",
url: "#",
},
{
title: "File Conventions",
url: "#",
},
{
title: "Functions",
url: "#",
},
{
title: "next.config.js Options",
url: "#",
},
{
title: "CLI",
url: "#",
},
{
title: "Edge Runtime",
url: "#",
},
],
},
{
title: "Architecture",
url: "#",
items: [
{
title: "Accessibility",
url: "#",
},
{
title: "Fast Refresh",
url: "#",
},
{
title: "Next.js Compiler",
url: "#",
},
{
title: "Supported Browsers",
url: "#",
},
{
title: "Turbopack",
url: "#",
},
],
},
{
title: "Community",
url: "#",
items: [
{
title: "Contribution Guide",
url: "#",
},
],
},
],
};
</script>
<script lang="ts">
import SearchForm from "./search-form.svelte";
import VersionSwitcher from "./version-switcher.svelte";
import * as Collapsible from "$lib/components/ui/collapsible/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
import type { ComponentProps } from "svelte";
let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
</script>
<Sidebar.Root bind:ref {...restProps}>
<Sidebar.Header>
<VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} />
<SearchForm />
</Sidebar.Header>
<Sidebar.Content class="gap-0">
<!-- We create a collapsible SidebarGroup for each parent. -->
{#each data.navMain as item (item.title)}
<Collapsible.Root title={item.title} open class="group/collapsible">
<Sidebar.Group>
<Sidebar.GroupLabel
class="group/label text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground text-sm"
>
{#snippet child({ props })}
<Collapsible.Trigger {...props}>
{item.title}
<ChevronRightIcon
class="ms-auto transition-transform group-data-[state=open]/collapsible:rotate-90"
/>
</Collapsible.Trigger>
{/snippet}
</Sidebar.GroupLabel>
<Collapsible.Content>
<Sidebar.GroupContent>
<Sidebar.Menu>
{#each item.items as subItem (subItem.title)}
<Sidebar.MenuItem>
<Sidebar.MenuButton isActive={subItem.isActive}>
{#snippet child({ props })}
<a href={subItem.url} {...props}>{subItem.title}</a>
{/snippet}
</Sidebar.MenuButton>
</Sidebar.MenuItem>
{/each}
</Sidebar.Menu>
</Sidebar.GroupContent>
</Collapsible.Content>
</Sidebar.Group>
</Collapsible.Root>
{/each}
</Sidebar.Content>
<Sidebar.Rail />
</Sidebar.Root>

37
src/lib/components/search-form.svelte
View File

@@ -1,21 +1,28 @@
<script lang="ts">
import { Label } from "$lib/components/ui/label/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import type { WithElementRef } from "$lib/utils.js";
import SearchIcon from "@lucide/svelte/icons/search";
import type { HTMLFormAttributes } from "svelte/elements";
import { Label } from "$lib/components/ui/label/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import type { WithElementRef } from "$lib/utils.js";
import SearchIcon from "@lucide/svelte/icons/search";
import type { HTMLFormAttributes } from "svelte/elements";
let { ref = $bindable(null), ...restProps }: WithElementRef<HTMLFormAttributes> = $props();
let {
ref = $bindable(null),
...restProps
}: WithElementRef<HTMLFormAttributes> = $props();
</script>
<form bind:this={ref} {...restProps}>
<Sidebar.Group class="py-0">
<Sidebar.GroupContent class="relative">
<Label for="search" class="sr-only">Search</Label>
<Sidebar.Input id="search" placeholder="Search the docs..." class="ps-8" />
<SearchIcon
class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
/>
</Sidebar.GroupContent>
</Sidebar.Group>
<Sidebar.Group class="py-0">
<Sidebar.GroupContent class="relative">
<Label for="search" class="sr-only">Search</Label>
<Sidebar.Input
id="search"
placeholder="Search the docs..."
class="ps-8"
/>
<SearchIcon
class="pointer-events-none absolute start-2 top-1/2 size-4 -translate-y-1/2 select-none opacity-50"
/>
</Sidebar.GroupContent>
</Sidebar.Group>
</form>

88
src/lib/components/version-switcher.svelte
View File

@@ -1,48 +1,54 @@
<script lang="ts">
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import CheckIcon from "@lucide/svelte/icons/check";
import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
import CheckIcon from "@lucide/svelte/icons/check";
import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
import GalleryVerticalEndIcon from "@lucide/svelte/icons/gallery-vertical-end";
let { versions, defaultVersion }: { versions: string[]; defaultVersion: string } = $props();
let {
versions,
defaultVersion,
}: { versions: string[]; defaultVersion: string } = $props();
let selectedVersion = $state(defaultVersion);
let selectedVersion = $state(defaultVersion);
</script>
<Sidebar.Menu>
<Sidebar.MenuItem>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Sidebar.MenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
{...props}
>
<div
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
>
<GalleryVerticalEndIcon class="size-4" />
</div>
<div class="flex flex-col gap-0.5 leading-none">
<span class="font-medium">Documentation</span>
<span class="">v{selectedVersion}</span>
</div>
<ChevronsUpDownIcon class="ms-auto" />
</Sidebar.MenuButton>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content class="w-(--bits-dropdown-menu-anchor-width)" align="start">
{#each versions as version (version)}
<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
v{version}
{#if version === selectedVersion}
<CheckIcon class="ms-auto" />
{/if}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
</Sidebar.MenuItem>
<Sidebar.MenuItem>
<DropdownMenu.Root>
<DropdownMenu.Trigger>
{#snippet child({ props })}
<Sidebar.MenuButton
size="lg"
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
{...props}
>
<div
class="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg"
>
<GalleryVerticalEndIcon class="size-4" />
</div>
<div class="flex flex-col gap-0.5 leading-none">
<span class="font-medium">Documentation</span>
<span class="">v{selectedVersion}</span>
</div>
<ChevronsUpDownIcon class="ms-auto" />
</Sidebar.MenuButton>
{/snippet}
</DropdownMenu.Trigger>
<DropdownMenu.Content
class="w-(--bits-dropdown-menu-anchor-width)"
align="start"
>
{#each versions as version (version)}
<DropdownMenu.Item onSelect={() => (selectedVersion = version)}>
v{version}
{#if version === selectedVersion}
<CheckIcon class="ms-auto" />
{/if}
</DropdownMenu.Item>
{/each}
</DropdownMenu.Content>
</DropdownMenu.Root>
</Sidebar.MenuItem>
</Sidebar.Menu>

4
src/lib/services/onboarding.ts
View File

@@ -1,3 +1,3 @@
export async function check_onboarding(): Promise<Boolean> {
return Promise.resolve(true);
}
return Promise.resolve(true);
}

77
src/lib/theme-switcher.ts
View File

@@ -1,45 +1,54 @@
import { writable } from 'svelte/store';
import { browser } from '$app/environment';
import { writable } from "svelte/store";
import { browser } from "$app/environment";
export const themes = ['light', 'dark', 'latte', 'frappe', 'macchiato', 'mocha'] as const;
export const themes = [
"light",
"dark",
"latte",
"frappe",
"macchiato",
"mocha",
] as const;
type Theme = (typeof themes)[number];
const createThemeStore = () => {
const { subscribe, set } = writable<Theme>('light');
const { subscribe, set } = writable<Theme>("light");
function applyTheme(theme: Theme) {
if (browser) {
document.documentElement.classList.remove(...themes);
document.documentElement.classList.add(theme);
localStorage.setItem('theme', theme);
set(theme);
}
}
function applyTheme(theme: Theme) {
if (browser) {
document.documentElement.classList.remove(...themes);
document.documentElement.classList.add(theme);
localStorage.setItem("theme", theme);
set(theme);
}
}
function initializeTheme() {
if (browser) {
const storedTheme = localStorage.getItem('theme') as Theme | null;
const systemTheme: Theme = window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light';
const initialTheme = storedTheme ?? systemTheme;
applyTheme(initialTheme);
}
}
function initializeTheme() {
if (browser) {
const storedTheme = localStorage.getItem("theme") as Theme | null;
const systemTheme: Theme = window.matchMedia(
"(prefers-color-scheme: dark)"
).matches
? "dark"
: "light";
const initialTheme = storedTheme ?? systemTheme;
applyTheme(initialTheme);
}
}
function resetToSystem() {
if (browser) {
localStorage.removeItem('theme');
initializeTheme();
}
}
function resetToSystem() {
if (browser) {
localStorage.removeItem("theme");
initializeTheme();
}
}
return {
subscribe,
applyTheme,
initializeTheme,
resetToSystem
};
return {
subscribe,
applyTheme,
initializeTheme,
resetToSystem,
};
};
export const theme = createThemeStore();