diff --git a/public/_includes/_hero.jade b/public/_includes/_hero.jade index e7ebf89745..a0cfe48897 100644 --- a/public/_includes/_hero.jade +++ b/public/_includes/_hero.jade @@ -1,14 +1,28 @@ -- var textFormat = '' +// Refer to jade.template.html and addJadeDataDocsProcessor to figure out where the context of this jade file originates +- var textFormat = ''; - var headerTitle = title + (typeof varType !== 'undefined' ? (': ' + varType) : ''); - +- var capitalize = function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } +- var useBadges = docType || stability; + if current.path[4] && current.path[3] == 'api' - var textFormat = 'is-standard-case' header(class="hero background-sky") - h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} + span(class="hero-title-with-badges" layout="row" layout-align="start center") + h1(class="hero-title text-display-1 #{textFormat}") #{headerTitle} + if useBadges + span(class="badges") + if docType + span(class="status-badge"). + #{capitalize(docType)} + if stability + span(layout="row" class="status-badge") + // badge circle is filled based on stability by matching a css selector in _hero.scss + span(class="status-circle status-#{stability}") + span Stability: #{capitalize(stability)} if subtitle h2.hero-subtitle.text-subhead #{subtitle} else if current.path[0] == "docs" - != partial("_version-dropdown") \ No newline at end of file + != partial("_version-dropdown") diff --git a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade index 685048157c..95c2994d3b 100644 --- a/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade +++ b/public/docs/dart/latest/tutorial/toh-pt5-NEW.jade @@ -445,7 +445,7 @@ code-example(format=''). :marked Going back too far could take us out of the application. That's acceptable in a demo. We'd guard against it in a real application, - perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html). + perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html). :marked Then we wire this method with an event binding to a *Back* button that we add to the bottom of the component template. +makeExample('toh-5/dart/lib/hero_detail_component.html', 'back-button')(format=".") diff --git a/public/docs/ts/latest/guide/dependency-injection.jade b/public/docs/ts/latest/guide/dependency-injection.jade index c1958c69b3..c2cfd5861e 100644 --- a/public/docs/ts/latest/guide/dependency-injection.jade +++ b/public/docs/ts/latest/guide/dependency-injection.jade @@ -534,7 +534,7 @@ code-example(format, language="html"). - var loggerlike = lang == 'dart' ? '' : 'We could provide a logger-like object. ' :marked The `providers` array appears to hold a service class. - In reality it holds an instance of the [Provider](/docs/ts/latest/api/core/Provider-class.html) class that can create that service. + In reality it holds an instance of the [Provider](../api/core/Provider-class.html) class that can create that service. There are many ways to *provide* something that #{implements} `Logger`. The `Logger` class itself is an obvious and natural provider — it has the right shape and it's designed to be created. @@ -563,13 +563,13 @@ code-example(format, language="html"). // #docregion providers-provide-2 :marked This is actually a short-hand expression for a provider registration that creates a new instance of the - [Provider](/docs/ts/latest/api/core/Provider-class.html) class. + [Provider](../api/core/Provider-class.html) class. // #enddocregion providers-provide-2 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-2') // #docregion providers-provide-3 // Skip for Dart, where the provide() function won't pass type checking. :marked - The [provide](/docs/ts/latest/api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`: + The [provide](../api/core/provide-function.html) function is the more common, friendlier way to create a `Provider`: // #enddocregion providers-provide-3 +makeExample('dependency-injection/ts/app/providers.component.ts','providers-3') // #docregion providers-provide-4-1 @@ -802,7 +802,7 @@ code-example(format, language="html"). // #docregion tokens-opaque-1 - var lang = current.path[1] -- var opaquetoken = lang == 'dart' ? 'OpaqueToken' : 'OpaqueToken' +- var opaquetoken = lang == 'dart' ? 'OpaqueToken' : 'OpaqueToken' h3 OpaqueToken p. The solution is to define and use an !{opaquetoken}. diff --git a/public/docs/ts/latest/guide/forms.jade b/public/docs/ts/latest/guide/forms.jade index c5fd8fc2af..3cd1515643 100644 --- a/public/docs/ts/latest/guide/forms.jade +++ b/public/docs/ts/latest/guide/forms.jade @@ -200,7 +200,7 @@ code-example(format=""). **We are not using Angular yet**. There are no bindings. No extra directives. Just layout. The `container`,`form-group`, `form-control`, and `btn` classes - come from [Twitter Boostrap](http://getbootstrap.com/css/). Purely cosmetic. + come from [Twitter Bootstrap](http://getbootstrap.com/css/). Purely cosmetic. We're using Bootstrap to gussy up our form. Hey, what's a form without a little style! @@ -477,7 +477,7 @@ figure.image-display .l-sub-section :marked Why "ngForm"? - A directive's [exportAs](/docs/ts/latest/api/core/DirectiveMetadata-class.html#!#exportAs) property + A directive's [exportAs](../api/core/DirectiveMetadata-class.html#!#exportAs) property tells Angular how to link local variable to the directive. We set `name` to `ngForm` because the `NgControlName` directive's `exportAs` property happens to be "ngForm". diff --git a/public/docs/ts/latest/guide/lifecycle-hooks.jade b/public/docs/ts/latest/guide/lifecycle-hooks.jade index 192e7a9aa2..b373d638ac 100644 --- a/public/docs/ts/latest/guide/lifecycle-hooks.jade +++ b/public/docs/ts/latest/guide/lifecycle-hooks.jade @@ -467,7 +467,7 @@ figure.image-display .l-sub-section :marked We see also that the `ngOnChanges` method is called in contradiction of the - [incorrect API documentation](/docs/ts/latest/api/core/DoCheck-interface.html). + [incorrect API documentation](../api/core/DoCheck-interface.html). .l-main-section :marked diff --git a/public/docs/ts/latest/guide/template-syntax.jade b/public/docs/ts/latest/guide/template-syntax.jade index 1b4c4427ca..c0c9ef16ad 100644 --- a/public/docs/ts/latest/guide/template-syntax.jade +++ b/public/docs/ts/latest/guide/template-syntax.jade @@ -533,8 +533,8 @@ table If we must read a target element property or call one of its methods, we'll need a different technique. See the API reference for - [viewChild](/docs/ts/latest/api/core/ViewChild-var.html) and - [contentChild](/docs/ts/latest/api/core/ContentChild-var.html). + [viewChild](../api/core/ViewChild-var.html) and + [contentChild](../api/core/ContentChild-var.html). // #enddocregion property-binding-6 // TODO (global): once we have api docs everywhere, change /docs/ts/latest/ to ../ @@ -829,7 +829,7 @@ code-example(format="", language="html"). ### Custom events with EventEmitter - Directives typically raise custom events with an Angular [EventEmitter](/docs/ts/latest/api/core/EventEmitter-class.html). + Directives typically raise custom events with an Angular [EventEmitter](../api/core/EventEmitter-class.html). A directive creates an `EventEmitter` and exposes it as a property. The directive calls `EventEmitter.emit(payload)` to fire an event, passing in a message payload that can be anything. Parent directives listen for the event by binding to this property and accessing the payload through the `$event` object. @@ -1224,7 +1224,7 @@ figure.image-display // #docregion directives-ngFor-7 .l-sub-section :marked - Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](/docs/ts/latest/api/common/NgFor-directive.html). + Learn about other special *index-like* values such as `last`, `even`, and `odd` in the [NgFor API reference](../api/common/NgFor-directive.html). // #enddocregion directives-ngFor-7 // #docregion directives-ngForTrackBy-1 diff --git a/public/docs/ts/latest/testing/application-under-test.jade b/public/docs/ts/latest/testing/application-under-test.jade index 01bdb48c27..530ba4dd6f 100644 --- a/public/docs/ts/latest/testing/application-under-test.jade +++ b/public/docs/ts/latest/testing/application-under-test.jade @@ -3,7 +3,7 @@ include ../_util-fns :marked We’ll need an Angular application to test, one as simple as possible while having most of the angular features we want to test. - What better app than our own [The Tour of Heroes](../tutorial/toh-pt5)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there. + What better app than our own [The Tour of Heroes](../tutorial/toh-pt5.html)? We're already quite familiar with it and it fits our criteria, so let's try to test what we've done there. We might end up modifying it a bit, because it doesn't have everything we want to test, but it's the perfect starting point. diff --git a/public/docs/ts/latest/tutorial/toh-pt5.jade b/public/docs/ts/latest/tutorial/toh-pt5.jade index 3bd50fa9dd..d70e6a9e49 100644 --- a/public/docs/ts/latest/tutorial/toh-pt5.jade +++ b/public/docs/ts/latest/tutorial/toh-pt5.jade @@ -752,7 +752,7 @@ code-example(format=''). :marked Going back too far could take us out of the application. That's acceptable in a demo. We'd guard against it in a real application, - perhaps with the [*routerCanDeactivate* hook](/docs/ts/latest/api/router/CanDeactivate-interface.html). + perhaps with the [*routerCanDeactivate* hook](../api/router/CanDeactivate-interface.html). 回退太多步儿会离开我们的应用。 在Demo中，这算不上问题。但在真实的应用中，我们需要对此进行防范。 diff --git a/public/news.jade b/public/news.jade index 2f96d9070b..35bf2930b9 100644 --- a/public/news.jade +++ b/public/news.jade @@ -5,6 +5,19 @@ .clear .grid-fluid + .c6 + .article-card + .date April 19, 2016 + .title + a( + target="_blank" + href="https://angularjs.blogspot.com/2016/04/angular-2-react-native.html" + ) Angular 2 + React Native + p The Angular 2 and React Native story started last summer [...] we are now pleased to share a library to build your own React Native applications with Angular 2 for iOS and Android... + .author + img(src="/resources/images/bios/marclaval.jpg") + .posted Guest posted by Marc Laval + .c6 .article-card .date March 30, 2016 @@ -18,19 +31,7 @@ .author img(src="/resources/images/bios/shield-bio-placeholder.png") .posted Guest posted by Nathan Walker - .c6 - .article-card - .date March 16, 2016 - .title - a( - target="_blank" - href="https://angularjs.blogspot.com/2016/03/angular-material-2-alpha-preview.html" - ) Angular Material 2: Alpha preview! - p On Tuesday, we released angular2-material alpha.0 - titanium-octopus, kicking off the public availability of the initial set of Angular Material 2 components. What is Angular Material? The goal of the Angular Material... - .author - img(src="/resources/images/bios/jelbourn.jpg") - .posted Posted by Jeremy Elbourn - + .grid-fluid.l-space-bottom-2.l-space-top-4 .c12.text-center h3.text-headline.text-uppercase Developer Community @@ -62,6 +63,19 @@ img(src="/resources/images/bios/shield-bio-placeholder.png") .posted Posted by Ekaterina Prigara .grid-fluid + .c6 + .article-card + .date April 5, 2016 + .title + a( + target="_blank" + href="http://m12.io/blog/we-launched-angular-2-project" + ) After six months of development we launched on Angular 2 + p This article is about why and how we came up with the idea of using Angular 2 as a foundation for our web project [...]. Hopefully, for some of us, it will serve as an encouragement... + .author + img(src="/resources/images/bios/shield-bio-placeholder.png") + .posted Posted by Marcin Ryzycki + .c6 .article-card .date March 21, 2016 @@ -74,19 +88,6 @@ .author img(src="/resources/images/bios/pascalprecht.jpg") .posted Posted by Pascal Precht - - .c6 - .article-card - .date March 21, 2016 - .title - a( - target="_blank" - href="https://www.mediacurrent.com/blog/blog-series-weather-underground-angular-2-introduction" - ) Building Wunderground.com with Drupal & Angular 2: An Introduction - p For the wunderground.com project, our mandate was to use the same Drupal 7 platform originally built for weather.com. [...] instead of starting a new project using Angular 1... - .author - img(src="/resources/images/bios/shield-bio-placeholder.png") - .posted Posted by Matt Davis .grid-fluid.l-space-bottom-2.l-space-top-4 diff --git a/public/resources/css/module/_dropdown.scss b/public/resources/css/module/_dropdown.scss index c916851469..6ea5991f80 100644 --- a/public/resources/css/module/_dropdown.scss +++ b/public/resources/css/module/_dropdown.scss @@ -5,19 +5,30 @@ .dropdown-button { background: rgba($snow, .1); border: none; + border-radius: 3px; text-transform: none; font-weight: normal; + font-size: 14px; line-height: $unit * 4; padding: 0px ($unit * 4) 0px ($unit * 2); + margin: (1.25 * $unit) 0; cursor: pointer; position: relative; z-index: $layer-1; opacity: 0.87; + letter-spacing: .010em; + min-height:4.5 * $unit; + white-space:nowrap; + -webkit-font-smoothing:antialiased; + -webkit-user-select:none; .icon { position: absolute; - top: 5px; + top: 50%; right: $unit; + -ms-transform: translateY(-50%); + -webkit-transform: translateY(-50%); + transform: translateY(-50%); z-index: $layer-1; font-size: 20px; opacity: .87; @@ -28,7 +39,7 @@ background: $snow; box-shadow: 0px 2px 5px rgba($coal, .3); position: absolute; - top: 0px; + top: 1.25 * $unit; left: 0px; z-index: $layer-5; display: none; diff --git a/public/resources/css/module/_example-title.scss b/public/resources/css/module/_example-title.scss index 5904f1f0e1..2c7ef0c2d7 100644 --- a/public/resources/css/module/_example-title.scss +++ b/public/resources/css/module/_example-title.scss @@ -9,7 +9,7 @@ background: #1976D2; box-shadow: none; // temporary hack to remove space between example title and code-example - margin-bottom: -18px; + margin-bottom: -5px; z-index: 1; position: relative; border-bottom-right-radius: 0; diff --git a/public/resources/css/module/_hero.scss b/public/resources/css/module/_hero.scss index db2a5bd33b..73906acd3f 100644 --- a/public/resources/css/module/_hero.scss +++ b/public/resources/css/module/_hero.scss @@ -1,15 +1,44 @@ -$hero-padding: ($unit * 10) ($unit * 6) ($unit * 5); +$hero-padding: ($unit * 10) ($unit * 6) ($unit * 7); .hero { position: relative; padding: $hero-padding; - height: $unit * 8; + height: $unit * 10; + + .hero-title-with-badges { + margin-bottom: $unit; + } + + .status-circle { + margin-right: 4px; + border-radius: 50%; + width: 10px; + height: 10px; + display: inline-block; + } + + // status-*, will be matched by the results in addJadeDataDocsProcessor.js, and reflect in _hero.jade + .status-deprecated { + background: #E53935; + } + + .status-stable { + background: #558b2f; + } + + .status-experimental { + background: #9575cd; + } @media handheld and (max-width: $phone-breakpoint), screen and (max-device-width: $phone-breakpoint), screen and (max-width: $tablet-breakpoint) { height: auto; padding-top: 40px; + + .badges { + margin-top: 48px; + } } &.is-large { @@ -24,7 +53,28 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 5); } } + .badges { + padding-left: 8px; + + .status-badge { + color: #0143A3; + margin-left: 4px; + padding-left: 8px; + padding-right: 8px; + background-color: rgba(255,255,255,0.5); + border-radius: 2px; + line-height: 20px; + display: inline-block; + } + } + + button { + // Override md-button from angular material to align language select with hero title. + margin: 0 !important; + } + .hero-title { + display: inline; // title will be inline with badges text-transform: uppercase; margin: 0; opacity: .87; @@ -93,4 +143,4 @@ $hero-padding: ($unit * 10) ($unit * 6) ($unit * 5); display: block; } } -} \ No newline at end of file +} diff --git a/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js b/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js index b15229fbe8..f33e2e223f 100644 --- a/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js +++ b/tools/api-builder/angular.io-package/processors/addJadeDataDocsProcessor.js @@ -58,12 +58,32 @@ module.exports = function addJadeDataDocsProcessor() { // GET DATA FOR EACH PAGE (CLASS, VARS, FUNCTIONS) var modulePageInfo = _(doc.exports) .map(function(exportDoc) { + + // STABILITY STATUS + // Supported tags: + // @stable + // @experimental + // @deprecated + // Default is the empty string (no badge) + // Do not capitalize the strings, they are intended for use in constructing a css class from _hero.scss + // and used in _hero.jade + var stability = ''; + if (_.has(exportDoc, 'stable')) { + stability = 'stable'; + } else if (_.has(exportDoc, 'experimental')) { + stability = 'experimental'; + } else if (_.has(exportDoc, 'deprecated')) { + stability = 'deprecated'; + } + var dataDoc = { name: exportDoc.name + '-' + exportDoc.docType, title: exportDoc.name, docType: exportDoc.docType, - exportDoc: exportDoc + exportDoc: exportDoc, + stability: stability }; + if (exportDoc.symbolTypeName) dataDoc.varType = titleCase(exportDoc.symbolTypeName); if (exportDoc.originalModule) dataDoc.originalModule = exportDoc.originalModule; return dataDoc; diff --git a/tools/api-builder/angular.io-package/tag-defs/docsNotRequired.js b/tools/api-builder/angular.io-package/tag-defs/docsNotRequired.js new file mode 100644 index 0000000000..e29022f423 --- /dev/null +++ b/tools/api-builder/angular.io-package/tag-defs/docsNotRequired.js @@ -0,0 +1,5 @@ +module.exports = function() { + return { + name: 'docsNotRequired' + }; +}; diff --git a/tools/api-builder/angular.io-package/tag-defs/experimental.js b/tools/api-builder/angular.io-package/tag-defs/experimental.js new file mode 100644 index 0000000000..d6ddec66f8 --- /dev/null +++ b/tools/api-builder/angular.io-package/tag-defs/experimental.js @@ -0,0 +1,5 @@ +module.exports = function() { + return { + name: 'experimental' + }; +}; diff --git a/tools/api-builder/angular.io-package/tag-defs/index.js b/tools/api-builder/angular.io-package/tag-defs/index.js index 487e14ec90..e311d3cb43 100644 --- a/tools/api-builder/angular.io-package/tag-defs/index.js +++ b/tools/api-builder/angular.io-package/tag-defs/index.js @@ -2,5 +2,8 @@ module.exports = [ require('./deprecated'), require('./howToUse'), require('./whatItDoes'), - require('./internal') + require('./internal'), + require('./stable'), + require('./experimental'), + require('./docsNotRequired'), ]; diff --git a/tools/api-builder/angular.io-package/tag-defs/stable.js b/tools/api-builder/angular.io-package/tag-defs/stable.js new file mode 100644 index 0000000000..49cd861aeb --- /dev/null +++ b/tools/api-builder/angular.io-package/tag-defs/stable.js @@ -0,0 +1,5 @@ +module.exports = function() { + return { + name: 'stable' + }; +}; diff --git a/tools/api-builder/angular.io-package/templates/jade-data.template.html b/tools/api-builder/angular.io-package/templates/jade-data.template.html index a8c95ab1ee..d92027ed12 100644 --- a/tools/api-builder/angular.io-package/templates/jade-data.template.html +++ b/tools/api-builder/angular.io-package/templates/jade-data.template.html @@ -1,3 +1,4 @@ +{# Use this document to generate the _data.json files for harp.js. This acts as the link between dgeni, jade, and harp #} { {%- for item in doc.data %} "{$ item.name $}" : { @@ -11,6 +12,9 @@ {%- if item.originalModule %} "originalModule" : "{$ item.originalModule $}", {%- endif %} + {%- if item.stability %} + "stability" : "{$ item.stability $}", + {%- endif %} "docType": "{$ item.docType $}" }{% if not loop.last %},{% endif %} {% endfor -%} diff --git a/tools/api-builder/angular.io-package/templates/var.template.html b/tools/api-builder/angular.io-package/templates/var.template.html index ed06f6e93a..ed1351c40e 100644 --- a/tools/api-builder/angular.io-package/templates/var.template.html +++ b/tools/api-builder/angular.io-package/templates/var.template.html @@ -4,20 +4,23 @@ {% block body %} include {$ relativePath(doc.path, '_util-fns') $} -.l-main-section - h2(class="variable export") - pre.prettyprint + +.div(layout="row" layout-xs="column" class="row-margin") + div(flex="20" flex-xs="100") + h2 Variable Export + div(flex="80" flex-xs="100") + pre.prettyprint.no-bg code. export {$ doc.name $}{$ returnType(doc.returnType) $} - p.location-badge. - exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } - defined in {$ githubViewLink(doc) $} +p.location-badge. + exported from {@link {$ doc.moduleDoc.id $} {$doc.moduleDoc.id $} } + defined in {$ githubViewLink(doc) $} - :marked +:marked {%- if doc.notYetDocumented %} *Not Yet Documented* {% else %} -{$ doc.description | indentForMarkdown(4) | trimBlankLines $} +{$ doc.description | indentForMarkdown(2) | trimBlankLines $} {% endif -%} {% endblock %}