Make the slide preview work

Author: kirjs

apps/codelab/src/app/admin/content/presentation-editor/content.component.ts

@@ -3,7 +3,6 @@ import { ContentService } from './services/content.service';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs/operators';
 import { combineLatest } from 'rxjs';
-import { ContentPresentation } from './types';
 import { NavigationService } from './services/navigation.service';
 
 @Component({
@@ -12,16 +11,7 @@ import { NavigationService } from './services/navigation.service';
   styleUrls: ['./content.component.css'],
 })
 export class ContentComponent {
-  readonly presentation$ = combineLatest([
-    this.navigationService.selectedPresentationId$,
-    this.contentService.state$,
-  ]).pipe(
-    map(([presentationId, presentations]) => {
-      return presentations.find(
-        (p: ContentPresentation) => p.id === presentationId
-      );
-    })
-  );
+  readonly presentation$ = this.contentService.presentation$;
 
   currentSlideIndex$ = this.navigationService.currentSlideIndex$;
 

apps/codelab/src/app/admin/content/presentation-editor/services/content.service.ts

@@ -1,5 +1,5 @@
 import { inject, Injectable, OnDestroy } from '@angular/core';
-import { merge, Subject } from 'rxjs';
+import { combineLatest, merge, Subject } from 'rxjs';
 import { distinctUntilChanged, map, scan, shareReplay, take, tap, } from 'rxjs/operators';
 import { nanoid } from 'nanoid';
 import { ContentBlock, ContentPresentation } from '../types';
@@ -51,6 +51,17 @@ export class ContentService implements OnDestroy {
     shareReplay(1),
   );
 
+  readonly presentation$ = combineLatest([
+    this.navigationService.selectedPresentationId$,
+    this.state$,
+  ]).pipe(
+    map(([presentationId, presentations]) => {
+      return presentations.find(
+        (p: ContentPresentation) => p.id === presentationId
+      );
+    })
+  );
+
   constructor(
     private readonly navigationService: NavigationService
   ) {

apps/codelab/src/app/admin/content/presentation-editor/slide-editor/action-bar/action-bar.component.ts

@@ -18,9 +18,23 @@ export class ActionBarComponent {
     },
     angularApp: {
       code: {
-        'app.ts': '// Angular app!!',
-        'component.ts': '// C',
-        'module.ts': '// M',
+        'index.html': `
+           [<app-component></app-component>]
+        `,
+        'main.ts': `
+          import {bootstrapApplication} from '@angular/platform-browser';
+          import {AppComponent} from './app.component';
+          bootstrapApplication(AppComponent);
+        `,
+        'app.component.ts': `
+@Component({
+  selector: 'app-component',
+  template: '<h1>LOL<h1>',
+  standalone: true
+})
+export class AppComponent {
+}
+        `,
       },
     },
   };

apps/codelab/src/app/admin/content/presentation-editor/wrappers/custom-component-editors/codelab-code-demo-console-editor/codelab-code-demo-console-editor.component.html

@@ -45,5 +45,5 @@
   (ngModelChange)="update()"
   [files]="openFiles"
   [ui]="ui"
-  [bootstrap]="false"
+  [bootstrap]="'main'"
 ></code-demo>

apps/codelab/src/app/shared/slide-styles.scss

@@ -1,11 +1,15 @@
+
 :host ::ng-deep {
+  --font-size: 20px;
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 300;
+
   aside {
     background: #ebf7ff;
     padding: 8px;
     margin: 16px -8px -8px -8px;
     border-radius: 8px;
+    font-size: var(--font-size);
 
     &:before {
       content: '❤️';
@@ -28,8 +32,11 @@
   }
 
   ul,
-  p {
+  p, // TODO(kirjs): Improve the specificity
+  li:not(.action-item):not(.action-item):not(.action-item) {
     margin-bottom: 24px;
-    font-size: 20px;
+    font-size: var(--font-size);
   }
+
+
 }

apps/codelab/src/app/v2/presentation/presentation.component.html

@@ -1,12 +1,12 @@
 <slide-deck
   slideShortcuts
   slidesRouting
-  *ngIf="contentService.state$ | async as presentation"
+  *ngIf="presentation$ | async as presentation"
 >
   <codelab-progress-bar></codelab-progress-bar>
 
   <slide-arrows></slide-arrows>
-  <div *ngFor="let slide of presentation[2].slides">
+  <div *ngFor="let slide of presentation.slides">
     <div *slide id="infer__">
       <slides-v2-slide [slide1]="slide"></slides-v2-slide>
     </div>

apps/codelab/src/app/v2/presentation/presentation.component.ts

@@ -1,16 +1,22 @@
 import { Component, OnInit } from '@angular/core';
-import { NavigationService } from '../../admin/content/presentation-editor/services/navigation.service';
 import { ContentService } from '../../admin/content/presentation-editor/services/content.service';
 
 @Component({
   selector: 'slides-presentation',
   templateUrl: './presentation.component.html',
-  styleUrls: ['./presentation.component.css'],
+  styleUrls: [
+    './presentation.component.css',
+    '../../shared/slide-styles.scss',],
 })
 export class PresentationComponent implements OnInit {
+  readonly presentation$ = this.contentService.presentation$;
+
+
   constructor(
-    readonly contentService: ContentService
-  ) {}
+    private readonly contentService: ContentService,
+  ) {
+  }
 
-  ngOnInit(): void {}
+  ngOnInit(): void {
+  }
 }