doohoyi/chatty-pub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

doc updates

Browse source
This commit is contained in:
Heerko 2021-07-16 15:14:56 +02:00
parent 0c09c21377
commit f86032410f
7 changed files with 15737 additions and 61 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
front/docs/CSS.md
View file

@ -1,13 +1,12 @@
# CSS
In this document we take a look at what CSS is and how it can be applied to a publication in **Chatty-pub**.
In this document we take a look at what CSS is and how it can be applied to a publication in ChattyPub.
- [What is CSS](#what-is-css)
- [Rules](#rules)
- [Css in chatty-pub](#css-in-chatty-pub)
- [Css in ChattyPub](#css-in-ChattyPub)
- [Uploading fonts](#uploading-fonts)
- [Print settings](#print-settings)
- [Typing Emoji](#typing-emoji)
---
@ -15,13 +14,13 @@ In this document we take a look at what CSS is and how it can be applied to a pu
CSS (Cascading Style Sheets) is the language that allows you to style and layout HTML web pages. This article explains what CSS is, with some simple syntax examples, and also covers some key terms about the language.
Since this document relates specifically to **Chatty-pub**, the focus is going to be on the parts of the language that are supported by this platform. Because CSS is specifically oriented towards styling HTML (and related languages like SVG and XML) you have to have a basic understanding of HTML.<sup>[1](#footnote1)</sup> Mozilla has an excellent [HTML introduction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started).
Since this document relates specifically to ChattyPub, the focus is going to be on the parts of the language that are supported by this platform. Because CSS is specifically oriented towards styling HTML (and related languages like SVG and XML) you have to have a basic understanding of HTML.<sup>[1](#footnote1)</sup> Mozilla has an excellent [HTML introduction](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started).
At its heart, HTML is a fairly simple language made up of elements, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page.
But what HTML does not do is speficy how these elements should look. That is where CSS comes in.
CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.
In Chatty-pub we're mostly interested in the first part.
In ChattyPub we're mostly interested in the first part.
---
@ -29,7 +28,7 @@ In Chatty-pub we're mostly interested in the first part.
#### _Elements and Classes_
In this section we will talk about CSS in general. Chatty-pub uses a slight variation on it, but let's start with the basics.
In this section we will talk about CSS in general. ChattyPub uses a slight variation on it, but let's start with the basics.
CSS is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. For example "I want the main heading on my page to be shown as large red text."
@ -86,9 +85,9 @@ In the `h1` example above, we set the following property: `font-size: 20px;`. Th
---
## CSS in Chatty-pub
## CSS in ChattyPub
When you react to a message in Zulip with an emoji, this emoji gets turned into a class in **Chatty-pub**. So lets say you responded to a message with the strawberry 🍓 emoji. In **Chatty-Pub** the message will have class with that emoji as selector. (You can confirm this by rolling over the message, the emoji should popup on a overlay.) So now to style that message, you go to the #rules channel and add a message with the following content:
When you react to a message in Zulip with an emoji, this emoji gets turned into a class in ChattyPub. So lets say you responded to a message with the strawberry 🍓 emoji. In ChattyPub the message will have class with that emoji as selector. (You can confirm this by rolling over the message, the emoji should popup on a overlay.) So now to style that message, you go to the `#rules` channel and add a message with the following content:
```css
🍓 {
@ -98,9 +97,9 @@ When you react to a message in Zulip with an emoji, this emoji gets turned into
It is very similar to the examples above. `🍓` is the selector, so the rule will apply to each message with a strawberry reaction. Then follows the block `{` and `}`. And in the block, there is property, `color: red;`.
_A small difference with regular CSS is that you don't need to add the period in front of the selector **Chatty-pub** will handle that for you._
_A small difference with regular CSS is that you don't need to add the period in front of the selector ChattyPub will handle that for you._
Because of the way Zulip handles the emoji reactions, not all emoji are available or sometimes they don't exactly correspond to the emoji you might type in the #rules channel. To help with sorting this out you can roll over a message in **Chatty-pub** and see the reactions that are applied. Sometimes the translation is unavailable, in that case you'll see something like `:working_on_it:` instead of the emoji you expected. In that case remove your reaction and find an other emoji that does work.
Because of the way Zulip handles the emoji reactions, not all emoji are available or sometimes they don't exactly correspond to the emoji you might type in the `#rules` channel. To help with sorting this out you can roll over a message in ChattyPub and see the reactions that are applied. Sometimes the translation is unavailable, in that case you'll see something like `:working_on_it:` instead of the emoji you expected. In that case remove your reaction and find an other emoji that does work.
### About formatting
@ -112,7 +111,7 @@ _Don't forget the semi-colon at the end of the property line!_
**Selecting HTML elements and other style rules**
The reaction/emoji method described above allows to make quick modifications to the style and layout of your publication. But besides this **Chatty-pub** also allows you to style html elements like in regular CSS. To do this just enter your style rule. This snippet will give all HTML links a pink background color:
The reaction/emoji method described above allows to make quick modifications to the style and layout of your publication. But besides this ChattyPub also allows you to style html elements like in regular CSS. To do this just enter your style rule. This snippet will give all HTML links a pink background color:
```css
a {
@ -124,7 +123,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, `@key` 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>
```
@ -139,32 +138,9 @@ It is possible to bypass the parser and add arbitrary code to the CSS on the pag
## Uploading fonts
It is also possible to upload a font to the application. To do this, you send the font (.ttf or .woff work best) in a message to the #rules channel of the publication you want to use it in.
It is also possible to upload a custom font to the application. To do this, you send the font in a message to the #rules channel of the publication you want to use it in. You can use `.ttf`, `.otf` or `.woff` formats depending on the browser you are using. The mesage must only contain the font, no other text. ChattyPub will then automatically generate a @font-face rule for the font. The font-family name will be based on the filename.
Then:
1. Copy the link to the uploaded font. It may take a little while for the font to be available in **Chatty-pub**.
2. Add a `@font-face` rule for the font, but wrap it in three backticks. Like so:
- `font-name`: Can be any name you like, and you just use the same name later in your style rule.
- `font-url`: Paste the url of the file you just uploaded here.
````css
```
@font-face {
font-family: "font name";
src: "font url";
}
```
````
You can then use the font in this way:
```css
🤘 {
font-family: "font name";
}
```
Once uploaded the font should show up in the CSS rules section of ChattyPub. To use the font in a style rule, just copy/paste the `font-family: "font_name_ttf";` and add it to a rule in the #rules channel.
> Please only upload free or open-source fonts to our server!
@ -178,11 +154,21 @@ 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 Google Chrome will allow you to set page sizes etc.
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.
[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 also.
[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.
It may be necessary to use the methods described under [Advanced CSS](#advanced-css) above to enter these rules.
### 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:
```
📄 {
page-break-after: always;
}
```
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
@ -255,10 +241,4 @@ Also see the section on uploading fonts below.
- [scale](https://developer.mozilla.org/en-US/docs/Web/CSS/scale) - The scale CSS property allows you to specify the scale (size) of elements
- [translate](https://developer.mozilla.org/en-US/docs/Web/CSS/translate) - The translate CSS property allows you to specify translation transforms (position relative to where it originally was) of elements.
## Typing Emoji
- [Windows](https://support.microsoft.com/en-us/windows/windows-10-keyboard-tips-and-tricks-588e0b72-0fff-6d3f-aeee-6e5116097942)
- [Mac](https://www.howtogeek.com/684025/how-to-type-emoji-on-your-mac-with-a-keyboard-shortcut/)
- Linux varies per distribution. If you run Linux you're probably capable of finding out how :)
<a name="footnote1">1</a>: I've borrowed shamelessly from Mozilla to make this text: https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS and https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML

33
front/docs/Chattypub.md
View file

@ -2,6 +2,15 @@
ChattyPub is a design tool in the making – leveraging a chat interface to apply styles and formats to the content of a publication. ChattyPub is a collaborative publication/zine-making tool built on top of the chat platform [Zulip](https://chat.hackersanddesigners.nl). By sending messages, reacting with emoji and writing simple CSS style rules the publication can be collectively designed.
- [Zulip](#zulip)
- [ChattyPub](#using-chattypub)
- [Making a publication with Zulip & ChattyPub](#content)
- [Content](#content)
- [Rules](#rules)
- [Printing](#printing)
- [Typing Emoji](#typing-emoji)
- [Problems?](#problems)
## Zulip
On Zulip, conversations are categorized into different "Streams", which are comparable to "channels" in other messaging services like Discord. Streams can be public or private and host conversations consisting of text, images, files, reactions, etc..
@ -12,7 +21,7 @@ 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
## Using ChattyPub
http://chatty-pub.hackersanddesigners.nl
@ -25,12 +34,12 @@ ChattyPub is a website that acts as a different interface to the same Zulip serv
1. Create a stream on Zulip
- Ensure that either (1) the stream name starts with `pub-` or (2) the stream includes a topic called "rules" (more on that later).
- Ensure that the stream is public.
2. Go to [ChattyPub](http://chatty-pub.hackersanddesigners.nl). The stream you created will be visible on the left-side navigation.
2. Go to [ChattyPub](https://chatty-pub.hackersanddesigners.nl). The stream you created will be visible on the left-side navigation.
3. Click on your stream.
4. The main (middle) section of the website will have:
1. Your stream name (which will be the name of your publication)
2. The topics of your stream organized into a table of contents (which will act as "Chapters" in your publication)
3. The topics, in alphabetical order, displaying their messages, in chronological order.
3. The topics, in alphabetical order, displaying their messages, in chronological order.
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
@ -58,8 +67,24 @@ Keep in mind that you can edit your own messages! So if you make a mistake (forg
### Printing
> Regrettably support for setting page size, page breaks etc. using [@page](https://caniuse.com/css-paged-media) is very poor in some browsers. Use MS Edge, Opera or Google Chrome for best results when printing or creating PDFs.
To print, click on the print button on the left side of the application. This will hide the interface, make all content visible and open the browsers' Printing dialog box.
If you want to use background colors or background images in your publication you may have to turn that on in the print settings dialog.
There is more information on setting up pages sizes etc, in the CSS document.
> Regrettably support for [@page](https://caniuse.com/css-paged-media) is very poor in most browsers. Use MS Edge, Opera or Google Chrome for best results when printing or creating PDFs.
## Typing Emoji
- [Windows](https://support.microsoft.com/en-us/windows/windows-10-keyboard-tips-and-tricks-588e0b72-0fff-6d3f-aeee-6e5116097942)
- [Mac](https://www.howtogeek.com/684025/how-to-type-emoji-on-your-mac-with-a-keyboard-shortcut/)
- Linux varies per distribution. If you run Linux you're probably capable of finding out how :)
## Problems
ChattyPub is very young and you're sure to run into problems. Feel free to contact `@Karl Moubarak`, `@andré` or `@heerko` at https://chat.hackersanddesigners.nl/
Below are some things that we know of, and are working on:
- :emoji: not working...

15661
front/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

6
front/src/components/Content/Message.vue
View file

@ -17,7 +17,7 @@
</span>
</div>
<div class="reactions ui">
<span v-for="reaction in reactions" :key="reaction">
<span v-for="reaction in reactions" :key="reaction" :title="reaction">
{{ reaction }}
</span>
</div>
@ -126,6 +126,10 @@ export default {
display: none;
}
.reactions span {
pointer-events: initial;
}
.message-data {
display: flex;
border-bottom: 1px solid #666;

19
front/src/components/Rules/Rule.vue
View file

@ -4,7 +4,7 @@
>{{ contentFiltered }}
</pre>
<span v-else-if="rule.type === 'font'">
<pre>
<pre :style="rules">
@font-face {
font-family: "{{ font.family }}";
src: "{{ font.src }}" format({{ "font.format" }});
@ -85,10 +85,11 @@ export default {
bottom: -0.5em;
left: 50%;
transform: translateX(-50%);
padding: 0 10px;
padding: 5px 10px;
/* border: 1px solid white; */
font-family: initial;
font-size: 1rem;
font-family: sans-serif;
font-size: 0.8rem;
box-shadow: 0 0 5px 5px rgba(255, 255, 0, 0.7);
}
.rule.type-font:after {
@ -98,17 +99,19 @@ export default {
.rule.type-font .instructions {
display: none;
position: absolute;
top: 0;
left: 0;
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;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.9);
color: #000;
border-radius: 10px;
box-shadow: 0 0 5px 5px white;
}
.rule.type-font:hover .instructions {

5
front/src/components/Rules/Styles.vue
View file

@ -1,3 +1,8 @@
<template>
<template></template>
<!-- placeholder for styles component -->
</template>
<script>
import { mapState } from "vuex";
import emoji from "../../mixins/emoji";

2
front/src/views/Home.vue
View file

@ -25,7 +25,7 @@
Show chat message data</label
>
<p class="notice">
Regrettably support for
Regrettably support for setting page size, page breaks etc. using
<a href="https://caniuse.com/css-paged-media">@page</a> is very poor
in most browsers. Use MS Edge, Opera or Google Chrome for best
results when printing or creating PDFs.