diff --git a/aio/content/images/bios/_no-one.png b/aio/content/images/bios/_no-one.png new file mode 100644 index 0000000000..64feccb3e8 Binary files /dev/null and b/aio/content/images/bios/_no-one.png differ diff --git a/aio/content/marketing/about.html b/aio/content/marketing/about.html new file mode 100644 index 0000000000..fd7863049c --- /dev/null +++ b/aio/content/marketing/about.html @@ -0,0 +1,14 @@ +
+

Building For the Future

+

+ Angular is built by a team of engineers who share a passion for + making web development feel effortless. We believe that writing + beautiful apps should be joyful and fun. We're building a + platform for the future. +

+
+ +
+

Current Contributors

+ +
diff --git a/aio/content/marketing/contributor.json b/aio/content/marketing/contributors.json similarity index 100% rename from aio/content/marketing/contributor.json rename to aio/content/marketing/contributors.json diff --git a/aio/src/app/embedded/contributor/contributor-list.component.ts b/aio/src/app/embedded/contributor/contributor-list.component.ts new file mode 100644 index 0000000000..8e6579f68e --- /dev/null +++ b/aio/src/app/embedded/contributor/contributor-list.component.ts @@ -0,0 +1,25 @@ +import { Component, OnInit } from '@angular/core'; +import { Contributor } from './contributors.model'; +import { ContributorService } from './contributor.service'; + +@Component({ + selector: `aio-contributor-list`, + template: ` +
+

{{group}}

+ +
` +}) +export class ContributorListComponent implements OnInit { + contributorGroups = new Map(); + groups: string[]; + + constructor(private contributorService: ContributorService) { } + + ngOnInit() { + this.contributorService.contributors.subscribe(cgs => { + this.groups = ['Lead', 'Google', 'Community']; + this.contributorGroups = cgs; + }); + } +} diff --git a/aio/src/app/embedded/contributor/contributor.component.ts b/aio/src/app/embedded/contributor/contributor.component.ts new file mode 100644 index 0000000000..4545e17f84 --- /dev/null +++ b/aio/src/app/embedded/contributor/contributor.component.ts @@ -0,0 +1,36 @@ +import { Component, Input } from '@angular/core'; + +import { Contributor } from './contributors.model'; + +@Component({ + selector: 'aio-contributor', + template: ` +
+ name +

{{person.name}}

+ + + + + twitter + + + website + +

{{person.bio}}

+ +
+ +
+

{{person.name}}

+

{{person.bio}}

+
+ ` +}) +export class ContributorComponent { + @Input() person: Contributor; + showBio = false; + noPicture = '_no-one.png'; + pictureBase = 'content/images/bios/'; +} + diff --git a/aio/src/app/embedded/contributor/contributor.service.ts b/aio/src/app/embedded/contributor/contributor.service.ts new file mode 100644 index 0000000000..69a57db92c --- /dev/null +++ b/aio/src/app/embedded/contributor/contributor.service.ts @@ -0,0 +1,44 @@ +import { Injectable } from '@angular/core'; +import { Http } from '@angular/http'; + +import { Observable } from 'rxjs/Observable'; +import 'rxjs/add/operator/map'; +import 'rxjs/add/operator/publishLast'; + +import { Logger } from 'app/shared/logger.service'; +import { Contributor } from './contributors.model'; + +const contributorsPath = 'content/contributors.json'; + +@Injectable() +export class ContributorService { + contributors: Observable>; + + constructor(private http: Http, private logger: Logger) { + this.contributors = this.getContributors(); + } + + private getContributors() { + const contributors = this.http.get(contributorsPath) + .map(res => res.json()) + .map(contribs => { + const contribGroups = new Map(); + + Object.keys(contribs).forEach(key => { + const contributor = contribs[key]; + const group = contributor.group; + const contribGroup = contribGroups[group]; + if (contribGroup) { + contribGroup.push(contributor); + } else { + contribGroups[group] = [contributor]; + } + }); + + return contribGroups; + }) + .publishLast(); + contributors.connect(); + return contributors; + } +} diff --git a/aio/src/app/embedded/contributor/contributors.model.ts b/aio/src/app/embedded/contributor/contributors.model.ts new file mode 100644 index 0000000000..f3743f6379 --- /dev/null +++ b/aio/src/app/embedded/contributor/contributors.model.ts @@ -0,0 +1,8 @@ +export class Contributor { + group: string; + name: string; + picture?: string; + website?: string; + twitter?: string; + bio?: string; +} diff --git a/aio/src/app/embedded/embedded.module.ts b/aio/src/app/embedded/embedded.module.ts index 4d360ea1c2..aaf358ec52 100644 --- a/aio/src/app/embedded/embedded.module.ts +++ b/aio/src/app/embedded/embedded.module.ts @@ -1,9 +1,9 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; -import { PrettyPrinter } from './code/pretty-printer.service'; +import { ContributorService } from './contributor/contributor.service'; import { CopierService } from 'app/shared/copier.service'; - +import { PrettyPrinter } from './code/pretty-printer.service'; // Any components that we want to use inside embedded components must be declared or imported here // It is not enough just to import them inside the AppModule @@ -16,6 +16,8 @@ import { CodeComponent } from './code/code.component'; import { ApiListComponent } from './api/api-list.component'; import { CodeExampleComponent } from './code/code-example.component'; import { CodeTabsComponent } from './code/code-tabs.component'; +import { ContributorListComponent } from './contributor/contributor-list.component'; +import { ContributorComponent } from './contributor/contributor.component'; import { DocTitleComponent } from './doc-title.component'; import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example/live-example.component'; @@ -23,7 +25,8 @@ import { LiveExampleComponent, EmbeddedPlunkerComponent } from './live-example/l * such as CodeExampleComponent, LiveExampleComponent,... */ export const embeddedComponents: any[] = [ - ApiListComponent, CodeExampleComponent, DocTitleComponent, CodeTabsComponent, LiveExampleComponent + ApiListComponent, CodeExampleComponent, CodeTabsComponent, + ContributorListComponent, DocTitleComponent, LiveExampleComponent ]; /** Injectable class w/ property returning components that can be embedded in docs */ @@ -36,12 +39,14 @@ export class EmbeddedComponents { declarations: [ embeddedComponents, CodeComponent, + ContributorComponent, EmbeddedPlunkerComponent ], providers: [ + ContributorService, + CopierService, EmbeddedComponents, - PrettyPrinter, - CopierService + PrettyPrinter ], entryComponents: [ embeddedComponents ] }) diff --git a/aio/src/assets/images/bios/_no-one.png b/aio/src/assets/images/bios/_no-one.png new file mode 100644 index 0000000000..64feccb3e8 Binary files /dev/null and b/aio/src/assets/images/bios/_no-one.png differ diff --git a/aio/src/styles/2-modules/_contributor.scss b/aio/src/styles/2-modules/_contributor.scss new file mode 100644 index 0000000000..d9dc5159b5 --- /dev/null +++ b/aio/src/styles/2-modules/_contributor.scss @@ -0,0 +1,128 @@ +$unit: 8px; +$metal: #536E7A; +$snow: #FFFFFF; +$steel: #253238; + +aio-contributor-list { + .grid-fluid { + margin: 0 auto; + margin-bottom: 6 * 8px; + *zoom: 1; + } + .grid-fluid aio-contributor { + display: inline; + float: left; + margin-right: 1.04167%; + margin-left: 1.04167%; + width: 22.91667%; + margin-bottom: 6 * 8px; + } + .grid-fluid:after, .grid-fluid:before { + content: '.'; + clear: both; + display: block; + overflow: hidden; + visibility: hidden; + font-size: 0; + line-height: 0; + width: 0; + height: 0; + } + @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) { + /* line 6, ../scss/_responsive.scss */ + .grid-fluid{ + width: auto; + } + } + @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) { + .grid-fluid{ + margin-left: 20px; + margin-right: 20px; + float: none; + display: block; + width: auto; + } + } + +} + +aio-contributor { + margin: 0px 0px ($unit * 4) 0px; + position: relative; + cursor: pointer; + box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.26); + background: $snow; + transition: all .3s; + padding: 10px; + + &:hover { + transform: translate3d(0,-3px,0); + box-shadow: 0px 8px 16px 0 rgba(0, 0, 0, 0.4); + + nav { + opacity: 1; + } + } + + + // HEADER + + header { + position: relative; + overflow: hidden; + border-radius: 2px 2px 0px 0px; + + nav { + transition: opacity .5s; + position: absolute; + bottom: 3px; + left: 0; + right: 0; + z-index: 1; + padding: $unit; + background: rgba($steel, .4); + opacity: 0; + + button { + font-size: 14px; + color: $snow; + text-transform: uppercase; + opacity: .87; + background: none; + border: none; + } + + a { + color: $snow; + font-size: 20px; + text-decoration: none; + opacity: .87; + margin-right: $unit; + float: right; + } + } + } + + + // MAIN CONTENT + + h3 { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: $metal; + text-transform: uppercase; + font-size: 18px; + margin-bottom: $unit; + } + + p { + white-space: nowrap; + overflow: hidden; + cursor: pointer; + font-size: 14px; + line-height: 24px; + margin: 0; + text-overflow: ellipsis; + } +} diff --git a/aio/src/styles/2-modules/_modules-dir.scss b/aio/src/styles/2-modules/_modules-dir.scss index 0233b30f18..160fc5c679 100644 --- a/aio/src/styles/2-modules/_modules-dir.scss +++ b/aio/src/styles/2-modules/_modules-dir.scss @@ -4,9 +4,10 @@ @import 'hamburger'; @import 'code'; + @import 'contributor'; @import 'alert'; @import 'filetree'; @import 'images'; @import 'table'; @import 'presskit'; - @import 'card'; \ No newline at end of file + @import 'card'; diff --git a/aio/transforms/angular.io-package/index.js b/aio/transforms/angular.io-package/index.js index 35a563ef5a..707c22de94 100644 --- a/aio/transforms/angular.io-package/index.js +++ b/aio/transforms/angular.io-package/index.js @@ -151,7 +151,7 @@ module.exports = }, { basePath: CONTENTS_PATH, - include: CONTENTS_PATH + '/marketing/contributor.json', + include: CONTENTS_PATH + '/marketing/contributors.json', fileReader: 'jsonFileReader' }, ]; @@ -286,7 +286,7 @@ module.exports = outputPathTemplate: '${path}.json' }, {docTypes: ['navigation-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'}, - {docTypes: ['contributor-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'} + {docTypes: ['contributors-json'], pathTemplate: '${id}', outputPathTemplate: '../${id}.json'} ]; })