refactor: make the Tweet component composable

The Timeline component now inserts a footer via ng-content. Note that this also fixes styling issues in the SingleTweet component

src/app/timeline/timeline.component.html

@@ -1,7 +1,5 @@
-<app-tweet [tweet]="tweets[currentTweetIndex]" [loading]="loading"></app-tweet>
-
-<footer>
-  <div>
+<app-tweet [tweet]="tweets[currentTweetIndex]" [loading]="loading">
+  <div footer>
     <input
       type="range"
       min="0"
@@ -19,20 +17,4 @@
       (ngModelChange)="handleSpeedChange($event)"
       >
   </div>
-
-  <span class="explanation">
-    <span>
-      Louder tweets = oranger face.
-    </span>
-    <span>
-      By <a href="https://twitter.com/jessepinho" target="_blank">@jessepinho</a>.  {{version}}
-
-      <a
-        href="https://github.com/jessepinho/trumpymctweetface.com"
-        target="_blank"
-        >
-        <img src="/assets/github.svg" alt="GitHub" class="github">
-      </a>
-    </span>
-  </span>
-</footer>
+</app-tweet>

src/app/timeline/timeline.component.ts

@@ -1,21 +1,17 @@
 import { Component, OnInit } from '@angular/core';
-
 import { TwitterService } from '../twitter.service';
-const packageJSON = require('../../../package.json');
 
 const MAX_DURATION_PER_TWEET = 5000;
 
 @Component({
   selector: 'app-timeline',
   templateUrl: './timeline.component.html',
-  styleUrls: ['./timeline.component.scss']
 })
 export class TimelineComponent implements OnInit {
   currentTweetIndex: number = -1;
   loading: boolean = false;
   speed: number = 0.95;
   tweets: Tweet[] = [];
-  version: string = 'v' + packageJSON.version;
 
   private timeout: number;
 

src/app/tweet/tweet.component.html

@@ -13,3 +13,23 @@
 
   <span class="text" *ngIf="!link">{{text}}</span>
 </div>
+
+<footer>
+  <ng-content select="[footer]"></ng-content>
+
+  <span class="explanation">
+    <span>
+      Louder tweets = oranger face.
+    </span>
+    <span>
+      By <a href="https://twitter.com/jessepinho" target="_blank">@jessepinho</a>.  {{version}}
+
+      <a
+        href="https://github.com/jessepinho/trumpymctweetface.com"
+        target="_blank"
+        >
+        <img src="/assets/github.svg" alt="GitHub" class="github">
+      </a>
+    </span>
+  </span>
+</footer>

src/app/tweet/tweet.component.sass

@@ -1,5 +1,14 @@
 @import url('https://fonts.googleapis.com/css?family=Gloria+Hallelujah');
 
+\:host
+  display: flex
+  flex-direction: column
+
+  height: 100%
+  width: 100%
+
+  overflow: hidden
+
 app-face
   display: block
   height: 100%
@@ -22,6 +31,32 @@ app-face
   @media only screen and (max-aspect-ratio: 4/3)
     height: initial
 
+footer
+  display: flex
+  flex-direction: column
+  align-items: flex-end
+
+  flex-grow: 0
+  flex-shrink: 0
+
+  padding: 1rem
+
+  font-family: 'Roboto Mono', sans-serif
+  font-size: 0.7rem
+
+.explanation
+  text-align: right
+
+  display: flex
+  flex-direction: column
+
+  @media only screen and (min-width: 640px)
+    display: initial
+
+.github
+  vertical-align: middle
+  width: 20px
+
 .text
   box-sizing: border-box
   color: black
@@ -45,6 +80,8 @@ app-face
   align-items: center
   display: flex
   flex-direction: column
+  flex-grow: 1
+  height: 100%
   width: 100%
 
   @media only screen and (min-width: 640px)

src/app/tweet/tweet.component.ts

@@ -3,6 +3,8 @@ import {
   Input,
 } from '@angular/core';
 
+const packageJSON = require('../../../package.json');
+
 @Component({
   selector: 'app-tweet',
   templateUrl: './tweet.component.html',
@@ -15,6 +17,7 @@ export class TweetComponent {
   intensity: number;
   link: string;
   text: string;
+  version: string = 'v' + packageJSON.version;
 
   ngOnChanges(changes) {
     if (changes.hasOwnProperty('loading') && this.loading) {