dcumentation, and quoting messagesaare noow not displyed in main section

front/dist/css/app.126f5ef9.css

@@ -1 +1 @@
-:root{--back:#fff}#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;background:#d3d3d3}section p{margin-bottom:0;margin-top:0}div[data-v-1af39708]{padding:.5em}div .selected[data-v-1af39708]{background:#f792f7}div p[data-v-1af39708]{margin:0}.streams[data-v-b5c7b5e8]{min-width:10em;padding:0}@media print{.streams[data-v-b5c7b5e8]{display:none}}.message{position:relative;display:block}.message: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,.reactions:after,.reactions:before{all:revert;display:none}.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}.header[data-v-d726f0d6]{cursor:pointer}@media print{.title[data-v-d726f0d6]{display:none}}.content[data-v-67c88b0b]{background:unset}.rule[data-v-497ad388]{margin:1em 0}.rule p[data-v-497ad388]{margin:0}.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}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.print .body{page-break-after:always;border-bottom:3px dotted green}.print .body:first-of-type{page-break-after:always;border-bottom:3px dotted #ff0}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}
+:root{--back:#fff}#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;background:#d3d3d3}section p{margin-bottom:0;margin-top:0}div[data-v-1af39708]{padding:.5em}div .selected[data-v-1af39708]{background:#f792f7}div p[data-v-1af39708]{margin:0}.streams[data-v-b5c7b5e8]{min-width:10em;padding:0}@media print{.streams[data-v-b5c7b5e8]{display:none}}.message{position:relative;display:block}.message: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,.reactions:after,.reactions:before{all:revert;display:none}.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}.header[data-v-756f5686]{cursor:pointer}@media print{.title[data-v-756f5686]{display:none}}.content[data-v-67c88b0b]{background:unset}.rule[data-v-497ad388]{margin:1em 0}.rule p[data-v-497ad388]{margin:0}.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}.splitpanes--vertical .splitpanes__pane{overflow-y:scroll}.pane-wrapper{height:100vh}.controls{display:flex;flex-direction:column}.print .pane-wrapper{height:auto}.print .splitpanes__pane{overflow:initial}.print .content iframe{width:100%;height:100%}.print section{display:block!important}.print .body{page-break-after:always;border-bottom:3px dotted green}.print .body:first-of-type{page-break-after:always;border-bottom:3px dotted #ff0}.float-btn{position:fixed;z-index:1000}@media print{.ui{display:none!important}}

front/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"><link rel="icon" href="/favicon.ico"><title>front</title><link href="/css/app.db724067.css" rel="preload" as="style"><link href="/css/chunk-vendors.0a40a1e1.css" rel="preload" as="style"><link href="/js/app.f3e1da89.js" rel="preload" as="script"><link href="/js/chunk-vendors.34c114ef.js" rel="preload" as="script"><link href="/css/chunk-vendors.0a40a1e1.css" rel="stylesheet"><link href="/css/app.db724067.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.34c114ef.js"></script><script src="/js/app.f3e1da89.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"><link rel="icon" href="/favicon.ico"><title>front</title><link href="/css/app.126f5ef9.css" rel="preload" as="style"><link href="/css/chunk-vendors.0a40a1e1.css" rel="preload" as="style"><link href="/js/app.76b5943d.js" rel="preload" as="script"><link href="/js/chunk-vendors.34c114ef.js" rel="preload" as="script"><link href="/css/chunk-vendors.0a40a1e1.css" rel="stylesheet"><link href="/css/app.126f5ef9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but front doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/js/chunk-vendors.34c114ef.js"></script><script src="/js/app.76b5943d.js"></script></body></html>

front/docs/Workshop.md

@@ -17,7 +17,8 @@ This script aims to provide the necessary instructions to host a workshop around
 - Learn and/or practice styling with CSS & Emojis
 
 ## Requirements
-- an account for the Hackers & Designers Zulip instance:  https://chat.hackersanddesigners.nl/.
+- a computer, web-browser, and connection to the internet
+- an account for the Hackers & Designers Zulip instance:  https://chat.hackersanddesigners.nl/
 - a printer
 
 
@@ -43,11 +44,12 @@ Zulip allows you to react to messages using emoji's as well. We will make heavy
 There are several ways to engage with Zulip, including a web-client, a desktop app, and a mobile app.
 ### ChattyPub
 
-https://chattypub.hackersanddesigners.nl
+http://chattypub.hackersanddesigners.nl
 
 ChattyPub is a website that acts as a different interface to the same Zulip service. ChattyPub takes a stream from Zulip, combines messages into long-form articles and uses a design system combining Emojis and CSS syntax to style the messages, effectively turning the stream into a (printable!) webpage.
 
 ## Making a publication with Zulip & ChattyPub
+### Content
 
 1. Create a stream on Zulip
     - Ensure that the stream name starts with `pub-`.
@@ -58,12 +60,31 @@ ChattyPub is a website that acts as a different interface to the same Zulip serv
     - Your stream name (which will be the name of your publication)
     - The topics of your stream (which will act as "Chapters" in your publication)
     - Topics are collapsed by default, click the expand button next to a topic to display it's messages as an article.
-    - To create a new topic, return to Zulip and type a message to your stream, making sure to send it to the topic you want to create.
-5. The right-hand side of the interface is reserved for one topic in your stream: "rules".
-    - Go back to Zulip and create a topic in your stream called "rules"
-    - This topic will house definitions for styles you want to apply to messges in your stream.
-    - 
+5. To create a new topic (chapter), return to Zulip and type a message to your stream, making sure to send it to the topic you want to create.
 
+### Rules
+
+The right-hand side of the ChattyPub interface is reserved for one topic in your stream: "rules". This topic will house definitions for styles you want to apply to messages in your stream. 
+
+Go back to Zulip and create the topic in your stream called "rules".
+
+Every message you send to this topic should consist of a single emoji followed by a set of styles you'd like applied to messages. For example:
+
+```CSS
+🍓 {
+  color: red;
+  text-decoration: underline;
+}
+```
+These messages should be unique and follow the CSS syntax, as described in the [introduction to CSS](https://github.com/hackersanddesigners/chatty-pub/blob/master/front/docs/CSS.md). If you are comfortable with CSS, you can skip to the part of the document that describes [how CSS is used in ChattyPub](https://github.com/hackersanddesigners/chatty-pub/blob/master/front/docs/CSS.md#css-in-chatty-pub).
+
+To apply these styles to the contents of your publication, head back to any other topic in your stream, select a message you'd like to style, and react to it with the emoji whose styles you want to apply. On ChattyPub, the message should be rendered with these styles.
+
+If you'd like to style only a part of a message, select the message in Zulip and quote and respond to it (in the 3-dot menu). This will produce a text in your input box on the bottom of the interface. Delete the parts of the quoted message that you don't want the styles applied to, and send your response. When you react with an emoji to your own response, the part of the message you quoted will inherit the styles defined for that emoji.
+
+### Printing
+
+TBD
 
 ## Workshop
 

front/src/components/Content/Chapter.vue

@@ -5,7 +5,7 @@
       <span>{{ topic.title }}</span>
     </h3>
     <div v-if="desiresContent || print">
-      <span v-for="message in topic.messages" :key="message.id">
+      <span v-for="message in messagesToShow" :key="message.id">
         <Message :message="message" :show_message_data="show_message_data" />
         <span>&nbsp;</span>
       </span>
@@ -37,6 +37,9 @@ export default {
       }
       return r;
     },
+    messagesToShow() {
+      return this.topic.messages.filter(m => !m.responseTo)
+    }
   },
 };
 </script>