From 420bb992118326f473865b21560ebad925bb2c21 Mon Sep 17 00:00:00 2001 From: Scott Rhamy Date: Sun, 30 Nov 2025 19:56:55 -0500 Subject: [PATCH 1/2] Steps-redo Removed TabbedCode.svelte (was from old implementation) Removed clever code, now Uses Steps with Step. --- docs/src/lib/components/Step.svelte | 36 ++++ docs/src/lib/components/Steps.svelte | 64 +----- docs/src/lib/components/TabbedCode.svelte | 42 ---- docs/src/routes/docs/getting-started/+page.md | 186 +++++++++--------- 4 files changed, 130 insertions(+), 198 deletions(-) create mode 100644 docs/src/lib/components/Step.svelte delete mode 100644 docs/src/lib/components/TabbedCode.svelte diff --git a/docs/src/lib/components/Step.svelte b/docs/src/lib/components/Step.svelte new file mode 100644 index 000000000..7b5ce3c81 --- /dev/null +++ b/docs/src/lib/components/Step.svelte @@ -0,0 +1,36 @@ + + +
+
+
+
+
+

+ {@html title} +

+ {@render content?.()} +
+ + 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..c2fbd51c4 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,10 +33,8 @@ 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`} > + {#snippet content()}

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

@@ -56,98 +55,95 @@ Provides built-in first class support for
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. + + layerchart with your package manager of choice.`}> + {#snippet content()} + + {#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 content()} +

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

- - {#snippet content(value)} + +

+ 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} + + {/snippet} + + + {#snippet content()} +

+ 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 content()} +

+ 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} - - {: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} + + {:else if value === 1} + + {:else if value === 2} + + {:else if value === 3} + + {:else if value === 4} + + {/if} + {/snippet} + {/snippet} - - {/snippet} + ### Git up and running even quicker! @@ -186,9 +182,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} From 53c4de2cd5aa1de3626ffae7f55780f35a009e98 Mon Sep 17 00:00:00 2001 From: Scott Rhamy Date: Sun, 30 Nov 2025 20:01:59 -0500 Subject: [PATCH 2/2] Steps Redo Removed clever code now uses Steps and Step components. Removed TabbedCode - orphaned --- docs/src/lib/components/Step.svelte | 6 +- docs/src/routes/docs/getting-started/+page.md | 178 +++++++++--------- 2 files changed, 87 insertions(+), 97 deletions(-) diff --git a/docs/src/lib/components/Step.svelte b/docs/src/lib/components/Step.svelte index 7b5ce3c81..51a1696a6 100644 --- a/docs/src/lib/components/Step.svelte +++ b/docs/src/lib/components/Step.svelte @@ -3,10 +3,10 @@ interface Props { title: string; - content: Snippet; + children: Snippet; } - let { title, content }: Props = $props(); + let { title, children }: Props = $props();
@@ -19,7 +19,7 @@

{@html title}

- {@render content?.()} + {@render children?.()}