improve stylesheet, make audio enclosures work, add toot permalink

lib/convertv2.js

@@ -113,7 +113,6 @@ function metaForUser(user) {
     }
 }
 
-// TODO make function
 async function itemsForFeed(opts,user,feed) {
 
     var items = feed.orderedItems;
@@ -189,9 +188,10 @@ async function itemsForFeed(opts,user,feed) {
             hasCw:item.object.sensitive||false,
             cw:item.object.summary,
             content: item.object&&item.object.content?item.object.content:'',//TODO sanitize then render without entity escapes
-            atomHref:item.published?item.published.replace(/\W+/g,''):Math.random().toString().replace('.',''),
+            atomHref:item.published?item.published.replace(/\W+/g,''):Math.random().toString().replace('.',''),// used for IDs
             enclosures:enclosures,
             stringDate:item.published?getTimeDisplay(Date.parse(item.published)):'',
+            permalink:item.object.id?item.object.id:'#',
             author:{
                 uri:op.url,// link to author page
                 avatar:op.icon&&op.icon.url?op.icon.url:'',
@@ -202,7 +202,6 @@ async function itemsForFeed(opts,user,feed) {
     })
 }
 
-// TODO
 function getNextPage(opts,user,feed){
     //based on  feed.next
     // take feed.next, uriencode it, then take user url, then take options.mastofeedUrl

lib/template.ejs

@@ -73,7 +73,9 @@
               <div class="enclosures">
                 <% for (var i = 0; i < item.enclosures.length; i ++){ %>
                   <% var e = item.enclosures[i] %>
-                  <% if (e.type.indexOf('video') > -1){ %>
+                  <% if (e.type.indexOf('audio') > -1) {%>
+                    <audio class="enclosure" controls loop src="<%= e.url %>"/>
+                  <% }else if (e.type.indexOf('video') > -1){ %>
                     <video class="enclosure" controls loop src="<%= e.url %>"/>
                   <% } else { %>
                     <a target="_top" class="enclosure" href="<%= e.url %>" >
@@ -87,7 +89,7 @@
                 <% } %>
               </div>
            <% } %>
-          <div class="date"><%= item.stringDate %></div>
+          <a class="date" href="<%= item.permalink %>"><%= item.stringDate %></a>
         </div>
       <% }); %>
       <% if (nextPageLink) %>

static/auto.css

@@ -65,11 +65,17 @@ a * {
   font-size: 0.9rem; }
 
 .date {
-  margin: 1rem 0 0 0; }
+  margin: 1rem 0 0 0;
+  text-decoration: none; }
+
+.date:hover {
+  text-decoration: underline; }
+
+.item-title {
+  margin-bottom: 0.7rem; }
 
 .author {
-  display: flex;
-  margin: 1rem 0; }
+  display: flex; }
 
 .author-info {
   margin: 0 1rem;
@@ -220,10 +226,14 @@ body {
     color: #9baec8;
     font-size: 0.9rem; }
   .date {
-    margin: 1rem 0 0 0; }
+    margin: 1rem 0 0 0;
+    text-decoration: none; }
+  .date:hover {
+    text-decoration: underline; }
+  .item-title {
+    margin-bottom: 0.7rem; }
   .author {
-    display: flex;
-    margin: 1rem 0; }
+    display: flex; }
   .author-info {
     margin: 0 1rem;
     display: flex;

static/dark.css

@@ -65,11 +65,17 @@ a * {
   font-size: 0.9rem; }
 
 .date {
-  margin: 1rem 0 0 0; }
+  margin: 1rem 0 0 0;
+  text-decoration: none; }
+
+.date:hover {
+  text-decoration: underline; }
+
+.item-title {
+  margin-bottom: 0.7rem; }
 
 .author {
-  display: flex;
-  margin: 1rem 0; }
+  display: flex; }
 
 .author-info {
   margin: 0 1rem;

static/light.css

@@ -65,11 +65,17 @@ a * {
   font-size: 0.9rem; }
 
 .date {
-  margin: 1rem 0 0 0; }
+  margin: 1rem 0 0 0;
+  text-decoration: none; }
+
+.date:hover {
+  text-decoration: underline; }
+
+.item-title {
+  margin-bottom: 0.7rem; }
 
 .author {
-  display: flex;
-  margin: 1rem 0; }
+  display: flex; }
 
 .author-info {
   margin: 0 1rem;

stylesrc/base.scss

@@ -88,11 +88,17 @@ a * {
 }
 .date{
   margin: 1rem 0 0 0;
+  text-decoration: none;
+}
+.date:hover{
+  text-decoration: underline;
+}
+.item-title{
+  margin-bottom:0.7rem;
 }
 
 .author {
   display: flex;
-  margin: 1rem 0;
 }
 
 .author-info {