Skip to content

Commit

Permalink
Revise the docs root, and the connect pages
Browse files Browse the repository at this point in the history
  • Loading branch information
orta committed Sep 9, 2019
1 parent 931eafa commit fc7f8e6
Show file tree
Hide file tree
Showing 9 changed files with 338 additions and 30 deletions.
263 changes: 263 additions & 0 deletions src/_docs/home.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,263 @@
---
title: Documentation
layout: docs
permalink: /docs/home.html
description: "How to learn about TypeScript"
---

<h1>Start Learning</h1>

<div class="flow-links">
<a href="/docs/handbook/typescript-in-5-minutes.html" class="clicky-button headline">
<p>5 minute overview of the language</p>
<h4>TS in 5m</h4>
</a>

<a href="/docs/handbook/basic-types.html" class="clicky-button headline">
<p>The TypeScript language reference</p>
<h4>Handbook</h4>
</a>

<a href="/samples/index.html" class="clicky-button headline">
<p>Guides from the TS team </p>
<h4>Samples</h4>
</a>

<a href="/play/index.html?target=1#example/hello-world" class="clicky-button headline">
<p>Comprehensive hands-on playground tutorials</p>
<h4>Examples</h4>
</a>
</div>

<h1>Start a Project</h1>
<p>Because TypeScript is a subset 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.
</p>
<p>&nbsp;</p>

<!--
Want to consider adding a new one? The project should probably be getting
~ >10k npm downloads a week or really raise the bar for the platform.
API:
- Feathers JS
- graphql-yoga
- WeChat
- TS node starter
- nest
Web:
Angular
Vue
Nuxt.js
Rails
Dojo
React:
- Create React App
- Gatsby
- Next JS
NPM Library:
- TSDX
- CLI - oclif
Tools:
- Babel
- Parcel
- Webpack
- Rollup
Building apps:
- Electron
- React Native
- NativeScript
-->

<h2>Node with NPM</h2>
<div class="flow-links">
<a href="https://github.com/jaredpalmer/tsdx#readme" class="clicky-button">
<p>Zero config tool for building TypeScript libraries</p>
<h4>TSDX</h4>
</a>
<a href="https://oclif.io" class="clicky-button">
<p>Create command line tools your users love</p>
<h4>oclif</h4>
</a>
</div>

<h2>Web Frameworks</h2>
<div class="flow-links">
<a href="/docs/handbook/typescript-in-5-minutes.html" class="clicky-button">
<p>Makes writing beautiful apps be joyful and fun</p>
<h4>Angular</h4>
</a>

<a href="https://reactjs.org" class="clicky-button">
<div class="badge">Examples below</div>
<p>A JavaScript library for building user interfaces</p>
<h4>React</h4>
</a>

<a href="https://vuejs.org" class="clicky-button">
<p>The Progressive JavaScript Framework</p>
<h4>Vue</h4>
</a>

<a href="https://github.com/typescript-ruby/typescript-rails" class="clicky-button">
<div class="badge">Plugin</div>
<p>Convention over configuration web framework</p>
<h4>Ruby on Rails</h4>
</a>

<a href="https://www.typescriptlang.org/docs/handbook/asp-net-core.html" class="clicky-button">
<div class="badge">Guide</div>
<p>Framework for building modern, cloud-based, Internet-connected applications</p>
<h4>ASP.NET Core</h4>
</a>
</div>

<h2>Node APIs</h2>
<div class="flow-links">
<a href="https://code.visualstudio.com/tutorials/functions-extension/getting-started" class="clicky-button">
<p>Build and deploy from VS Code in minutes</p>
<h4>Azure Functions</h4>
</a>

<a href="https://feathersjs.com" class="clicky-button">
<p>A framework for real-time applications and REST APIs</p>
<h4>Feathers JS</h4>
</a>

<a href="https://github.com/graphql-boilerplates/typescript-graphql-server" class="clicky-button">
<p>Bootstrap your GraphQL server within seconds</p>
<h4>GraphQL</h4>
</a>

<a href="https://nestjs.com" class="clicky-button">
<p>A progressive Node.js framework for building efficient and scalable server-side applications</p>
<h4>Nest JS</h4>
</a>

<a href="https://github.com/Microsoft/TypeScript-Node-Starter" class="clicky-button">
<p>A documented starter template from the TS team</p>
<h4>Node Starter</h4>
</a>

<a href="https://github.com/microsoft/TypeScript-WeChat-Starter/blob/master/README.md" class="clicky-button">
<div class="badge">Guide</div>
<p>Use the WeChat JSSDK with TypeScript</p>
<h4>WeChat</h4>
</a>
</div>

<h2>React Projects</h2>

<div class="flow-links">
<a href="https://create-react-app.dev" class="clicky-button">
<p>Set up a modern web app by running one command</p>
<h4>Create React App</h4>
</a>

<a href="https://www.gatsbyjs.org" class="clicky-button">
<div class="badge">Plugin</div>
<p>Helps developers build blazing fast websites and apps</p>
<h4>Gatsby</h4>
</a>

<a href="https://nextjs.org" class="clicky-button">
<p>The React Framework</p>
<h4>Next.js</h4>
</a>

<a href="https://github.com/jaredpalmer/razzle" class="clicky-button">
<p>Server-rendered universal JavaScript applications with no configuration</p>
<h4>Razzle</h4>
</a>

<a href="https://reactjs.org/community/starter-kits.html" class="clicky-button">
<p>Recommendations from the React Team</p>
<h4>Starter Kits</h4>
</a>
</div>

<h2>Building Apps</h2>

