jsla / js.la

The static js.la pages
http://js.la
21 stars 27 forks source link

add id tags to hotlink talks #242

Closed rouzbeh84 closed 7 years ago

rouzbeh84 commented 7 years ago

to be able to send direct links via js.la and not youtube 👍🏽

ashwell commented 7 years ago

Would it make more sense to use a simple date format for the id instead of the first speakers Github account name? That is something that could change over time, but using something like sep-2017 or 9-2017 would be more consistent and predictable.

ashwell commented 7 years ago

Also, this breaks if someone gives two talks in the same year and were listed first for both events

rouzbeh84 commented 7 years ago

yea, i was mainly limited to jade looping and not wanting / or ` in the id haha. i started withevent.datebut couldn't splice/join on it withinjade` afaik

ashwell commented 7 years ago

I'm not well versed in jade but I thought there was a way to define a javascript function inside the template and use it inline. So you could do something like (id =getDateSlug( event.datetime )) and define getDateSlug at the top of the file, which would return the 9-2017 id value.

pinging @davidguttman for his Jade knowledge

ashwell commented 7 years ago

looks like you can based on these docs

- function getDateSlug( date ) { return ( date.getMonth() + 1 ) + '-' + date.getFullYear(); }
#  later
  h2(id= getDateSlug(event.datetime))= event.datetime

I'm just guessing here tho...

ashwell commented 7 years ago

this is what I did to get id="M-YYYY"

diff --git a/public/events/_events.jade b/public/events/_events.jade
index 8875299..dfc295f 100644
--- a/public/events/_events.jade
+++ b/public/events/_events.jade
@@ -1,3 +1,12 @@
+-
+  function getDateSlug( date ) {
+      if ( !( date instanceof Date )) {
+          date = new Date( date );
+      }
+
+      return ( date.getMonth() + 1 ) + '-' + date.getFullYear();
+  };
+
 div.jsla-toplevel-container.jsla-event-container

     h1
@@ -9,7 +18,7 @@ each event in events

     div.jsla-toplevel-container.wide.jsla-past-event
         div.jsla-toplevel-container
-            h2= event.datetime
+            h2(id= getDateSlug( event.date ))= event.datetime

             ul.jsla-speakers-list
                 each speaker in event.speakers