Autoload fonts

front/src/components/Rules/Rule.vue

@@ -1,8 +1,16 @@
 <template>
-  <div class="rule" :class="classes" :style="rule.rules">
+  <div class="rule" :class="classes" :style="rules">
-    <pre v-if="rule.is_codeblock">
+    <pre v-if="rule.type === 'raw'"
-      {{ contentFiltered }}
+      >{{ contentFiltered }}
     </pre>
+    <template v-else-if="rule.type === 'font'">
+      <pre>
+@font-face { 
+  font-family: "{{ font.family }}"; 
+  src: "{{ font.src }}" format({{ "font.format" }}); 
+}
+      </pre>
+    </template>
     <template v-else>
       <p :title="toEmojiCode(rule.className)">{{ rule.className }} {</p>
       <p v-for="dec in rule.rules" :key="dec">&nbsp; {{ dec }}</p>
@@ -20,10 +28,8 @@ export default {
   props: ["rule"],
   computed: {
     contentFiltered() {
-      var reg = this.emoji_regex;
+      let reg = this.emoji_regex;
-
       let c = this.rule.content.replace(reg, (c) => {
-        console.log("c", c, this.toEmojiCode(c));
         return c + ", .u" + this.toEmojiCode(c);
       });
 
@@ -31,11 +37,18 @@ export default {
     },
     classes() {
       let style = "";
-      if (this.rule.is_codeblock) {
+      if (this.rule.type == "raw") {
         style += " raw";
       }
       return style;
     },
+    font() {
+      return this.rule.content;
+    },
+    rules() {
+      if (this.rule.type !== "font") return this.rule.rules;
+      else return ["font-family: " + this.font.family + ";"];
+    },
   },
 };
 </script>
@@ -59,6 +72,7 @@ export default {
 }
 
 .rule.raw:after {
+  all: revert;
   content: "raw css";
   background-color: #333;
   border-radius: 10px;
@@ -66,7 +80,9 @@ export default {
   bottom: -0.5em;
   left: 50%;
   transform: translateX(-50%);
-  padding: 3px;
+  padding: 0 10px;
   border: 1px solid white;
+  font-family: initial;
+  font-size: 1rem;
 }
 </style>

front/src/components/Rules/Styles.vue

@@ -17,9 +17,16 @@ export default {
     generateStyleRules() {
       let styles = "";
       this.rules.map((r) => {
-        if (r.is_codeblock) {
+        switch (r.type) {
-          styles += r.content;
+          case "raw":
-        } else {
+            console.log("raw", r.content);
+            styles += r.content.replaceAll("\n", " ");
+            break;
+          case "font":
+            // styles += `@font-face { font-family: "${r.content.family}"; src: "${r.content.src}" format("${r.content.format}"); }`;
+            styles += `@font-face { font-family: "${r.content.family}"; src: url("${r.content.src}") format("${r.content.format}"); }`;
+            break;
+          default:
             if (r.className.startsWith("@")) {
               styles += r.className;
             } else {
@@ -51,7 +58,6 @@ export default {
   },
   watch: {
     rules() {
-      console.log("rules!");
       const newStyle = this.createStyleElement();
       document.head.replaceChild(newStyle, this.el);
       this.el = newStyle;

front/src/store/index.js

@@ -10,32 +10,72 @@ var EmojiConvertor = require('emoji-js');
 var emojiConv = new EmojiConvertor();
 
 let toCSS = (message, currentStream) => {
+  let content = stripHtml(message.content).result;
   let className = "",
     emoji_code = "",
     rules = [],
     parentClassName = currentStream,
     id = message.id,
-    is_codeblock = message.content.includes("<code>") || message.content.startsWith("```");
+    is_codeblock = message.content.includes("<code>") || message.content.startsWith("```"),
-
+    is_font = /<p><a href=".+?\.(ttf|otf|woff)/gm.test(message.content);
   // let regex = /[/s]?(?<selector>.+)\s*\n?{\n?(?<prop>[\s\w.~:>-]+\s*:\s*.+;?\n?)*\n?}/gm
-  let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
-  let content = stripHtml(message.content).result;
 
+  let type = is_codeblock ? "raw" : is_font ? "font" : "rule"; // okay okay okay, i know this is ugly :)
+
+  let regex = /\s?(?<selector>.+)\s*\n?{\n?(?<props>(.*;\n?)+)}/gm
   let results = content.matchAll(regex);
   results = Array.from(results);
-
+  if (is_font) { // font
-  if (results.length > 0) {
+    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 (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);
     }
     rules = results[0]['groups']['props'].split("\n");
     rules = rules.filter((rule) => validateRule(rule))
-    return { className, emoji_code, rules, parentClassName, id, content, is_codeblock };
+    return { className, emoji_code, rules, parentClassName, id, content, type };
   }
   return null;
 }
 
+let font = (content) => {
+  let font = {
+    family: "",
+    src: "",
+    format: "",
+  };
+  let path = content;
+  let filename = getFilename(path);
+  let ext = filename.split(".").pop();
+  font.src =
+    "https://chatty-pub-files.hackersanddesigners.nl/files" + path;
+  font.format = getFormat(ext);
+  font.family = filename.replace(".", "_");
+  return font;
+}
+
+let getFilename = (str) => {
+  return str.split("\\").pop().split("/").pop();
+}
+
+let getFormat = (ext) => {
+  let fmt = "truetype";
+  switch (ext) {
+    case 'woff':
+      fmt = "woff";
+      break;
+    case 'eof':
+      fmt = "embedded-opentype";
+      break;
+  }
+  return fmt;
+}
+
 let validateRule = (rule) => {
   return rule.match(/.+:.+;/gm);
 }