From 97deb01b1f952ad1d74e3cca0327c8718936b74b Mon Sep 17 00:00:00 2001 From: Ward Bell Date: Thu, 30 Mar 2017 16:51:51 -0700 Subject: [PATCH] feat(aio): add about component and data --- aio/content/images/bios/_no-one.png | Bin 0 -> 2121 bytes aio/content/marketing/about.html | 14 ++ .../{contributor.json => contributors.json} | 0 .../contributor/contributor-list.component.ts | 25 ++++ .../contributor/contributor.component.ts | 36 +++++ .../contributor/contributor.service.ts | 44 ++++++ .../contributor/contributors.model.ts | 8 ++ aio/src/app/embedded/embedded.module.ts | 15 +- aio/src/assets/images/bios/_no-one.png | Bin 0 -> 2121 bytes aio/src/styles/2-modules/_contributor.scss | 128 ++++++++++++++++++ aio/src/styles/2-modules/_modules-dir.scss | 3 +- aio/transforms/angular.io-package/index.js | 4 +- 12 files changed, 269 insertions(+), 8 deletions(-) create mode 100644 aio/content/images/bios/_no-one.png create mode 100644 aio/content/marketing/about.html rename aio/content/marketing/{contributor.json => contributors.json} (100%) create mode 100644 aio/src/app/embedded/contributor/contributor-list.component.ts create mode 100644 aio/src/app/embedded/contributor/contributor.component.ts create mode 100644 aio/src/app/embedded/contributor/contributor.service.ts create mode 100644 aio/src/app/embedded/contributor/contributors.model.ts create mode 100644 aio/src/assets/images/bios/_no-one.png create mode 100644 aio/src/styles/2-modules/_contributor.scss diff --git a/aio/content/images/bios/_no-one.png b/aio/content/images/bios/_no-one.png new file mode 100644 index 0000000000000000000000000000000000000000..64feccb3e8820f336d19adeff4e3b21f9c2615f8 GIT binary patch literal 2121 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 literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..64feccb3e8820f336d19adeff4e3b21f9c2615f8 GIT binary patch literal 2121 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 literal 0 HcmV?d00001 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'} ]; })