Skip to content

Steps redo #707

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 2 commits into from
Dec 1, 2025
Merged

Steps redo #707

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
420bb99
Steps-redo
cycle4passion Dec 1, 2025
53c4de2
Steps Redo
cycle4passion Dec 1, 2025
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
36 changes: 36 additions & 0 deletions docs/src/lib/components/Step.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
<script lang="ts">
import type { Snippet } from 'svelte';

interface Props {
title: string;
children: Snippet;
}

let { title, children }: Props = $props();
</script>

<div class="left flex flex-col items-center">
<div class="circle relative bg-surface-content/20 outline shadow-md rounded-full size-6"></div>
<div class="line bg-surface-content/10 w-px flex-1"></div>
</div>
<div
class="right content ml-4 pb-2.5 [&_a]:text-primary [&_a]:font-semibold [&_a]:decoration-primary/50 [&_a:hover]:underline [&_a:hover]:underline-offset-2"
>
<h2 class="text-lg font-bold">
{@html title}
</h2>
{@render children?.()}
</div>

<style>
.circle::before {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
counter-increment: section;
content: counter(section);
}

/* override last one - target the second-to-last child (last left div) */
.left:nth-last-child(2) .circle::before {
content: '✔︎';
}
</style>
64 changes: 3 additions & 61 deletions docs/src/lib/components/Steps.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,67 +1,9 @@
<script lang="ts">
import type { Snippet } from 'svelte';

let props = $props();

const stepSnippetMap = $derived(
Object.keys(props)
.filter(
(key) => key.startsWith('step') && typeof props[key as keyof typeof props] === 'function'
)
.reduce(
(map, key) => {
const isTitle = key.endsWith('Title');
const stepNum = parseInt(key.replace('step', '').replace('Title', '')) || 0;

if (!map[stepNum]) {
map[stepNum] = { title: undefined, content: undefined };
}

map[stepNum][isTitle ? 'title' : 'content'] = props[key as keyof typeof props] as Snippet;

return map;
},
{} as Record<number, { title?: Snippet; content?: Snippet }>
)
);
let { children }: { children: Snippet } = $props();
</script>

