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

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

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

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

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