app

front/src/App.vue

@@ -14,47 +14,41 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import api from './api'
+import { mapState } from "vuex";
+import api from "./api";
 
 export default {
-  name: 'App',
-  components: { 
-  },
+  name: "App",
+  components: {},
   data() {
     return {
       api: api,
       zulipClient: null,
-    }
+    };
   },
   computed: {
-    ...mapState([
-      'isMobile',
-      'pubStr'
-    ])
+    ...mapState(["isMobile", "pubStr"]),
   },
   created() {
-    this.$store.commit('setMobile', this.checkIfMobile())
-    window.addEventListener('resize', () => {
-      this.$store.commit('setMobile', this.checkIfMobile())
-    })
+    this.$store.commit("setMobile", this.checkIfMobile());
+    window.addEventListener("resize", () => {
+      this.$store.commit("setMobile", this.checkIfMobile());
+    });
 
-    this.getStreams()
-    
-    this.$router.afterEach(to => {
-      const stream = to.path.replace('/', '')
-      if (stream != '') {
-        this.setUpDoc(stream)
+    this.getStreams();
+
+    this.$router.afterEach((to) => {
+      const stream = to.path.replace("/", "");
+      if (stream != "") {
+        this.setUpDoc(stream);
       } else {
-        this.$store.commit( 'setContents', [] )
-        this.$store.commit( 'setRules',    [] )  
+        this.$store.commit("setContents", []);
+        this.$store.commit("setRules", []);
       }
-    })
+    });
   },
 
-
   methods: {
-
     checkIfMobile: () => window.innerWidth < 700,
 
     getStreams() {
@@ -112,7 +106,7 @@ export default {
       api.zulip.listen(this.zulipClient)
         
     },
-    
+
     toCSS(poll) {
     
       const 
@@ -162,7 +156,7 @@ export default {
       }
       
     },
-    
+
     constructRule(option, options, subs) {
       const
         text   = option,
@@ -183,21 +177,19 @@ export default {
         weight 
       }
     },
-    
-    toEmojiCode: emoji => emoji.replace(
-      /\p{Emoji}/ug, 
-      m => m.codePointAt(0).toString(16)
-    ),
 
+    toEmojiCode: (emoji) =>
+      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16)),
 
-    
-
-  }
-}
+    // minimal validation. rules have to contain a colon and semicolon
+    validateRule: (rule) => { 
+      return rule.text.match(/.+:.+;/gm);
+    },
+  },
+};
 </script>
 
 <style>
-
 :root {
   --back: white;
 }
@@ -205,14 +197,17 @@ export default {
 html,
 body,
 #app {
-  height: 100%; width: 100%;
-  padding: 0; margin: 0;
+  height: 100%;
+  width: 100%;
+  padding: 0;
+  margin: 0;
   background: var(--back);
 }
 
 #app {
   position: relative;
-  height: 100%; width: 100%;
+  height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
   font-size: 11pt;
@@ -228,7 +223,8 @@ header {
 
 main {
   position: relative;
-  height: 100%; width: 100%;
+  height: 100%;
+  width: 100%;
   display: flex;
   flex-direction: column;
 }

front/src/components/Content/Message.vue

@@ -1,74 +1,47 @@
 <template>
-  <span 
-    :class="classes"
-    :style="styles"
-  >
+  <span :class="classes" :style="styles">
     <!-- {{ $md.renderInline(content) }} -->
-    <vue3-markdown-it 
-      :source="content"
-      v-bind="$mdOpts"
-    ></vue3-markdown-it>    
-  </span>  
-      <!-- <div v-html="content"/> -->
-    <!-- {{ content }} -->
+    <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+  </span>
+  <!-- <div v-html="content"/> -->
+  <!-- {{ content }} -->
 </template>
 
 <script>
 export default {
-  name: 'Header',
-  props: [ 
-    'message'
-  ],
+  name: "Header",
+  props: ["message"],
   computed: {
     rawJSON() {
-      return '```json\n' + JSON.stringify(this.message, null, 2) + '\n```'
+      return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
     },
     content() {
-      return ( 
-        this
-        .message
-        .content
-        .replace('\n', '<br/>')
-      )
+      let url = process.env.VUE_APP_ZULIP_site;
+      let m = this.message.content.replace("\n", "<br/>");
+      m = m.replaceAll('src="','src="' + url);
+      m = m.replaceAll('href="/','href="' + url + "/");
+      return m
     },
     classes() {
-      return (
-        this
-        .message
-        .reactions
-        .map(r => 'u' + r.emoji_code)
-      )
+      return this.message.reactions.map((r) => "u" + r.emoji_code);
     },
     styles() {
-      return (
-        this
-        .$store
-        .state
-        .rules
-        .filter(r => 
-          this
-          .classes
-          .includes(
-            'u' + r.emoji_code
-          )
-        )  
-        .map(r => r.rules)
+      return this.$store.state.rules
+        .filter((r) => this.classes.includes("u" + r.emoji_code))
+        .map((r) => r.rules)
         .flat()
-        .map(s => s.text)
-      )
+        .map((s) => s.text);
     },
   },
   created() {
-    console.log(this.message.content)
-  }
-}
+    console.log(this.message.content);
+  },
+};
 </script>
 
 <style>
-
 header {
   box-sizing: border-box;
   margin: 1em;
 }
-
 </style>