<div class="steps grid grid-cols-[50px_1fr] mt-6" style="counter-reset: section">
{#each Array(Object.keys(stepSnippetMap).length) as _, i}
{@render step(stepSnippetMap[i + 1].title, stepSnippetMap[i + 1].content)}
{/each}
<div class="steps grid grid-cols-[30px_1fr] mt-6" style="counter-reset: section">
{@render children?.()}
</div>

{#snippet step(titleSnippet: Snippet | undefined, stepSnippet?: Snippet)}
<div class="left flex flex-col items-center">
<div class="circle relative bg-surface-content/20 outline shadow-md rounded-full size-6"></div>
<div class="line bg-surface-content/10 w-px flex-1"></div>
</div>
<div
class="right content ml-4 pb-2.5 [&_a]:text-primary [&_a]:font-semibold [&_a]:decoration-primary/50 [&_a:hover]:underline [&_a:hover]:underline-offset-2"
>
{#if titleSnippet}
<h2 class="text-lg font-bold">
{@render titleSnippet()}
</h2>
{/if}
{@render stepContent(stepSnippet)}
</div>
{/snippet}

{#snippet stepContent(stepSnippet?: Snippet)}
{@render stepSnippet?.()}
{/snippet}

<style>
.circle::before {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
counter-increment: section;
content: counter(section);
}

/* override last one - target the second-to-last child (last left div) */
.left:nth-last-child(2) .circle::before {
content: '✔︎';
}
</style>
42 changes: 0 additions & 42 deletions docs/src/lib/components/TabbedCode.svelte
View file
Open in desktop

This file was deleted.

200 changes: 93 additions & 107 deletions docs/src/routes/docs/getting-started/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
import Code from '$lib/components/Code.svelte';
import Example from '$lib/components/Example.svelte';
import Steps from '$lib/components/Steps.svelte';
import Step from '$lib/components/Step.svelte';
import Tabs from '$lib/components/Tabs.svelte';
import Blockquote from '$lib/components/Blockquote.svelte';

Expand Down Expand Up @@ -32,122 +33,107 @@ LayerChart can be used standlone, or integrates nicely with other frameworks and
Provides built-in first class support for <A href="https://tailwindcss.com/" target="_blank">tailwindcss 4</A>, but is completely optional and also works seamlessly with regular CSS and inline styles.

<Steps>
{#snippet step1Title()}
Create a new project or <a href="#git-up-and-running-even-quicker">git a project</a>
{/snippet}
{#snippet step1Content()}
<Step title={`Create a new project or <a href="#git-up-and-running-even-quicker">git a project</a>`} >
<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' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 1}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 2}
<Code language="sh" title="sh" source={`bunx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 3}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 4}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{/if}
{/snippet}
</Tabs>
<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' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm i layerchart`} />
{:else if value === 1}
<Code language="sh" title="sh" source={`npm i layerchart`} />
{:else if value === 2}
<Code language="sh" title="sh" source={`bun add layerchart`} />
{:else if value === 3}
<Code language="sh" title="sh" source={`deno add layerchart`} />
{:else if value === 4}
<Code language="sh" title="sh" source={`yarn add layerchart`} />
{/if}
{/snippet}
</Tabs>
</Step>
<Step title= {`Apply CSS`} >
<p class="text-surface-content pt-2">
Out of the box LayerChart will use <a
href="https://www.digitalocean.com/community/tutorials/css-currentcolor"
target="_blank"><code>currentColor</code></a
> as the default color, but you can customize the CSS globally with a few CSS variables.
</p>
<Code language="css" title="app.css" source={appcss} class="mt-4 outline" />
<p class="pt-4 text-surface-content">
or with a single <code>.css</code> import, Layerchart <a
href="https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles"
>provides</a
> theming conventions for many popular UI frameworks.
</p>
<Tabs
keys={['shadcn-svelte', 'Skeleton 3', 'Skeleton 4', 'Svelte UX', 'DaisyUI 5']}
classes={{ root: 'mt-4', content: 'p-0' }}
>
{#snippet content(value)}
{#if value === 0}
<Code language="css" title="app.css" source={`@import 'layerchart/shadcn-svelte.css';`} />
{:else if value === 1}
<Code language="css" title="app.css" source={`@import 'layerchart/skeleton-3.css';`} />
{:else if value === 2}
<Code language="css" title="app.css" source={`@import 'layerchart/skeleton-4.css';`} />
{:else if value === 3}
<Code language="css" title="app.css" source={`@import 'layerchart/svelte-ux.css';`} />
{:else if value === 4}
<Code language="css" title="app.css" source={`@import 'layerchart/daisyui-5.css';`} />
{:else if value === 5}
<Code language="css" title="app.css" source={`@import 'layerchart/standalone.css';`} />
{/if}
{/snippet}
</Tabs>
</Step>
<Step title={`Create you first chart`} >
<p class="text-surface-content pt-2">
Use the Svelte CLI to generate a new SvelteKit project, or continue with an existing project.
Import the charting components you need from <code>layerchart</code>. Don't forget to take a look at the large collection of <a href="/docs/examples">examples</a> for some additonal inspiration.
</p>
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} 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`} />
{:else if value === 1}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 2}
<Code language="sh" title="sh" source={`bunx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 3}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{:else if value === 4}
<Code language="sh" title="sh" source={`npx sv create my-app add --tailwindcss\ncd my-app`} />
{/if}
{/snippet}
</Tabs>
<Blockquote>To add tailwind to an existing project you can <code>npv sv add tailwindcss</code></Blockquote>
{/snippet}
{#snippet step2Title()}
Import <code>layerchart</code> with your package manager of choice.
{/snippet}
{#snippet step2Content()}
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} classes={{ root: "py-2", content: 'p-0' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm i layerchart`} />
{:else if value === 1}
<Code language="sh" title="sh" source={`npm i layerchart`} />
{:else if value === 2}
<Code language="sh" title="sh" source={`bun add layerchart`} />
{:else if value === 3}
<Code language="sh" title="sh" source={`deno add layerchart`} />
{:else if value === 4}
<Code language="sh" title="sh" source={`yarn add layerchart`} />
{/if}
{/snippet}
</Tabs>
{/snippet}
{#snippet step3Title()}
Apply CSS
{/snippet}
{#snippet step3Content()}
<p class="text-surface-content pt-2">
Out of the box LayerChart will use <a
href="https://www.digitalocean.com/community/tutorials/css-currentcolor"
target="_blank"><code>currentColor</code></a
> as the default color, but you can customize the CSS globally with a few CSS variables.
</p>
<Code language="css" title="app.css" source={appcss} class="mt-4 outline" />
<p class="pt-4 text-surface-content">
or with a single <code>.css</code> import, Layerchart <a
href="https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles"
>provides</a
> theming conventions for many popular UI frameworks.
<div class="mt-4">
<Example component="LineChart" name="basic" showCode={true} />
</div>
</Step>
<Step title={`Done!`} >
<p class="text-surface-content pt-2">
All set! Now just fire up the dev server and start iterating. Have fun!
</p>
<Tabs
keys={['shadcn-svelte', 'Skeleton 3', 'Skeleton 4', 'Svelte UX', 'DaisyUI 5']}
classes={{ root: 'mt-4', content: 'p-0' }}
>
<Tabs keys={['pnpm', 'npm', 'bun', 'deno', 'yarn']} hasTitle={false} classes={{ root: "pt-2", content: 'p-0' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="css" title="app.css" source={`@import 'layerchart/shadcn-svelte.css';`} />
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm dev`} />
{:else if value === 1}
<Code language="css" title="app.css" source={`@import 'layerchart/skeleton-3.css';`} />
<Code language="sh" title="sh" source={`npm run dev`} />
{:else if value === 2}
<Code language="css" title="app.css" source={`@import 'layerchart/skeleton-4.css';`} />
<Code language="sh" title="sh" source={`bun run dev`} />
{:else if value === 3}
<Code language="css" title="app.css" source={`@import 'layerchart/svelte-ux.css';`} />
<Code language="sh" title="sh" source={`deno task dev`} />
{:else if value === 4}
<Code language="css" title="app.css" source={`@import 'layerchart/daisyui-5.css';`} />
{:else if value === 5}
<Code language="css" title="app.css" source={`@import 'layerchart/standalone.css';`} />
<Code language="sh" title="sh" source={`yarn dev`} />
{/if}
{/snippet}
</Tabs>
{/snippet}
{#snippet step4Title()}
Create you first chart
{/snippet}
{#snippet step4Content()}
<p class="text-surface-content pt-2">
Import the charting components you need from <code>layerchart</code>. Don't forget to take a look at the large collection of <a href="/docs/examples">examples</a> for some additonal inspiration.
</p>
<div class="mt-4">
<Example component="LineChart" name="basic" showCode={true} />
</div>
{/snippet}
{#snippet step5Title()}
Done!
{/snippet}
{#snippet step5Content()}
<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' }}>
{#snippet content(value)}
{#if value === 0}
<Code language="sh" title="sh" source={`pnpm dev`} />
{:else if value === 1}
<Code language="sh" title="sh" source={`npm run dev`} />
{:else if value === 2}
<Code language="sh" title="sh" source={`bun run dev`} />
{:else if value === 3}
<Code language="sh" title="sh" source={`deno task dev`} />
{:else if value === 4}
<Code language="sh" title="sh" source={`yarn dev`} />
{/if}
{/snippet}
</Tabs>
{/snippet}
</Step>
</Steps>

### Git up and running even quicker!
Expand Down Expand Up @@ -186,9 +172,9 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples
</Tabs>

{#snippet githubButton(path, text = 'Source')}
<Button href="https://github.com/techniq/layerchart/tree/docs-v2/examples/{path}" icon={LucideGithub} size="sm" variant="fill-light" target="_blank">{text}</Button>
<Button href="https://github.com/techniq/layerchart/tree/docs-v2/examples/{path}" icon={LucideGithub} size="sm" variant="fill-light" target="_blank">{text}</Button>
{/snippet}

{#snippet stackBlitzButton(path, text = 'Open in StackBlitz')}
<Button href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/{path}" icon={SimpleIconsStackblitz} size="sm" variant="fill-light" target="_blank">{text}</Button>
<Button href="https://stackblitz.com/github/techniq/layerchart/tree/docs-v2/examples/{path}" icon={SimpleIconsStackblitz} size="sm" variant="fill-light" target="_blank">{text}</Button>
{/snippet}
Loading