From 274e1856a8bc5f37853709ae7f7e40c4a6debffd Mon Sep 17 00:00:00 2001 From: Scott Rhamy Date: Fri, 28 Nov 2025 17:30:35 -0500 Subject: [PATCH 1/5] Getting Started MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Minor changes `Example.svelte` - Removed double nested border - Fixed “round-b-sm” - Update to `Code.svelte` - Added support for language icons (css, JS, TS, JSON, Terminal, Svelte, HTML5 - Added title prop used to conditionally display header with language icon and filename - Renamed `includeCopyButton` prop to `copyButton` accepting true | false | hover - Removed `TabbedCode.svelte`, now used generic/reusable `Tabs.svelte` - New `Tabs.svelte` - tab titles via keys prop, other props c/w Svelte UX Tabs. and children snippets for content - Remove prior global css tageting active tab - `ActiveClass` prop allowing custom css for the active tab Simple Example ``html {#snippet content(value)}
{#if value === 0} This is unique Content of Tab One. {:else if value === 1} This is different content for Tab Two. {/if}
{/snippet} ``` - New `Steps.svelte` Component - Did not use Svelte UX Steps or Timeline - they are object based which gets complicated with nested components like ``, ``, and ` - No props, just children snippets Simple Example ```html {#snippet step1Title()} Step One Title {/snippet} {#snippet step1Content()} Step One Content {/snippet} … ``` --- docs/src/lib/components/Code.svelte | 113 ++++--- docs/src/lib/components/Example.svelte | 6 +- docs/src/lib/components/Steps.svelte | 72 +++++ docs/src/lib/components/Tabs.svelte | 58 ++++ docs/src/routes/docs/getting-started/+page.md | 303 +++++++++--------- 5 files changed, 364 insertions(+), 188 deletions(-) create mode 100644 docs/src/lib/components/Steps.svelte create mode 100644 docs/src/lib/components/Tabs.svelte diff --git a/docs/src/lib/components/Code.svelte b/docs/src/lib/components/Code.svelte index e8a8bdbf2..d56cccb83 100644 --- a/docs/src/lib/components/Code.svelte +++ b/docs/src/lib/components/Code.svelte @@ -11,62 +11,101 @@ import { CopyButton } from 'svelte-ux'; import { cls } from '@layerstack/tailwind'; import type { HTMLAttributes } from 'svelte/elements'; + import { Icon } from 'svelte-ux'; + import SimpleIconsCss from '~icons/simple-icons/css'; + import SimpleIconsJavascript from '~icons/simple-icons/javascript'; + import SimpleIconsTypescript from '~icons/simple-icons/typescript'; + import SimpleIconsJson from '~icons/simple-icons/json'; + import SimpleIconsTerminal from '~icons/simple-icons/windowsterminal'; + import SimpleIconsSvelte from '~icons/simple-icons/svelte'; + import SimpleIconsHTML5 from '~icons/simple-icons/html5'; interface Props { source?: string | null; language?: string; - includeCopyButton?: boolean; + title?: string; + copyButton?: boolean | 'hover'; classes?: { root?: string; pre?: string; code?: string }; + class?: string; } let { + title, source = null, language = 'svelte', - includeCopyButton = true, + copyButton = true, classes = {}, class: className }: Props & HTMLAttributes = $props(); -
- {#if source} - 
-      
-        {#await highlighter}
-					
Loading...

-				{:then h}
-					
-					{@html h.codeToHtml(source, {
-						lang: language,
-						themes: {
-							light: 'github-light-default',
-							dark: 'github-dark-default'
-						}
-					})}
-				{:catch error}
-					
Error loading code highlighting: {error.message}

-				{/await}
-
+

+	{#if title}
+		

+			{#if language === 'css'}
+				
+			{:else if language === 'javascript'}
+				
+			{:else if language === 'ts'}
+				
+			{:else if language === 'json'}
+				
+			{:else if language === 'sh' || language === 'bash'}
+				
+			{:else if language === 'svelte'}
+				
+			{:else if language === 'html'}
+				
+			{:else}
+				Icon ERROR: {language}
+			{/if}
+			{title}
+		

+	{/if}
+	

+		{#if source}
+			
+				
+					{#await highlighter}
+						
Loading...

+					{:then h}
+						
+						{@html h.codeToHtml(source, {
+							lang: language,
+							themes: {
+								light: 'github-light-default',
+								dark: 'github-dark-default'
+							}
+						})}
+					{:catch error}
+						
Error loading code highlighting: {error.message}

+					{/await}
+				
       
     

 
-		{#if includeCopyButton}
-			

-				
-			

+			{#if copyButton !== false}
+				

+					
+				

+			{/if}
 		{/if}
-	{/if}
+	

 

 
 
diff --git a/docs/src/lib/components/Tabs.svelte b/docs/src/lib/components/Tabs.svelte
new file mode 100644
index 000000000..b5121af73
--- /dev/null
+++ b/docs/src/lib/components/Tabs.svelte
@@ -0,0 +1,58 @@
+
+
+
+	{#each keys as key, v}
+		{@const isActive = value === v}
+		 (value = v)}
+			selected={isActive}>{key}
+	{/each}
+	
+		

+			{@render content?.(value)}
+		

+	
+
diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index 845777071..2c68315b1 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -1,153 +1,16 @@
 
-
-# Getting Started
-
-LayerChart can be used standlone, or integrates with frameworks and design systems.
-
-First class support for Tailwind is built in, but is not required and works great with standard CSS and inline styles.
-
-Integration reference [projects](https://github.com/techniq/layerchart/tree/next/examples) are available for many popular frameworks:
-
-
    
-	{#each Object.entries(integrations) as [name, info]}
-		
  • 
-			{name}
-			
      
-				{#each Object.entries(info.versions) as [version, path]}
-					
    • 
-						{version}
-						{@render githubButton(path)}
-						{@render stackBlitzButton(path)}
-					
      • 
-				{/each}
-				{#if name === 'shadcn-svelte'}
-					
    • 
-						See also the official integration
-					
      • 
-				{/if}
-			
    
-		
    • 
-	{/each}
-

-
-or checkout out the **standlone** {@render githubButton('standalone')} {@render stackBlitzButton('standalone')} for a pure CSS example.
-
-## Manual setup
-
-To manually setup LayerChart in a new project (such as one created with [sv create](https://svelte.dev/docs/cli/sv-create)) or in an existing project.
-
-First import `layerchart` with your package manager of choice:
-
-
-
-then import the components from `layerchart`:
-
-
-
-Lastly, looking through the large collection of [examples](/docs/examples) for some inspiration.
-
-## CSS variables
-
-Out of the box LayerChart will use `currentColor` as the default color, but you can customize globally with a few CSS variables.
-
-```css
-.lc-root-container {
+	const appcss = `.lc-root-container {
 	/* Default marks color when not using explicit color or color scale */
 	--color-primary: var(--color-blue-500);
 
@@ -158,12 +21,156 @@ Out of the box LayerChart will use `currentColor` as the default color, but you
 
 	/* Content (text) color */
 	--color-surface-content: var(--color-gray-900);
-}
-```
+}`;
+
 
-LayerChart [provides](https://github.com/techniq/layerchart/tree/next/packages/layerchart/src/lib/styles) `.css` files for popular frameworks to simplify the setup with a single import
+# Getting Started
 
-
+LayerChart can be used standlone, or integrates nicely with other frameworks and design systems.
+
+There is built in first class support for tailwindcss 4, but this is completely optional and also works seamlessly with regular CSS and inline styles.
+
+
+
+	{#snippet step1Title()}
+		Create a Project or Git a Project
+	{/snippet}
+	{#snippet step1Content()}
+			

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

+			
+			
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.
+			

+			
+				{#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()}
+		
+			{#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!
+
+Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples) are available for popular UI frameworks.
+
+
+	{#snippet content(value)}
+		{#if value === 0}
+			
+			
Starter Project v1
+				{@render githubButton('shadcn-svelte-1')} 
+				{@render stackBlitzButton('shadcn-svelte-1')}

+		{:else if value === 1}
+			
+			
Starter Project v3
+				{@render githubButton('skeleton-3')} 
+				{@render stackBlitzButton('skeleton-3')}

+			
Starter Project v4
+				{@render githubButton('skeleton-4')} 
+				{@render stackBlitzButton('skeleton-4')}

+		{:else if value === 2}
+				
+			
v2 Works out of the box!

+		{:else if value === 3}
+			
+			
Starter Project v5
+				{@render githubButton('dauilyui-5')} 
+				{@render stackBlitzButton('daisyui-5')}

+		{:else if value === 4}
+			
Start Project Standalone CSS {@render githubButton('svelte-ux-2')} 
+				{@render stackBlitzButton('svelte-ux-2')}

+		{/if}
+	{/snippet}
+
 
 {#snippet githubButton(path, text = 'Source')}
 

From 918df99685103fc1365c270175f02eca794fe22e Mon Sep 17 00:00:00 2001
From: Sean Lynch 
Date: Sun, 30 Nov 2025 12:11:19 -0500
Subject: [PATCH 2/5] Cleanup some styles

---
 docs/src/lib/components/Steps.svelte | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/docs/src/lib/components/Steps.svelte b/docs/src/lib/components/Steps.svelte
index a2f599e69..bb21e4d25 100644
--- a/docs/src/lib/components/Steps.svelte
+++ b/docs/src/lib/components/Steps.svelte
@@ -35,9 +35,9 @@
 {#snippet step(titleSnippet: Snippet | undefined, stepSnippet?: Snippet)}
 	

 		

-		

+		

 	

 	

 	.circle::before {
+		@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
 		counter-increment: section;
 		content: counter(section);
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
 	}
 
 	/* override last one - target the second-to-last child (last left div) */

From 15a17b576c1d2d3880076d4cba2c4f7696890f66 Mon Sep 17 00:00:00 2001
From: Sean Lynch 
Date: Sun, 30 Nov 2025 12:15:36 -0500
Subject: [PATCH 3/5] Fix import.  Tweak styles

---
 docs/src/lib/components/Steps.svelte          |  6 +-
 docs/src/routes/docs/getting-started/+page.md | 61 ++++++++++---------
 2 files changed, 33 insertions(+), 34 deletions(-)

diff --git a/docs/src/lib/components/Steps.svelte b/docs/src/lib/components/Steps.svelte
index bb21e4d25..dbfcca061 100644
--- a/docs/src/lib/components/Steps.svelte
+++ b/docs/src/lib/components/Steps.svelte
@@ -34,10 +34,8 @@
 
 {#snippet step(titleSnippet: Snippet | undefined, stepSnippet?: Snippet)}
 	

-		

-		

+		

+		

 	

 	

+	import { Button } from 'svelte-ux';
+
+	import A from '$lib/markdown/components/a.svelte';
 	import Code from '$lib/components/Code.svelte';
   import Example from '$lib/components/Example.svelte';
 	import Steps from '$lib/components/Steps.svelte';
 	import Tabs from '$lib/components/Tabs.svelte';
 	import Blockquote from '$lib/components/Blockquote.svelte';
-	import A from '$lib/markdown/components/A.svelte';
-	import { Button } from 'svelte-ux';
 
 	import LucideGithub from '~icons/lucide/github';
 	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz'
@@ -30,7 +31,6 @@ LayerChart can be used standlone, or integrates nicely with other frameworks and
 
 There is built in first class support for tailwindcss 4, but this is completely optional and also works seamlessly with regular CSS and inline styles.
 
-
 
 	{#snippet step1Title()}
 		Create a Project or Git a Project
@@ -143,33 +143,34 @@ There is built in first class support for 
-	{#snippet content(value)}
-		{#if value === 0}
-			
-			
Starter Project v1
-				{@render githubButton('shadcn-svelte-1')} 
-				{@render stackBlitzButton('shadcn-svelte-1')}

-		{:else if value === 1}
-			
-			
Starter Project v3
-				{@render githubButton('skeleton-3')} 
-				{@render stackBlitzButton('skeleton-3')}

-			
Starter Project v4
-				{@render githubButton('skeleton-4')} 
-				{@render stackBlitzButton('skeleton-4')}

-		{:else if value === 2}
-				
-			
v2 Works out of the box!

-		{:else if value === 3}
-			
-			
Starter Project v5
-				{@render githubButton('dauilyui-5')} 
-				{@render stackBlitzButton('daisyui-5')}

-		{:else if value === 4}
-			
Start Project Standalone CSS {@render githubButton('svelte-ux-2')} 
-				{@render stackBlitzButton('svelte-ux-2')}

-		{/if}
-	{/snippet}
+{#snippet content(value)}
+{#if value === 0}
+
+
+
Starter Project v1
+{@render githubButton('shadcn-svelte-1')}
+{@render stackBlitzButton('shadcn-svelte-1')}

+{:else if value === 1}
+
+
Starter Project v3
+{@render githubButton('skeleton-3')}
+{@render stackBlitzButton('skeleton-3')}

+
Starter Project v4
+{@render githubButton('skeleton-4')}
+{@render stackBlitzButton('skeleton-4')}

+{:else if value === 2}
+
+
v2 Works out of the box!

+{:else if value === 3}
+
+
Starter Project v5
+{@render githubButton('dauilyui-5')}
+{@render stackBlitzButton('daisyui-5')}

+{:else if value === 4}
+
Start Project Standalone CSS {@render githubButton('svelte-ux-2')}
+{@render stackBlitzButton('svelte-ux-2')}

+{/if}
+{/snippet}
 
 
 {#snippet githubButton(path, text = 'Source')}

From 4cf124bedcfae61b595a6a20def2885eb8fe5794 Mon Sep 17 00:00:00 2001
From: Sean Lynch 
Date: Sun, 30 Nov 2025 12:22:30 -0500
Subject: [PATCH 4/5] Tweak wording.  Fix links

---
 docs/src/routes/docs/getting-started/+page.md | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index fa8dae303..2a34bb022 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -29,7 +29,7 @@
 
 LayerChart can be used standlone, or integrates nicely with other frameworks and design systems.
 
-There is built in first class support for tailwindcss 4, but this is completely optional and also works seamlessly with regular CSS and inline styles.
+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()}
@@ -120,6 +120,9 @@ There is built in first class support for 
+			All set!  Now just fire up the dev server and start iterating.  Have fun!
+		

 		
 			{#snippet content(value)}
 			{#if value === 0}
@@ -146,12 +149,12 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples
 {#snippet content(value)}
 {#if value === 0}
 
-
+
 
Starter Project v1
 {@render githubButton('shadcn-svelte-1')}
 {@render stackBlitzButton('shadcn-svelte-1')}

 {:else if value === 1}
-
+
 
Starter Project v3
 {@render githubButton('skeleton-3')}
 {@render stackBlitzButton('skeleton-3')}

@@ -159,10 +162,10 @@ Starter [project repos](https://github.com/techniq/layerchart/tree/next/examples
 {@render githubButton('skeleton-4')}
 {@render stackBlitzButton('skeleton-4')}

 {:else if value === 2}
-
+
 
v2 Works out of the box!

 {:else if value === 3}
-
+
 
Starter Project v5
 {@render githubButton('dauilyui-5')}
 {@render stackBlitzButton('daisyui-5')}

@@ -174,9 +177,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 f74272f2aa4708e3cdafaff08ea2eb0a2e2b1154 Mon Sep 17 00:00:00 2001
From: Sean Lynch 
Date: Sun, 30 Nov 2025 12:35:23 -0500
Subject: [PATCH 5/5] Show examples for creating projects with different
 package managers

---
 docs/src/routes/docs/getting-started/+page.md | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/docs/src/routes/docs/getting-started/+page.md b/docs/src/routes/docs/getting-started/+page.md
index 2a34bb022..0e165b2cd 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -33,18 +33,27 @@ Provides built-in first class support for 
 	{#snippet step1Title()}
-		Create a Project or Git a Project
+		Create a new project or git a project
 	{/snippet}
 	{#snippet step1Content()}
 			

 				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

 	{/snippet}
 	{#snippet step2Title()}