}
{ /** Used for skip past navigation button */}
diff --git a/packages/typescriptlang-org/src/copy/en.ts b/packages/typescriptlang-org/src/copy/en.ts
new file mode 100644
index 000000000000..ed326b3cabd1
--- /dev/null
+++ b/packages/typescriptlang-org/src/copy/en.ts
@@ -0,0 +1,10 @@
+import { defineMessages } from "react-intl"
+import { navCopy } from "./en/nav"
+import { docCopy } from "./en/documentation"
+
+export const lang = defineMessages({
+ ...navCopy,
+ ...docCopy,
+})
+
+export type Copy = typeof lang
diff --git a/packages/typescriptlang-org/src/copy/en/documentation.ts b/packages/typescriptlang-org/src/copy/en/documentation.ts
new file mode 100644
index 000000000000..055875f77c78
--- /dev/null
+++ b/packages/typescriptlang-org/src/copy/en/documentation.ts
@@ -0,0 +1,6 @@
+export const docCopy = {
+ nav_: {
+ id: "foo",
+ defaultMessage: "foo",
+ },
+}
diff --git a/packages/typescriptlang-org/src/copy/en/nav.ts b/packages/typescriptlang-org/src/copy/en/nav.ts
new file mode 100644
index 000000000000..f4628ca0f9d3
--- /dev/null
+++ b/packages/typescriptlang-org/src/copy/en/nav.ts
@@ -0,0 +1,13 @@
+export const navCopy = {
+ skip_to_content: "Skip to main content",
+ nav_documentation: "Documentation",
+ nav_documentation_short: "Docs",
+ nav_download: "Download",
+ nav_connect: "Connect",
+ nav_playground: "Playground",
+ nav_search_placeholder: "Search Docs",
+ nav_search_aria: "Search the TypeScript site",
+ nav_beta: "Search the TypeScript site",
+ nav_beta_notification:
+ "Note: this page is a beta page, don't rely on the URL and file issues on microsoft/TypeScript-Website",
+}
diff --git a/packages/typescriptlang-org/src/copy/vo.ts b/packages/typescriptlang-org/src/copy/vo.ts
new file mode 100644
index 000000000000..c478acc36e2f
--- /dev/null
+++ b/packages/typescriptlang-org/src/copy/vo.ts
@@ -0,0 +1,9 @@
+import { defineMessages } from "react-intl"
+import { navCopy } from "./vo/nav"
+import { docCopy } from "./en/documentation"
+import { Copy } from "./en"
+
+export const lang: Copy = defineMessages({
+ ...navCopy,
+ ...docCopy,
+})
diff --git a/packages/typescriptlang-org/src/copy/vo/nav.ts b/packages/typescriptlang-org/src/copy/vo/nav.ts
new file mode 100644
index 000000000000..476cbb06cfb8
--- /dev/null
+++ b/packages/typescriptlang-org/src/copy/vo/nav.ts
@@ -0,0 +1,14 @@
+import { navCopy as enNavCopy } from "../en/nav"
+
+export const navCopy = {
+ ...enNavCopy,
+ skip_to_content: "Sk1p t0 main Con7ent",
+ nav_documentation: "D0cumentation",
+ nav_documentation_short: "Docs",
+ nav_download: "DL",
+ nav_connect: "Konnect",
+ nav_playground: "Playground",
+ nav_search_placeholder: "Se4rch D0cz",
+ nav_beta_notification:
+ "Note: this page is a b3ta page, don't rely on the URL and file issues on microsoft/TypeScript-Website",
+}
diff --git a/packages/typescriptlang-org/src/lib/createInternational.ts b/packages/typescriptlang-org/src/lib/createInternational.ts
new file mode 100644
index 000000000000..3fc86c68d921
--- /dev/null
+++ b/packages/typescriptlang-org/src/lib/createInternational.ts
@@ -0,0 +1,13 @@
+import { IntlShape } from "react-intl"
+
+/**
+ * This will let you define an area for your localization and have typescript
+ * keep the keys in check
+ *
+ * @param intlUseEffect the result of `useIntl()`
+ */
+export function createInternational(
+ intlUseEffect: IntlShape
+): (intlKey: keyof NavSection, obj?: any) => string {
+ return (k, obj) => intlUseEffect.formatMessage({ id: k as string }, obj)
+}
diff --git a/packages/typescriptlang-org/lib/utils/isTouchDevice.ts b/packages/typescriptlang-org/src/lib/isTouchDevice.ts
similarity index 100%
rename from packages/typescriptlang-org/lib/utils/isTouchDevice.ts
rename to packages/typescriptlang-org/src/lib/isTouchDevice.ts
diff --git a/packages/typescriptlang-org/src/pages/css/documentation.scss b/packages/typescriptlang-org/src/pages/css/documentation.scss
new file mode 100644
index 000000000000..90de24660c88
--- /dev/null
+++ b/packages/typescriptlang-org/src/pages/css/documentation.scss
@@ -0,0 +1,56 @@
+.flow-links {
+ display: flex;
+ flex-wrap: wrap;
+
+ .clicky-grey-button {
+ width: 18rem;
+ height: 12rem;
+ background-color: #d8d8d8;
+ margin-right: 20px;
+ margin-bottom: 20px;
+ color: black;
+ padding: 18px;
+
+ display: flex;
+ flex-direction: column-reverse;
+ // For the badge
+ position: relative;
+
+ &.headline {
+ width: 300px;
+ height: 200px;
+ }
+
+ &.links {
+ height: 26rem;
+ }
+
+ h4 {
+ color: black;
+ text-decoration: none;
+ font-size: 3rem;
+ font-style: normal;
+ margin-bottom: 0.2em;
+
+ &:hover {
+ text-decoration: none;
+ }
+ }
+
+ p {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ a {
+ text-decoration: none;
+ }
+
+ .badge {
+ position: absolute;
+ background-color: #666;
+ top: 10px;
+ right: 10px;
+ }
+ }
+}
diff --git a/packages/typescriptlang-org/src/pages/dev/sandbox.tsx b/packages/typescriptlang-org/src/pages/dev/sandbox.tsx
index 73a0c36de11f..892cdaea65c0 100644
--- a/packages/typescriptlang-org/src/pages/dev/sandbox.tsx
+++ b/packages/typescriptlang-org/src/pages/dev/sandbox.tsx
@@ -4,7 +4,7 @@ import { withPrefix } from "gatsby"
import "./dev.scss"
import { DevNav } from "../../components/dev-nav"
-import { isTouchDevice } from "../../../lib/utils/isTouchDevice"
+import { isTouchDevice } from "../../lib/isTouchDevice"
import { SuppressWhenTouch } from "../../components/SuppressWhenTouch"
const Index = (props: any) => {
diff --git a/packages/typescriptlang-org/src/pages/dev/twoslash.tsx b/packages/typescriptlang-org/src/pages/dev/twoslash.tsx
index 5ce03e54e397..3c12a502dc4e 100644
--- a/packages/typescriptlang-org/src/pages/dev/twoslash.tsx
+++ b/packages/typescriptlang-org/src/pages/dev/twoslash.tsx
@@ -8,7 +8,7 @@ import { renderToHTML } from "gatsby-remark-shiki/src/renderer"
import "./dev.scss"
import { DevNav } from "../../components/dev-nav"
-import { isTouchDevice } from "../../../lib/utils/isTouchDevice"
+import { isTouchDevice } from "../../lib/isTouchDevice"
import { SuppressWhenTouch } from "../../components/SuppressWhenTouch"
/** Note: to run all the web infra in debug, run:
@@ -44,7 +44,7 @@ const Index = (props: any) => {
if (isOK) {
document.getElementById("loader")!.parentNode?.removeChild(document.getElementById("loader")!)
}
-
+ document.getElementById("monaco-editor-embed")!.style.display = "block"
const sandbox = await sandboxEnv.createTypeScriptSandbox({ text: codeSamples[0].code, compilerOptions: {}, domID: "monaco-editor-embed", supportTwoslashCompilerOptions: true }, main, ts)
sandbox.editor.focus()
@@ -190,7 +190,7 @@ const Index = (props: any) => {
Downloading Sandbox...
-
+
{codeSamples.map(code => {
const setExample = (e) => {
diff --git a/packages/typescriptlang-org/src/pages/documentation.en.tsx b/packages/typescriptlang-org/src/pages/documentation.en.tsx
new file mode 100644
index 000000000000..65da248b2a5e
--- /dev/null
+++ b/packages/typescriptlang-org/src/pages/documentation.en.tsx
@@ -0,0 +1,259 @@
+import React from "react"
+import { Layout } from "../components/layout"
+
+import "./css/documentation.scss"
+import { ButtonGrid, GridProps } from "../components/display/ButtonGrid"
+
+const headlineGrid: GridProps = {
+ buttons: [
+ {
+ title: "TS in 5m",
+ href: "/docs/handbook/typescript-in-5-minutes.html",
+ blurb: "5 minute overview of the language",
+ }, {
+ title: "TS Tooling",
+ href: "/docs/handbook/typescript-in-5-minutes.html",
+ blurb: "5 minute overview of the tooling",
+ }, {
+ title: "Handbook",
+ href: "/docs/handbook/basic-types.html",
+ blurb: "The TypeScript language reference",
+ }, {
+ title: "Examples",
+ href: "/play/index.html?#show-examples",
+ blurb: "Comprehensive hands-on playground tutorials",
+ }
+ ],
+ headline: true
+}
+
+
+const apis = [
+ {
+ href: "https://code.visualstudio.com/tutorials/functions-extension/getting-started",
+ blurb: "Build and deploy from VS Code in minutes",
+ title: "Azure Functions"
+ },
+ {
+
+ href: "https://feathersjs.com",
+ blurb: "A framework for real-time applications and REST APIs",
+ title: "Feathers JS"
+ },
+ {
+
+ href: "https://github.com/graphql-boilerplates/typescript-graphql-server",
+ blurb: "Bootstrap your GraphQL server within seconds",
+ title: "GraphQL"
+ },
+ {
+
+ href: "https://nestjs.com",
+ blurb: "A progressive Node.js framework for building efficient and scalable server-side applications",
+ title: "Nest JS"
+ },
+ {
+
+ href: "https://github.com/Microsoft/TypeScript-Node-Starter",
+ blurb: "A documented starter template from the TS team",
+ title: "Node Starter"
+ },
+ {
+
+ href: "https://github.com/microsoft/TypeScript-WeChat-Starter/blob/master/README.md",
+ badge: "Guide",
+ blurb: "Use the WeChat JSSDK with TypeScript",
+ title: "WeChat"
+ }
+]
+
+const webFrameworks = [
+ {
+ href: "/docs/handbook/typescript-in-5-minutes.html",
+ blurb: "Makes writing beautiful apps be joyful and fun",
+ title: "Angular"
+ },
+ {
+ href: "https://reactjs.org",
+ badge: "Examples below",
+ blurb: "A JavaScript library for building user interfaces",
+ title: "React"
+ },
+ {
+ href: "https://vuejs.org",
+ blurb: "The Progressive JavaScript Framework",
+ title: "Vue"
+ },
+ {
+ href: "https://github.com/typescript-ruby/typescript-rails",
+ badge: "Plugin",
+ blurb: "Convention over configuration web framework",
+ title: "Ruby on Rails"
+ },
+ {
+ href: "https://www.typescriptlang.org/docs/handbook/asp-net-core.html",
+ badge: "Guide",
+ blurb: "Framework for building modern, cloud-based, Internet-connected applications",
+ title: "ASP.NET Core"
+ },
+]
+
+const nodeNPM = [
+ {
+ href: "https://github.com/jaredpalmer/tsdx#readme",
+ blurb: "Zero config tool for building TypeScript libraries",
+ title: "TSDX"
+ },
+ {
+ href: "https://oclif.io",
+ blurb: "Create command line tools your users love",
+ title: "oclif"
+ },
+ {
+ href: "https://github.com/infinitered/gluegun#readme",
+ blurb: "A delightful toolkit for building TypeScript-powered command-line apps",
+ title: "Gluegun"
+ }
+]
+
+
+const react = [
+ {
+ href: "https://create-react-app.dev",
+ blurb: "Set up a modern web app by running one command",
+ title: "Create React App"
+ },
+ {
+ href: "https://www.gatsbyjs.org",
+ badge: "Plugin",
+ blurb: "Helps developers build blazing fast websites and apps",
+ title: "Gatsby"
+ },
+ {
+ href: "https://nextjs.org",
+ blurb: "The React Framework",
+ title: "Next.js"
+ },
+ {
+ href: "https://github.com/jaredpalmer/razzle",
+ blurb: "Server-rendered universal JavaScript applications with no configuration",
+ title: "Razzle"
+ },
+ {
+ href: "https://reactjs.org/community/starter-kits.html",
+ blurb: "Recommendations from the React Team",
+ title: "Starter Kits"
+ }
+]
+
+const apps = [
+ {
+ href: "https://babeljs.io/docs/en/babel-preset-typescript",
+ badge: "Plugin",
+ blurb: "Set up a modern web app by running one command",
+ title: "Electron"
+ },
+ {
+ href: "https://expo.io/",
+ blurb: "The fastest way to build an app",
+ title: "Expo"
+ },
+ {
+ href: "https://facebook.github.io/react-native/",
+ blurb: "Learn once, write anywhere",
+ title: "React Native"
+ },
+ {
+ href: "https://www.nativescript.org/",
+ blurb: "Open source framework for building truly native mobile apps",
+ title: "NativeScript"
+ },
+ {
+ href: "https://www.microsoft.com/en-us/makecode/",
+ blurb: "Brings computer science to life for all students with fun projects",
+ title: "MakeCode"
+ }
+]
+
+
+const tooling = [
+ {
+ href: "https://babeljs.io/docs/en/babel-preset-typescript",
+ badge: "Plugin",
+ blurb: "Use next generation JavaScript, today",
+ title: "Babel"
+ },
+ {
+ href: "https://parceljs.org",
+ blurb: "Blazing fast, zero configuration web application bundler",
+ title: "Parcel"
+ },
+ {
+
+ href: "https://webpack.js.org/guides/typescript/",
+ badge: "Plugin",
+ blurb: "Bundle your assets, scripts, images and styles",
+ title: "Webpack"
+ }
+]
+
+const learn = [
+ {
+ href: "/docs/handbook/release-notes/typescript-3-5.html",
+ blurb: "3.5 Release Notes",
+ title: "Release Notes"
+ },
+ {
+ href: "/docs/handbook/basic-types.html",
+ blurb: "The TypeScript language reference",
+ title: "Handbook"
+ },
+ {
+ href: "/docs/handbook/declaration-files/introduction.html",
+ blurb: "Learn how to declare the shape of JS",
+ title: "d.ts Guide"
+ },
+ {
+ href: "/play/index.html",
+ blurb: "Explore and share TypeScript online",
+ title: "Playground"
+ }
+]
+
+const Index = () =>
+
+
+
Start Learning
+
+
+
+
Start a Project
+
Because TypeScript is a superset of JavaScript, it doesn't have a default template - there would be too many.
+ Instead, other projects have their own TypeScript bootstrap templates with their own context. These projects provide
+ templates which include TypeScript support.
+
+
Node with NPM
+
+
+
Web Frameworks
+
+
+
Node APIs
+
+
+
React Projects
+
+
+
Building Apps
+
+
+
Tooling
+
+
+
Familiar With TypeScript already?
+
+
+
+
+
+export default Index
diff --git a/packages/typescriptlang-org/src/pages/download.en.tsx b/packages/typescriptlang-org/src/pages/download.en.tsx
new file mode 100644
index 000000000000..f87add797d18
--- /dev/null
+++ b/packages/typescriptlang-org/src/pages/download.en.tsx
@@ -0,0 +1,25 @@
+import React from "react"
+import { Layout } from "../components/layout"
+
+const Index = () =>
+
+
+
Download TypeScript
+
TypeScript is available in two ways depending on how you intend to use it: built as an npm module, and a nuget package.
+
+
+
+
+
via NPM
+
TypeScript is available in three ways depending on how you intend to use it: built as an npm momdule, and a nuget package.
+
+
+
+
via Nuget
+
TypeScript is available in three ways depending on how you intend to use it: built as an npm momdule, and a nuget package.
+
+
+
+
+
+export default Index
diff --git a/packages/typescriptlang-org/src/templates/handbook.tsx b/packages/typescriptlang-org/src/templates/handbook.tsx
index 5e6c2a4b9ef5..802247d8e3e2 100644
--- a/packages/typescriptlang-org/src/templates/handbook.tsx
+++ b/packages/typescriptlang-org/src/templates/handbook.tsx
@@ -72,7 +72,7 @@ const HandbookTemplate = (props: { pageContext: any, data: GetHandbookBySlug, pa
const showSidebar = post.headings && post.headings.length <= 25
return (
-
+
diff --git a/packages/typescriptlang-org/src/templates/markdown.scss b/packages/typescriptlang-org/src/templates/markdown.scss
index 6a5acdd4e71e..30b8958066af 100644
--- a/packages/typescriptlang-org/src/templates/markdown.scss
+++ b/packages/typescriptlang-org/src/templates/markdown.scss
@@ -36,8 +36,8 @@
// Code blocks
pre {
- background-color: #141414;
- color: #d8dee9;
+ background-color: white;
+ color: black;
padding: 12px;
border-left: 1px solid #999;
diff --git a/packages/typescriptlang-org/src/templates/play.tsx b/packages/typescriptlang-org/src/templates/play.tsx
index 6fdef26e8298..ba6d0d83d356 100644
--- a/packages/typescriptlang-org/src/templates/play.tsx
+++ b/packages/typescriptlang-org/src/templates/play.tsx
@@ -102,7 +102,7 @@ const Index = (props: Props) => {
return (
<>
-
+
{/** This is the top nav, which is outside of the editor */}