Merge pull request #9 from zembrodt/develop

Develop

package.json

@@ -1,6 +1,6 @@
 {
   "name": "portfolio",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -29,6 +29,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@ngxs/storage-plugin": "^3.7.1",
     "@ngxs/store": "^3.7.1",
+    "ngx-markdown": "^12.0.1",
     "rxjs": "~6.6.0",
     "tslib": "^2.0.0",
     "zone.js": "~0.11.3"

src/app/app.module.ts

@@ -1,15 +1,14 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { DashboardComponent } from './components/dashboard/dashboard.component';
-import { ProjectsComponent } from './components/projects/projects.component';
-import { ProjectDetailComponent } from './components/project-detail/project-detail.component';
-import { AboutComponent } from './components/about/about.component';
-import { ExperienceComponent } from './components/experience/experience.component';
-import { ExperienceDetailComponent } from './components/experience-detail/experience-detail.component';
-import { ContactComponent } from './components/contact/contact.component';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
+import {AppComponent} from './app.component';
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {DashboardComponent} from './components/dashboard/dashboard.component';
+import {ProjectsComponent} from './components/projects/projects.component';
+import {ProjectDetailComponent} from './components/project-detail/project-detail.component';
+import {AboutComponent} from './components/about/about.component';
+import {ExperienceComponent} from './components/experience/experience.component';
+import {ExperienceDetailComponent} from './components/experience-detail/experience-detail.component';
+import {ContactComponent} from './components/contact/contact.component';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {MatToolbarModule} from '@angular/material/toolbar';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
@@ -21,19 +20,19 @@ import {NgxsStoragePluginModule} from '@ngxs/storage-plugin';
 import {SettingsState} from './core/settings/settings.state';
 import {RedirectGuard} from './core/redirect/redirect.guard';
 import {AppRoutingModule} from './app-routing.module';
-import { NavbarComponent } from './components/navbar/navbar.component';
+import {NavbarComponent} from './components/navbar/navbar.component';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import { FooterComponent } from './components/footer/footer.component';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
-import { SkillsComponent } from './components/skills/skills.component';
+import {FooterComponent} from './components/footer/footer.component';
+import {FontAwesomeModule} from '@fortawesome/angular-fontawesome';
+import {SkillsComponent} from './components/skills/skills.component';
 import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatTabsModule} from '@angular/material/tabs';
 import {MatDialogModule} from '@angular/material/dialog';
 import {MatRippleModule} from '@angular/material/core';
 import {VisibilityComponent} from './core/visibility/visibility.component';
 import {NgxsReduxDevtoolsPluginModule} from '@ngxs/devtools-plugin';
-import {VisibleService} from './services/visible/visible.service';
+import {VisibleService} from './services/visible.service';
 import {TimelineComponent} from './core/timeline/timeline/timeline.component';
 import {TimelineEntryComponent} from './core/timeline/timeline-entry/timeline-entry.component';
 import {TimelineEntryContentComponent} from './core/timeline/timeline-entry-content/timeline-entry-content.component';
@@ -44,6 +43,8 @@ import {ScreenState} from './core/screen/screen.state';
 import {MatMenuModule} from '@angular/material/menu';
 import {TimelineDialog} from './core/timeline/timeline/timeline.dialog';
 import {PageNotFoundComponent} from './components/page-not-found/page-not-found.component';