<div class="flow-links">
<a href="https://babeljs.io/docs/en/babel-preset-typescript" class="clicky-button">
<div class="badge">Plugin</div>
<p>Set up a modern web app by running one command</p>
<h4>Electron</h4>
</a>

<a href="https://expo.io/" class="clicky-button">
<p>The fastest way to build an app</p>
<h4>Expo</h4>
</a>

<a href="https://facebook.github.io/react-native/" class="clicky-button">
<p>Learn once, write anywhere</p>
<h4>React Native</h4>
</a>

<a href="https://www.nativescript.org/" class="clicky-button">
<p>Open source framework for building truly native mobile apps</p>
<h4>NativeScript</h4>
</a>

<a href="https://www.microsoft.com/en-us/makecode/" class="clicky-button">
<p>Brings computer science to life for all students with fun projects</p>
<h4>MakeCode</h4>
</a>

</div>

<h2>Tooling</h2>

<div class="flow-links">
<a href="https://babeljs.io/docs/en/babel-preset-typescript" class="clicky-button">
<div class="badge">Plugin</div>
<p>Use next generation JavaScript, today</p>
<h4>Babel</h4>
</a>

<a href="https://parceljs.org" class="clicky-button">
<p>Blazing fast, zero configuration web application bundler</p>
<h4>Parcel</h4>
</a>

<a href="https://webpack.js.org/guides/typescript/" class="clicky-button">
<div class="badge">Plugin</div>
<p>Bundle your assets, scripts, images and styles</p>
<h4>Webpack</h4>
</a>
</div>

<h1>Familiar With TypeScript already?</h1>


<div class="flow-links">
<a href="/docs/handbook/release-notes/typescript-3-5.html" class="clicky-button headline">
<p>3.5 Release Notes</p>
<h4>Release Notes</h4>
</a>

<a href="/docs/handbook/basic-types.html" class="clicky-button headline">
<p>The TypeScript language reference</p>
<h4>Handbook</h4>
</a>

<a href="/docs/handbook/declaration-files/introduction.html" class="clicky-button headline">
<p>Learn how to declare the shape of JS</p>
<h4>d.ts Guide</h4>
</a>

<a href="/play/index.html" class="clicky-button headline">
<p>Explore and share TypeScript online</p>
<h4>Playground</h4>
</a>
</div>

<p>Having trouble finding what you're looking for? <a href= "https://www.surveymonkey.com/r/SN9V7R7">Tell us</a> so we can better help you!
19 changes: 0 additions & 19 deletions src/_docs/home.md

This file was deleted.

1 change: 0 additions & 1 deletion src/_includes/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
<!-- The navigation items. -->
<div class="collapse navbar-collapse centered-navbar" id="navbar-collapse-div">
<ul class="nav navbar-nav">
<li class="{% if page.url contains '/samples/' %}active{% endif %}"><a href="/samples/index.html">Quick Start</a></li>
<li class="{% if page.url contains '/docs/' %}active{% endif %}"><a href="/docs/index.html">Documentation </a></li>
<li><a href="/index.html#download-links">Download</a></li>
<li class="{% if page.url contains '/community/' %}active{% endif %}"><a href="/community/index.html">Connect</a></li>
Expand Down
12 changes: 12 additions & 0 deletions src/assets/images/community/connect-gitter.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions src/assets/scss/community.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,9 @@
font-size: 1.8rem;
}

&.friends-of-typescript {
background-image: url("../images/community/connect-group-icon.svg");
background-color: $brand-nav-color-focus;
&.gitter {
background-image: url("../images/community/connect-gitter.svg");
background-color: #D9165C;
}

&.stackoverflow {
Expand Down Expand Up @@ -102,4 +102,4 @@
padding-bottom: 40px;
height: 40px;
}
}
}
53 changes: 53 additions & 0 deletions src/assets/scss/docs.scss
Original file line number Diff line number Diff line change
Expand Up @@ -377,3 +377,56 @@ h1, h2, h3 {
}
}

// Seen on the documentation root
.flow-links {
display: flex;
flex-wrap: wrap;

.clicky-button {
width: 26em;
height: 20em;
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: 26em;
}

h4 {
color: black;
text-decoration: none;
font-size: 4em;
font-style: normal;
margin-bottom: 0.2em;

&:hover {
text-decoration: none;
}
}

p {
margin-top: 0;
margin-bottom:0;
}


.badge {
position:absolute;
top: 10px;
right: 10px;
}
}
}
8 changes: 4 additions & 4 deletions src/community/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,10 @@ <h1>Connect with us</h1>
<div class="text">Browse the numerous <a href="{{ site.data.urls.definitelytyped_github }}" target="_blank">TypeScript definition files</a> available for common libraries and frameworks.</div>
</div>
<div class="callout col-md-4">
<a aria-labelledby="friends-header" class="icon friends-of-typescript img-circle" href="/community/friends.html"></a>
<a href="/community/friends.html" id="friends-header"><h2>Friends of TypeScript</h2></a>
<div class="text">Learn about <a href="/community/friends.html">who's already improving their workflows</a> with TypeScript!</div>
<a aria-labelledby="gitter-header" class="icon gitter img-circle" href="https://gitter.im/Microsoft/TypeScript"></a>
<a href="https://gitter.im/Microsoft/TypeScript" id="gitter-header"><h2>Chat</h2></a>
<div class="text">Chat with other TypeScript users via Gitter.</div>
</div>
</div>
</div>
</div>
</div>
Loading

0 comments on commit fc7f8e6

Please sign in to comment.