Add marker on newly released talks

Author: dontcallmedom

_data/talks.json

@@ -16,7 +16,8 @@
       "abstract": "The presentation will discuss efficient processing of raw video in machine learning, highlighting the need to minimize memory copies and enable integration with WebGPU.",
       "video": "https://app.streamfizz.live/embed/cke43ihp10fub0731lohsnpmo",
       "duration": "07:45",
-      "thumbnail": "https://cjx1uopmt0m4q0667xmnrqpk.blob.core.windows.net/cke43ihp10fub0731lohsnpmo/thumbs/thumb-001.jpeg"
+      "thumbnail": "https://cjx1uopmt0m4q0667xmnrqpk.blob.core.windows.net/cke43ihp10fub0731lohsnpmo/thumbs/thumb-001.jpeg",
+      "added": "2020-08-26"
     },
     "cb_hardware": {
       "title": "ML hardware advancements: leveraging for performance while retaining portability",
@@ -105,7 +106,8 @@
       "abstract": "",
       "duration": "05:40",
       "format": "marpit",
-      "url": "https://www.w3.org/2020/Talks/mlws/mod_webgpu/"
+      "url": "https://www.w3.org/2020/Talks/mlws/mod_webgpu/",
+      "added": "2020-08-26"
     },
 
     "cc_directml": {
@@ -252,7 +254,8 @@
         "affiliation": "",
         "thumbnail": "https://cjx1uopmt0m4q0667xmnrqpk.blob.core.windows.net/cke8szrew1mu70731eppx3v5h/thumbs/thumb-001.jpeg",
         "video": "https://app.streamfizz.live/embed/cke8szrew1mu70731eppx3v5h",
-        "duration": "13:51"
+        "duration": "13:51",
+      "added": "2020-08-26"
       },
       "tp_interactive_music": {
         "title": "Interactive ML - Powered Music Applications on the Web",
@@ -291,7 +294,8 @@
         "nosync": true,
         "thumbnail": "https://cjx1uopmt0m4q0667xmnrqpk.blob.core.windows.net/cke3s7cvyvz7i0772b94ebcg6/thumbs/thumb-001.jpeg",
         "video": "https://app.streamfizz.live/embed/cke3s7cvyvz7i0772b94ebcg6",
-        "duration": "06:00"
+        "duration": "06:00",
+      "added": "2020-08-26"
       },
       "zc_expression": {
         "title": "A virtual character web meeting with expression enhance power by machine learning",

_tools/generate_talk_pages.js

@@ -18,7 +18,7 @@ for(let i = 0; i < shortnames.length; i++) {
   if (talk.video) {
     const duration = talk.duration.split(':')[0].replace(/^0/, '');
 
-    sectionContent += `<details class=talk><summary><div class="grid"><a href="talks/${slug}.html"><img src="${talk.thumbnail}" alt="Watch ${talk.title}" width=200 class="tn"></a><a href="talks/${slug}.html">${talk.title}</a><span class="summary"> by ${talk.author}${talk.affiliation ? " (" + talk.affiliation + ")" : ""} - ${duration} min <span></span></span></div></summary>`;
+    sectionContent += `<details class=talk><summary><div class="grid"><a href="talks/${slug}.html"><img src="${talk.thumbnail}" alt="Watch ${talk.title}" width=200 class="tn"></a><a href="talks/${slug}.html">${talk.title}</a><span class="summary"> by ${talk.author}${talk.affiliation ? " (" + talk.affiliation + ")" : ""} - ${duration} min <span></span></span></div>${talk.added ? "<span class=added>Added on " + talk.added + "</span>": ""}</summary>`;
     sectionContent += `<p><a href="talks/${slug}.html">${duration} minutes presentation</a></p>`;
   } else {
     sectionContent += `<details><summary><div class="grid"><span>PENDING </span><a>${talk.title}</a><span class="summary"> by ${talk.author}${talk.affiliation ? " (" + talk.affiliation + ")" : ""} <span></span></span></div></summary>`;

style.css

@@ -532,6 +532,7 @@ div.talks > details > summary div.grid {
 }
 
 div.talks > details > summary {
+    position: relative;
   list-style: none;
 }
 
@@ -735,3 +736,13 @@ div.related ul {
 .simpletooltip a:link, .simpletooltip a:visited {
     color: #acf;
 }
+details span.added {
+    top:-1em;
+    left: -1em;
+    padding: 0.2em;
+	position: absolute;
+	background-color: #ff0;
+	font-size: 0.8em;
+	transform: translate(-3em) rotate(-45deg);
+	transform-origin: top right;
+}