+import {HttpClient, HttpClientModule} from '@angular/common/http';
+import {MarkdownModule} from 'ngx-markdown';
 @NgModule({
   declarations: [
     AppComponent,
@@ -74,6 +75,8 @@ import {PageNotFoundComponent} from './components/page-not-found/page-not-found.
     FlexLayoutModule,
     FontAwesomeModule,
     FormsModule,
+    HttpClientModule,
+    MarkdownModule.forRoot({ loader: HttpClient }),
     MatButtonModule,
     MatButtonToggleModule,
     MatCardModule,

src/app/components/about/about.component.ts

@@ -1,7 +1,7 @@
 import {Component, ElementRef, HostListener, OnDestroy, OnInit, Renderer2} from '@angular/core';
 import {Observable, Subject, Subscription} from 'rxjs';
 import {takeUntil} from 'rxjs/operators';
-import {VisibleService} from '../../services/visible/visible.service';
+import {VisibleService} from '../../services/visible.service';
 import {Select} from '@ngxs/store';
 import {ScreenState} from '../../core/screen/screen.state';
 

src/app/components/experience-detail/experience-detail.component.html

@@ -13,9 +13,10 @@
       {{experience.company}}
     </div>
     <div class="mat-h2">{{experience.dates}}</div>
-    <ul>
-      <li *ngFor="let detail of experience.details">{{detail}}</li>
-    </ul>
+    <div markdown
+         [src]="'assets/data/experiences/' + experience.id + '.md'"
+         (load)="onMarkdownLoad($event)"
+         class="experience-content"></div>
     <div *ngIf="experience.technologies && experience.technologies.length > 0"
          fxFlex="row wrap"
          fxFlexAlign="center center"

src/app/components/experience-detail/experience-detail.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {Experience} from '../experience/experience.component';
 import {ScreenState} from '../../core/screen/screen.state';
 import {Observable} from 'rxjs';
@@ -13,6 +13,11 @@ export class ExperienceDetailComponent {
 
   @Select(ScreenState.isXs) isXs$: Observable<boolean>;
   @Input() experience: Experience;
+  @Output() markdownLoaded = new EventEmitter<string>();
 
   constructor() {}
+
+  onMarkdownLoad(markdown: string): void {
+    this.markdownLoaded.emit(markdown);
+  }
 }

src/app/components/experience/experience.component.html

@@ -6,7 +6,7 @@
                 [nodeColor]="'primary'"
                 [enableAnimations]="true">
     <ng-container *ngFor="let experience of experiences; let i = index">
-      <app-timeline-entry>
+      <app-timeline-entry [indexId]="i">
         <app-timeline-entry-header>
           <div fxLayout="column"
                fxLayoutAlign="center center">
@@ -15,7 +15,9 @@
           </div>
         </app-timeline-entry-header>
         <app-timeline-entry-content>
-          <app-experience-detail [experience]="experience"></app-experience-detail>
+          <app-experience-detail
+            [experience]="experience"
+            (markdownLoaded)="onMarkdownLoaded($event, i)"></app-experience-detail>
         </app-timeline-entry-content>
       </app-timeline-entry>
       <app-timeline-divider *ngIf="timelineDividers.has(i)">

src/app/components/experience/experience.component.ts

@@ -1,18 +1,18 @@
 import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import experiencesData from '../../../assets/data/experiences.json';
 import {SkillsComponent} from '../skills/skills.component';
-import {VisibleService} from '../../services/visible/visible.service';
+import {VisibleService} from '../../services/visible.service';
 import {Observable, Subject, Subscription} from 'rxjs';
 import {TimelineComponent} from '../../core/timeline/timeline/timeline.component';
 import {Select} from '@ngxs/store';
 import {ScreenState} from '../../core/screen/screen.state';
 
 export interface Experience {
   title: string;
+  id: string;
   company: string;
   dates: string;
   year: number;
-  details: string[];
   technologies: string[];
 }
 
@@ -75,4 +75,11 @@ export class ExperienceComponent implements OnInit, OnDestroy {
     this.ngUnsubscribe.complete();
     this.visibleSubscription.unsubscribe();
   }
+
+  onMarkdownLoaded(markdown: string, index: number): void {
+    // Force update the selected timeline entry content
+    if (index === this.timeline.getSelectedEntryIndex()) {
+      this.timeline.forceUpdateContent();
+    }
+  }
 }

src/app/components/project-detail/project-detail.component.html

@@ -12,7 +12,9 @@
     <mat-card [ngStyle.lt-md]="'width: 100%'"
               [ngStyle.gt-sm]="!project.screenshotUrl ? 'width: 100%' : null">
       <div class="mat-h1">{{project.title}}</div>
-      <p>{{project.description}}</p>
+      <div markdown
+           [src]="'assets/data/projects/' + project.id + '.md'"
+           class="project-content"></div>
       <p>Technologies used:</p>
       <div *ngIf="project.technologies && project.technologies.length > 0"
            fxLayout="row wrap"

src/app/components/projects/projects.component.html

@@ -4,7 +4,7 @@
        fxLayoutAlign="flex-start"
        fxLayoutGap="32px">
     <div *ngFor="let project of projects">
-      <app-visibility [name]="titleToId(project.title)"
+      <app-visibility [name]="project.id"
                       [offset]="(isLtMd$ | async) ? 200 : null">
         <app-project-detail [project]="project"></app-project-detail>
       </app-visibility>

src/app/components/projects/projects.component.ts

@@ -6,7 +6,7 @@ import {Observable} from 'rxjs';
 
 export interface Project {
   title: string;
-  description: string;
+  id: string;
   projectUrl: string;
   githubUrl: string;
   docsUrl: string;
@@ -30,8 +30,4 @@ export class ProjectsComponent implements OnInit {
   ngOnInit(): void {
     this.projects = projectsData;
   }
-
-  titleToId(title: string): string {
-    return title.trim().replace(/\s+/g, '-').toLocaleLowerCase();
-  }
 }

src/app/components/skills/skills.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import skillsData from '../../../assets/data/skills.json';
-import {VisibleService} from '../../services/visible/visible.service';
+import {VisibleService} from '../../services/visible.service';
 import {Subject} from 'rxjs';
 import {shuffle} from '../../core/utils';
 import {takeUntil} from 'rxjs/operators';

src/app/core/timeline/timeline-entry/timeline-entry.component.ts

@@ -1,4 +1,4 @@
-import {Component, ContentChild, ElementRef, Output, EventEmitter, ViewChild, Renderer2} from '@angular/core';
+import {Component, ContentChild, ElementRef, Output, EventEmitter, ViewChild, Renderer2, Input} from '@angular/core';
 import {TimelineEntryHeaderComponent} from '../timeline-entry-header/timeline-entry-header.component';
 import {TimelineEntryContentComponent} from '../timeline-entry-content/timeline-entry-content.component';
 import {TimelineNodeComponent} from '../timeline-node/timeline-node.component';
@@ -16,6 +16,7 @@ export class TimelineEntryComponent {
   @ContentChild(TimelineEntryContentComponent) content: TimelineEntryContentComponent;
   @ViewChild(TimelineNodeComponent) node: TimelineNodeComponent;
 
+  @Input() indexId = -1;
   @Output() toggled = new EventEmitter<MouseEvent>();
 
   constructor(public elementRef: ElementRef, private renderer: Renderer2) {}

src/app/core/timeline/timeline/timeline.component.ts

@@ -88,6 +88,10 @@ export class TimelineComponent implements OnChanges, AfterContentInit, AfterView
     // Update the sticky content div if we just changed from mobile
     if (this.changedFromMobile) {
       this.changedFromMobile = false;
+      // Check if an entry was ever selected
+      if (!this.selectedEntry) {
+        this.selectedEntry = this.entries.get(0);
+      }
       // Set the selected entry back to null to "re-select" it
       const entry = this.selectedEntry;
       this.selectedEntry = null;
@@ -114,6 +118,21 @@ export class TimelineComponent implements OnChanges, AfterContentInit, AfterView
     }
   }
 
+  forceUpdateContent(): void {
+    if (!this.isMobile) {
+      const entry = this.selectedEntry;
+      this.selectedEntry = null;
+      this.updateContentInfo(entry);
+    }
+  }
+
+  getSelectedEntryIndex(): number {
+    if (this.selectedEntry) {
+      return this.selectedEntry.indexId;
+    }
+    return null;
+  }
+
   @HostListener('window:scroll', ['$event'])
   onWindowScroll(): void {
     this.updateContentStickyDiv();
@@ -208,6 +227,8 @@ export class TimelineComponent implements OnChanges, AfterContentInit, AfterView
       if (contentEl) {
         contentEl.innerHTML = entry.content.elementRef.nativeElement.innerHTML;
       }
+      // Set the node as selected since we aren't toggling
+      entry.node.selected = true;
     }
     this.selectedEntry = entry;
   }

src/app/core/visibility/visibility.component.ts

@@ -1,5 +1,5 @@
 import {AfterViewInit, Component, HostListener, Input, OnInit} from '@angular/core';
-import {VisibleService} from '../../services/visible/visible.service';
+import {VisibleService} from '../../services/visible.service';
 
 const VISIBILITY_OFFSET = 300;
 const FADE_IN_DURATION = 1000;