adds github links to roadmap page

Author: zaucy

src/app/roadmap/roadmap.component.html

@@ -1,6 +1,6 @@
 <ng-template #projectTpl let-project>
 	<section
-		class="group rounded-lg shadow-lg bg-secondary/20 dark:text-white py-8 px-4 pt-2">
+		class="group rounded-lg shadow-lg bg-secondary/20 dark:text-white py-2 px-4">
 		<h2>{{ project.title }}</h2>
 		<p>{{ project.shortDescription }}</p>
 		<div class="flex flex-row relative items-center px-1">
@@ -16,6 +16,13 @@ <h2>{{ project.title }}</h2>
 			<div
 				class="rounded-full w-8 h-8 bg-transparent ring-2 shadow-lg ring-black dark:ring-white overflow-hidden"></div>
 		</div>
+		<p class="flex flex-row justify-end text-sm mb-0 mt-4">
+			<a
+				target="_blank"
+				[href]="'https://github.com/orgs/ecsact-dev/projects/' + project.id"
+				><span class="i24">open_in_new</span> View GitHub Project</a
+			>
+		</p>
 	</section>
 </ng-template>
 

src/app/roadmap/roadmap.component.ts

@@ -2,7 +2,8 @@ import {Component, ChangeDetectionStrategy} from '@angular/core';
 import {BehaviorSubject, from, Observable} from 'rxjs';
 
 export interface IRoadmapProject {
-	title: string;
+	id: number;
+	title: string | null;
 	shortDescription: string;
 	readme: string;
 }
@@ -20,6 +21,7 @@ export class RoadmapComponent {
 		// TODO(zaucy): Fetch from GitHub
 		this.projects$ = new BehaviorSubject([
 			{
+				id: 4,
 				title: 'Async API',
 				shortDescription: 'TODO: Fetch description from GitHub',
 				readme: '',