diff --git a/front/docs/CSS.md b/front/docs/CSS.md index cd26f25..5241610 100644 --- a/front/docs/CSS.md +++ b/front/docs/CSS.md @@ -1,7 +1,7 @@ # CSS In this document we take a look at what CSS is and how it can be applied to a publication in ChattyPub. -The slides based on this document can be found here. +## The slides based on this document can be found here. - [What is CSS](#what-is-css) - [Rules](#rules) diff --git a/front/docs/Workshop.md b/front/docs/Workshop.md index 3ffc90e..f057f95 100644 --- a/front/docs/Workshop.md +++ b/front/docs/Workshop.md @@ -42,9 +42,9 @@ The workshop is split over two sessions (over two days) of 4 hours each. _Opening Session: Introductions & first encounters with ChattyPub_ - Introductory presentation ( 1hr ) -- will be livestreamed in the morning / recorded and shared afterwards. - - Context and background on H&D's publishing activities (Anja & Juliette) + - Context and background on H&D's publishing activities (Anja & Juliette) [slides](https://hackersanddesigners.github.io/chatty-pub-css-slides/assets/hdsa-chattypub-intro.pdf) - Introduction to ChattyPub (Karl). - - Introduction to CSS (Heerko). + - Introduction to CSS (Heerko). [slides](https://hackersanddesigners.github.io/chatty-pub-css-slides/) - How it all comes together (emojis ;])(Karl) - Experimenting with ChattyPub! ( 2 hrs ) - participants with different levels of experience of CSS are grouped together diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue index 167f3b8..376b7b2 100644 --- a/front/src/components/Content/Message.vue +++ b/front/src/components/Content/Message.vue @@ -39,6 +39,7 @@ export default { return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```"; }, content() { + if(!this.message.content) return ""; let c = this.message.content.replace("\n", "
"); // create absolute url on images and relative links let url = process.env.VUE_APP_ZULIP_site; @@ -52,6 +53,8 @@ export default { "https://chatty-pub-files.hackersanddesigners.nl/files/" ); + c = this.replaceAllEmojiCodes(c); + const referrers = this.$store.state.topics .find((t) => t.title == this.message.subject) .messages.filter( diff --git a/front/src/mixins/emoji.js b/front/src/mixins/emoji.js index 2a6f487..aecb747 100644 --- a/front/src/mixins/emoji.js +++ b/front/src/mixins/emoji.js @@ -49,5 +49,14 @@ export default { const regexExp = /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/gi; return regexExp.test(str); // true }, + + + replaceAllEmojiCodes(content) { + let regex = /:([^\s]+):/gm; + content = content.replaceAll(regex, (match) => { + return this.shortcodeToEmoji(match); + }) + return content; + } } } \ No newline at end of file