Make the gist playgrounds better

Author: orta

packages/playground/src/index.ts

@@ -92,12 +92,12 @@ export const setupPlayground = (
   const showNav = () => {
     const right = document.getElementsByClassName("playground-sidebar").item(0)!
     const middle = document.getElementById("editor-container")!
-    middle.style.width = `calc(100% - ${right.clientWidth + 180}px)`
+    middle.style.width = `calc(100% - ${right.clientWidth + 210}px)`
 
     leftNav.style.display = "block"
-    leftNav.style.width = "180px"
-    leftNav.style.minWidth = "180px"
-    leftNav.style.maxWidth = "180px"
+    leftNav.style.width = "210px"
+    leftNav.style.minWidth = "210px"
+    leftNav.style.maxWidth = "210px"
     dragBarLeft.style.display = "block"
   }
 

packages/playground/src/navigation.ts

@@ -10,6 +10,9 @@ export const gistPoweredNavBar = (sandbox: Sandbox, ui: UI, showNav: () => void)
   const gistHash = location.hash.split("#gist/")[1]
   const [gistID, gistStoryIndex] = gistHash.split("-")
 
+  // @ts-ignore
+  window.appInsights && window.appInsights.trackEvent({ name: "Loaded Gist Playground", properties: { id: gistID } })
+
   sandbox.editor.updateOptions({ readOnly: true })
   ui.flashInfo(`Opening Gist ${gistID} as a Docset`, 2000)
 
@@ -100,9 +103,12 @@ export const gistPoweredNavBar = (sandbox: Sandbox, ui: UI, showNav: () => void)
         return ui.flashInfo(`Error with getting your gist: ${response.display}.`, 3000)
       }
 
+      // If the API response is a single code file, just throw that in
       if (response.type === "code") {
         sandbox.setText(response.code)
         sandbox.setCompilerSettings(response.params)
+
+        // If it's multi-file, then there's work to do
       } else if (response.type === "story") {
         showNav()
 
@@ -113,6 +119,7 @@ export const gistPoweredNavBar = (sandbox: Sandbox, ui: UI, showNav: () => void)
         title.textContent = response.title
         nav.appendChild(title)
 
+        // Make all the sidebar elements
         const ul = document.createElement("ul")
         response.files.forEach((element: StoryContent, i: number) => {
           const li = document.createElement("li")

packages/typescriptlang-org/src/style/globals.scss

@@ -1,3 +1,5 @@
+// The CSS Vars live in main.scss
+
 $ts-main-blue-color: #3178c6;
 $ts-main-blue-darker-color: #235a97;
 $ts-main-blue-lighter-color: #358ef1;

packages/typescriptlang-org/src/templates/play.scss

@@ -379,6 +379,37 @@ main #editor-toolbar {
       border-radius: 3px;
     }
 
+    details[open] {
+      padding-left: 1rem;
+      border-left: 2px solid var(--blue-tinged-strong);
+
+      summary {
+        margin-left: -0.5rem;
+      }
+    }
+
+    summary {
+      &:hover {
+        cursor: pointer;
+        background-color: var(--background-minor-highlight-color);
+      }
+    }
+
+    kbd {
+      background-color: #f7f7f7;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset;
+      color: #333;
+      display: inline-block;
+      font-family: Arial, Helvetica, sans-serif;
+      font-size: 11px;
+      line-height: 1.4;
+      margin: 0 0.1em;
+      padding: 0.1em 0.6em;
+      text-shadow: 0 1px 0 #fff;
+    }
+
     .highlight {
       font-size: 14px;
       margin-bottom: 16px;