From 25d4aa73d1e06d1773a19e16a1afeff45ef1c07b Mon Sep 17 00:00:00 2001 From: Gisle Aune Date: Fri, 19 Apr 2019 14:57:05 +0200 Subject: [PATCH] logs-content: Replaced old post rendering with actual irc caret notation parsing. --- .../irc-caret-notation/component.js | 23 ++++++++++ .../components/irc-caret-notation/index.marko | 5 ++ .../logs-content/components/post/component.js | 34 +------------- .../logs-content/components/post/index.marko | 10 ++-- .../logs-content/components/post/style.less | 46 ++++++++++++++++++- package-lock.json | 5 ++ package.json | 1 + 7 files changed, 84 insertions(+), 40 deletions(-) create mode 100644 marko/components/irc-caret-notation/component.js create mode 100644 marko/components/irc-caret-notation/index.marko diff --git a/marko/components/irc-caret-notation/component.js b/marko/components/irc-caret-notation/component.js new file mode 100644 index 0000000..d687361 --- /dev/null +++ b/marko/components/irc-caret-notation/component.js @@ -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), + })) + } + } +} \ No newline at end of file diff --git a/marko/components/irc-caret-notation/index.marko b/marko/components/irc-caret-notation/index.marko new file mode 100644 index 0000000..46a7cab --- /dev/null +++ b/marko/components/irc-caret-notation/index.marko @@ -0,0 +1,5 @@ +
+

+ ${chunk.text} +

+
\ No newline at end of file diff --git a/marko/page/logs-content/components/post/component.js b/marko/page/logs-content/components/post/component.js index 342eb64..167fc8b 100644 --- a/marko/page/logs-content/components/post/component.js +++ b/marko/page/logs-content/components/post/component.js @@ -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") diff --git a/marko/page/logs-content/components/post/index.marko b/marko/page/logs-content/components/post/index.marko index e70cce1..93cf68b 100644 --- a/marko/page/logs-content/components/post/index.marko +++ b/marko/page/logs-content/components/post/index.marko @@ -19,18 +19,18 @@
- +
- +
$ const prefix = ((!state.multipart || state.prevWasText) ? state.shortName + state.nameSuffix + " " : ""); - +
-
- +
+
diff --git a/marko/page/logs-content/components/post/style.less b/marko/page/logs-content/components/post/style.less index 1e4bca0..f4e930b 100644 --- a/marko/page/logs-content/components/post/style.less +++ b/marko/page/logs-content/components/post/style.less @@ -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 { diff --git a/package-lock.json b/package-lock.json index e78ab9d..c31d19c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 4171f9d..1853bdb 100644 --- a/package.json +++ b/package.json @@ -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",