deploy: e643934

marcantondahmen · Jul 27, 2023 · b7eef70 · b7eef70
1 parent 9a80e65
commit b7eef70
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 11 deletions.
diff --git a/demo.css b/demo.css
@@ -278,7 +278,7 @@ body {
   padding: 0 2rem;
 }
 h1 {
-  margin: -0.25rem 0 5rem 0;
+  margin: -0.25rem 0 4rem 0;
   font-size: 2.45em;
   font-weight: 620;
   line-height: 1.28;
@@ -304,6 +304,11 @@ p a {
 p a:hover {
   color: var(--color);
 }
+hr {
+  margin: 4rem 0;
+  border: none;
+  border-top: 2px solid;
+}
 
 demo-toc {
   position: sticky;

diff --git a/index.html b/index.html
@@ -74,7 +74,7 @@
 				},
 			];
 		</script>
-	<link href="sortable-tree.css?00d7cd01870e907e70ce" rel="stylesheet"><script src="sortable-tree.js?00d7cd01870e907e70ce"></script></head>
+	<link href="sortable-tree.css?9fb437ce510642ea3ea4" rel="stylesheet"><script src="sortable-tree.js?9fb437ce510642ea3ea4"></script></head>
 	<body>
 		<nav>
 			<span>
@@ -133,24 +133,51 @@ <h1>
 					<i>collapsible</i> trees &mdash; vanilla TypeScript,
 					lightweight and no dependencies.
 				</h1>
+
+				<hr />
+
+				<h2>Getting Started</h2>
+				<p>
+					You can either install this
+					<a
+						href="https://www.npmjs.com/package/sortable-tree"
+						target="_blank"
+						>package</a
+					>
+					using <i>NPM</i> and import it into your JavaScript or
+					TypeScript project or directly download it from a
+					<i>CDN</i>.
+				</p>
+				<p>
+					<a
+						href="https://github.com/marcantondahmen/sortable-tree#getting-started"
+						target="_blank"
+					>
+						Follow this guide to get started ⟶
+					</a>
+				</p>
+
 				<h2>Basic Configuration</h2>
 				<p>
 					The most basic configuration only requires a
 					<a
 						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L31"
+						target="_blank"
 						>nodes</a
 					>
 					dataset and a parent <i>element</i>.<br />
 				</p>
 				<p>
 					<a
 						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L31"
+						target="_blank"
 					>
 						View Example Nodes ⟶
 					</a>
 					<br />
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L160"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L187"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -172,7 +199,8 @@ <h2>Custom Label</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L189"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L217"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -202,6 +230,14 @@ <h2>Custom Icons</h2>
 					Custom icons to indicate opened and collapsed nodes can be
 					defined using the _icons_ property.
 				</p>
+				<p>
+					<a
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L246"
+						target="_blank"
+					>
+						View Code ⟶
+					</a>
+				</p>
 				<div id="demo-3"></div>
 				<script>
 					const tree3 = new SortableTree({
@@ -222,7 +258,8 @@ <h2>Confirmation Dialog</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L218"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L273"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -251,7 +288,8 @@ <h2>Handling Change Events</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L247"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L303"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -289,7 +327,8 @@ <h2>Handling Click Events</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L285"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L342"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -314,7 +353,8 @@ <h2>Finding and Revealing Nodes</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L306"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L372"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -347,7 +387,8 @@ <h2>Disabling Sorting</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L344"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L403"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -377,7 +418,8 @@ <h2>Unlocking Root</h2>
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L372"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L432"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>
@@ -402,13 +444,15 @@ <h2>No Theme</h2>
 					the basic styles are controlled by
 					<a
 						href="https://github.com/marcantondahmen/sortable-tree/blob/master/src/styles.less#L1"
+						target="_blank"
 						>custom properties</a
 					>
 					that allow for easy integration into other design systems.
 				</p>
 				<p>
 					<a
-						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L405"
+						href="https://github.com/marcantondahmen/sortable-tree/blob/master/demo/index.html#L467"
+						target="_blank"
 					>
 						View Code ⟶
 					</a>