diff --git a/docs/src/lib/components/Step.svelte b/docs/src/lib/components/Step.svelte new file mode 100644 index 000000000..51a1696a6 --- /dev/null +++ b/docs/src/lib/components/Step.svelte @@ -0,0 +1,36 @@ + + +
+
+
+
+
+

+ {@html title} +

+ {@render children?.()} +
+ + diff --git a/docs/src/lib/components/Steps.svelte b/docs/src/lib/components/Steps.svelte index dbfcca061..162915b96 100644 --- a/docs/src/lib/components/Steps.svelte +++ b/docs/src/lib/components/Steps.svelte @@ -1,67 +1,9 @@ -
- {#each Array(Object.keys(stepSnippetMap).length) as _, i} - {@render step(stepSnippetMap[i + 1].title, stepSnippetMap[i + 1].content)} - {/each} +
+ {@render children?.()}
- -{#snippet step(titleSnippet: Snippet | undefined, stepSnippet?: Snippet)} -
-
-
-
-
- {#if titleSnippet} -

- {@render titleSnippet()} -

- {/if} - {@render stepContent(stepSnippet)} -
-{/snippet} - -{#snippet stepContent(stepSnippet?: Snippet)} - {@render stepSnippet?.()} -{/snippet} - - diff --git a/docs/src/lib/components/TabbedCode.svelte b/docs/src/lib/components/TabbedCode.svelte deleted file mode 100644 index 25737e8b5..000000000 --- a/docs/src/lib/components/TabbedCode.svelte +++ /dev/null @@ -1,42 +0,0 @@ - - -
- - - - - -
- - diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md index 0e165b2cd..580a8e769 100644 --- a/docs/src/routes/docs/getting-started/+page.md +++ b/docs/src/routes/docs/getting-started/+page.md @@ -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'; @@ -32,122 +33,107 @@ LayerChart can be used standlone, or integrates nicely with other frameworks and Provides built-in first class support for tailwindcss 4, but is completely optional and also works seamlessly with regular CSS and inline styles. - {#snippet step1Title()} - Create a new project or git a project - {/snippet} - {#snippet step1Content()} + git a project`} > +

+ Use the Svelte CLI to generate a new SvelteKit project, or continue with an existing project. +

+ + {#snippet content(value)} + {#if value === 0} + + {:else if value === 1} + + {:else if value === 2} + + {:else if value === 3} + + {:else if value === 4} + + {/if} + {/snippet} + +
To add tailwind to an existing project you can npv sv add tailwindcss
+ + layerchart with your package manager of choice.`}> + + {#snippet content(value)} + {#if value === 0} + + {:else if value === 1} + + {:else if value === 2} + + {:else if value === 3} + + {:else if value === 4} + + {/if} + {/snippet} + + + +

+ Out of the box LayerChart will use currentColor as the default color, but you can customize the CSS globally with a few CSS variables. +

+ +

+ or with a single .css import, Layerchart provides theming conventions for many popular UI frameworks. +

+ + {#snippet content(value)} + {#if value === 0} + + {:else if value === 1} + + {:else if value === 2} + + {:else if value === 3} + + {:else if value === 4} + + {:else if value === 5} + + {/if} + {/snippet} + + +

- Use the Svelte CLI to generate a new SvelteKit project, or continue with an existing project. + Import the charting components you need from layerchart. Don't forget to take a look at the large collection of examples for some additonal inspiration.

- - {#snippet content(value)} - {#if value === 0} - - {:else if value === 1} - - {:else if value === 2} - - {:else if value === 3} - - {:else if value === 4} - - {/if} - {/snippet} - -
To add tailwind to an existing project you can npv sv add tailwindcss
- {/snippet} - {#snippet step2Title()} - Import layerchart with your package manager of choice. - {/snippet} - {#snippet step2Content()} - - {#snippet content(value)} - {#if value === 0} - - {:else if value === 1} - - {:else if value === 2} - - {:else if value === 3} - - {:else if value === 4} - - {/if} - {/snippet} - - {/snippet} - {#snippet step3Title()} - Apply CSS - {/snippet} - {#snippet step3Content()} -

- Out of the box LayerChart will use currentColor as the default color, but you can customize the CSS globally with a few CSS variables. -

- -

- or with a single .css import, Layerchart provides theming conventions for many popular UI frameworks. +

+ +
+ + +

+ All set! Now just fire up the dev server and start iterating. Have fun!

- + {#snippet content(value)} - {#if value === 0} - + {#if value === 0} + {:else if value === 1} - + {:else if value === 2} - + {:else if value === 3} - + {:else if value === 4} - - {:else if value === 5} - + {/if} {/snippet} - {/snippet} - {#snippet step4Title()} - Create you first chart - {/snippet} - {#snippet step4Content()} -

- Import the charting components you need from layerchart. Don't forget to take a look at the large collection of examples for some additonal inspiration. -

-
- -
- {/snippet} - {#snippet step5Title()} - Done! - {/snippet} - {#snippet step5Content()} -

- All set! Now just fire up the dev server and start iterating. Have fun! -

- - {#snippet content(value)} - {#if value === 0} - - {:else if value === 1} - - {:else if value === 2} - - {:else if value === 3} - - {:else if value === 4} - - {/if} - {/snippet} - - {/snippet} + ### Git up and running even quicker! @@ -186,9 +172,9 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples {#snippet githubButton(path, text = 'Source')} - + {/snippet} {#snippet stackBlitzButton(path, text = 'Open in StackBlitz')} - + {/snippet}