feat: documentation rewrite

.changeset/fair-phones-wink.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+refactor: Rename simplified charts `renderContext` prop to `layer`

.changeset/flat-cases-enter.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+refactor: Move contexts to separate `$lib/contexts` module

.changeset/four-lizards-win.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Layer): Allow `type` to be optional, fallbacking back to `settings.layer` type

.changeset/full-times-guess.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Support global settings (layer type, debug, etc)

.changeset/icy-llamas-jump.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Support passing explicit `width` and `height` instead of requiring parent dimensions

.changeset/twenty-bushes-hope.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Layer): Support showing chart and full frame boundaries with `settings.debug`

.github/workflows/ci.yml

@@ -27,6 +27,8 @@ jobs:
 
       - run: pnpm install --frozen-lockfile
 
+      - run: pnpm --filter docs exec playwright install chromium
+
       - run: pnpm check:packages
 
       - run: pnpm lint:packages

docs/.gitignore

@@ -0,0 +1,27 @@
+test-results
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Content Collections
+.content-collections

docs/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

docs/.prettierignore

@@ -0,0 +1,9 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/

docs/.prettierrc

@@ -0,0 +1,15 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
+}

docs/README.md

@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.

docs/content-collections.ts

@@ -0,0 +1,51 @@
+import { defineCollection, defineConfig } from '@content-collections/core';
+// import { compileMarkdown } from '@content-collections/markdown';
+import { toPascalCase } from '@layerstack/utils';
+import { z } from 'zod';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const components = defineCollection({
+	name: 'components',
+	directory: 'src/content/components',
+	include: '**/*.md',
+	schema: z.object({
+		description: z.string().optional(),
+		section: z.string().optional(),
+		layers: z.array(z.string()).default([]),
+		related: z.array(z.string()).default([])
+	}),
+	transform: async (doc) => {
+		const { filePath, fileName, directory, path } = doc._meta;
+
+		// Read the source file from the layerchart package
+		const sourcePath = join(
+			process.cwd(),
+			`../packages/layerchart/src/lib/components/${doc.section === 'charts' ? 'charts/' : ''}${path}.svelte`
+		);
+
+		let source = '';
+		let sourceUrl = '';
+		try {
+			source = readFileSync(sourcePath, 'utf-8');
+			sourceUrl = `https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/components/${path}.svelte`;
+		} catch (error) {
+			// console.warn(
+			// 	`Could not read source file for ${filePath}: ${error instanceof Error ? error.message : String(error)}`
+			// );
+		}
+
+		return {
+			...doc,
+			name: toPascalCase(fileName.replace('.md', '')),
+			slug: path,
+			source,
+			sourceUrl
+			// html: await compileMarkdown(context, doc)
+		};
+	}
+});
+
+export default defineConfig({
+	collections: [components]
+});

docs/e2e/demo.test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});

docs/eslint.config.js

@@ -0,0 +1,45 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+	includeIgnoreFile(gitignorePath),
+	js.configs.recommended,
+	...ts.configs.recommended,
+	...svelte.configs.recommended,
+	prettier,
+	...svelte.configs.prettier,
+	{
+		languageOptions: {
+			globals: { ...globals.browser, ...globals.node }
+		},
+		rules: {
+			// typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+			// see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+			'no-undef': 'off',
+			'@typescript-eslint/no-unused-vars': 'off',
+			'@typescript-eslint/no-explicit-any': 'off',
+			'svelte/require-each-key': 'off',
+			'svelte/no-navigation-without-resolve': 'off'
+		}
+	},
+	{
+		files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+		languageOptions: {
+			parserOptions: {
+				projectService: true,
+				extraFileExtensions: ['.svelte'],
+				parser: ts.parser,
+				svelteConfig
+			}
+		}
+	}
+);

docs/mdsx.config.js

@@ -0,0 +1,123 @@
+import { defineConfig } from 'mdsx';
+
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import rehypePrettyCode from 'rehype-pretty-code';
+
+import { readFileSync } from 'node:fs';
+import path, { resolve } from 'node:path';
+import process from 'node:process';
+// import { fileURLToPath } from "node:url";
+// import prettier from "@prettier/sync";
+// import { getHighlighter } from 'shiki';
+// import { createHighlighter } from 'shiki';
+import { u } from 'unist-builder';
+import { visit } from 'unist-util-visit';
+// import { codeBlockPrettierConfig } from "./other/code-block-prettier.js";
+// import { rehypeCustomHighlight } from '@mdsx/rehype-custom-highlighter';
+
+/**
+ * @type {import('rehype-pretty-code').Options}
+ */
+const prettyCodeOptions = {
+	theme: 'github-dark'
+	// TODO: Why does this not work?
+	// theme: {
+	// 	light: 'github-light',
+	// 	dark: 'github-dark'
+	// }
+};
+
+export const mdsxConfig = defineConfig({
+	extensions: ['.md'],
+	remarkPlugins: [remarkGfm],
+	rehypePlugins: [rehypeSlug, rehypeComponentExample, [rehypePrettyCode, prettyCodeOptions]],
+	blueprints: {
+		default: {
+			path: 'src/lib/markdown/blueprints/default/blueprint.svelte'
+		}
+	}
+});
+
+/**
+ * Adds the source code to component examples.
+ *
+ * @returns {HastTransformer} - unified transformer
+ */
+function rehypeComponentExample() {
+	return async (tree) => {
+		const componentRegex = /component="([^"]+)"/;
+		const nameRegex = /name="([^"]+)"/;
+
+		visit(tree, (node, index, parent) => {
+			if (node?.type === 'raw' && node?.value?.startsWith('<SourceExample')) {
+				const currNode = node;
+
+				const componentMatch = currNode.value.match(componentRegex);
+				const component = componentMatch ? componentMatch[1] : null;
+				if (!component) return null;
+
+				const nameMatch = currNode.value.match(nameRegex);
+				const name = nameMatch ? nameMatch[1] : null;
+				if (!name) return null;
+
+				try {
+					const sourceCode = getComponentSourceFileContent(component, name);
+					if (!sourceCode)
+						throw new Error(
+							`Could not find source code for component: ${component} example: ${name}`
+						);
+
+					const sourceCodeNode = u('element', {
+						tagName: 'pre',
+						properties: {
+							className: ['code']
+						},
+						children: [
+							u('element', {
+								tagName: 'code',
+								properties: {
+									className: [`language-svelte`]
+								},
+								attributes: {},
+								children: [
+									{
+										type: 'text',
+										value: sourceCode
+									}
+								]
+							})
+						]
+					});
+					if (!index) return;
+					parent.children.splice(index + 1, 0, sourceCodeNode);
+				} catch (e) {
+					console.error(e);
+				}
+			}
+		});
+	};
+}
+
+function getComponentSourceFileContent(component, name) {
+	if (!component || !name) return null;
+
+	const filePath = path.join(process.cwd(), `./src/examples/${component}/${name}.svelte`);
+	try {
+		const fileContents = readFileSync(filePath, 'utf-8');
+
+		// return prettier.format(
+		// 	transformComponentSourceContent(fileContents),
+		// 	codeBlockPrettierConfig
+		// );
+		return fileContents;
+	} catch (e) {
+		console.error(`Error reading file at ${filePath}:`, e);
+		return null;
+	}
+}
+
+// function transformComponentSourceContent(src = '') {
+// 	// return src.replaceAll(`import { cn } from "$lib/utils/styles.js"`, `import cn from "clsx"`);
+// 	return src;
+// }