changed chatty-pub-files url to be secure

.env.example

@@ -0,0 +1,3 @@
+VUE_APP_ZULIP_email=pub-bot-email
+VUE_APP_ZULIP_site=zulip-host
+VUE_APP_ZULIP_key=bot-key

.gitignore

@@ -1,11 +1,12 @@
 .DS_Store
 node_modules
-./front/dist
+#/dist
 
 
 # local env files
 .env.local
 .env.*.local
+.env
 
 # Log files
 npm-debug.log*
@@ -23,4 +24,6 @@ pnpm-debug.log*
 *.sw?
 zuliprc
 
-Icon[\

]
+upload.sh
+
+

dist/css/app.e326eb9d.css

@@ -0,0 +1 @@
+:root{--back:#fff;--pink:#ff85da}#app,body,html{padding:0;margin:0;background:var(--back)}#app,body,html{height:100%;width:100%}#app{display:flex;flex-direction:column;font-size:11pt}#app,header{position:relative}header{box-sizing:border-box;font-size:9pt}main{height:100%;width:100%}main,section{position:relative;display:flex;flex-direction:column}section{box-sizing:border-box;padding:1em}section p{margin-bottom:0;margin-top:0}.li.selected .index[data-v-cdbb2ba0]{position:fixed;background:#fff;margin:0;padding:0;top:calc(var(--top));left:10%;z-index:1;width:auto;box-shadow:0 0 2em 0 var(--pink);max-height:0;transition:all .1s ease;overflow:scroll}.li.selected .index li[data-v-cdbb2ba0]{list-style:none;margin:0;padding:.5em}.li.selected .index li a[data-v-cdbb2ba0]{max-width:16em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.li.selected .index li[data-v-cdbb2ba0]:hover{background:var(--pink)}.li.selected:hover .index[data-v-cdbb2ba0]{max-height:40em;transition:all .1s ease}@media print{.index li a[data-v-cdbb2ba0]:after{display:block;content:leader(".") target-counter(attr(href url),page,lower-roman)}}@page{@bottom-left{content:counter(page) " of " counter(pages)}}.li[data-v-bb0c01d2]{position:relative;padding:.5em}.li.selected[data-v-bb0c01d2]{background:var(--pink)}.li p[data-v-bb0c01d2]{margin:0}.li p a[data-v-bb0c01d2]{max-width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.streams[data-v-bf028a98]{min-width:10em;padding:0;margin-bottom:1em}.authors[data-v-e34c1616]{page-break-after:always}.rule[data-v-080e408c]{margin:1em 0;position:relative}.rule p[data-v-080e408c]{margin:0}.rule.type-font[data-v-080e408c],.rule.type-raw[data-v-080e408c]{background-color:#333;color:#fff;padding:10px;border-radius:10px;border:1px solid #000;position:relative}.rule.type-font[data-v-080e408c]:after,.rule.type-raw[data-v-080e408c]:after{all:revert;content:"raw css";background-color:#333;border-radius:10px;position:absolute;bottom:-.5em;left:50%;transform:translateX(-50%);padding:5px 10px;font-family:sans-serif;font-size:.8rem;box-shadow:0 0 5px 5px rgba(255,255,0,.7)}.rule.type-font[data-v-080e408c]:after{content:"generated font rule"}.rule.type-font .instructions[data-v-080e408c]{display:none;position:absolute;top:10px;left:10px;padding:10px;width:calc(100% - 40px);height:calc(100% - 40px);align-content:center;justify-content:center;align-items:center;font-family:initial;background-color:hsla(0,0%,100%,.9);color:#000;border-radius:10px;box-shadow:0 0 5px 5px #fff}.rule.type-font:hover .instructions[data-v-080e408c]{display:flex}.rules[data-v-d9f71fd8]{max-width:unset}@media print{.rules[data-v-d9f71fd8]{display:none}}.message-outer{position:relative;display:block}.reactions,.reactions:after,.reactions:before{all:revert;display:none}.message-outer:hover .reactions{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background-color:hsla(0,0%,100%,.5);font-size:3rem;pointer-events:none}.reactions span{pointer-events:auto}.message-data{display:flex;border-bottom:1px solid #666}.message-data>div{flex-grow:1}.message-data .from:after{content:":"}.message-data .time{text-align:right}.message-data-reactions{all:initial;position:absolute;bottom:0;right:0}.message_inline_ref{display:none}.header[data-v-05955d29]{cursor:pointer}@media print{.title[data-v-05955d29]{display:none}}#home{position:relative;box-sizing:border-box;height:100%;width:100%;display:flex}.controls-pane{background-color:#aaa}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.splitpanes.default-theme .splitpanes__pane{background-color:unset}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column;padding:1em}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.body{page-break-after:always}.body img{max-width:100%}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}.docs[data-v-32f02ba2]{padding:1em;max-width:800px;width:100%;margin:1em auto}

dist/index.html

@@ -1 +1 @@
-<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ChattyPub</title><link rel="stylesheet/css-polyfills" type="text/css" href="extra-styles.css"><script src="css-polyfills.js"></script><link href="/css/app.bc77c00e.css" rel="preload" as="style"><link href="/css/chunk-vendors.fa36ffc8.css" rel="preload" as="style"><link href="/js/app.adf878ea.js" rel="preload" as="script"><link href="/js/chunk-vendors.e35cf9b3.js" rel="preload" as="script"><link href="/css/chunk-vendors.fa36ffc8.css" rel="stylesheet"><link href="/css/app.bc77c00e.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Chattypub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.e35cf9b3.js"></script><script src="/js/app.adf878ea.js"></script></body></html>
+<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>ChattyPub</title><link rel="stylesheet/css-polyfills" type="text/css" href="extra-styles.css"><script src="css-polyfills.js"></script><link href="/css/app.e326eb9d.css" rel="preload" as="style"><link href="/css/chunk-vendors.fa36ffc8.css" rel="preload" as="style"><link href="/js/app.20571a66.js" rel="preload" as="script"><link href="/js/chunk-vendors.e35cf9b3.js" rel="preload" as="script"><link href="/css/chunk-vendors.fa36ffc8.css" rel="stylesheet"><link href="/css/app.e326eb9d.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but Chattypub doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.e35cf9b3.js"></script><script src="/js/app.20571a66.js"></script></body></html>

front/.env.development

@@ -1,3 +0,0 @@
-VUE_APP_ZULIP_email=pub-bot@chat.hackersanddesigners.nl
-VUE_APP_ZULIP_site=https://chat.hackersanddesigners.nl
-VUE_APP_ZULIP_key=m1MDxscGcPQx2RvIfgG4DiSHE1nurxms

front/.env.production

@@ -1,3 +0,0 @@
-VUE_APP_ZULIP_email=pub-bot@chat.hackersanddesigners.nl
-VUE_APP_ZULIP_site=https://chat.hackersanddesigners.nl
-VUE_APP_ZULIP_key=m1MDxscGcPQx2RvIfgG4DiSHE1nurxms

front/.gitignore

@@ -1,29 +0,0 @@
-.DS_Store
-node_modules
-#/dist
-
-
-# local env files
-.env.local
-.env.*.local
-.env
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-zuliprc
-
-upload.sh
-
-

front/dist/css/app.bc77c00e.css

@@ -1 +0,0 @@
-:root{--back:#fff;--pink:#ff85da}#app,body,html{padding:0;margin:0;background:var(--back)}#app,body,html{height:100%;width:100%}#app{display:flex;flex-direction:column;font-size:11pt}#app,header{position:relative}header{box-sizing:border-box;font-size:9pt}main{height:100%;width:100%}main,section{position:relative;display:flex;flex-direction:column}section{box-sizing:border-box;padding:1em}section p{margin-bottom:0;margin-top:0}.li.selected .index[data-v-cdbb2ba0]{position:fixed;background:#fff;margin:0;padding:0;top:calc(var(--top));left:10%;z-index:1;width:auto;box-shadow:0 0 2em 0 var(--pink);max-height:0;transition:all .1s ease;overflow:scroll}.li.selected .index li[data-v-cdbb2ba0]{list-style:none;margin:0;padding:.5em}.li.selected .index li a[data-v-cdbb2ba0]{max-width:16em;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.li.selected .index li[data-v-cdbb2ba0]:hover{background:var(--pink)}.li.selected:hover .index[data-v-cdbb2ba0]{max-height:40em;transition:all .1s ease}@media print{.index li a[data-v-cdbb2ba0]:after{display:block;content:leader(".") target-counter(attr(href url),page,lower-roman)}}@page{@bottom-left{content:counter(page) " of " counter(pages)}}.li[data-v-bb0c01d2]{position:relative;padding:.5em}.li.selected[data-v-bb0c01d2]{background:var(--pink)}.li p[data-v-bb0c01d2]{margin:0}.li p a[data-v-bb0c01d2]{max-width:100%;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.streams[data-v-bf028a98]{min-width:10em;padding:0;margin-bottom:1em}.authors[data-v-e34c1616]{page-break-after:always}.message-outer{position:relative;display:block}.reactions,.reactions:after,.reactions:before{all:revert;display:none}.message-outer:hover .reactions{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center;background-color:hsla(0,0%,100%,.5);font-size:3rem;pointer-events:none}.reactions span{pointer-events:auto}.message-data{display:flex;border-bottom:1px solid #666}.message-data>div{flex-grow:1}.message-data .from:after{content:":"}.message-data .time{text-align:right}.show_message_data .message{padding-bottom:1rem}.message-data-reactions{all:initial;position:absolute;bottom:0;left:0}.header[data-v-05955d29]{cursor:pointer}@media print{.title[data-v-05955d29]{display:none}}.rule[data-v-080e408c]{margin:1em 0;position:relative}.rule p[data-v-080e408c]{margin:0}.rule.type-font[data-v-080e408c],.rule.type-raw[data-v-080e408c]{background-color:#333;color:#fff;padding:10px;border-radius:10px;border:1px solid #000;position:relative}.rule.type-font[data-v-080e408c]:after,.rule.type-raw[data-v-080e408c]:after{all:revert;content:"raw css";background-color:#333;border-radius:10px;position:absolute;bottom:-.5em;left:50%;transform:translateX(-50%);padding:5px 10px;font-family:sans-serif;font-size:.8rem;box-shadow:0 0 5px 5px rgba(255,255,0,.7)}.rule.type-font[data-v-080e408c]:after{content:"generated font rule"}.rule.type-font .instructions[data-v-080e408c]{display:none;position:absolute;top:10px;left:10px;padding:10px;width:calc(100% - 40px);height:calc(100% - 40px);align-content:center;justify-content:center;align-items:center;font-family:initial;background-color:hsla(0,0%,100%,.9);color:#000;border-radius:10px;box-shadow:0 0 5px 5px #fff}.rule.type-font:hover .instructions[data-v-080e408c]{display:flex}.rules[data-v-16b43aee]{max-width:unset}@media print{.rules[data-v-16b43aee]{display:none}}#home{position:relative;box-sizing:border-box;height:100%;width:100%;display:flex}.controls-pane{background-color:#aaa}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.splitpanes.default-theme .splitpanes__pane{background-color:unset}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column;padding:1em}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.body{page-break-after:always}.body img{max-width:100%}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}.docs[data-v-32f02ba2]{padding:1em;max-width:800px;width:100%;margin:1em auto}

front/package.json

@@ -1,56 +0,0 @@
-{
-  "name": "Chattypub",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
-  },
-  "dependencies": {
-    "axios": "^0.21.1",
-    "core-js": "^3.6.5",
-    "css-polyfills": "0.0.16",
-    "emoji-js": "^3.5.0",
-    "markdown-it": "^12.0.6",
-    "moment": "^2.29.1",
-    "pagedjs": "^0.2.0",
-    "splitpanes": "^3.0.4",
-    "string-strip-html": "^8.3.0",
-    "vue": "^3.1.1",
-    "vue-router": "^4.0.8",
-    "vue3-markdown-it": "^1.0.9",
-    "vuex": "^4.0.1"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "^3.1.1",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.0.0",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "github-markdown-css": "^4.0.0",
-    "raw-loader": "^4.0.2",
-    "zulip-js": "^2.0.9"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}

index.js

@@ -1,101 +0,0 @@
-const 
-  zulip   = require("zulip-js"),
-  config  = { zuliprc: "zuliprc" },
-  
-  init    = () => ( new 
-    Promise((resolve, reject) => {
-      zulip(config)
-      .then(client => resolve(client))
-      .catch(error => reject(error))
-    })
-  ),
-  
-  sendMsg = (client, params) => ( new
-    Promise((resolve, reject) => {
-      client.messages.send(params || {
-        to: "chatty",
-        type: "stream",
-        topic: "content",
-        content: "I come not, friends, to steal away your hearts.",
-      })
-      .then(result => resolve(result))
-      .catch(error => reject(error))
-    })
-  ),
-  
-  getMsgs = (client, params) => ( new
-    Promise((resolve, reject) => {
-     client.messages.retrieve(params || {
-        anchor: "newest",
-        num_before: 100,
-        num_after: 0,
-        narrow: [
-          // { operator: "sender", operand: "karl@hackersanddesigners.nl" },
-          { operator: "stream", operand: "chatty" },
-          // { operator: "topic", operand: "rules" },
-        ],
-      })
-      .then(result => resolve(result))
-      .catch(error => reject(error))
-    })
-  ),
-  
-  regNotif = (client, params) => ( new
-    Promise((resolve, reject) => {
-      client.queues.register(params || {
-        event_types: ["message"],
-      })
-      .then(result => resolve(result))
-      .catch(error => reject(error))
-    })
-  ),
-  
-  getNotif = (client, params) => ( new
-    Promise((resolve, reject) => {
-      client.events.retrieve(params || {
-        queue_id: '1624161658:64',
-        last_event_id: -1,
-        dont_block: true,
-      })
-      .then(result => resolve(result))
-      .catch(error => reject(error))
-    })
-  )
-
-init().then(client => {
-  // sendMsg(client).then(result => console.log(result))
-  // getMsgs(client).then(result => {
-    // console.log(result)
-    // const messagesWithReactions = result
-    //   .messages
-    //   .filter(m => (
-    //     m.reactions.length > 0
-    //   ))
-    // console.log(messagesWithReactions[0].reactions)
-    // const messagesWithSubs = result
-    //   .messages
-    //   .filter(m => (
-    //     m.submessages.length > 0
-    //   ))
-    // console.log(messagesWithSubs)
-    // result.messages.forEach(m => 
-      // console.log(m.submessages)
-    // )
-  // })
-  // regNotif(client).then(result => {
-  //   console.log(result)
-  // })
-  getNotif(client).then(result => {
-    console.log(result)
-  })
-})
-
-// (async () => {
-//     const user_id = 9;
-//     params = {
-//         to: [user_id],
-//         type: "private",
-//         content: "With mirth and laughter let old wrinkles come.",
-//     };
-//     console.log(await client.messages.send(params));
-// })();

package.json

@@ -1,18 +1,57 @@
 {
-  "name": "chattypub",
+  "name": "Chattypub",
-  "version": "1.0.0",
+  "version": "0.1.0",
-  "description": "",
+  "private": true,
-  "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
   },
-  "author": "Karl Moubarak",
-  "license": "ISC",
   "dependencies": {
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "css-polyfills": "0.0.16",
     "emoji-js": "^3.5.0",
-    "splitpanes": "^2.3.6",
+    "markdown-it": "^12.0.6",
+    "moment": "^2.29.1",
+    "pagedjs": "^0.2.0",
+    "splitpanes": "^3.0.4",
     "string-strip-html": "^8.3.0",
-    "vue-html2pdf": "^1.8.0",
+    "vue": "^3.1.1",
+    "vue-router": "^4.0.8",
+    "vue3-markdown-it": "^1.0.9",
+    "vuex": "^4.0.1",
+    "vue-html2pdf": "^1.8.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "^3.1.1",
+    "@vue/cli-service": "^4.5.13",
+    "@vue/compiler-sfc": "^3.0.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "github-markdown-css": "^4.0.0",
+    "raw-loader": "^4.0.2",
     "zulip-js": "^2.0.9"
-  }
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/vue3-essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/components/Content/Message.vue

@@ -5,7 +5,12 @@
       <div class="time">{{ time }}</div>
     </div>
     <div :class="classes" class="message">
-      <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+      <template v-if="hasRulesShortcode">
+        <Rules />
+      </template>
+      <template v-else>
+        <vue3-markdown-it :source="content" v-bind="$mdOpts"></vue3-markdown-it>
+      </template>
       <div class="message-data-reactions" v-if="show_message_data && message.reactions.length > 0">
         <span
           class="reaction"
@@ -16,7 +21,7 @@
         </span>
       </div>
     </div>
-    
+
     <div class="reactions ui">
       <span v-for="reaction in reactions" :key="reaction" :title="reaction">
         {{ shortcodeToEmoji(reaction) }}
@@ -27,18 +32,20 @@
 
 <script>
 import emoji from "../../mixins/emoji";
+import Rules from "../Rules/index.vue";
+
 var EmojiConvertor = require("emoji-js");
 var emojiConv = new EmojiConvertor();
 /*eslint no-unused-vars: "off"*/
 /*eslint no-undef: "off"*/
 export default {
   name: "Message",
+  components: {
+    Rules,
+  },
   props: ["message", "show_message_data"],
   mixins: [emoji],
   computed: {
-    rawJSON() {
-      return "```json\n" + JSON.stringify(this.message, null, 2) + "\n```";
-    },
     content() {
       if(!this.message.content) return "";
       // let c = this.message.content.replaceAll("\n", "<br/>");
@@ -77,9 +84,13 @@ export default {
         // console.log(c);
       });
 
-      
+
       return c;
     },
+    hasRulesShortcode(){
+      // console.log(this.content, this.content.includes("[rules]"));
+      return this.content.includes('[rules]');
+    },
     reactions() {
       // return this.message.reactions.map((r) => {
       //   console.log(r);
@@ -156,14 +167,21 @@ export default {
   text-align: right;
 }
 
-.show_message_data .message {
+/* .show_message_data .message {
   padding-bottom: 1rem;
-}
+} */
 
 .message-data-reactions {
   all: initial;
   position: absolute;
   bottom: 0;
-  left: 0;
+  /* left: 0; */
+  right: 0;
 }
-</style>
+
+/* important! hides default link & image tag auto-created by zulip for file links */
+
+.message_inline_ref {
+display: none;
+}
+</style>

src/components/Rules/index.vue

@@ -1,6 +1,5 @@
 <template>
   <section class="rules">
-    <!-- <p class="title">{{ $.type.name }}</p> -->
     <Rule
       v-for="rule in rules"
       :key="rule.id"
@@ -39,4 +38,4 @@ export default {
 @media print {
   .rules { display: none; } 
 }
-</style>
+</style>

src/store/index.js

@@ -6,11 +6,11 @@ import { createStore } from 'vuex'
 import emoji from "../mixins/emoji"
 import { stripHtml } from "string-strip-html"
 
-/* 
+/*
 
-TODO: fix this frankenfunction. Its not pretty but it works, so I am leaving it for now. 
+TODO: fix this frankenfunction. Its not pretty but it works, so I am leaving it for now.
 
-Does various conversion and parsing to turn a message in the rules channel into an object we can use in the rules and style component 
+Does various conversion and parsing to turn a message in the rules channel into an object we can use in the rules and style component
 
 */
 let toCSS = (message, currentStream) => {
@@ -22,8 +22,8 @@ let toCSS = (message, currentStream) => {
     id = message.id,
     is_codeblock = message.content.includes("<code>") || message.content.startsWith("```"),
     is_font = /<p><a href=".+?\.(ttf|otf|woff)/gm.test(message.content);
-  
+
-  let type = is_codeblock ? "raw" : is_font ? "font" : "rule"; 
+  let type = is_codeblock ? "raw" : is_font ? "font" : "rule";
   // console.log(type, message.content);
   let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
   let results = content.matchAll(regex);
@@ -123,7 +123,7 @@ const handleHTMLReply = message => {
     quote: message.content
       .replace(/.*[^]+<\/p>\n<blockquote>\n<p>/gm, '')
       .replace(/<\/p>\n<\/blockquote>/gm, '')
-    // .replace(/\n/gm, '')
+    .replace(/\n/gm, '')
   }
   // console.table(message.responseTo)
 }
@@ -230,7 +230,7 @@ export default createStore({
         //   id: mid, content: content,
         // }, state.currentStream)
 
-        // vue will not update if i use rules.push(rule)  
+        // vue will not update if i use rules.push(rule)
         state.rules.splice(state.rules.indexOf(rule), 1)
         const newRules = [...state.rules, ...[toCSS({
           id: mid, content: content,
@@ -266,8 +266,8 @@ export default createStore({
 
     sortedTopics: (state, getters) => (
       getters.filteredTopics
-      .sort((a,b) => 
+      .sort((a,b) =>
-        a.title.localeCompare(b.title, undefined, { 
+        a.title.localeCompare(b.title, undefined, {
           numeric     : true,
           sensitivity : 'base'
         })

src/views/Home.vue

@@ -201,4 +201,4 @@ export default {
     display: none !important;
   }
 }
-</style>
+</style>