V2 Playground

.github/workflows/CI.yml

@@ -39,7 +39,7 @@ jobs:
         with:
           urls: |
             https://typescript-v2-$PR_NUMBER.ortam.now.sh
-            https://typescript-v2-$PR_NUMBER.ortam.now.sh/tsconfig
+            https://typescript-v2-$PR_NUMBER.ortam.now.sh/en/tsconfig
             https://typescript-v2-$PR_NUMBER.ortam.now.sh/docs/handbook/integrating-with-build-tools.html
         env:
           PR_NUMBER: ${{ github.event.pull_request.number }}

.vscode/settings.json

@@ -5,14 +5,13 @@
     "**/packages/typescriptlang-org/.cache/*": true
   },
   "workbench.colorCustomizations": {
-    "activityBar.background": "#5592d5",
+    "activityBar.background": "#c4d3e4",
     "activityBar.activeBorder": "#f2ccde",
     "activityBar.foreground": "#15202b",
     "activityBar.inactiveForeground": "#15202b99",
     "activityBarBadge.background": "#f2ccde",
     "activityBarBadge.foreground": "#15202b"
   },
-  "peacock.color": "#3178C6",
   "typescript.tsdk": "node_modules/typescript/lib",
   "debug.node.autoAttach": "on",
   "editor.formatOnSave": true

README.md

@@ -10,6 +10,9 @@ yarn bootstrap
 code .
 ```
 
+Working on this repo is done by running `yarn start` - this starts up the website on port `8000` and creates a
+builder worker for every package in the repo, so if you make a change outside of the site it will compile and lint etc.
+
 # Website Packages
 
 ## TypeScriptLang-Org
@@ -20,18 +23,14 @@ The main website for TypeScript, a Gatsby website which is statically deployed.
 yarn start
 ```
 
-## Playground
-
-A React component for the TypeScript playground base component. Not the one available on
-the site, but one you can use in other websites for showing off your APIs.
+## Sandbox
 
-You can work on the playground by running:
+The editor aspect of the TypeScript Playground REPL, useable for all sites which want to show a monaco editor
+with TypeScript or JavaScript code.
 
-```sh
-yarn playground
-```
+## Playground
 
-Then opening: http://localhost:1234 - which is the below package.
+The JS code as an AMD module for the playground which is loaded at runtime in the Playground website.
 
 # Doc Packages
 
@@ -54,7 +53,7 @@ yarn workspace tsconfig-reference run test
 # or to just run the linter without a build
 yarn workspace tsconfig-reference run lint
 
-# or to just one one linter
+# or to just one one linter for a single doc
 yarn workspace tsconfig-reference run lint resolveJson
 ```
 

dangerfile.ts

@@ -1,10 +1,10 @@
 // This Dangerfile only runs on same-repo PRs
 
-// You can test it by running 
-// yarn danger pr https://github.com/microsoft/TypeScript-Website/pull/115  
+// You can test it by running
+// yarn danger pr https://github.com/microsoft/TypeScript-Website/pull/115
 
 import { danger, message, markdown } from 'danger'
-import {basename} from "path"
+import { basename } from 'path'
 import spellcheck from 'danger-plugin-spellcheck'
 import lighthouse from 'danger-plugin-lighthouse'
 
@@ -16,10 +16,12 @@ spellcheck({
 
 // Print out the PR url
 const deployURL = `https://typescript-v2-${danger.github.pr.number}.ortam.now.sh`
-message(`Deployed to [a PR branch](${deployURL}) - [tsconfig](${deployURL}/tsconfig) [old handbook](${deployURL}/docs/handbook/integrating-with-build-tools.html)`)
+message(
+  `Deployed to [a PR branch](${deployURL}) - [playground](${deployURL}/en/play) [tsconfig](${deployURL}/en/tsconfig) [old handbook](${deployURL}/docs/handbook/integrating-with-build-tools.html)`
+)
 
 // Look for new snapshots and show in a HTML table
-const snapshots = danger.git.fileMatch("packages/typescriptlang-org/_tests/backstop_data/bitmaps_reference/*.png")
+const snapshots = danger.git.fileMatch('packages/typescriptlang-org/_tests/backstop_data/bitmaps_reference/*.png')
 if (snapshots.modified) {
   const oldSha = danger.github.pr.base.sha
   const newSha = danger.github.pr.head.sha
@@ -37,7 +39,7 @@ Before             |  After
 `
   })
 
-  markdown(`## Snapshots updated\n\n ${tables.join("\n\n")}`)
+  markdown(`## Snapshots updated\n\n ${tables.join('\n\n')}`)
 }
 
 lighthouse()

package.json

@@ -16,7 +16,7 @@
     "@types/react": "16.9.17"
   },
   "scripts": {
-    "bootstrap": "yarn workspace ts-twoslasher run build; yarn workspaces run build",
+    "bootstrap": "yarn workspaces run bootstrap; yarn workspaces run build",
     "start": "concurrently -p \"[{name}]\" -n \"BUILD,SITE\" -c \"bgBlue.bold,bgMagenta.bold\" \"node watcher.js\" \"yarn workspace typescriptlang-org start\"",
     "build": "yarn workspaces run build",
     "build-site": "yarn workspace typescriptlang-org build",

packages/gatsby-remark-shiki/package.json

@@ -12,6 +12,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
+    "bootstrap": "echo 'NOOP'",
     "test": "tsdx test",
     "lint": "tsdx lint"
   },

