Merge branch 'master' of github.com:hackersanddesigners/chatty-pub

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 <a href="https://hackersanddesigners.github.io/chatty-pub-css-slides/">here</a>.
+## The slides based on this document can be found <a href="https://hackersanddesigners.github.io/chatty-pub-css-slides/">here</a>.
 
 - [What is CSS](#what-is-css)
 - [Rules](#rules)

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

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", "<br/>");
       // 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(

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;
+    }
   }
 }