Add post header with link to board and timestamp

script.js

@@ -559,13 +559,52 @@ function renderNav() {
     return nav
 }
 
+function linkToBoard(website_name, board_name, thread_id) {
+    let root = `${GlobalVars.settings.website_urls[website_name]}/${board_name}`
+    console.log(GlobalVars.settings.website_urls, GlobalVars.settings.website_urls[website_name], board_name);
+
+    if (thread_id) {
+        return root + `/res/${thread_id}.html`;
+    } else {
+        return root + 'index.html';
+    }
+}
+
 function renderPostElem(post) {
-    var postContainer = div();
+    const postContainer = div();
     postContainer.classList.add('post');
-    var postElem = div();
+
+    // Header with timestamp, link to the thread
+    const postHeader = div();
+    postHeader.classList.add('post--header');
+    postContainer.appendChild(postHeader);
+
+    console.log('renderPostElem POST:', post);
+
+    if (post.website_name != null) {
+        const link_url = linkToBoard(post.website_name, post.board_name, post.thread_id);
+        const boardlink = span()
+        const boardlink_a = document.createElement('a');
+
+        boardlink_a.appendChild(text(post.website_name));
+
+        boardlink_a.setAttribute('href', link_url);
+        boardlink_a.setAttribute('title', 'Destination this post was originally headed for (thread or board)');
+        boardlink.appendChild(text('['));
+        boardlink.appendChild(boardlink_a);
+        boardlink.appendChild(text(']'));
+
+        postHeader.appendChild(boardlink);
+    }
+
+    postHeader.appendChild(span(text((new Date(post.time_stamp).toUTCString()))));
+
+    postContainer.appendChild(postHeader);
+
+    const postElem = div();
     postElem.classList.add('post--body_container');
     postContainer.appendChild(postElem);
-    var bodyTextElem = div();
+    const bodyTextElem = div();
     bodyTextElem.classList.add('post--body');
     bodyTextElem.innerText = post.body;
 
@@ -851,14 +890,6 @@ function aClickNav(e) {
 function bindEventHandlers() {
     window.addEventListener('urlchange', onUrlChange);
     window.addEventListener('popstate', onRealUrlChange);
-
-    function on_pushstate(e) {
-      for (var i=0; i < 10; i++) {
-        console.log("pushstate", e);
-      }
-    }
-
-    window.addEventListener('pushstate', on_pushstate);
 }
 
 function gatherElements() {

settings.json

@@ -1,7 +1,10 @@
 {
-  "postgrest_url": "http://192.168.4.147:3000",
-  "postgrest_url": "http://localhost:3000",
+  "postgrest_url": "http://192.168.4.6:3000",
+  "postgrest_url": "http://10.4.0.96:3000",
   "jwt": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJyb2xlIjoic3BhbV9ub3RpY2VyIn0.j6-6HSBh-Wf5eQovT9cF1ZCNuxkQOqzBFtE3C8aTG3A",
-  "audio_mpeg_thumbnail_path": "/etc/SpamNoticer/static/mpg.png",
+  "audio_mpeg_thumbnail_path": "/var/www/static/mpg.png",
+  "website_urls": {
+    "leftychan.net": "https://leftychan.net"
+  },
   "content_directory": "/var/www/spam"
 }

style.css

@@ -11,29 +11,60 @@ header {
   margin: 1em 0;
   box-shadow: .4em .4em .4em grey;
   border: 1px solid grey;
-  padding: 1em;
 }
 
 .post--overview:hover {
-  background-color: #FFEEEE;
+  background-color: yellow;
+  box-shadow: .4em .4em .4em hsl(60, 100%, 30%);
+}
+
+.post--overview:hover .post--header {
+  background-color: yellow;
+  color: black;
 }
 
 .post--image_container {
-    float: left;
-    margin-right: 1em;
+  float: left;
+  margin-right: 1em;
 }
 
 .post--image_container img {
   max-width: 100%;
 }
 
+.post--body_container {
+  margin: 1em;
+}
+
 .post--body_container,
 .attachment-reason,
 .attachment {
   display: flow-root;
 }
 
-nav a {
-    margin: 1rem;
-    font-size: 1.5em;
+.post--header {
+  background-color: #DDDDDD;
+  background-color: #333333;
+  color: white;
+  margin-bottom: 0.5em;
+  padding: 0.2em;
+  display: flex;
+  flex-direction: row;
+}
+
+.post--header a {
+  color: hsl(240, 100%, 75%)
+}
+
+.post--header a:visited {
+  color: hsl(300, 100%, 75%)
+}
+
+.post--header span {
+  flex: 1;
+}
+
+nav a {
+  margin: 1rem;
+  font-size: 1.5em;
 }