chore: allow preselecting playground file

docs/src/components/sd-playground.ts

@@ -144,6 +144,11 @@ class SdPlayground extends LitElement {
       outputFiles: {
         state: true,
       },
+      defaultSelected: {
+        type: String,
+        attribute: 'default-selected',
+        reflect: true,
+      },
     };
   }
 
@@ -166,6 +171,7 @@ class SdPlayground extends LitElement {
   declare config: string;
   declare script: string;
   declare output: string;
+  declare defaultSelected: Files;
   declare outputFiles: string[];
   declare _currentFile: Files;
   declare editor: any;
@@ -179,6 +185,7 @@ class SdPlayground extends LitElement {
     this.config = '{}';
     this.script = '{}';
     this.output = '{}';
+    this.defaultSelected = 'config';
     this.outputFiles = [];
     this.editor = undefined;
     this.hasInitialized = new Promise((resolve) => {
@@ -261,7 +268,7 @@ class SdPlayground extends LitElement {
     await this.initMonaco();
     await this.initData();
     this.hasInitializedResolve();
-    this.currentFile = 'config';
+    this.currentFile = this.defaultSelected;
   }
 
   async initMonaco() {

docs/src/content/docs/index.mdx

@@ -27,7 +27,7 @@ import tokens from '/public/demo-tokens.json';
 
 Below is a showcase of how a set of DTCG tokens would be exported to CSS:
 
-<sd-playground tokens={JSON.stringify({ value: JSON.stringify(tokens, null, 2), lang: 'json'})} id="main-demo">
+<sd-playground tokens={JSON.stringify({ value: JSON.stringify(tokens, null, 2), lang: 'json'})} default-selected="tokens" id="main-demo">
 
   <div style="height: 100%" slot="monaco-editor"></div>
 </sd-playground>

docs/src/remark-playground.ts

@@ -19,28 +19,35 @@ const paragraphVisitor = (
     let configData = serialize({});
     let scriptData = serialize({});
     let skipAmount = 1;
+    let defaultSelected;
 
     for (const child of parent.children.slice(index + 1, index + 4)) {
       if (child.type !== 'code') break;
-      switch (child.meta) {
-        case 'tokens':
-          tokensData = serialize({
-            value: child.value,
-            lang: child.lang ?? 'text',
-          });
-          break;
-        case 'script':
-          scriptData = serialize({
-            value: child.value,
-            lang: child.lang ?? 'text',
-          });
-          break;
-        case 'config':
-          configData = serialize({
-            value: child.value,
-            lang: child.lang ?? 'text',
-          });
-          break;
+      if (child.meta) {
+        const metas = child.meta?.split(' ');
+        switch (metas[0]) {
+          case 'tokens':
+            tokensData = serialize({
+              value: child.value,
+              lang: child.lang ?? 'text',
+            });
+            break;
+          case 'script':
+            scriptData = serialize({
+              value: child.value,
+              lang: child.lang ?? 'text',
+            });
+            break;
+          case 'config':
+            configData = serialize({
+              value: child.value,
+              lang: child.lang ?? 'text',
+            });
+            break;
+        }
+        if (metas[1] === 'selected') {
+          defaultSelected = metas[0];
+        }
       }
 
       skipAmount++;
@@ -51,7 +58,12 @@ const paragraphVisitor = (
       value: `<sd-playground 
         tokens="${tokensData}" 
         config="${configData}" 
-        script="${scriptData}"
+        script="${scriptData}"${
+          defaultSelected
+            ? `
+        default-selected="${defaultSelected}"`
+            : ''
+        }
       ><div style="height: 100%" slot="monaco-editor"></div></sd-playground>`,
     } as Html;
     parent.children.splice(index, skipAmount, newNode);