talk previews

app/components/youtube-link.gjs

@@ -0,0 +1,22 @@
+import { LinkTo } from '@ember/routing';
+
+function href(youtubeID) {
+  return `https://www.youtube.com/watch?v=${youtubeID}`;
+}
+
+function thumbnail(youtubeID) {
+  return `https://img.youtube.com/vi/${youtubeID}/maxresdefault.jpg`;
+}
+
+<template>
+  <div class="youtube-link">
+    <a target="_blank" href={{href @id}}>
+      <div class="header">
+        <div class="talk-title">{{@title}}</div>
+        <div class="talk-date">{{@date}}</div>
+      </div>
+
+      <img src={{thumbnail @id}}>
+    </a>
+  </div>
+</template>

app/styles/app.css

@@ -121,3 +121,31 @@ blockquote p:last-child {
   color: var(--text-light);
   font-size: 1rem;
 }
+
+.link-list {
+  display: grid;
+
+  gap: 50px;
+  margin-top: 50px;
+  margin-bottom: 50px;
+}
+
+.link-list>div {
+  border: 1px solid var(--accent);
+  padding: 4px 12px;
+}
+
+.link-list .header {
+  grid-column: 1 / 3;
+  display: grid;
+  grid-template-columns: 3fr 1fr;
+
+  /* color: #000; */
+  font-weight: bold;
+  /* padding: 4px; */
+  margin-bottom: 6px;
+}
+
+.link-list .header .talk-date {
+  justify-self: end;
+}

app/templates/application.gjs

@@ -19,6 +19,7 @@ class MyRouteComponent extends Component {
         {{!-- <LinkTo @route="projects">Projects</LinkTo> --}}
         <span class="separator">|</span>
         <a target="_blank" href="https://social.massalabs.com/@sean">Microblog</a>
+        <a target="_blank" href="https://github.com/EndangeredMassa">Code</a>
       </nav>
     </header>
 

app/templates/talks.gjs

@@ -1,10 +1,15 @@
 import RouteTemplate from 'ember-route-template';
+import YoutubeLink from '../components/youtube-link';
 
 export default RouteTemplate(
 <template>
-  <ul>
-    <li><a href="https://www.youtube.com/watch?v=c5DMXsBTS0E">Strength-finding Interviews, Sean Massa, CTO @ FlashRecruit</a></li>
-    <li><a href="https://www.youtube.com/watch?v=CcSKlsc_AhQ">EmberConf 2018: MiniTalk - Contributor Rally by Sean Massa</a></li>
-  </ul>
+  <div class="link-list">
+    <YoutubeLink @id="c5DMXsBTS0E"
+      @title="Strength-finding Interviews | dojo.live"
+      @date="2020-03-25" />
+    <YoutubeLink @id="CcSKlsc_AhQ"
+      @title="Ember.js Contributor Rally | EmberConf 2018"
+      @date="2018-04-06" />
+  </div>
 </template>
 );