rpdata
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

logs-content: Replaced old post rendering with actual irc caret notation parsing.

master
Gisle Aune 5 years ago
parent
e1a5968341
commit
25d4aa73d1
7 changed files with 84 additions and 40 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 23
      marko/components/irc-caret-notation/component.js
  2. 5
      marko/components/irc-caret-notation/index.marko
  3. 34
      marko/page/logs-content/components/post/component.js
  4. 10
      marko/page/logs-content/components/post/index.marko
  5. 46
      marko/page/logs-content/components/post/style.less
  6. 5
      package-lock.json
  7. 1
      package.json

23
marko/components/irc-caret-notation/component.js
View File

@ -0,0 +1,23 @@
const {parse, BOLD} = require("irc-caret-notation")
module.exports = class {
onCreate() {
this.state = {
paragraphs: [],
prev: "",
}
}
onInput(input) {
if (this.state == null) {
return
}
if (input.source != this.state.prev) {
this.state.prev = input.source
this.state.paragraphs = input.source.split("\n").filter(l => l.length > 0).map(l => parse(l, {
"*": (!(input.source.startsWith("(")) ? BOLD : null),
}))
}
}
}

5
marko/components/irc-caret-notation/index.marko
View File

@ -0,0 +1,5 @@
<div class=["irc-caret-notation", input.class]>
<p for(p in state.paragraphs)>
<span for(chunk in p) class=chunk.cssClasses("icn-")>${chunk.text}</span>
</p>
</div>

34
marko/page/logs-content/components/post/component.js
View File

@ -80,40 +80,8 @@ module.exports = class {
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, "*").replace(/\`/g, "\\`").trim();
// Fix Ctrl-Bs
let left = false
this.state.text = this.state.text.replace(/\s*\*\*\s*/g, str => {
left = !left
if (left) {
return " **"
} else if (!left) {
return "** "
}
return str
})
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("\''") && !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 (this.state.text.charAt(0) == this.state.text.charAt(0).toUpperCase()) {
this.state.name = ""
}
this.state.text = input.post.text
if (!input.post.nick.startsWith("=")) {
const postNick = input.post.nick.replace("'s", "").replace("s'", "s")

10
marko/page/logs-content/components/post/index.marko
View File

@ -19,18 +19,18 @@
</div>
<div if(input.post.kind.startsWith("annotation.")) class="post-body" >
<annotation level=(input.post.kind.substring(11))>
<markdown class="post-content" source=state.text />
<irc-caret-notation class="post-content" source=state.text />
</annotation>
</div>
<div if(input.post.kind === "scene") class="post-body color-text">
<markdown class="post-content post-scene" source=state.text />
<irc-caret-notation class="post-content post-scene" source=state.text />
</div>
<div if(input.post.kind === "action") class="post-body color-text">
$ const prefix = ((!state.multipart || state.prevWasText) ? state.shortName + state.nameSuffix + " " : "");
<markdown class="post-content post-action" source=(prefix + state.text) />
<irc-caret-notation class="post-content post-action" source=(prefix + state.text) />
</div>
<div if(input.post.kind === "text") class="post-body color-text">
<markdown class="post-content post-text" source=state.text />
<div if(input.post.kind === "text") class="post-body color-text">
<irc-caret-notation class="post-content post-text" source=state.text />
</div>
<remove-post-modal enabled=(state.modal === "remove") post=input.post on-close("close") on-remove("remove") />
<edit-post-modal enabled=(state.modal === "edit") post=input.post on-close("close") on-edited("edited") />

46
marko/page/logs-content/components/post/style.less
View File

@ -1,6 +1,6 @@
div.post {
margin-top: 1em;
margin-bottom: 1ch;
margin-bottom: 1.25em;
margin-left: -12px;
padding-left: 12px;
padding-right: 0.5ch;
@ -65,12 +65,54 @@ div.post {
margin-top: 0.33em;
}
p {
line-height: 1.33em;
margin-bottom: -0.25em;
span.icn-bold { font-weight: 800; }
span.icn-underline { text-decoration: underline; }
span.icn-italic { font-style: italic; }
span.icn-fg-0 { color: #fff; }
span.icn-fg-1 { color: #111; }
span.icn-fg-2 { color: #13d; }
span.icn-fg-3 { color: #173; }
span.icn-fg-4 { color: #d21; }
span.icn-fg-5 { color: #721; }
span.icn-fg-6 { color: #727; }
span.icn-fg-7 { color: #d71; }
span.icn-fg-8 { color: #aa1; }
span.icn-fg-9 { color: #1d3; }
span.icn-fg-10 { color: #177; }
span.icn-fg-11 { color: #1DD; }
span.icn-fg-12 { color: #127; }
span.icn-fg-13 { color: #c1a; }
span.icn-fg-14 { color: #444; }
span.icn-fg-15 { color: #aaa; }
span.icn-bg-0 { background-color: #fff; }
span.icn-bg-1 { background-color: #111; }
span.icn-bg-2 { background-color: #13d; }
span.icn-bg-3 { background-color: #173; }
span.icn-bg-4 { background-color: #d21; }
span.icn-bg-5 { background-color: #721; }
span.icn-bg-6 { background-color: #727; }
span.icn-bg-7 { background-color: #d71; }
span.icn-bg-8 { background-color: #aa1; }
span.icn-bg-9 { background-color: #1d3; }
span.icn-bg-10 { background-color: #177; }
span.icn-bg-11 { background-color: #1DD; }
span.icn-bg-12 { background-color: #127; }
span.icn-bg-13 { background-color: #c1a; }
span.icn-bg-14 { background-color: #444; }
span.icn-bg-15 { background-color: #aaa; }
}
p:first-of-type {
margin-top: 0;
padding-top: 0;
}
p:last-of-type {
padding-bottom: 0.1em;
margin-bottom: 0em;
}
}
}
@ -91,7 +133,7 @@ div.post.pk-text.anchored {
}
div.post.multipart {
margin-top: -0.9em;
margin-top: -1.5em;
div.post-meta {
span {

5
package-lock.json
View File

@ -3434,6 +3434,11 @@
"resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.8.0.tgz",
"integrity": "sha1-6qM9bd16zo9/b+DJygRA5wZzix4="
},
"irc-caret-notation": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/irc-caret-notation/-/irc-caret-notation-1.0.0.tgz",
"integrity": "sha512-V/Dhqb/wentrfxH5U2pUTK1ye53mIEmpWCpT81Qa+/YfEDY7XuFjpCD/J0WRzjDqaecwn4mj0Mz+6T6bAz/BSA=="
},
"is-absolute": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-0.2.6.tgz",

1
package.json
View File

@ -27,6 +27,7 @@
"graphql-query-compress": "^1.1.0",
"http-proxy-middleware": "^0.19.1",
"ip": "^1.1.5",
"irc-caret-notation": "^1.0.0",
"isomorphic-fetch": "^2.2.1",
"jsonwebtoken": "^8.3.0",
"lasso": "^3.2.6",

Write Preview
Loading…
Cancel
Save