app

front/src/App.vue

@@ -14,47 +14,41 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
-import api from './api'
+import api from "./api";
 
 export default {
-  name: 'App',
+  name: "App",
-  components: { 
+  components: {},
-  },
   data() {
     return {
       api: api,
       zulipClient: null,
-    }
+    };
   },
   computed: {
-    ...mapState([
+    ...mapState(["isMobile", "pubStr"]),
-      'isMobile',
-      'pubStr'
-    ])
   },
   created() {
-    this.$store.commit('setMobile', this.checkIfMobile())
+    this.$store.commit("setMobile", this.checkIfMobile());
-    window.addEventListener('resize', () => {
+    window.addEventListener("resize", () => {
-      this.$store.commit('setMobile', this.checkIfMobile())
+      this.$store.commit("setMobile", this.checkIfMobile());
-    })
+    });
 
-    this.getStreams()
+    this.getStreams();
 
-    this.$router.afterEach(to => {
+    this.$router.afterEach((to) => {
-      const stream = to.path.replace('/', '')
+      const stream = to.path.replace("/", "");
-      if (stream != '') {
+      if (stream != "") {
-        this.setUpDoc(stream)
+        this.setUpDoc(stream);
       } else {
-        this.$store.commit( 'setContents', [] )
+        this.$store.commit("setContents", []);
-        this.$store.commit( 'setRules',    [] )  
+        this.$store.commit("setRules", []);
       }
-    })
+    });
   },
 
-
   methods: {
-
     checkIfMobile: () => window.innerWidth < 700,
 
     getStreams() {
@@ -184,20 +178,18 @@ export default {
       }
     },
 
-    toEmojiCode: emoji => emoji.replace(
+    toEmojiCode: (emoji) =>
-      /\p{Emoji}/ug, 
+      emoji.replace(/\p{Emoji}/gu, (m) => m.codePointAt(0).toString(16)),
-      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%;
+  height: 100%;
-  padding: 0; margin: 0;
+  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 
+  <span :class="classes" :style="styles">
-    :class="classes"
-    :style="styles"
-  >
     <!-- {{ $md.renderInline(content) }} -->
-    <vue3-markdown-it 
+    <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
-      :source="content"
-      v-bind="$mdOpts"
-    ></vue3-markdown-it>    
   </span>
-      <!-- <div v-html="content"/> -->
+  <!-- <div v-html="content"/> -->
-    <!-- {{ content }} -->
+  <!-- {{ content }} -->
 </template>
 
 <script>
 export default {
-  name: 'Header',
+  name: "Header",
-  props: [ 
+  props: ["message"],
-    '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 ( 
+      let url = process.env.VUE_APP_ZULIP_site;
-        this
+      let m = this.message.content.replace("\n", "<br/>");
-        .message
+      m = m.replaceAll('src="','src="' + url);
-        .content
+      m = m.replaceAll('href="/','href="' + url + "/");
-        .replace('\n', '<br/>')
+      return m
-      )
     },
     classes() {
-      return (
+      return this.message.reactions.map((r) => "u" + r.emoji_code);
-        this
-        .message
-        .reactions
-        .map(r => 'u' + r.emoji_code)
-      )
     },
     styles() {
-      return (
+      return this.$store.state.rules
-        this
+        .filter((r) => this.classes.includes("u" + r.emoji_code))
-        .$store
+        .map((r) => r.rules)
-        .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>