update demo

demo/base.less

@@ -31,6 +31,10 @@ body {
 	@media (min-width: 1600px) {
 		font-size: 18px;
 	}
+
+	@media (min-width: 1900px) {
+		font-size: 20px;
+	}
 }
 
 body {
@@ -40,17 +44,18 @@ body {
 }
 
 h1 {
-	margin: -0.25rem 0 4rem 0;
+	margin: -0.25rem 0 5rem 0;
 	font-size: 2.45em;
 	font-weight: 620;
 	line-height: 1.28;
+	max-width: 34rem;
 }
 
 h2 {
 	margin: 0 0 1.3rem 0;
 	scroll-margin-top: 5.5rem;
 	font-size: 1.8em;
-	font-weight: 680;
+	font-weight: 640;
 	line-height: 1.3;
 
 	* + & {
@@ -59,7 +64,7 @@ h2 {
 }
 
 p {
-	margin: 1em 0;
+	margin: 1.25em 0;
 
 	& a {
 		color: var(--accent-color);
@@ -72,8 +77,26 @@ p {
 	}
 }
 
-hr {
-	margin: 4rem 0;
-	border: none;
-	border-top: 2px solid;
+summary {
+	color: var(--accent-color);
+	cursor: pointer;
+	transition: color 0.2s;
+	user-select: none;
+	list-style-type: '';
+
+	&:before {
+		content: 'Show ';
+	}
+
+	[open] > & {
+		list-style-type: '';
+
+		&:before {
+			content: 'Hide ';
+		}
+	}
+
+	&:hover {
+		color: var(--color);
+	}
 }

demo/code.less

@@ -0,0 +1,127 @@
+.emgithub-file .code-area td.hljs-ln-line {
+	font-family: 'JetBrains Mono Variable' !important;
+	font-size: 0.85rem !important;
+	line-height: 1.675 !important;
+}
+
+.copy-btn.copy-btn-dark {
+	font-family: 'JetBrains Mono Variable' !important;
+	font-weight: 400;
+	font-size: 0.8rem !important;
+	line-height: 2.4 !important;
+	padding: 0 0.6rem !important;
+	color: var(--code-3) !important;
+	background-color: var(--background) !important;
+	border: none !important;
+	border-radius: 0.4rem !important;
+	transition: color 0.2s, background-color 0.2s;
+
+	&:active {
+		color: var(--color) !important;
+		background-color: var(--accent-color) !important;
+	}
+}
+
+pre code.hljs {
+	display: block;
+	overflow-x: auto;
+	padding: 1em;
+}
+
+code.hljs {
+	padding: 3px 5px;
+}
+
+.emgithub-file {
+	border-radius: 0.55rem !important;
+
+	& .code-area .hljs-ln-numbers {
+		color: var(--muted-color) !important;
+		opacity: 0.25;
+	}
+
+	& .hljs-style-dark {
+		.hljs {
+			color: var(--code-1);
+			background-color: var(--code-background);
+		}
+
+		.hljs-comment {
+			color: var(--muted-color);
+			opacity: 0.6;
+		}
+
+		.hljs-punctuation,
+		.hljs-tag {
+			color: var(--code-1);
+		}
+
+		.hljs-tag .hljs-attr,
+		.hljs-tag .hljs-name {
+			color: var(--code-accent-1);
+		}
+
+		.hljs-attribute,
+		.hljs-doctag,
+		.hljs-keyword,
+		.hljs-meta .hljs-keyword,
+		.hljs-name,
+		.hljs-selector-tag {
+			color: var(--code-2);
+			font-weight: 600;
+		}
+
+		.hljs-deletion,
+		.hljs-number,
+		.hljs-quote,
+		.hljs-selector-class,
+		.hljs-selector-id,
+		.hljs-string,
+		.hljs-template-tag,
+		.hljs-type {
+			color: var(--code-accent-2);
+		}
+
+		.hljs-section,
+		.hljs-title {
+			color: var(--code-accent-1);
+			font-weight: 600;
+		}
+
+		.hljs-link,
+		.hljs-operator,
+		.hljs-regexp,
+		.hljs-selector-attr,
+		.hljs-selector-pseudo,
+		.hljs-symbol,
+		.hljs-template-variable,
+		.hljs-variable,
+		.hljs-params,
+		.hljs-subst {
+			color: var(--code-2);
+		}
+
+		.hljs-literal {
+			color: var(--code-3);
+		}
+
+		.hljs-addition,
+		.hljs-built_in,
+		.hljs-bullet,
+		.hljs-code {
+			color: var(--code-1);
+		}
+
+		.hljs-meta {
+			color: var(--code-accent-2);
+		}
+
+		.hljs-meta .hljs-string {
+			color: var(--code-3);
+		}
+
+		.hljs-strong {
+			font-weight: 600;
+		}
+	}
+}

demo/components/Embed.ts

@@ -0,0 +1,35 @@
+class EmbedComponent extends HTMLElement {
+	constructor() {
+		super();
+	}
+
+	connectedCallback() {
+		const name = this.getAttribute('name');
+		const details = document.createElement('details');
+		const summary = document.createElement('summary');
+		const nodes = this.createEmbed('nodes');
+
+		summary.textContent = 'full example data';
+		details.appendChild(summary);
+		details.appendChild(nodes);
+
+		this.appendChild(this.createEmbed(name));
+		this.appendChild(details);
+	}
+
+	createEmbed(name: string): HTMLElement {
+		const script = document.createElement('script');
+
+		script.setAttribute('src', this.createSrc(name));
+
+		return script;
+	}
+
+	createSrc(name: string): string {
+		const theme = 'dark';
+
+		return `https://marcantondahmen.github.io/emgithub/embed-v2.js?target=https%3A%2F%2Fgithub.com%2Fmarcantondahmen%2Fsortable-tree%2Fblob%2Fmaster%2Fdemo%2Fexamples%2F${name}.ts%3Fts%3D2&style=${theme}&type=code&showLineNumbers=on&showCopy=on`;
+	}
+}
+
+customElements.define('demo-embed', EmbedComponent);

demo/examples/nodes-shape.ts

@@ -2,16 +2,10 @@ import { SortableTreeNodeData } from 'sortable-tree';
 
 const nodes: SortableTreeNodeData[] = [
 	{
-		data: {
-			title: 'Homepage',
-			path: '/',
-		},
+		data: { title: 'Homepage', path: '/' },
 		nodes: [
 			{
-				data: {
-					title: 'Page',
-					path: '/page',
-				},
+				data: { title: 'Page', path: '/page' },
 				nodes: [
 					// { ... }, { ... }
 				],

demo/grid.less

@@ -16,7 +16,7 @@
 		grid-template-columns: 20rem minmax(auto, 34rem);
 	}
 
-	@media (min-width: 1255px) {
-		grid-template-columns: 1fr 34rem 1fr;
+	@media (min-width: 1300px) {
+		grid-template-columns: 1fr 38rem 1fr;
 	}
 }