Skip to content

getting-started-again #725

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
techniq merged 1 commit into from
Dec 14, 2025
Merged

getting-started-again #725

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions docs/src/lib/components/Tabs.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
<script lang="ts">
import type { Snippet } from 'svelte';
import type { Snippet, Component } from 'svelte';
import { Tabs, Tab } from 'svelte-ux';
import { cls } from '@layerstack/tailwind';

interface Props {
value?: number; // 0-indexed, starting tab index
keys: string[];
icons?: Component[];
content?: Snippet<[number]>;
placement?: 'top' | 'left' | 'right' | 'bottom';
activeClass?: string;
Expand All @@ -20,6 +21,7 @@
let {
value = $bindable(0),
keys,
icons,
content,
placement = 'top',
activeClass = 'bg-surface-100 border-b-surface-100' /* assuming title header is present */,
Expand All @@ -44,10 +46,12 @@
<Tabs {placement} classes={mergedClasses} bind:value>
{#each keys as key, v}
{@const isActive = value === v}
{@const Icon = icons?.[v] ?? null}
<Tab
class={cls(mergedClasses.tabs, isActive && activeClass)}
on:click={() => (value = v)}
selected={isActive}>{key}</Tab
selected={isActive}
>{#if Icon}<Icon />{:else}{/if}{key}</Tab
>
{/each}
<svelte:fragment slot="content" let:value>
Expand Down
15 changes: 11 additions & 4 deletions docs/src/routes/docs/getting-started/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Button } from 'svelte-ux';
import { Button, Icon } from 'svelte-ux';

import A from '$lib/markdown/components/a.svelte';
import Code from '$lib/components/Code.svelte';
Expand All @@ -11,6 +11,11 @@

import LucideGithub from '~icons/lucide/github';
import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz'
import VscodeIconsPnpm from '~icons/vscode-icons/file-type-pnpm';
import VSCodeIconNpm from '~icons/vscode-icons/file-type-npm';
import VSCodeIconBUN from '~icons/vscode-icons/file-type-bun';
import VSCodeIconDeno from '~icons/vscode-icons/file-type-deno';
import VSCodeIconYarn from '~icons/vscode-icons/file-type-yarn';

const appcss = `.lc-root-container {
/* Default marks color when not using explicit color or color scale */
Expand All @@ -24,6 +29,8 @@
/* Content (text) color */
--color-surface-content: var(--color-gray-900);
}`;

let bundlerIndex = 0;
</script>

# Getting Started
Expand All @@ -37,7 +44,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
<p class="text-surface-content pt-2">
Use the Svelte CLI to generate a new SvelteKit project, or continue with an existing project.
</p>
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} classes={{ root: "py-2", content: 'p-0' }}>
<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} classes={{ root: "py-2", content: 'p-0' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpx sv create my-app add --tailwindcss\ncd my-app`} />
Expand All @@ -55,7 +62,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
<Blockquote>To add tailwind to an existing project you can <code>npv sv add tailwindcss</code></Blockquote>
</Step>
<Step title={`Import <code>layerchart</code> with your package manager of choice.`}>
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} classes={{ root: "py-2", content: 'p-0' }}>
<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} classes={{ root: "py-2", content: 'p-0' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm i layerchart`} />
Expand Down Expand Up @@ -118,7 +125,7 @@ Provides built-in first class support for <A href="https://tailwindcss.com/" tar
<p class="text-surface-content pt-2">
All set! Now just fire up the dev server and start iterating. Have fun!
</p>
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} hasTitle={false} classes={{ root: "pt-2", content: 'p-0' }}>
<Tabs bind:value={bundlerIndex} keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} icons={[VscodeIconsPnpm, VSCodeIconNpm, VSCodeIconBUN, VSCodeIconDeno, VSCodeIconYarn]} hasTitle={false} classes={{ root: "pt-2", content: 'p-0' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm dev`} />
Expand Down
Loading