diff --git a/front/docs/CSS.md b/front/docs/CSS.md index 0fb78cb..db90071 100644 --- a/front/docs/CSS.md +++ b/front/docs/CSS.md @@ -1,12 +1,22 @@ # 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) + - [About formatting](#about-formatting) + - [Advanced CSS](#advanced-css) +- [Uploading fonts](#uploading-fonts) - [Print settings](#print-settings) -- [Typing Emoji](#typing-emoji) + - [Page breaks](#page-breaks) +- [Common CSS properties](#properties) + - [Backgrounds and borders](#backgrounds) + - [Color](#color) + - [Box model](#box-model) + - [Fonts](#fonts) + - [Text](#text) + - [Transforms](#transforms) --- @@ -14,13 +24,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.[1](#footnote1) 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.[1](#footnote1) 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. --- @@ -28,7 +38,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." @@ -85,9 +95,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 πŸ“ { @@ -97,9 +107,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 @@ -111,7 +121,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 { @@ -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, `@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: ``` @@ -136,6 +146,14 @@ 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 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. + +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! + ## Print settings To set the paper size we can use the special selector `@page`. The following snippet set the page size to A5. @@ -146,13 +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 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 also. +```css +@page { + size: landscape; +} +``` -It may be necessary to use the methods described under [Advanced CSS](#advanced-css) above to enter these rules. +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. -## List of common and handy CSS properties +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; +} +``` + +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 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. @@ -194,15 +238,13 @@ font-family: fantasy; ``` It is also possible to specify an exact font name, but it will only be used if it is actually available on your system. -For example following statement will try to use Helvetica if available, but will fallback on a generic sans-serif font if not. +For example following statement will try to use Helvetica if available, but will fallback on a generic sans-serif font if not. (Note the quotes around the font name). ```css font-family: "Helvetica Neue", sans-serif; ``` -(Note the quotes around the font name) - -We have not yet implemented a way to upload and use fonts. Working on it! +Also see the section on uploading fonts below. - [font-size](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) - The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative units, such as em, ex, and so forth. - [font-style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) - The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family. @@ -217,6 +259,7 @@ We have not yet implemented a way to upload and use fonts. Working on it! - [white-space](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) - The white-space CSS property sets how white space inside an element is handled. - [word-break](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) - The word-break CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box. - [word-spacing](https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing) - The word-spacing CSS property sets the length of space between words and between tags. +- [text-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) - The text-shadow CSS property adds shadows to text. ### Transforms @@ -224,10 +267,4 @@ We have not yet implemented a way to upload and use fonts. Working on it! - [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 :) - 1: 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 diff --git a/front/docs/Chattypub.md b/front/docs/Chattypub.md new file mode 100644 index 0000000..414acff --- /dev/null +++ b/front/docs/Chattypub.md @@ -0,0 +1,90 @@ +# ChattyPub + +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.. + +What differentiates Zulip from most messaging platforms is the way streams are sub-threaded. Zulip introduces the concept of "Topics", which, in the plainest terms, means that messages have subjects. When sending a message to a stream in Zulip, you can also specify the topic of the message and the stream automatically filters messages by their shared topics. If your message's topic doesn't exist yet, it will be created when you send your message. + +Zulip allows you to react to messages using emoji's as well. We will make heavy use of emojis in ChattyPub. + +There are several ways to engage with Zulip, including a web-client, a desktop app, and a mobile app. + +## Using ChattyPub + +http://chatty-pub.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 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](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. +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](/docs/CSS). If you are comfortable with CSS, you can skip to the part of the document that describes [how CSS is used in ChattyPub](/docs/CSS#css-in-chattypub). + +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 original message you quoted will inherit the styles defined for that emoji. + +Keep in mind that you can edit your own messages! So if you make a mistake (forgetting the semi-colon at the end of a statement is a common one), roll over your message and click the little pen at the top righthand side of the message. + +### 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. + +## 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... diff --git a/front/docs/Workshop.md b/front/docs/Workshop.md index f182cf5..3ffc90e 100644 --- a/front/docs/Workshop.md +++ b/front/docs/Workshop.md @@ -34,64 +34,7 @@ Texts, notes, chats, images, and screenshots will make great material for our wo ## How It Works -### 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.. - -What differentiates Zulip from most messaging platforms is the way streams are sub-threaded. Zulip introduces the concept of "Topics", which, in the plainest terms, means that messages have subjects. When sending a message to a stream in Zulip, you can also specify the topic of the message and the stream automatically filters messages by their shared topics. If your message's topic doesn't exist yet, it will be created when you send your message. - -Zulip allows you to react to messages using emoji's as well. We will make heavy use of emojis during this workshop. - -There are several ways to engage with Zulip, including a web-client, a desktop app, and a mobile app. - -### ChattyPub - -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-`. - - Ensure that the stream is public. -2. Go to [ChattyPub](https://chattypub.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: - - 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. -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. - -Keep in mind that you can edit your own messages! So if you make a mistake (forgetting the semi-colon at the end of a statement is a common one), roll over your message and click the little pen at the top righthand side of the message. - -### Printing - -TBD - +For an overview of how ChattyPub works with Zulip, go [here](/docs/Chattypub). ## Workshop The workshop is split over two sessions (over two days) of 4 hours each. @@ -103,24 +46,36 @@ _Opening Session: Introductions & first encounters with ChattyPub_ - Introduction to ChattyPub (Karl). - Introduction to CSS (Heerko). - How it all comes together (emojis ;])(Karl) -- Experimenting with ChattyPub! ( 2 hrs ) [How are people going to do this asynchronously? it needs maybe more direction and steps from here]+1 - - all levels of technical knowledge should be accommodated - - general knowledge and detailed instructions about CSS can be found [here](https://github.com/hackersanddesigners/chatty-pub/blob/master/front/docs/CSS.md) - - it's reccommended to group together participants with different levels of experience with CSS -- Brainstorm Session (1 hr) [also for the brainstorm it would be nice to add some suggestions for how to do this if you are not in Amsterdam and maybe not even togeter in a room.] - - in groups of 2-3, participants brainstorm publications they will make during the main session [Is this brainstorm about content? or about the negotiation process for the layout? can we come up with a format for the brainstorm or some questions as an aid?] - - If you are planning to print your publication, take into account the printing limitations of your home printer or local print shop [take into account in what way? regarding the format? will i need to adjust something in the css? or in regards to bw/color? ] +- Experimenting with ChattyPub! ( 2 hrs ) + - participants with different levels of experience of CSS are grouped together + - each group follows [these instructions](/docs/Chattypub#content) to make one publication in ChattyPub + - detailed instructions about CSS can be found [here](/docs/CSS) +- Brainstorm Session (1 hr) + - in groups of 2-3, participants brainstorm publications they will make during the main session + - The goal is to document together, in print, parts of the summer academy. + - What have you been up to this last week? + - What did you make? What material did you collect / produce? + - How will you negotiate this design process? + - Are roles divided and then switched? + - If you are planning to print your publication, take into account the printing limitations of your home printer or local print shop. + - Print settings such as the page size and orientation can all be configure with CSS. + - If participants are joining remotely, it's good that they are paired together. _Main Session: Chat => Print_ - Making publications ( 2 hrs ) - - Groups work on the publications planned in the previous session [how? will there be channels prepared? are people making their own channels?] - - Organizers are available to help where needed [who are the organizers? in vienna and pittsburgh people will be online on their own.. how do they prepare for that?] + - Groups work on the publications planned in the previous session + - Each group makes a stream on Zulip for the publiction + - They create chapters for their contents + - They create a "rules" topic for their styles + - Organizers are available to help where needed + - At least one or two people per node should be able to help with CSS. + - Karl and Heerko will be available if bugs / errors occur. - Printing Publications ( 1 hr ) - A printer is required in the space (or easily accessible) - Accommodating for different paper sizes is an added bonus - Binding could be fun too -- Sharing outcomes and reflections ( 1 hr ) [add link and time in different time zones] +- Sharing outcomes and reflections ( 1 hr ) - Round of publications - Reflection on process - Feedback on ChattyPub diff --git a/front/package-lock.json b/front/package-lock.json index 2bf008e..70ae46d 100644 --- a/front/package-lock.json +++ b/front/package-lock.json @@ -1,7 +1,7 @@ { "name": "Chattypub", "version": "0.1.0", - "lockfileVersion": 2, + "lockfileVersion": 1, "requires": true, "packages": { "": { @@ -29,6 +29,7 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", + "github-markdown-css": "^4.0.0", "raw-loader": "^4.0.2", "zulip-js": "^2.0.9" } @@ -2549,6 +2550,7 @@ "thread-loader": "^2.1.3", "url-loader": "^2.2.0", "vue-loader": "^15.9.2", + "vue-loader-v16": "npm:vue-loader@^16.1.0", "vue-style-loader": "^4.1.2", "webpack": "^4.0.0", "webpack-bundle-analyzer": "^3.8.0", @@ -2804,6 +2806,7 @@ "lru-cache": "^4.1.2", "merge-source-map": "^1.1.0", "postcss-selector-parser": "^6.0.2", + "prettier": "^1.18.2", "source-map": "~0.6.1", "vue-template-es2015-compiler": "^1.9.0" }, @@ -7508,6 +7511,15 @@ "assert-plus": "^1.0.0" } }, + "node_modules/github-markdown-css": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-4.0.0.tgz", + "integrity": "sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==", + "dev": true, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -14726,8 +14738,10 @@ "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "dev": true, "dependencies": { + "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0" + "neo-async": "^2.5.0", + "watchpack-chokidar2": "^2.0.1" }, "optionalDependencies": { "chokidar": "^3.4.1", @@ -14804,6 +14818,7 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, + "hasInstallScript": true, "optional": true, "os": [ "darwin" @@ -15096,6 +15111,7 @@ "anymatch": "^2.0.0", "async-each": "^1.0.1", "braces": "^2.3.2", + "fsevents": "^1.2.7", "glob-parent": "^3.1.0", "inherits": "^2.0.3", "is-binary-path": "^1.0.0", @@ -15132,6 +15148,7 @@ "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "dev": true, + "hasInstallScript": true, "optional": true, "os": [ "darwin" @@ -17730,8 +17747,7 @@ "version": "4.5.13", "resolved": "https://registry.npmjs.org/@vue/cli-plugin-vuex/-/cli-plugin-vuex-4.5.13.tgz", "integrity": "sha512-I1S9wZC7iI0Wn8kw8Zh+A2Qkf6s1M6vTGBkx8boXjuzfwEEyEHRxadsVCecZc8Mkpydo0nykj+MyYF96TKFuVA==", - "dev": true, - "requires": {} + "dev": true }, "@vue/cli-service": { "version": "4.5.13", @@ -17812,6 +17828,17 @@ "color-convert": "^2.0.1" } }, + "chalk": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", + "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", + "dev": true, + "optional": true, + "requires": { + "ansi-styles": "^4.1.0", + "supports-color": "^7.1.0" + } + }, "cliui": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz", @@ -17838,6 +17865,25 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "has-flag": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", + "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", + "dev": true, + "optional": true + }, + "loader-utils": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", + "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", + "dev": true, + "optional": true, + "requires": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + } + }, "ssri": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz", @@ -17847,6 +17893,28 @@ "minipass": "^3.1.1" } }, + "supports-color": { + "version": "7.2.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", + "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", + "dev": true, + "optional": true, + "requires": { + "has-flag": "^4.0.0" + } + }, + "vue-loader-v16": { + "version": "npm:vue-loader@16.3.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.0.tgz", + "integrity": "sha512-UDgni/tUVSdwHuQo+vuBmEgamWx88SuSlEb5fgdvHrlJSPB9qMBRF6W7bfPWSqDns425Gt1wxAUif+f+h/rWjg==", + "dev": true, + "optional": true, + "requires": { + "chalk": "^4.1.0", + "hash-sum": "^2.0.0", + "loader-utils": "^2.0.0" + } + }, "wrap-ansi": { "version": "6.2.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz", @@ -20336,14 +20404,6 @@ "assert-plus": "^1.0.0" } }, - "de-indent": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz", - "integrity": "sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=", - "dev": true, - "optional": true, - "peer": true - }, "debug": { "version": "4.3.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", @@ -21987,6 +22047,12 @@ "assert-plus": "^1.0.0" } }, + "github-markdown-css": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/github-markdown-css/-/github-markdown-css-4.0.0.tgz", + "integrity": "sha512-mH0bcIKv4XAN0mQVokfTdKo2OD5K8WJE9+lbMdM32/q0Ie5tXgVN/2o+zvToRMxSTUuiTRcLg5hzkFfOyBYreg==", + "dev": true + }, "glob": { "version": "7.1.7", "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz", @@ -26938,15 +27004,6 @@ "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM=", "dev": true }, - "string_decoder": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", - "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", - "dev": true, - "requires": { - "safe-buffer": "~5.1.0" - } - }, "string-collapse-leading-whitespace": { "version": "5.1.0", "resolved": "https://registry.npmjs.org/string-collapse-leading-whitespace/-/string-collapse-leading-whitespace-5.1.0.tgz", @@ -27043,6 +27100,15 @@ "define-properties": "^1.1.3" } }, + "string_decoder": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", + "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==", + "dev": true, + "requires": { + "safe-buffer": "~5.1.0" + } + }, "strip-ansi": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", @@ -27948,87 +28014,6 @@ } } }, - "vue-loader-v16": { - "version": "npm:vue-loader@16.3.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-16.3.0.tgz", - "integrity": "sha512-UDgni/tUVSdwHuQo+vuBmEgamWx88SuSlEb5fgdvHrlJSPB9qMBRF6W7bfPWSqDns425Gt1wxAUif+f+h/rWjg==", - "dev": true, - "optional": true, - "requires": { - "chalk": "^4.1.0", - "hash-sum": "^2.0.0", - "loader-utils": "^2.0.0" - }, - "dependencies": { - "ansi-styles": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", - "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", - "dev": true, - "optional": true, - "requires": { - "color-convert": "^2.0.1" - } - }, - "chalk": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.1.tgz", - "integrity": "sha512-diHzdDKxcU+bAsUboHLPEDQiw0qEe0qd7SYUn3HgcFlWgbDcfLGswOHYeGrHKzG9z6UYf01d9VFMfZxPM1xZSg==", - "dev": true, - "optional": true, - "requires": { - "ansi-styles": "^4.1.0", - "supports-color": "^7.1.0" - } - }, - "color-convert": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", - "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", - "dev": true, - "optional": true, - "requires": { - "color-name": "~1.1.4" - } - }, - "color-name": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", - "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", - "dev": true, - "optional": true - }, - "has-flag": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz", - "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", - "dev": true, - "optional": true - }, - "loader-utils": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz", - "integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==", - "dev": true, - "optional": true, - "requires": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - } - }, - "supports-color": { - "version": "7.2.0", - "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", - "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==", - "dev": true, - "optional": true, - "requires": { - "has-flag": "^4.0.0" - } - } - } - }, "vue-router": { "version": "4.0.8", "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.8.tgz", @@ -28055,18 +28040,6 @@ } } }, - "vue-template-compiler": { - "version": "2.6.14", - "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.14.tgz", - "integrity": "sha512-ODQS1SyMbjKoO1JBJZojSw6FE4qnh9rIpUZn2EUT86FKizx9uH5z6uXiIrm4/Nb/gwxTi/o17ZDEGWAXHvtC7g==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "de-indent": "^1.0.2", - "he": "^1.1.0" - } - }, "vue-template-es2015-compiler": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz", @@ -28884,4 +28857,4 @@ } } } -} +} \ No newline at end of file diff --git a/front/package.json b/front/package.json index adb4026..e5e9e64 100644 --- a/front/package.json +++ b/front/package.json @@ -29,6 +29,7 @@ "babel-eslint": "^10.1.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^7.0.0", + "github-markdown-css": "^4.0.0", "raw-loader": "^4.0.2", "zulip-js": "^2.0.9" }, diff --git a/front/src/App.vue b/front/src/App.vue index d1da945..e6e5721 100644 --- a/front/src/App.vue +++ b/front/src/App.vue @@ -40,14 +40,22 @@ export default { this.$store.commit("setMobile", this.checkIfMobile()); }); - this.getStreams(); + this.$router.beforeEach(async () => { + if (!this.zulipClient || this.streams.length == 0) { + await this.getStreams() + } + }) - this.$router.afterEach((to) => { - this.$store.commit("setTopics", []); - this.$store.commit("setRules", []); - this.$store.commit("setCurStream", to.path.replace("/", "")); - if (this.currentStream != "" && this.streams.find(s => s.name == this.currentStream)) { - this.setUpDoc(this.currentStream); + this.$router.afterEach((to, from) => { + if (to.path !== from.path) { + this.$store.commit("setTopics", []); + this.$store.commit("setRules", []); + this.$store.commit("setCurStream", to.path.replace("/", "")); + if (this.currentStream != "" + && this.streams.find(s => s.name == this.currentStream) + ) { + this.setUpDoc(this.currentStream); + } } }); }, @@ -56,16 +64,25 @@ export default { checkIfMobile: () => window.innerWidth < 700, getStreams() { - api.zulip.init().then((client) => { - this.zulipClient = client; - api.zulip.getStreams(client).then((result) => { - this.$store.commit( - "setStreams", - result.streams.filter((s) => s.name.startsWith(this.pubStr)) - ); - }); - api.zulip.listen(this.zulipClient, this.eventHandler); - }); + return new Promise(resolve => { + api.zulip.init().then((client) => { + this.zulipClient = client; + api.zulip.getStreams(client).then(async (streams) => { + for (let stream of streams) { + stream.topics = await api.zulip.getTopics(client, stream.stream_id) + } + this.$store.commit( + "setStreams", + streams.filter((s) => ( + s.topics.find(t => t.name == 'rules') || + s.name.startsWith(this.pubStr) + )) + ); + resolve() + }); + api.zulip.listen(this.zulipClient, this.eventHandler); + }); + }) }, setUpDoc(stream) { @@ -94,12 +111,12 @@ export default { switch (event.type) { case "message": switch (event.message.subject) { - case "content": - this.$store.commit("addMessage", event.message); - break; case "rules": this.$store.commit("addRule", event.message); break; + default: + this.$store.commit("addMessage", event.message); + break; } break; diff --git a/front/src/api/zulip/index.js b/front/src/api/zulip/index.js index 82fc02e..3369e59 100644 --- a/front/src/api/zulip/index.js +++ b/front/src/api/zulip/index.js @@ -20,7 +20,18 @@ const client .streams .retrieve() - .then(result => resolve(result)) + .then(result => resolve(result.streams)) + .catch(error => reject(error)) + }) + ), + + getTopics = (client, stream) => ( new + Promise((resolve, reject) => { + client + .streams + .topics + .retrieve({ stream_id: stream }) + .then(result => resolve(result.topics)) .catch(error => reject(error)) }) ), @@ -31,7 +42,7 @@ const .messages .retrieve(params || { anchor: "newest", - num_before: 100, + num_before: 1000, num_after: 0, // apply_markdown: false, narrow: [ @@ -50,7 +61,7 @@ const .messages .retrieve(params || { anchor: "newest", - num_before: 100, + num_before: 1000, num_after: 0, // apply_markdown: false, narrow: [{ operator: "stream", operand: stream }], @@ -115,6 +126,7 @@ export default { init, config, getStreams, + getTopics, getMsgs, getAllMsgs, listen, diff --git a/front/src/components/Content/Chapter.vue b/front/src/components/Content/Chapter.vue index 45ecbfd..964f231 100644 --- a/front/src/components/Content/Chapter.vue +++ b/front/src/components/Content/Chapter.vue @@ -1,17 +1,16 @@ @@ -24,23 +23,13 @@ export default { Message, }, data() { - return { - desiresContent: false, - }; + return {}; }, - props: ["topic", "print", "show_message_data"], + props: ["topic", "show_message_data"], computed: { - toggleSymbol() { - let r = ""; - if (!this.print) { - r = this.desiresContent ? "β–Ό " : "β–Ί "; - } - return r; - }, messagesToShow() { - return this.topic.messages - .filter(m => !m.responseTo) - } + return this.topic.messages.filter((m) => !m.responseTo); + }, }, }; diff --git a/front/src/components/Content/Message.vue b/front/src/components/Content/Message.vue index d578d37..a58b8d5 100644 --- a/front/src/components/Content/Message.vue +++ b/front/src/components/Content/Message.vue @@ -17,9 +17,9 @@
- +
@@ -61,14 +61,14 @@ export default { m.responseTo.sender_id == this.message.sender_id && this.message.content.includes(m.responseTo.quote) ); - console.log(c, referrers); + // console.log(c, referrers); referrers.forEach((m) => { const classes = m.reactions.map((r) => "u" + r.emoji_code).join(" "); c = c.replace( m.responseTo.quote, `${m.responseTo.quote}` ); - console.log(c); + // console.log(c); }); return c; }, @@ -83,7 +83,9 @@ export default { ); }, classes() { - return this.message.reactions.map((r) => "u" + r.emoji_code); + return this.message.reactions.map( + (r) => r.emoji_code + " u" + r.emoji_code + ); }, time() { var ts = this.message.timestamp; @@ -99,12 +101,12 @@ export default { \ No newline at end of file diff --git a/front/src/components/Content/index.vue b/front/src/components/Content/index.vue index fbb254e..bc72fca 100644 --- a/front/src/components/Content/index.vue +++ b/front/src/components/Content/index.vue @@ -1,9 +1,21 @@