Adds a rough layout to the site

Author: orta

.vscode/settings.json

@@ -1,5 +1,13 @@
 {
  "files.exclude": {
  "**/.rts2_cache*": true
- }
-}
+ },
+ "workbench.colorCustomizations": {
+ "activityBar.background": "#3178C6",
+ "activityBar.foreground": "#000000",
+ "activityBar.inactiveForeground": "#15202b99",
+ "activityBarBadge.background": "#ffffff",
+ "activityBarBadge.foreground": "#15202b"
+ },
+ "peacock.color": "#3178C6",
+}

packages/typescriptlang-org/gatsby-config.js

@@ -1,24 +1,33 @@
 // https://github.com/gatsbyjs/gatsby/issues/1457
-require('ts-node').register({ files: true })
+require("ts-node").register({ files: true })
 
 module.exports = {
  plugins: [
+ // Creates TS types for queries during `gatsby dev`
  "gatsby-plugin-codegen",
- `gatsby-plugin-typescript`,
+ // Support ts/tsx files in src
+ "gatsby-plugin-typescript",
+ 
+ // Let's you edit the head from inside a react tree
+ "gatsby-plugin-react-helmet",
+
+ // Grabs the old handbook markdown files
  {
  resolve: `gatsby-source-filesystem`,
  options: {
  path: `${__dirname}/../handbook-v1/en`,
  name: `handbook-v1`,
  },
  },
+ // Grabs file from the tsconfig reference
  {
  resolve: `gatsby-source-filesystem`,
  options: {
  path: `${__dirname}/../tsconfig-reference/output`,
  name: `tsconfig-reference`,
  },
  },
+ // Markdown support
  {
  resolve: `gatsby-transformer-remark`,
  options: {

packages/typescriptlang-org/package.json

@@ -12,10 +12,12 @@
  "serve": "gatsby serve"
  },
  "dependencies": {
+ "@types/react-helmet": "^5.0.14",
  "@uifabric/fluent-theme": "^7.1.4",
  "@uifabric/react-cards": "^0.108.2",
  "gatsby": "^2.15.29",
  "gatsby-plugin-codegen": "^1.0.4",
+ "gatsby-plugin-react-helmet": "^3.1.13",
  "gatsby-plugin-sharp": "^2.2.28",
  "gatsby-remark-copy-linked-files": "^2.1.24",
  "gatsby-remark-images": "^3.1.25",
@@ -28,6 +30,7 @@
  "prismjs": "^1.17.1",
  "react": "^16.10.2",
  "react-dom": "^16.10.2",
+ "react-helmet": "^5.2.1",
  "ts-node": "^8.4.1"
  },
  "devDependencies": {

packages/typescriptlang-org/src/components/layout.tsx

@@ -1,52 +1,18 @@
 import React from "react"
 import { Link } from "gatsby"
+import { SiteNav } from "./layout/TopNav"
 
 
 declare const __PATH_PREFIX__: string
 
 export class Layout extends React.Component<any> {
  render() {
- const { location, title, children } = this.props
- const rootPath = `${__PATH_PREFIX__}/`
- let header
-
- header = (
- <h3
- style={{
- fontFamily: `Montserrat, sans-serif`,
- marginTop: 0,
- }}
- >
- <Link
- style={{
- boxShadow: `none`,
- textDecoration: `none`,
- color: `inherit`,
- }}
- to={`/`}
- >
- {title}
- </Link>
- </h3>
- )
-
+ const { children } = this.props
  return (
- <div
- style={{
- backgroundColor: "#E5E5E5",
- marginLeft: `auto`,
- marginRight: `auto`,
- }}
- >
- <header>{header}</header>
+ <div>
+ <SiteNav />
  <main>{children}</main>
- <footer>
- <a href="/deprecated">Old stuff</a>
- © {new Date().getFullYear()}, Built with
- {` `}
- <a href="https://www.gatsbyjs.org">Gatsby</a>
- </footer>
- </div >
+ </div>
  )
  }
 }

packages/typescriptlang-org/src/components/layout/TopNav.tsx

@@ -0,0 +1,55 @@
+import React, { CSSProperties } from "react"
+import { Text, FontWeights } from "office-ui-fabric-react"
+import { Helmet } from "react-helmet";
+import { Link } from "gatsby"
+import { palette } from "../../lib/theme"
+import { IComponentStyles } from "office-ui-fabric-react/lib/Foundation"; 
+
+export type Props = {
+ centeredLayout?: boolean
+}
+
+const boldStyle: IComponentStyles<any> = { root: 
+ { fontWeight: FontWeights.semibold, color: "white", textDecoration: "none" } 
+}
+
+export class SiteNav extends React.Component<Props> {
+ render() {
+ const { children } = this.props
+
+ return (
+ <header dir="ltr">
+ <Helmet>
+ <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css" />
+ </Helmet>
+
+ <div id="top-menu">
+ <div className="left">
+ <a href="/" aria-label="TypeScript Home Page" style={{ textDecoration: "none" }}>
+ <svg style={{ marginLeft: "1rem", marginTop: "0.55rem", marginRight: "1rem" }} fill="none" height="26" viewBox="0 0 27 26" width="27" xmlns="http://www.w3.org/2000/svg"><path clipRule="evenodd" d="m.98608 0h24.32332c.5446 0 .9861.436522.9861.975v24.05c0 .5385-.4415.975-.9861.975h-24.32332c-.544597 0-.98608-.4365-.98608-.975v-24.05c0-.538478.441483-.975.98608-.975zm13.63142 13.8324v-2.1324h-9.35841v2.1324h3.34111v9.4946h2.6598v-9.4946zm1.0604 9.2439c.4289.2162.9362.3784 1.5218.4865.5857.1081 1.2029.1622 1.8518.1622.6324 0 1.2331-.0595 1.8023-.1784.5691-.1189 1.0681-.3149 1.497-.5879s.7685-.6297 1.0187-1.0703.3753-.9852.3753-1.6339c0-.4703-.0715-.8824-.2145-1.2365-.1429-.3541-.3491-.669-.6186-.9447-.2694-.2757-.5925-.523-.9692-.7419s-.8014-.4257-1.2743-.6203c-.3465-.1406-.6572-.2771-.9321-.4095-.275-.1324-.5087-.2676-.7011-.4054-.1925-.1379-.3409-.2838-.4454-.4379-.1045-.154-.1567-.3284-.1567-.523 0-.1784.0467-.3392.1402-.4824.0935-.1433.2254-.2663.3959-.369s.3794-.1824.6269-.2392c.2474-.0567.5224-.0851.8248-.0851.22 0 .4523.0162.697.0486.2447.0325.4908.0825.7382.15.2475.0676.4881.1527.7218.2555.2337.1027.4495.2216.6475.3567v-2.4244c-.4015-.1514-.84-.2636-1.3157-.3365-.4756-.073-1.0214-.1095-1.6373-.1095-.6268 0-1.2207.0662-1.7816.1987-.5609.1324-1.0544.3392-1.4806.6203s-.763.6392-1.0104 1.0743c-.2475.4352-.3712.9555-.3712 1.5609 0 .7731.2268 1.4326.6805 1.9785.4537.546 1.1424 1.0082 2.0662 1.3866.363.146.7011.2892 1.0146.4298.3134.1405.5842.2865.8124.4378.2282.1514.4083.3162.5403.4946s.198.3811.198.6082c0 .1676-.0413.323-.1238.4662-.0825.1433-.2076.2676-.3753.373s-.3766.1879-.6268.2473c-.2502.0595-.5431.0892-.8785.0892-.5719 0-1.1383-.0986-1.6992-.2959-.5608-.1973-1.0805-.4933-1.5589-.8879z" fill="#fff" fillRule="evenodd" /></svg>
+ <Text variant="xLarge" styles={boldStyle}>TypeScript</Text>
+ </a>
+
+ <nav>
+ <ul style={{ padding: "0", margin: 0 }}>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/docs">Documentation</Link></li>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/index.html#download-links">Download</Link></li>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/community">Connect</Link></li>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/play">Playground</Link></li>
+ </ul>
+ </nav>
+ </div>
+ <div className="right">
+ <nav >
+ <ul style={{ padding: "0", margin: 0 }}>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/index.html#download-links">SEARCH</Link></li>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white" }} to="/community"><svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><circle cx="6" cy="6" fill="#fff" r="6"/></svg></Link></li>
+ <li className="nav-item"><Link style={{ textDecoration: "none", color: "white", fontSize: "1rem" }} to="/play">en</Link></li>
+ </ul>
+ </nav>
+ </div>
+ </div>
+ </header>
+ )
+ }
+}

packages/typescriptlang-org/src/lib/theme.ts

@@ -0,0 +1,32 @@
+import { loadTheme } from 'office-ui-fabric-react';
+
+// https://fabricweb.z5.web.core.windows.net/pr-deploy-site/refs/heads/master/theming-designer/index.html
+
+export const palette = {
+ themePrimary: '#3178c6',
+ themeLighterAlt: '#f5f9fd',
+ themeLighter: '#d9e7f6',
+ themeLight: '#b9d2ee',
+ themeTertiary: '#7aaadd',
+ themeSecondary: '#4688ce',
+ themeDarkAlt: '#2d6eb3',
+ themeDark: '#265d97',
+ themeDarker: '#1c446f',
+ neutralLighterAlt: '#f8f8f8',
+ neutralLighter: '#f4f4f4',
+ neutralLight: '#eaeaea',
+ neutralQuaternaryAlt: '#dadada',
+ neutralQuaternary: '#d0d0d0',
+ neutralTertiaryAlt: '#c8c8c8',
+ neutralTertiary: '#7da5be',
+ neutralSecondary: '#5d8ca9',
+ neutralPrimaryAlt: '#417494',
+ neutralPrimary: '#00273f',
+ neutralDark: '#174a6a',
+ black: '#093855',
+ white: '#ffffff',
+} as const 
+
+loadTheme({
+ palette
+});

packages/typescriptlang-org/src/pages/index.css

@@ -1,30 +1,61 @@
-.App {
- text-align: center;
+html {
+ background-color: #FAF9F8;
 }
 
-.App-logo {
- animation: App-logo-spin infinite 20s linear;
- height: 40vmin;
- pointer-events: none;
+body {
+ margin: 0;
+ -webkit-font-smoothing: antialiased;
+ color: #333;
+ font-family: "Segoe UI Web (West European)","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
+ font-size: 14px;
 }
 
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
+body,
+html,
+#___gatsby {
+ height: 100%;
+}
+
+/* 
+There isn't a collapsible nav bar in the fabric components, and it is unwieldy to 
+set up something like that on a styles basis, so it's in the CSS.
+ */
+
+#top-menu {
+ background-color: #3178c6;
+ user-select: none;
+ clear: both;
  display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
+ justify-content: space-between;
 }
 
-html {
- background-color: #E5E5E5;
+#top-menu > .left {
+ display: flex;
+ flex-direction: row;
 }
 
-body,
-html,
-#___gatsby {
- height: 100%;
+#top-menu > .right {
+ display: flex;
+ flex-direction: row-reverse;
+ justify-self: flex-end; 
+}
+
+#top-menu .nav {
+ display: inline-block;
+ text-decoration: none;
+}
+
+#top-menu .nav-item {
+ border: 1px solid transparent;
+ color: #262626;
+ display: inline-block;
+ margin-top: 1px;
+ padding: 0.8rem 0.5em 0;
+ height: 45px;
+ font-size: 1rem;
+ text-decoration: none;
+}
+
+.clear-fix {
+ clear: both;
 }

packages/typescriptlang-org/src/templates/handbook.tsx

@@ -1,13 +1,9 @@
-// @ts-check
 import React from "react"
 import { Link, graphql } from "gatsby"
-import {BlogPostBySlug} from "./__generated__/BlogPostBySlug"
-// import Bio from "../components/bio"
-import {Layout} from "../components/layout"
-// import SEO from "../components/seo"
-// import { rhythm, scale } from "../utils/typography"
+import { BlogPostBySlug } from "./__generated__/BlogPostBySlug"
+import { Layout } from "../components/layout"
 
-class BlogPostTemplate extends React.Component<{ pageContext: any,  data: BlogPostBySlug}> {
+class BlogPostTemplate extends React.Component<{ pageContext: any, data: BlogPostBySlug }> {
  render() {
  const post = this.props.data.markdownRemark
  if (!post) {
@@ -18,9 +14,10 @@ class BlogPostTemplate extends React.Component<{ pageContext: any, data: BlogPo
  const { previous, next } = this.props.pageContext
  return (
  <Layout >
-
- <div dangerouslySetInnerHTML={{ __html: post.html }} />
- <hr/>
+ <div className="ms-depth-4" style={{ backgroundColor: "white", maxWidth: 960, margin: "1rem auto", padding: "2rem" }}>
+ <div dangerouslySetInnerHTML={{ __html: post.html }} />
+ </div>
+ <hr />
  <ul>
  <li>
  {previous && (

packages/typescriptlang-org/src/templates/tsconfigReference.tsx

@@ -1,9 +1,9 @@
 import React from "react"
 import { graphql } from "gatsby"
-import {TSConfigReferenceTemplate} from "./__generated__/TSConfigReferenceTemplate"
-import {Layout} from "../components/layout"
+import { TSConfigReferenceTemplate } from "./__generated__/TSConfigReferenceTemplate"
+import { Layout } from "../components/layout"
 
-class TSConfigReferenceTemplateComponent extends React.Component<{ pageContext: any,  data: TSConfigReferenceTemplate}> {
+class TSConfigReferenceTemplateComponent extends React.Component<{ pageContext: any, data: TSConfigReferenceTemplate }> {
  render() {
  console.log(this.props)
  const post = this.props.data.markdownRemark
@@ -15,9 +15,12 @@ class TSConfigReferenceTemplateComponent extends React.Component<{ pageContext:
  return (
  <Layout >
 
+ <div className="ms-depth-4" style={{ backgroundColor: "white", maxWidth: 960, margin: "1rem auto", padding: "2rem" }}>
+ <h1>TSConfig Reference</h1> 
  <div dangerouslySetInnerHTML={{ __html: post.html }} />
- <hr/>
- 
+ </div>
+ <hr />
+
  </Layout>
  )
  }