diff --git a/demo/base.less b/demo/base.less
index bc594f6..55c0c3f 100644
--- a/demo/base.less
+++ b/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);
+ }
}
diff --git a/demo/code.less b/demo/code.less
new file mode 100644
index 0000000..af11ff2
--- /dev/null
+++ b/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;
+ }
+ }
+}
diff --git a/demo/components/Embed.ts b/demo/components/Embed.ts
new file mode 100644
index 0000000..8b0775b
--- /dev/null
+++ b/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);
diff --git a/demo/examples/nodes-shape.ts b/demo/examples/nodes-shape.ts
index c413c4c..482d4d6 100644
--- a/demo/examples/nodes-shape.ts
+++ b/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: [
// { ... }, { ... }
],
diff --git a/demo/grid.less b/demo/grid.less
index df86784..bcd3b17 100644
--- a/demo/grid.less
+++ b/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;
}
}
diff --git a/demo/index.html b/demo/index.html
index 8618155..26a40ce 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -26,54 +26,7 @@
content="https://raw.githubusercontent.com/marcantondahmen/sortable-tree/master/assets/readme.png"
/>
-
-
+