From b06673f27dbc778db44478eadfa8e929425d127e Mon Sep 17 00:00:00 2001 From: Heerko Date: Tue, 6 Jul 2021 14:51:24 +0200 Subject: [PATCH 1/4] fixed 'ection' bug. /s != \s --- front/src/store/index.js | 38 +++++++++++++++++++------------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/front/src/store/index.js b/front/src/store/index.js index d4a3ebf..3ff0bfe 100644 --- a/front/src/store/index.js +++ b/front/src/store/index.js @@ -18,11 +18,11 @@ let toCSS = (message, currentStream) => { id = message.id // let regex = /[/s]?(?.+)\s*\n?{\n?(?[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm - let regex = /[/s]?(?.+)\s*\n?{\n?(?(.*;\n?)+)}/gm + let regex = /\s?(?.+)\s*\n?{\n?(?(.*;\n?)+)}/gm let content = stripHtml(message.content).result; let results = content.matchAll(regex); results = Array.from(results); - // console.log(results) + //console.log(results) if (results.length > 0) { className = emojiConv.replace_colons(results[0]['groups']['selector']); if (emoji.methods.containsEmoji(className)) { @@ -60,7 +60,7 @@ const handleMDReply = message => { // console.log(message.responseTo) } -const handleHTMLReply = message => { +const handleHTMLReply = message => { message.responseTo = { id: message.content .replace(/.*\/near\//gm, '') @@ -80,26 +80,26 @@ export default createStore({ strict: process.env.NODE_ENV !== 'production', state: { - isMobile : false, - streams : [], + isMobile: false, + streams: [], currentStream: '', - contents : [], - rules : [], - pubStr : 'pub-', + contents: [], + rules: [], + pubStr: 'pub-', }, mutations: { - - setMobile : (state, mobile) => state.isMobile = mobile, - setStreams : (state, streams) => state.streams = streams, - setCurStream : (state, stream) => state.currentStream = stream, + + setMobile: (state, mobile) => state.isMobile = mobile, + setStreams: (state, streams) => state.streams = streams, + setCurStream: (state, stream) => state.currentStream = stream, setContents: (state, contents) => state.contents = contents, addMessage: (state, message) => { if (message.display_recipient == state.currentStream) { if (message.content.startsWith('@_**')) { handleMDReply(message) } else if ( - message.content.includes('user-mention') && + message.content.includes('user-mention') && message.content.includes('blockquote') ) { handleHTMLReply(message) @@ -113,13 +113,13 @@ export default createStore({ state.contents.splice(state.contents.indexOf(message), 1) } }, - addReaction : (state, { mid, reaction }) => { + addReaction: (state, { mid, reaction }) => { const message = state.contents.find(m => m.id == mid) if (message) { message.reactions.push(reaction) } }, - removeReaction : (state, { mid, reaction }) => { + removeReaction: (state, { mid, reaction }) => { const message = state.contents.find(m => m.id == mid) if (message) { message.reactions.splice(message.reactions.indexOf(reaction), 1) @@ -147,7 +147,7 @@ export default createStore({ if (message.content.startsWith('@_**')) { handleMDReply(message) } else if ( - message.content.includes('user-mention') && + message.content.includes('user-mention') && message.content.includes('blockquote') ) { handleHTMLReply(message) @@ -157,19 +157,19 @@ export default createStore({ id: mid, content: content, }, state.currentStream)]] state.rules = newRules - + // state.rules[state.rules.indexOf(rule)] = toCSS({ // id: mid, content: content, // }, state.currentStream) } }, - + }, actions: { }, - getters: { + getters: { rules: state => state.rules } From 35b875e2c67e5fff05fcf9f5bc626a217c6d291d Mon Sep 17 00:00:00 2001 From: Heerko Date: Tue, 6 Jul 2021 17:01:15 +0200 Subject: [PATCH 2/4] Added padding/margin and toc --- front/docs/CSS.md | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/front/docs/CSS.md b/front/docs/CSS.md index 0901aeb..eee06af 100644 --- a/front/docs/CSS.md +++ b/front/docs/CSS.md @@ -1,5 +1,10 @@ # CSS +- [What is CSS](#css) +- [Rules](#rules) +- [Css in chatty-pub](#chatty-pub) +- [Typing Emoji](#emoji) + ## What is CSS? CSS (Cascading Style Sheets) is the language that allows you to style and layout HTML web pages. This article explains what CSS is, with some simple syntax examples, and also covers some key terms about the language. @@ -12,7 +17,7 @@ But what HTML does not do is speficy how these elements should look. That is whe CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation. In Chatty-pub we're mostly interested in the first part. -### Rules +## Rules #### _Elements and Classes_ @@ -22,10 +27,10 @@ CSS is a rule-based language — you define rules specifying groups of styles th The following code shows a very simple CSS rule that would achieve the styling described above: -```lang-css +```css h1 { - color: red; - font-size: 5em; + color: red; + font-size: 5em; } ``` @@ -39,7 +44,7 @@ The example above will style all the `H1` elements on the page. You could also w Take this HTML: -```lang=html +```html
  • Item one
  • Item two
    • @@ -49,7 +54,7 @@ Take this HTML: To target the class of special you can create a selector that starts with a full stop character. -```lang=css +```css .special { color: orange; font-weight: bold; @@ -66,7 +71,7 @@ has that class. --> When you react to a message in Zulip with an emoji, this emoji gets turned into a class in **Chatty-pub**. So lets say you responded to a message with the strawberry 🍓 emoji. In **Chatty-Pub** the message will have class with that emoji as selector. (You can confirm this by rolling over the message, the emoji should popup on a overlay.) So now to style that message, you go to the #rules channel and add a message with the following content: -```lang=css +```css 🍓 { color: red; } @@ -106,6 +111,11 @@ A colors value can defined in multiple ways: - By [hex value](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#hex) - `color: #ff0000;` also red. - Or as a [function](http://web.simmons.edu/~grovesd/comm244/notes/week3/css-colors#rgba), which allows transparency. - `color: rgba(255,0,0,0.5);` red, but 50% transparent. +### Box model + +- [margin](https://developer.mozilla.org/en-US/docs/Web/CSS/margin) - The margin property sets the margin area on all four sides of an element. Margin refers to space between different elements. +- [padding](https://developer.mozilla.org/en-US/docs/Web/CSS/padding) - The padding property sets the padding area on all four sides of an element at once. Padding refers to the spacing inside the border of an element. + ### Fonts - TBD/Todo From e6c96a9be4d77be67459c45708b69afce28eac22 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D9=83=D8=A7=D8=B1=D9=84=20=D9=85=D8=A8=D8=A7=D8=B1=D9=83?= Date: Wed, 7 Jul 2021 12:24:26 +0200 Subject: [PATCH 3/4] restructured store + api to support topics, not yet properly implemented with real-time events, or in UI --- front/package-lock.json | 128 ++++++++++++++++++++++- front/src/App.vue | 18 ++-- front/src/api/zulip/index.js | 19 +++- front/src/components/Content/Message.vue | 4 +- front/src/components/Content/index.vue | 17 +-- front/src/store/index.js | 30 ++++-- package-lock.json | 5 + package.json | 1 + 8 files changed, 193 insertions(+), 29 deletions(-) diff --git a/front/package-lock.json b/front/package-lock.json index b3af0ad..39f6db3 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -1059,7 +1059,6 @@ "version": "7.14.5", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.5.tgz", "integrity": "sha512-121rumjddw9c3NCQ55KGkyE1h/nzWhU/owjhw0l4mQrkzz4x9SGS1X8gFLraHwX7td3Yo4QTL+qj0NcIzN87BA==", - "dev": true, "requires": { "regenerator-runtime": "^0.13.4" } @@ -4745,6 +4744,19 @@ } } }, + "emoji-datasource": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/emoji-datasource/-/emoji-datasource-4.1.0.tgz", + "integrity": "sha1-tEVX94ot+sLzUDkzkbFwpWfsKK0=" + }, + "emoji-js": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/emoji-js/-/emoji-js-3.5.0.tgz", + "integrity": "sha512-5uaULzdR3g6ALBC8xUzyoxAx6izT1M4+DEsxHLRS2/gaOKC/p62831itMoMsYfUj1fKX3YG01u5YVz2v7qpsWg==", + "requires": { + "emoji-datasource": "4.1.0" + } + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -7278,6 +7290,11 @@ "integrity": "sha1-soqmKIorn8ZRA1x3EfZathkDMaY=", "dev": true }, + "lodash.clonedeep": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz", + "integrity": "sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=" + }, "lodash.debounce": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", @@ -7295,6 +7312,11 @@ "resolved": "https://registry.npmjs.org/lodash.flow/-/lodash.flow-3.5.0.tgz", "integrity": "sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=" }, + "lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=" + }, "lodash.kebabcase": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz", @@ -7319,12 +7341,22 @@ "integrity": "sha1-EjBkIvYzJK7YSD0/ODMrX2cFR6A=", "dev": true }, + "lodash.trim": { + "version": "4.5.1", + "resolved": "https://registry.npmjs.org/lodash.trim/-/lodash.trim-4.5.1.tgz", + "integrity": "sha1-NkJefukL5KpeJ7zruFt9EepHqlc=" + }, "lodash.uniq": { "version": "4.5.0", "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz", "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=", "dev": true }, + "lodash.without": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/lodash.without/-/lodash.without-4.4.0.tgz", + "integrity": "sha1-PNRXSgC2e643OpS3SHcmQFB7eqw=" + }, "log-symbols": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/log-symbols/-/log-symbols-2.2.0.tgz", @@ -9402,6 +9434,44 @@ "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==", "dev": true }, + "ranges-apply": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ranges-apply/-/ranges-apply-5.1.0.tgz", + "integrity": "sha512-VF3a0XUuYS/BQHv2RaIyX1K7S1hbfrs64hkGKgPVk0Y7p4XFwSucjTTttrBqmkcmB/PZx5ISTZdxErRZi/89aQ==", + "requires": { + "@babel/runtime": "^7.14.0", + "ranges-merge": "^7.1.0" + } + }, + "ranges-merge": { + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/ranges-merge/-/ranges-merge-7.1.0.tgz", + "integrity": "sha512-coTHcyAEIhoEdsBs9f5f+q0rmy7UHvS/5nfuXzuj5oLX/l/tbqM5uxRb6eh8WMdetXia3lK67ZO4tarH4ieulQ==", + "requires": { + "@babel/runtime": "^7.14.0", + "ranges-push": "^5.1.0", + "ranges-sort": "^4.1.0" + } + }, + "ranges-push": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/ranges-push/-/ranges-push-5.1.0.tgz", + "integrity": "sha512-vqGcaGq7GWV1zBa9w83E+dzYkOvE9/3pIRUPvLf12c+mGQCf1nesrkBI7Ob8taN2CC9V1HDSJx0KAQl0SgZftA==", + "requires": { + "@babel/runtime": "^7.14.0", + "ranges-merge": "^7.1.0", + "string-collapse-leading-whitespace": "^5.1.0", + "string-trim-spaces-only": "^3.1.0" + } + }, + "ranges-sort": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ranges-sort/-/ranges-sort-4.1.0.tgz", + "integrity": "sha512-GOQgk6UtsrfKFeYa53YLiBVnLINwYmOk5l2QZG1csZpT6GdImUwooh+/cRrp7b+fYawZX/rnyA3Ul+pdgQBIzA==", + "requires": { + "@babel/runtime": "^7.14.0" + } + }, "raw-body": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz", @@ -9469,8 +9539,7 @@ "regenerator-runtime": { "version": "0.13.7", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz", - "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==", - "dev": true + "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew==" }, "regenerator-transform": { "version": "0.14.5", @@ -10418,6 +10487,11 @@ "extend-shallow": "^3.0.0" } }, + "splitpanes": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/splitpanes/-/splitpanes-3.0.4.tgz", + "integrity": "sha512-KRaPtMDpu++OfvAzNQYE5U7WT5NoMA6l9B0buC4PhYoDILVLY8zN7Sp9cHXAgLhH59jI3lKzVoNqyf4OGRv7QQ==" + }, "sprintf-js": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", @@ -10534,12 +10608,60 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, + "string-collapse-leading-whitespace": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/string-collapse-leading-whitespace/-/string-collapse-leading-whitespace-5.1.0.tgz", + "integrity": "sha512-mYz9/Kb5uvRB4DZj46zILwI4y9lD9JsvXG9Xb7zjbwm0I/R40G7oFfMsqJ28l2d7gWMTLJL569NfJQVLQbnHCw==", + "requires": { + "@babel/runtime": "^7.14.0" + } + }, "string-hash": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz", "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=", "dev": true }, + "string-left-right": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/string-left-right/-/string-left-right-4.1.0.tgz", + "integrity": "sha512-ic/WvfNVUygWWsgg8akzSzp2NuttfhrdbH7QmSnda5b5RFmT9aCEDiS/M+gmTJwtFy7+b/2AXU4Z6vejcePQqQ==", + "requires": { + "@babel/runtime": "^7.14.0", + "lodash.clonedeep": "^4.5.0", + "lodash.isplainobject": "^4.0.6" + } + }, + "string-strip-html": { + "version": "8.3.0", + "resolved": "https://registry.npmjs.org/string-strip-html/-/string-strip-html-8.3.0.tgz", + "integrity": "sha512-1+rjTPt0JjpFr1w0bfNL1S6O0I9fJDqM+P3pFTpC6eEEpIXhmBvPLnaQoEuWarswiH219qCefDSxTLxGQyHKUg==", + "requires": { + "@babel/runtime": "^7.14.0", + "html-entities": "^2.3.2", + "lodash.isplainobject": "^4.0.6", + "lodash.trim": "^4.5.1", + "lodash.without": "^4.4.0", + "ranges-apply": "^5.1.0", + "ranges-push": "^5.1.0", + "string-left-right": "^4.1.0" + }, + "dependencies": { + "html-entities": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", + "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==" + } + } + }, + "string-trim-spaces-only": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/string-trim-spaces-only/-/string-trim-spaces-only-3.1.0.tgz", + "integrity": "sha512-AW7RSi3+QtE6wR+4m/kmwlyy39neBbCIzrzzu1/RGzNRiPKQOeB3rGzr4ubg4UIQgYtr2w0PrxhKPXgyqJ0vaQ==", + "requires": { + "@babel/runtime": "^7.14.0" + } + }, "string-width": { "version": "4.2.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz", diff --git a/front/src/App.vue b/front/src/App.vue index 7084050..276656f 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -47,8 +47,8 @@ export default { this.getStreams(); this.$router.afterEach((to) => { - this.$store.commit("setContents", []); - this.$store.commit("setRules", []); + this.$store.commit("setTopics", []); + this.$store.commit("setRules", []); this.$store.commit("setCurStream", to.path.replace("/", "")) if (this.currentStream != "") { this.setUpDoc(this.currentStream); @@ -83,18 +83,18 @@ export default { api.zulip.addSub(this.zulipClient, this.currentStream) } }) - - api.zulip.getMsgs(this.zulipClient, stream, "content").then((result) => { + + api.zulip.getAllMsgs(this.zulipClient, stream).then((result) => { for (let m = 0; m < result.messages.length; m++) { const message = result.messages[m] - this.$store.commit('addMessage', message) + if (message.subject == 'rules') { + this.$store.commit('addRule', message) + } else { + this.$store.commit('addMessage', message) + } } }); - api.zulip.getMsgs(this.zulipClient, stream, "rules").then((result) => { - this.$store.commit("setRules", result.messages); - }); - }, eventHandler(event) { diff --git a/front/src/api/zulip/index.js b/front/src/api/zulip/index.js index 291e31d..82fc02e 100644 --- a/front/src/api/zulip/index.js +++ b/front/src/api/zulip/index.js @@ -36,7 +36,7 @@ const // apply_markdown: false, narrow: [ { operator: "stream", operand: stream }, - { operator: "topic", operand: topic }, + { operator: "topic", operand: topic }, ], }) .then(result => resolve(result)) @@ -44,6 +44,22 @@ const }) ), + getAllMsgs = (client, stream, params) => ( new + Promise((resolve, reject) => { + client + .messages + .retrieve(params || { + anchor: "newest", + num_before: 100, + num_after: 0, + // apply_markdown: false, + narrow: [{ operator: "stream", operand: stream }], + }) + .then(result => resolve(result)) + .catch(error => reject(error)) + }) + ), + listen = (client, cb) => { client .callOnEachEvent( @@ -100,6 +116,7 @@ export default { config, getStreams, getMsgs, + getAllMsgs, listen, sendMsg, getSubs, diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue index ac2ff1a..cf45cd7 100644 --- a/front/src/components/Content/Message.vue +++ b/front/src/components/Content/Message.vue @@ -27,7 +27,9 @@ export default { c = c.replaceAll('src="', 'src="' + url); c = c.replaceAll('href="/', 'href="' + url + "/"); - const referrers = this.$store.state.contents.filter( + const referrers = this.$store.state + .topics.find(t => t.title == this.message.subject) + .messages.filter( (m) => m.responseTo && m.responseTo.id == this.message.id && diff --git a/front/src/components/Content/index.vue b/front/src/components/Content/index.vue index 7c6c985..6a01929 100644 --- a/front/src/components/Content/index.vue +++ b/front/src/components/Content/index.vue @@ -1,12 +1,13 @@