Printing improvements

front/src/components/Content/Chapter.vue

@@ -10,7 +10,7 @@
       </span>
     </div>
 
-    <div style="float: none"><div style="page-break-after: always"></div></div>
+    <!-- <div style="float: none"><div style="page-break-after: always"></div></div> -->
   </div>
 </template>
 
@@ -23,15 +23,13 @@ export default {
     Message,
   },
   data() {
-    return {
+    return {};
-    }
   },
   props: ["topic", "show_message_data"],
   computed: {
     messagesToShow() {
-      return this.topic.messages
+      return this.topic.messages.filter((m) => !m.responseTo);
-      .filter(m => !m.responseTo)
+    },
-    }
   },
 };
 </script>

front/src/components/Content/index.vue

@@ -1,20 +1,17 @@
 <template>
   <section>
     <h1 class="title">{{ title }}</h1>
-    <ul>
+    <ul class="index">
-      <li
+      <li v-for="topic in sortedTopics" :key="topic.title">
-        v-for="topic in sortedTopics"
+        <router-link
-        :key="topic.title"
-      >
-        <router-link 
           :to="`#${toValidID(topic.title)}`"
-          @click.stop="goTo(`#${toValidID(topic.title)}`)" 
+          @click.stop="goTo(`#${toValidID(topic.title)}`)"
         >
           {{ topic.title }}
         </router-link>
       </li>
     </ul>
-    <div style="float: none"><div style="page-break-after: always"></div></div>
+    <!-- <div style="float: none"><div style="page-break-after: always"></div></div> -->
     <Chapter
       v-for="topic in sortedTopics"
       :key="topic.title"
@@ -40,24 +37,22 @@ export default {
     ...mapState(["currentStream", "streams"]),
     ...mapGetters(["sortedTopics"]),
     title() {
-      return this.streams.find(s => s.name == this.currentStream) ? 
+      return this.streams.find((s) => s.name == this.currentStream)
-        this.currentStream.replace("pub-", "") : 'Stream  does not exist.'
+        ? this.currentStream.replace("pub-", "")
-    }
+        : "Stream  does not exist.";
-    
+    },
   },
   methods: {
-    toValidID(string) { return (
+    toValidID(string) {
-      encodeURIComponent('ch-' + string)
+      return encodeURIComponent("ch-" + string)
-      .toLowerCase()
+        .toLowerCase()
-      .replace(/\.|%[0-9a-z]{2}/gi, '')
+        .replace(/\.|%[0-9a-z]{2}/gi, "");
-    )},
+    },
     goTo(id) {
-      document
+      document.querySelector(`.${this.currentStream} ${id}`).scrollIntoView({
-      .querySelector(`.${this.currentStream} ${id}`)
+        behavior: "smooth",
-      .scrollIntoView({
+      });
-        behavior: 'smooth'
+    },
-      })
-    }
   },
 };
 </script>
@@ -68,4 +63,8 @@ export default {
     /* display: none; */
   }
 }
+
+.index {
+  page-break-after: always;
+}
 </style>

front/src/store/index.js

@@ -9,6 +9,8 @@ import { stripHtml } from "string-strip-html"
 var EmojiConvertor = require('emoji-js');
 var emojiConv = new EmojiConvertor();
 
+// let emojis = require('emojis');
+
 let toCSS = (message, currentStream) => {
   let content = stripHtml(message.content).result;
   let className = "",
@@ -25,14 +27,16 @@ let toCSS = (message, currentStream) => {
   let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
   let results = content.matchAll(regex);
   results = Array.from(results);
+
   if (is_font) { // font
     let re_path = /\/user_uploads(\/.*?\.(?:ttf|otf|woff))/gm;
-    // content = message.content.matchAll(re_path);
     content = re_path.exec(message.content)[1];
-    // console.log(message.content, content)
     return { className: '', emoji_code: '', rules: [], parentClassName: '', id: id, content: font(content), type: type }
+  } else if (is_codeblock) {
+    return { className: '', emoji_code: '', rules: [], parentClassName: '', id: id, content: content, type: type }
   } else if (results.length > 0) { // rule and raw
     className = emojiConv.replace_colons(results[0]['groups']['selector']);
+
     if (emoji.methods.containsEmoji(className)) {
       emoji_code = emoji.methods.toEmojiCode(className);
     }
@@ -40,6 +44,7 @@ let toCSS = (message, currentStream) => {
     rules = rules.filter((rule) => validateRule(rule))
     return { className, emoji_code, rules, parentClassName, id, content, type };
   }
+  console.log("rejected rule", message)
   return null;
 }
 

front/src/views/Home.vue

@@ -134,6 +134,7 @@ export default {
   width: 100%;
   display: flex;
 }
+
 .controls-pane {
   background-color: #aaa;
 }
@@ -174,20 +175,14 @@ export default {
   display: block !important;
 }
 
-.print .body {
+.body {
   page-break-after: always;
-  /* border-bottom: 3px dotted green; */
 }
 
 .body img {
   max-width: 100%;
 }
 
-/* .print .body:first-of-type {
-  page-break-after: always;
-  border-bottom: 3px dotted yellow;
-} */
-
 .float-btn {
   position: fixed;
   z-index: 1000;