Merge branch 'master' of github.com:hackersanddesigners/chatty-pub

merge with hrk

front/docs/CSS.md

@@ -4,9 +4,19 @@ In this document we take a look at what CSS is and how it can be applied to a pu
 
 - [What is CSS](#what-is-css)
 - [Rules](#rules)
-- [Css in ChattyPub](#css-in-ChattyPub)
+- [Css in ChattyPub](#css-in-chattypub)
+  - [About formatting](#about-formatting)
+  - [Advanced CSS](#advanced-css)
 - [Uploading fonts](#uploading-fonts)
 - [Print settings](#print-settings)
+  - [Page breaks](#page-breaks)
+- [Common CSS properties](#properties)
+  - [Backgrounds and borders](#backgrounds)
+  - [Color](#color)
+  - [Box model](#box-model)
+  - [Fonts](#fonts)
+  - [Text](#text)
+  - [Transforms](#transforms)
 
 ---
 
@@ -123,7 +133,7 @@ You should be able to enter all regular CSS rules this way.
 
 **Bypassing the parser** -_Work in progress_-
 
-It is possible to bypass the parser and add arbitrary code to the CSS on the page. This allows you to add, for example, `@keyframes` for an animation or media queries. To do this send any message to the #rules channel and wrap the message in three backticks like this:
+It is possible to bypass the parser and add arbitrary code to the CSS on the page. This allows you to add, for example, `@keyframes` for an animation or media queries. To do this send any message to the `#rules` channel and wrap the message in three backticks like this:
 
 <code>
 ```
@@ -154,23 +164,39 @@ To set the paper size we can use the special selector `@page`. The following sni
 }
 ```
 
-Regrettably [browser support](https://caniuse.com/css-paged-media) for `@page` is spotty. Currently only MS Edge, Opera and Google Chrome will allow you to set page sizes etc.
+This example sets the page to landscape.
 
-[Pagedmedia.org](https://www.pagedmedia.org/pagedjs-sneak-peeks/) has an excellent explanation on using `@page`. The [Paged media module](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media) at Mozilla as well.
+```css
+@page {
+  size: landscape;
+}
+```
+
+Regrettably [browser support](https://caniuse.com/css-paged-media) for `@page` is spotty. Currently only MS Edge, Opera and Google Chrome will allow you to set page sizes etc, and even then it is a matter of trial and error.
+
+The [Paged media module](https://developer.mozilla.org/en-US/docs/Web/CSS/Paged_Media) at Mozilla has an excellent explanation on using `@page`.
 
 ### page breaks
 
 By default pages will automatically wrap to the next page. And ChattyPub adds a page break after each topic. If you want to force a page break you could write a rule for it, using the `page-break-after: always;` property:
 
+```css
+🍏 {
+  page-break-after: always;
+}
 ```
-📄 {
-page-break-after: always;
+
+If you don't want the page break after an article you can overwrite the default by using:
+
+```css
+.body {
+  page-break-after: avoid;
 }
 ```
 
 For some of these rules it may be necessary to use the methods described under [Advanced CSS](#advanced-css) above to enter these rules.
 
-## List of common and handy CSS properties
+## <a id="properties"></a>List of common and handy CSS properties
 
 There are hundreds of CSS properties. Below is a small selection of some basic properties mostly focussed on layout and type representation, grouped by module.
 

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
-      .filter(m => !m.responseTo)
-    }
+      return this.topic.messages.filter((m) => !m.responseTo);
+    },
   },
 };
 </script>

front/src/components/Content/index.vue

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

front/src/store/index.js

@@ -9,12 +9,14 @@ 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 = "",
     emoji_code = "",
     rules = [],
-    parentClassName = currentStream,
+    parentClassName = (currentStream || "").replace(" ", "-"),
     id = message.id,
     is_codeblock = message.content.includes("<code>") || message.content.startsWith("```"),
     is_font = /<p><a href=".+?\.(ttf|otf|woff)/gm.test(message.content);
@@ -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

@@ -90,7 +90,7 @@ export default {
       return this.show_ui ? "ui" : "print";
     },
     currentStream() {
-      return this.$store.state.currentStream;
+      return this.$store.state.currentStream.replace(" ", "-");
     },
   },
   methods: {
@@ -121,6 +121,7 @@ export default {
       if (state !== undefined) this.show_ui = state;
       else this.show_ui = !this.show_ui;
       this.$forceUpdate();
+      Splitpanes.updatePaneComponents();
     },
   },
 };
@@ -134,6 +135,7 @@ export default {
   width: 100%;
   display: flex;
 }
+
 .controls-pane {
   background-color: #aaa;
 }
@@ -174,20 +176,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;