packages/gatsby-remark-shiki/test/fixtures/twoliner.md

@@ -4,6 +4,6 @@
 // @filename: getStringLength.ts
 export const getStringLength = (str: string) => str.length
 // @filename: index.ts
-import {getStringLength} from "./getStringLength"
-const b = getStringLength("string)
+import { getStringLength } from './getStringLength'
+const b = getStringLength('string')
 ```

packages/gatsby-remark-shiki/test/results/one.html

@@ -9,10 +9,10 @@ <h2>One liner with multiple IDs</h2>
     padding: 8px;
   }
   .lsp-result::before {
-    content: ' <';
+    content: " <";
   }
   .lsp-result::after {
-    content: '> ';
+    content: "> ";
   }
   .lsp-result {
     text-decoration: none !important;

packages/gatsby-remark-shiki/test/results/twoliner.html

@@ -1,13 +1,22 @@
+<h2>Two liner with multiple IDs</h2>
+<pre
+  class="shiki twoslash"
+><div class="language-id">ts</div><div class='code-container'><code><span style="color: #4C566A">// @filename: getStringLength.ts</span>
+<span style="color: #81A1C1">export</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9">str</span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=&gt;</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">str</span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9">length</span>
+<span style="color: #4C566A">// @filename: index.ts</span>
+<span style="color: #81A1C1">import</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">getStringLength</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">}</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">from</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">./getStringLength</span><span style="color: #ECEFF4">'</span>
+<span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9">b</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0">getStringLength</span><span style="color: #D8DEE9FF">(</span><span style="color: #ECEFF4">'</span><span style="color: #A3BE8C">string</span><span style="color: #ECEFF4">'</span><span style="color: #D8DEE9FF">)</span></code></div></pre>
+
 <style>
   .shiki {
     background-color: rgb(20, 30, 60);
     padding: 8px;
   }
   .lsp-result::before {
-    content: ' <';
+    content: " <";
   }
   .lsp-result::after {
-    content: '> ';
+    content: "> ";
   }
   .lsp-result {
     text-decoration: none !important;
@@ -42,10 +51,3 @@
     color: #ffeeee;
   }
 </style>
-<h2>Two liner with multiple IDs</h2>
-<pre
-  class="shiki twoslash"
-><div class="language-id">ts</div><div class='code-container'><code><span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #88C0D0"><span class='lsp'>getStringLength<span class='lsp-result'>const getStringLength: (str: string) =&gt; number</span></span></span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">(</span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #81A1C1">:</span><span style="color: #D8DEE9FF"> </span><span style="color: #8FBCBB">string</span><span style="color: #ECEFF4">)</span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=&gt;</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9"><span class='lsp'>str<span class='lsp-result'>(parameter) str: string</span></span></span><span style="color: #ECEFF4">.</span><span style="color: #D8DEE9"><span class='lsp'>length<span class='lsp-result'>(property) String.length: number</span></span></span>
-<span style="color: #81A1C1">const</span><span style="color: #D8DEE9FF"> </span><span style="color: #D8DEE9"><span class='lsp'>exports<span class='lsp-result'>const exports: {&#13;    getStringLength: (str: string) =&gt; number;&#13;}</span></span></span><span style="color: #D8DEE9FF"> </span><span style="color: #81A1C1">=</span><span style="color: #D8DEE9FF"> </span><span style="color: #ECEFF4">{</span>
-<span style="color: #D8DEE9FF">  </span><span style="color: #D8DEE9"><span class='lsp'>getStringLength<span class='lsp-result'>(property) getStringLength: (str: string) =&gt; number</span></span></span><span style="color: #ECEFF4">,</span>
-<span style="color: #ECEFF4">}</span></code></div></pre>

packages/gatsby-remark-shiki/test/results/twoliner.json

@@ -1,66 +1,75 @@
 [
   {
-    "code": "const getStringLength = (str: string) => str.length\nconst exports = {\n  getStringLength,\n}",
+    "code": "// @filename: getStringLength.ts\nexport const getStringLength = (str: string) => str.length\n// @filename: index.ts\nimport { getStringLength } from './getStringLength'\nconst b = getStringLength('string')",
     "extension": "ts",
     "highlights": [],
     "queries": [],
     "staticQuickInfos": [
+      {
+        "text": "(alias) const getStringLength: (str: string) => number\nimport getStringLength",
+        "docs": "",
+        "start": 124,
+        "length": 15,
+        "line": 1,
+        "character": 72,
+        "targetString": "getStringLength"
+      },
+      {
+        "text": "const b: number",
+        "docs": "",
+        "start": 173,
+        "length": 1,
+        "line": 1,
+        "character": 121,
+        "targetString": "b"
+      },
+      {
+        "text": "(alias) getStringLength(str: string): number\nimport getStringLength",
+        "docs": "",
+        "start": 177,
+        "length": 15,
+        "line": 1,
+        "character": 125,
+        "targetString": "getStringLength"
+      },
       {
         "text": "const getStringLength: (str: string) => number",
         "docs": "",
-        "start": 6,
+        "start": 46,
         "length": 15,
         "line": 0,
-        "character": 6,
+        "character": 46,
         "targetString": "getStringLength"
       },
       {
         "text": "(parameter) str: string",
         "docs": "",
-        "start": 25,
+        "start": 65,
         "length": 3,
-        "line": 0,
-        "character": 25,
+        "line": 1,
+        "character": 6,
         "targetString": "str"
       },
       {
         "text": "(parameter) str: string",
         "docs": "",
-        "start": 41,
+        "start": 81,
         "length": 3,
-        "line": 0,
-        "character": 41,
+        "line": 1,
+        "character": 22,
         "targetString": "str"
       },
       {
         "text": "(property) String.length: number",
         "docs": "Returns the length of a String object.",
-        "start": 45,
+        "start": 85,
         "length": 6,
-        "line": 0,
-        "character": 45,
-        "targetString": "length"
-      },
-      {
-        "text": "const exports: {\n    getStringLength: (str: string) => number;\n}",
-        "docs": "",
-        "start": 58,
-        "length": 7,
         "line": 1,
-        "character": 6,
-        "targetString": "exports"
-      },
-      {
-        "text": "(property) getStringLength: (str: string) => number",
-        "docs": "",
-        "start": 72,
-        "length": 15,
-        "line": 2,
-        "character": 2,
-        "targetString": "getStringLength"
+        "character": 26,
+        "targetString": "length"
       }
     ],
     "errors": [],
-    "playgroundURL": "https://www.typescriptlang.org/play/#code/MYewdgzgLgBA5gUygZSgJwJZjgGQdqACxgF4YAKaNALhiqzgEpSA+O9AOgBt84iAoUJFgIAHgAcQaKBFIwA3vxjwkqTNjwFCAGn4BfIA"
+    "playgroundURL": "https://www.typescriptlang.org/play/#code/PTAEAEDMEsBsFMB2BDAtvAXKA5vALgMp4BO0i2AMktngBYB0eAzgFDwAeADgPbF6gBjboib9chEmUrU6oALygAFKOJYVUgJTyAfKBX0E5OixAQYhtJlBkAJh0atoqHn1ABvHPiKlyVI7VAAX1BIYm5UUAByemBxbyk-GlpIliERfgAjeU8JH2l-RUj1ckiNIA"
   }
 ]

packages/gatsby-remark-twoslasher-code-blocks/package.json

@@ -8,6 +8,7 @@
   },
   "scripts": {
     "build": "echo 'NOOP'",
-    "test": "echo 'NOOP'"
+    "test": "echo 'NOOP'",
+    "bootstrap": "echo 'NOOP'"
   }
 }

packages/handbook-v1/package.json

@@ -5,7 +5,8 @@
   "version": "1.0.0",
   "scripts": {
     "build": "echo 'NOOP'",
-    "test": "echo 'NOOP'"
+    "test": "echo 'NOOP'",
+    "bootstrap": "echo 'NOOP'"
   },
   "prettier": {
     "semi": true

packages/playground-examples/README.md

@@ -2,14 +2,51 @@
 
 The English examples can be found in [`en/`](en/).
 
+# TypeScript Example Code
+
+These samples are built for hyperlinking between each-other
+in a sandboxed environment like the TypeScript Playground.
+
+Each example aims to cover one or two specific features to
+either how JavaScript works in TypeScript, or features which
+TypeScript has added to the language.
+
+An example should make assumptions that the reader is in a
+monaco/IDE-like environment which has a TSServer running for
+to provide extra analysis. As well as a minor fluency in
+JavaScript.
+
+These examples are not set in stone, and we're open to new
+ideas. If you'd like to help out and speak more than one
+language, we'd love to see translations.
+
+## Adding a new example section
+
+Create a folder in the english section of the [`copy`](./copy) folder,
+then add sub-folders per section which you'd want to have as headers
+with 3-5 examples.
+
+## Adding a localization
+
+All localizations live inside the `copy` folder:
+
+- There must be a `sections.json` in the root of each language
+- A language is created by copying over an english example with the same path, and then translating it
+- Any examples not copied over fall back to the english version
+- You can change the name of an example for your language by having `//// { title: 'c0d3 fl0w', ... }` in the first line of the example
+
+Languages are compiled to TOC JSON files in [`generated`](./generated), one per lanaguge.
+
 # Deployment
 
 There is a table of contents JSON file which contains
 all the useful metadata about the hierarchy and sort
-order for the docs. 
+order for the docs.
 
 It's likely that we'll need to create this per translation
 in the future, but for now the table of contents will
 default to english.
 
-The script is in [`scripts/generateTOC.js`](scripts/generateTOC.js).
+The script is in [`scripts/generateTOC.js`](scripts/generateTOC.js), with  
+\output of the build process is then copied into the `typescriptlang-org`
+module under `static/js/examples` in [`scripts/copyFiles.js`](scripts/copyFiles.js).