logs-content: Added anchoring on posts, link posts and background on linked-to post.

marko/page/logs-content/components/post/component.js

@@ -1,3 +1,7 @@
+const EventEmitter = require("events");
+
+let linkSignal = null;
+
 module.exports = class {
   onCreate(input) {
     this.state = {
@@ -8,8 +12,11 @@ module.exports = class {
       modal: null,
       removed: false,
       multipart: false,
+      anchored: false,
     }
 
+    this.mounted = false;
+
     this.updatePost(input)
   }
 
@@ -45,15 +52,51 @@ module.exports = class {
     this.updatePost(input)
   }
 
+  onMount() {
+    this.linkSignalCallback = () => {
+      this.state.anchored = false
+    }
+    if (linkSignal == null) {
+      linkSignal = new EventEmitter()
+      linkSignal.setMaxListeners(10000)
+    }
+    linkSignal.on("signal", this.linkSignalCallback)
+
+    this.state.anchored = window.location.hash.slice(1) === this.input.post.id;
+  }
+
+  onUnmount() {
+    linkSignal.removeListener("signal", this.linkSignalCallback)
+  }
+
+  link() {
+    linkSignal.emit("signal")
+    this.state.anchored = true
+  }
+
   updatePost(input) {
     this.state.shortName = input.post.nick.split("_").shift()
     this.state.name = input.post.nick
     this.state.nameSuffix = ""
     
-    this.state.text = input.post.text.replace(/\x02/g, "**").replace(/\x1D/g, "_")
+    this.state.text = input.post.text.replace(/\x02/g, "**").replace(/\x1D/g, "_").trim();
+
+    if (this.state.text.startsWith("|")) {
+      this.state.name = ""
+      this.state.text = this.state.text.slice(1).trim();
+    }
+
+    if (input.post.kind === "text" && !this.state.text.includes("\"") && !this.state.text.includes("|")) {
+      const colonIndex = this.state.text.indexOf(": ");
+      if (colonIndex != -1 && colonIndex < this.state.text.indexOf(" ")) {
+        this.state.text = this.state.text.replace(": ", ": \"") + "\"";
+      } else {
+        this.state.text = '"' + this.state.text + '"'
+      }
+    }
 
-    if (input.post.kind === "text" && !this.state.text.includes("\"")) {
-      this.state.text = '"' + this.state.text + '"'
+    if (this.state.text.charAt(0) == this.state.text.charAt(0).toUpperCase()) {
+      this.state.name = ""
     }
 
     if (!input.post.nick.startsWith("=")) {

marko/page/logs-content/components/post/index.marko

@@ -1,6 +1,8 @@
-<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null]>
+<div if(!state.removed) class=["post", component.kindClass("pk-"), state.multipart ? "multipart" : null, state.anchored ? "anchored" : null]>
+  <a class="anchor" id=input.post.id />  
   <div class="post-meta-row">
     <div class="options color-menu">
+      <a on-click("link") href=("#" + input.post.id) class="color-menu">Link</a>
       <if-permitted user=input.user permission="post.move">
         <a on-click("move", -1, true)>Up</a>
         <a on-click("move", +1, true)>Down</a>

marko/page/logs-content/components/post/style.less

@@ -1,13 +1,23 @@
 div.post {
+  margin-top: 1em;
   margin-bottom: 1ch;
   margin-left: -12px;
   padding-left: 12px;
+  padding-right: 0.5ch;
+
+  transition: background-color 0.333s linear;
 
   div.post-meta-row {
     padding: 0;
     margin: 0;
   }
 
+  a.anchor {
+    display: block;
+    position: relative;
+    top: -4em;
+  }
+
   div.options {
     position: absolute;
     text-align: right;
@@ -59,6 +69,9 @@ div.post {
       margin-top: 0;
       padding-top: 0;
     }
+    p:last-of-type {
+      padding-bottom: 0.1em;
+    }
   } 
 }
 
@@ -67,8 +80,18 @@ div.post.pk-scene {
   border-left: 2px solid #68A;
 }
 
+div.post.pk-scene.anchored {
+  background-color: rgba(102, 136, 170, 0.25);
+}
+div.post.pk-action.anchored {
+  background-color: rgba(170, 102, 68, 0.25);
+} 
+div.post.pk-text.anchored {
+  background-color: rgba(170, 170, 170, 0.25);
+}
+
 div.post.multipart {
-  margin-top: -1.25em;
+  margin-top: -0.9em;
 
   div.post-meta {
     span {