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..0e165b2cd 100644
--- a/docs/src/routes/docs/getting-started/+page.md
+++ b/docs/src/routes/docs/getting-started/+page.md
@@ -1,153 +1,17 @@
 
-
-# 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,17 +22,173 @@ 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.
+
+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()}
+			

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

+			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!
+
+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')}
-
+
 {/snippet}
 
 {#snippet stackBlitzButton(path, text = 'Open in StackBlitz')}
-
+
 {/snippet}