Skip to content

Commit 85580b3

Browse files
ortaorta
committed
Twoslashify the homepage
1 parent 70b8dc8 commit 85580b3

30 files changed

+242
-101
lines changed

‎.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
packages/typescriptlang-org/src/**/*.tsx
2+
packages/typescriptlang-org/src/components/index/twoslash/*

‎packages/typescriptlang-org/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
"setup-playground-cache-bust": "node scripts/cacheBustPlayground.mjs",
1414
"setup-staging": "node scripts/setupStaging.mjs",
1515
"create-lighthouse-json": "node scripts/createLighthouseJSON.js",
16-
"compile-index-examples": "twoslash --reactAlso src/components/index/twoslash/*.ts src/components/index/twoslash/*.tsx src/components/index/twoslash/generated",
16+
"compile-index-examples": "twoslash --reactAlso src/components/index/twoslash/*.ts src/components/index/twoslash/*.js src/components/index/twoslash/*.tsx src/components/index/twoslash/generated",
1717
"start": "gatsby develop",
1818
"serve": "gatsby serve",
1919
"test": "yarn tsc && jest"
@@ -58,7 +58,7 @@
5858
"sass": "^1.26.10",
5959
"ts-debounce": "^2.2.0",
6060
"ts-node": "^8.6.2",
61-
"twoslash-cli": "^1.3.2",
61+
"twoslash-cli": "^1.3.3",
6262
"typescript": "*",
6363
"xml-js": "^1.6.11"
6464
},

‎packages/typescriptlang-org/src/components/index/AdoptSteps.tsx

+8-37
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,13 @@
11
import React from "react"
2+
import {Code as Index1} from "./twoslash/generated/IndexGetStarted1.js"
3+
import {Code as Index2} from "./twoslash/generated/IndexGetStarted2.js"
4+
import {Code as Index3} from "./twoslash/generated/IndexGetStarted3.js"
5+
import {Code as Index4} from "./twoslash/generated/IndexGetStarted4"
26

37
type StepProps = {
48
i: (str: any) => string
59
}
610

7-
const one =`
8-
function compact(arr) {
9-
if (orr.length > 10)
10-
return arr.trim(0, 10)
11-
return arr
12-
}`.trim()
13-
14-
const two =`
15-
// @ts-check
16-
17-
function compact(arr) {
18-
if (orr.length > 10)
19-
return arr.trim(0, 10)
20-
return arr
21-
}`.trim()
22-
23-
const three =`
24-
// @ts-check
25-
26-
/** @param {any[]} arr */
27-
function compact(arr) {
28-
if (arr.length > 10)
29-
return arr.trim(0, 10)
30-
return arr
31-
}`.trim()
32-
33-
const four = `
34-
function compact(arr: string[]) {
35-
if (arr.length > 10)
36-
return arr.slice(0, 10)
37-
return arr
38-
}`.trim()
39-
4011
const Stepper = (props: { index: number }) => {
4112
return <div className="adopt-step-stepper">
4213
<div className={"first" + (props.index === 0 ? " yellow" : "") }></div>
@@ -50,7 +21,7 @@ const Stepper = (props: { index: number }) => {
5021
export const StepOne = (props: StepProps) => {
5122
return (
5223
<div className="adopt-step">
53-
<pre><code>{one}</code></pre>
24+
<Index1 />
5425
<p>JavaScript File</p>
5526
<Stepper index={0} />
5627
</div>
@@ -60,7 +31,7 @@ export const StepOne = (props: StepProps) => {
6031
export const StepTwo = (props: StepProps) => {
6132
return (
6233
<div className="adopt-step">
63-
<pre><code>{one}</code></pre>
34+
<Index2 />
6435
<p>JavaScript with TS Check</p>
6536
<Stepper index={1} />
6637
</div>
@@ -70,7 +41,7 @@ export const StepTwo = (props: StepProps) => {
7041
export const StepThree = (props: StepProps) => {
7142
return (
7243
<div className="adopt-step">
73-
<pre><code>{one}</code></pre>
44+
<Index3 />
7445
<p>JavaScript with JSDoc</p>
7546
<Stepper index={2} />
7647
</div>
@@ -80,7 +51,7 @@ export const StepThree = (props: StepProps) => {
8051
export const StepFour = (props: StepProps) => {
8152
return (
8253
<div className="adopt-step">
83-
<pre><code>{one}</code></pre>
54+
<Index4 />
8455
<p>TypeScript File</p>
8556
<Stepper index={3} />
8657
</div>

‎packages/typescriptlang-org/src/components/index/twoslash/Index2Del1TS.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
2+
// @noErrors
3+
type Result = "pass" | "fail"
4+
5+
function verify(result: Result) {
6+
if (result === "pass") {
7+
console.log("Passed")
8+
} else {
9+
console.log("Failed")
10+
}
11+
}

‎packages/typescriptlang-org/src/components/index/twoslash/Index2Del2RM.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
2+
// codefence: {1}
3+
type Result = "pass" | "fail"
4+
5+
function verify(result: Result) {
6+
// ^^^^^^^^
7+
if (result === "pass") {
8+
console.log("Passed")
9+
} else {
10+
console.log("Failed")
11+
}
12+
}

‎packages/typescriptlang-org/src/components/index/twoslash/Index2Del3JS.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
// twoslash: { themes: ["../../../packages/typescriptlang-org/lib/themes/typescript-beta-light"] }
2+
3+
4+
function verify(result) {
5+
if (result === "pass") {
6+
console.log("Passed")
7+
} else {
8+
console.log("Failed")
9+
}
10+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexAdoptGrad1.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
interface Account {
2+
id: number
3+
displayName: string
4+
version: 1
5+
}
6+
7+
function welcome(user: Account) {
8+
console.log(user.id)
9+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexAdoptGrad2.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
type Result = "pass" | "fail"
2+
3+
function verify(result: Result) {
4+
if (result === "pass") {
5+
console.log("Passed")
6+
} else {
7+
console.log("Failed")
8+
}
9+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexGetStarted1.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function compact(arr) {
2+
if (orr.length > 10)
3+
return arr.trim(0, 10)
4+
return arr
5+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexGetStarted2.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @errors: 2304
2+
// @noImplicitAny: false
3+
// @ts-check
4+
5+
function compact(arr) {
6+
if (orr.length > 10)
7+
return arr.trim(0, 10)
8+
return arr
9+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexGetStarted3.js

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
// @ts-check
2+
// @errors: 2339
3+
4+
/** @param {any[]} arr */
5+
function compact(arr) {
6+
if (arr.length > 10)
7+
return arr.trim(0, 10)
8+
return arr
9+
}

‎packages/typescriptlang-org/src/components/index/twoslash/IndexGetStarted4.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
function compact(arr: string[]) {
2+
if (arr.length > 10)
3+
return arr.slice(0, 10)
4+
return arr
5+
}

‎packages/typescriptlang-org/src/components/index/twoslash/generated/Index2Del1TS.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated by the twoslash-cli from Index2Del1TS.ts.md
2+
import React from "react"
3+
4+
const innerHTML = `
5+
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'>&nbsp;</div></code></div></pre>
6+
`
7+
8+
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />

‎packages/typescriptlang-org/src/components/index/twoslash/generated/Index2Del2RM.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated by the twoslash-cli from Index2Del2RM.ts.md
2+
import React from "react"
3+
4+
const innerHTML = `
5+
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line dim'><span style="color: #008000">// codefence: {1}</span></div><div class='line highlight'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line dim'>&nbsp;</div><div class='line dim'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line dim'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line dim'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line dim'><span style="color: #000000"> }</span></div><div class='line dim'><span style="color: #000000">}</span></div><div class='line dim'>&nbsp;</div></code></div></pre>
6+
`
7+
8+
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />

‎packages/typescriptlang-org/src/components/index/twoslash/generated/Index2Del3JS.js.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated by the twoslash-cli from Index2Del3JS.js.md
2+
import React from "react"
3+
4+
const innerHTML = `
5+
<pre class="shiki typescript-beta-light twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">js</div><div class='code-container'><code><div class='line'>&nbsp;</div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: any): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: any' >result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: any' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'>&nbsp;</div></code></div></pre>
6+
`
7+
8+
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />

‎packages/typescriptlang-org/src/components/index/twoslash/generated/IndexAdoptGrad1.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated by the twoslash-cli from IndexAdoptGrad1.ts.md
2+
import React from "react"
3+
4+
const innerHTML = `
5+
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">interface</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='interface Account' >Account</data-lsp></span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.id: number' >id</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">number</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.displayName: string' >displayName</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99">string</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='(property) Account.version: 1' >version</data-lsp></span><span style="color: #000000">: </span><span style="color: #098658">1</span></div><div class='line'><span style="color: #000000">}</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function welcome(user: Account): void' >welcome</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) user: Account' >user</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='interface Account' >Account</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) user: Account' >user</data-lsp></span><span style="color: #000000">.</span><span style="color: #001080"><data-lsp lsp='(property) Account.id: number' >id</data-lsp></span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
6+
`
7+
8+
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />

‎packages/typescriptlang-org/src/components/index/twoslash/generated/IndexAdoptGrad2.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
// Auto-generated by the twoslash-cli from IndexAdoptGrad2.ts.md
2+
import React from "react"
3+
4+
const innerHTML = `
5+
<pre class="shiki light-plus twoslash lsp" style="background-color: #FFFFFF; color: #000000"><div class="language-id">ts</div><div class='code-container'><code><div class='line'><span style="color: #0000FF">type</span><span style="color: #000000"> </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000"> = </span><span style="color: #A31515">"pass"</span><span style="color: #000000"> | </span><span style="color: #A31515">"fail"</span></div><div class='line'>&nbsp;</div><div class='line'><span style="color: #0000FF">function</span><span style="color: #000000"> </span><span style="color: #795E26"><data-lsp lsp='function verify(result: Result): void' >verify</data-lsp></span><span style="color: #000000">(</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000">: </span><span style="color: #267F99"><data-lsp lsp='type Result = "pass" | "fail"' >Result</data-lsp></span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #AF00DB">if</span><span style="color: #000000"> (</span><span style="color: #001080"><data-lsp lsp='(parameter) result: Result' >result</data-lsp></span><span style="color: #000000"> === </span><span style="color: #A31515">"pass"</span><span style="color: #000000">) {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Passed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> } </span><span style="color: #AF00DB">else</span><span style="color: #000000"> {</span></div><div class='line'><span style="color: #000000"> </span><span style="color: #001080"><data-lsp lsp='var console: Console' >console</data-lsp></span><span style="color: #000000">.</span><span style="color: #795E26"><data-lsp lsp='(method) Console.log(...data: any[]): void' >log</data-lsp></span><span style="color: #000000">(</span><span style="color: #A31515">"Failed"</span><span style="color: #000000">)</span></div><div class='line'><span style="color: #000000"> }</span></div><div class='line'><span style="color: #000000">}</span></div></code></div></pre>
6+
`
7+
8+
export const Code = () => <div dangerouslySetInnerHTML={{ __html: innerHTML }} />

0 commit comments

Comments
 (0)