About5

apps/codelab/src/app/codelabs/about/about.component.scss

@@ -32,7 +32,7 @@
   text-align: center;
   color: black;
   font-size: 100px;
-  font-weight: 280;
+  font-weight: 300;
 }
 
 .types-error {
@@ -55,6 +55,18 @@
   background-image: url('./images/highlight-slides.png');
 }
 
+.zvuki {
+  background-image: url('./images/zvuki.png');
+}
+
+.zvuki2 {
+  background-image: url('./images/zvuki2.png');
+}
+
+.visitors {
+  background-image: url('./images/visitors.png');
+}
+
 .img-todo {
   content: 'lol';
   border: 50px white dotted;
@@ -72,6 +84,7 @@
     color: white;
   }
 }
+
 h2 {
   padding: 20px;
 }
@@ -99,3 +112,44 @@ h2 {
 .community {
   background-image: url('./images/codelab.jpeg');
 }
+
+.contributors {
+  background-image: url('./images/contributors.png');
+}
+
+.v1 {
+  background-image: url('./images/v1.jpg');
+}
+
+.live {
+  background-image: url('./images/live.jpg');
+}
+
+.dream-highlight {
+  background-image: url('./images/dream-highlight.jpg');
+}
+
+table {
+  width: 800px;
+}
+td {
+  font-size: 2vw;
+  font-weight: 300;
+  padding: 1vw;
+}
+
+[main][main][main] {
+  flex-direction: row;
+  justify-content: center;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  ul {
+    list-style: none;
+  }
+
+  h2 {
+    font-size: 15vw;
+  }
+}

apps/codelab/src/app/codelabs/about/about.component.ts

@@ -1,4 +1,5 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { ng2tsConfig } from '../../../../../../ng2ts/ng2ts';
 
 declare const require;
 
@@ -7,28 +8,97 @@ declare const require;
   templateUrl: './about.component.html',
   styleUrls: ['./about.component.scss']
 })
-export class AboutComponent implements OnInit {
+export class AboutComponent {
   code = {
-    fakeTypes: require('!!raw-loader!./samples/fake-types.d.ts.not-really'),
     slides: {
+      initial: require('!!raw-loader!./samples/slides/initial.html'),
       template: require('!!raw-loader!./samples/slides/ng-template.html'),
       component: require('!!raw-loader!./samples/slides/slide-component.html'),
-      directive: require('!!raw-loader!./samples/slides/structural-directive.html')
+      directive: require('!!raw-loader!./samples/slides/structural-directive.html'),
+      directiveId: require('!!raw-loader!./samples/slides/structural-directive-ids.html'),
+      directiveIdMilestone: require('!!raw-loader!./samples/slides/structural-directive-ids-milestone.html'),
+      final: require('!!raw-loader!./samples/slides/structural-directive-final.html')
     },
     storingCode: {
       plain: require('!!raw-loader!./samples/storing-code/plain.html'),
       backticks: require('!!raw-loader!./samples/storing-code/backticks.html'),
       backticksMatch: [/{{`/, /`}}/],
+      ngTemplate: require('!!raw-loader!./samples/storing-code/ng-template.html'),
+      ngNonBindable: require('!!raw-loader!./samples/storing-code/ng-non-bindable.html'),
+      script: require('!!raw-loader!./samples/storing-code/script.html'),
+      comment: require('!!raw-loader!./samples/storing-code/comment.html'),
+      textarea: require('!!raw-loader!./samples/storing-code/textarea.html'),
+      textareaNonBindable: require('!!raw-loader!./samples/storing-code/textarea-non-bindable.html'),
+      rawLoader: require('!!raw-loader!./about.component.ts'),
+      inComponent: require('!!raw-loader!./samples/storing-code/in-component.ts'),
       interpolation: {
         'bootstrap.ts': require('!!raw-loader!./samples/storing-code/interpolations.ts')
       }
     },
+    gettingId: {
+      code: require('!!raw-loader!@codelab/slides/src/lib/slide/slide.directive.ts')
+    },
+
+    stages: {
+      differ: require('!!raw-loader!@codelab/utils/src/lib/differ/differ'),
+      builders: require('!!raw-loader!./samples/versions/builders'),
+      component: require('!!raw-loader!../../../../../../ng2ts/app.component'),
+      firstStage: "import { Component } from '@angular/core';"
+    },
+    exercise: {
+      translations: {
+        createClassAppComponent: "Create a class called 'AppComponent'",
+        exportClass: 'Export the class',
+        addComponentDecorator: 'Add a Component decorator for the class',
+        addSelectorMyApp:
+          "Add a selector to the component decorator and set it to 'my-app'",
+        addTemplateHelloMewTube:
+          'Add a template that contains: h1 with a text "Hello MewTube!"'
+      },
+      config: ng2tsConfig.milestones[1].exercises[1]
+    },
+    preview: [
+      ng2tsConfig.milestones[1].exercises[1],
+      ng2tsConfig.milestones[2].exercises[1],
+      ng2tsConfig.milestones[3].exercises[1],
+      ng2tsConfig.milestones[4].exercises[1],
+      ng2tsConfig.milestones[5].exercises[0],
+      ng2tsConfig.milestones[6].exercises[0],
+      ng2tsConfig.milestones[7].exercises[0]
+    ],
+    simpleAngular: {
+      code: {
+        'bootstrap.ts': require('!!raw-loader!./../../shared/angular-code/bootstrap.ts'),
+        'app.module.ts': require('!!raw-loader!./../../shared/angular-code/app.module.ts'),
+        'app.component.ts': require('!!raw-loader!./../../shared/angular-code/app.component.ts'),
+        'index.html': require('!!raw-loader!./../../shared/angular-code/index.html'),
+        'styles.css': `
+          h1:first-child {
+            font-size: 100px !important;
+          }
+        `
+      },
+      files: ['app.component.ts']
+    },
+
     highlights: {
-      find: require('!!raw-loader!@codelab/code-demos/src/lib/code-demo-editor/utils/utils')
+      appComponent: { 'app.component.ts': 'AppComponent' },
+      find: require('!!raw-loader!@codelab/code-demos/src/lib/code-demo-editor/utils/utils'),
+      directive: require('!!raw-loader!@codelab/code-demos/src/lib/code-demo-editor/directives/code-demo-editor.highlight.directive')
+    },
+    types: {
+      realtypes: require('!!raw-loader!./samples/types/realtypes.ts'),
+      fakeTypes: require('!!raw-loader!./samples/fake-types.d.ts.not-really'),
+      coreTypes: require('!!raw-loader!@angular/core/core.d.ts'),
+      rxjsTypes: require('!!raw-loader!rxjs/index.d.ts'),
+      bundler: require('!!raw-loader!@codelab/code-demos/assets/runner/ng-dts/bundler.ts')
+    },
+    fox: {
+      unsubscribe: require('!!raw-loader!./samples/fox/unsubscribe')
+    },
+    i18n: {
+      template: require('!!raw-loader!../angular/typescript/typescript/typescript.component.html'),
+      ts: require('!!raw-loader!../angular/typescript/typescript/typescript.component.ts')
     }
   };
-
-  constructor() {}
-
-  ngOnInit() {}
 }

apps/codelab/src/app/codelabs/about/about.module.ts

@@ -6,11 +6,24 @@ import { RouterModule } from '@angular/router';
 import { AboutComponent } from './about.component';
 import { CodeDemoModule } from '@codelab/code-demos';
 import { FormsModule } from '@angular/forms';
+import { CodelabComponentsModule } from '../../components/codelab-components.module';
+import { StagesComponent } from './stages/stages.component';
+import { ButtonsNavBarModule } from '../../components/buttons-nav-bar/buttons-nav-bar.module';
+import { NewProgressBarModule } from '../../../../../kirjs/src/app/modules/ast/new-progress-bar/new-progress-bar.module';
 
 const routes = RouterModule.forChild(SlidesRoutes.get(AboutComponent));
 
 @NgModule({
-  declarations: [AboutComponent],
-  imports: [CommonModule, SlidesModule, routes, CodeDemoModule, FormsModule]
+  declarations: [AboutComponent, StagesComponent],
+  imports: [
+    CommonModule,
+    SlidesModule,
+    routes,
+    CodeDemoModule,
+    FormsModule,
+    CodelabComponentsModule,
+    ButtonsNavBarModule,
+    NewProgressBarModule
+  ]
 })
 export class AboutModule {}

apps/codelab/src/app/codelabs/about/samples/feedback/feedback.ts

@@ -0,0 +1,4 @@
+submitFeeback({
+  id: '',
+  text: 'Hello ngRuAir!'
+});

apps/codelab/src/app/codelabs/about/samples/fox/unsubscribe.ts

@@ -0,0 +1,20 @@
+import { takeUntil } from 'rxjs/operators';
+import { Observable, ReplaySubject } from 'rxjs';
+import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+
+@Component({
+  selector: '🦊',
+  templateUrl: '🦊.html'
+})
+export class AppComponent implements OnInit, OnDestroy {
+  @Input() readonly request: Observable<void>;
+  destroy: ReplaySubject<any> = new ReplaySubject<any>(1);
+
+  ngOnInit() {
+    this.request.pipe(takeUntil(this.destroy)).subscribe();
+  }
+
+  ngOnDestroy() {
+    this.destroy.next(null);
+  }
+}

apps/codelab/src/app/codelabs/about/samples/slides/initial.html

@@ -0,0 +1,11 @@
+<slide-deck>
+  <slide>
+    <h2>Awesome slide</h2>
+  </slide>
+  <slide>
+    <code>Code sample</code>
+  </slide>
+  <slide>
+    <music-player autoplay="true"></music-player>
+  </slide>
+</slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/ng-template.html

@@ -1,11 +1,11 @@
 <slide-deck>
-  <ng-template>
+  <ng-template id="intro">
     <h2>Awesome slide</h2>
   </ng-template>
-  <ng-template>
-    <h2>Code sample</h2>
+  <ng-template id="code">
+    <code>Code sample</code>
   </ng-template>
-  <ng-template>
-    <music-player></music-player>
+  <ng-template id="music">
+    <music-player autoplay="true"></music-player>
   </ng-template>
 </slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/slide-component.html

@@ -1,11 +1,11 @@
 <slide-deck>
-  <slide>
+  <slide id="intro">
     <h2>Awesome slide</h2>
   </slide>
-  <slide>
-    <h2>Code sample</h2>
+  <slide id="code">
+    <code>Code sample</code>
   </slide>
-  <slide>
-    <music-player></music-player>
+  <slide id="song">
+    <music-player autoplay="true"></music-player>
   </slide>
 </slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/structural-directive-final.html

@@ -0,0 +1,11 @@
+<slide-deck>
+  <div *slide id="intro" milestone="intro">
+    <h2>Awesome slide</h2>
+  </div>
+  <div *slide id="code" milestone="intro">
+    <code>Code sample</code>
+  </div>
+  <div *slide id="song" milestone="intro">
+    <music-player autoplay="true"></music-player>
+  </div>
+</slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/structural-directive-ids-milestone.html

@@ -0,0 +1,11 @@
+<slide-deck>
+  <div *slide="'intro'; milestone: 'intro'">
+    <h2>Awesome slide</h2>
+  </div>
+  <div *slide="'code'; milestone: 'intro'">
+    <code>Code sample</code>
+  </div>
+  <div *slide="'song'; milestone: 'intro'">
+    <music-player autoplay="true"></music-player>
+  </div>
+</slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/structural-directive-ids.html

@@ -0,0 +1,11 @@
+<slide-deck>
+  <div *slide="'intro'">
+    <h2>Awesome slide</h2>
+  </div>
+  <div *slide="'code'">
+    <code>Code sample</code>
+  </div>
+  <div *slide="'song'">
+    <music-player autoplay="true"></music-player>
+  </div>
+</slide-deck>

apps/codelab/src/app/codelabs/about/samples/slides/structural-directive.html

@@ -1,11 +1,11 @@
 <slide-deck>
-  <div *slide>
+  <div *slide id="intro">
     <h2>Awesome slide</h2>
   </div>
-  <div *slide>
-    <h2>Code sample</h2>
+  <div *slide id="code">
+    <code>Code sample</code>
   </div>
-  <div *slide>
-    <music-player></music-player>
+  <div *slide id="song">
+    <music-player autoplay="true"></music-player>
   </div>
 </slide-deck>

apps/codelab/src/app/codelabs/about/samples/storing-code/backticks.html

@@ -1,9 +1,12 @@
 <div *slide id="angular-component">
-  <code-editor>
-    {{` import { Component } from '@angular/core'; @Component({ selector:
-    'hello-world', template: `
-    <h1>Hello I'm an Angular app!</h1>
-    <h2>Very soon you will learn how to create and bootstrap me!</h2>
-    ` }) export class AppComponent {} `}}
-  </code-editor>
+  <pre class="code-editor">
+    {{` import { Component } from '@angular/core';
+
+    @Component({
+      selector: 'hello-world',
+      template: `
+          <h1>Hello I'm an Angular app!</h1>
+          <h2>Very soon you will learn how to create and bootstrap me!</h2>
+        ` }) export class AppComponent {} `}}
+  </pre>
 </div>

apps/codelab/src/app/codelabs/about/samples/storing-code/comment.html

@@ -0,0 +1,11 @@
+<div *slide id="angular-component">
+  <!--
+  import { Component } from '@angular/core';
+
+  @Component({
+    selector: 'hello-world',
+    template: `
+        <h1>Hello I'm an Angular app!</h1>
+        <h2>Very soon you will learn how to create and bootstrap me!</h2>
+      ` }) export class AppComponent {}
+--></div>

apps/codelab/src/app/codelabs/about/samples/storing-code/in-component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'hello-world',
+  template: `
+    <code>{{ code }}</code>
+  `
+})
+export class AppComponent {
+  code = `import { Component } from '@angular/core';
+
+    @Component({
+    selector: 'hello-world',
+    template: \`
+    <h1>Hello I'm an Angular app!</h1>
+    <h2>Very soon you will learn how to create and bootstrap me!</h2>
+    \` }) export class AppComponent {}`;
+}