Merge pull request #32 from raujonas/feature/markup

Introduce markup

README.md

@@ -5,22 +5,24 @@
 ![GitHub last commit](https://img.shields.io/github/last-commit/raujonas/executor)
 ![GitHub Repo stars](https://img.shields.io/github/stars/raujonas/executor?style=social)
 
-# Executor - Gnome Shell Extension
+# **Executor - Gnome Shell Extension**
 <img src="resources/icons/icon.png" alt="result" width="70">
 
 Execute multiple shell commands periodically with separate intervals and display the output in gnome top bar.
 
 <img src="docs/result.png" alt="result" width="967">
 
-***
+<br/><br/>
 
-## Installation
+# **Installation**
 
-### One click installation
+## **One click installation**
 
 [<img src="https://raw.githubusercontent.com/andyholmes/gnome-shell-extensions-badge/master/get-it-on-ego.svg?sanitize=true" alt="Get it on GNOME Extensions" height="100" width="220">](https://extensions.gnome.org/extension/2932/executor/)
 
-### Manual installation
+
+
+## **Manual installation**
 
 - Download the file `executor@raujonas.github.io` <a href="https://github.com/raujonas/executor/releases/latest">from the latest release</a>  and extract the content to `~/.local/share/gnome-shell/extensions/executor@raujonas.github.io`.
 
@@ -30,26 +32,29 @@ Execute multiple shell commands periodically with separate intervals and display
     ```
 With both options you have to restart gnome shell afterwards (`Alt + F2` and then enter `r`).
 
-***
+<br/><br/>
 
-## Configuration
+# **Configuration**
 
-### Basic
+## **Basic**
 
 The commands and the interval for each command can be set for each location (left, center, right) separately in the settings view.
 
 <img src="docs/settings.png" alt="settings" width="500">
 
-### Use of custom css
+<br/><br/>
+
+## **Use of custom css**
+
+It is possible to use custom css to style the output of your commands dynamically. There are two ways to do this:
+- **Preferred option**: Create the file `~/.config/executor@raujonas.github.io/custom.css` and add your custom css there. This file will be imported into the extension. **This way your custom css will NOT be overwritten by extension updates**. You can use the following commands to create the file:
 
-Since version 6 it is possible to use custom css to style the output of your commands dynamically with css. There are two ways to do this:
-- (Preferred option) Create the file `~/.config/executor@raujonas.github.io/custom.css` and add your custom css there. This file will be imported into the extension. **This way your custom css will NOT be overwritten by extension updates**. You can use the following commands to create the file:
     ```console
     mkdir /home/$USER/.config/executor@raujonas.github.io
 
     touch /home/$USER/.config/executor@raujonas.github.io/custom.css
     ```
-- (Non durable option) You can add your custom css in `~/.local/share/gnome-shell/extensions/executor@raujonas.github.io/custom.css`. **Your custom css will be overwritten by extension updates in this case**. Make sure to save it somewhere before updating.
+- **Non durable option**: You can add your custom css in `~/.local/share/gnome-shell/extensions/executor@raujonas.github.io/custom.css`. **Your custom css will be overwritten by extension updates in this case**. Make sure to save it somewhere before updating.
 
 Example `custom.css` file:
 
@@ -78,7 +83,7 @@ Example `custom.css` file:
 
 **Note**: After making changes in your css you have to restart your shell (`Alt + F2` and then enter `r`).
 
-**Usage**: To use the css dynamically in your commands, you can add it with the following syntax to your output: **`<executor.css.red>`**. This will add the specified css class to your output, in this case `red`.
+**Usage**: To use the css classes dynamically in your commands, you can add it with the following syntax to your output: **`<executor.css.red>`**. This will add the specified css class to your output, in this case `red`.
 
 **Example**: The following command queries the current timestamp. If the output is a round number it should have the color red, if not then green.
 
@@ -96,38 +101,74 @@ You can also combine multiple css classes:
 
 <img src="docs/custom-css-multiple.png" alt="settings" width="700">
 
-***
+<br/><br/>
+
+## **Use of markup**
+
+**Usage**: To use markup there's another settings **`<executor.markup.true>`** which has to be included somewhere in the output to activate markup. 
+
+**Example**: The following command is an example for using markup with different colors and some italic text, all inside one command. You can find other attributes like `font_family` or `size` [here](https://developer.gnome.org/pygtk/stable/pango-markup-language.html).
+
+```
+echo "<executor.markup.true> <span foreground='blue'>Blue text</span> is <i>cool</i>! <span foreground='red'>Red text</span> is cool too"
+```
+This produces the following output:
+
+<img src="docs/markup.png" alt="settings">
+
+**Note**: Due to a [bug](https://gitlab.gnome.org/GNOME/mutter/-/issues/1324) in ClutterText there is an empty space in front of the first `<span>` tag required 
+
+<br/><br/>
 
-## Export and import settings
+## **Combine css and markup**
+
+Combination of css and markup is also possible. In this case the setting for markup **`<executor.markup.true>`**  must be located after all css settings. Here is an example:
+
+```
+echo " <span font_family='monospace' foreground='blue'>Blue text</span> is <i>cool</i>! <span foreground='red'>Red text</span><executor.css.green><executor.markup.true> is cool too"
+```
+
+This produces the following output:
+
+<img src="docs/css-and-markup.png" alt="settings">
+
+<br/><br/>
+
+## **More complex scripts**
+
+If you want to execute more complex scripts it might be helpful to store them outside of the extension and create the final output there. 
+
+[Here](https://github.com/raujonas/executor/issues/31#issue-902528380) is a very good example of how you can achieve this. With this solution it is also possible to create a rotating output of multiple different commands.
+
+<br/><br/>
+
+# **Export and import settings**
 
 If you want to export and import all settings at once you can use dconf.
 
 Export: `dconf dump /org/gnome/shell/extensions/executor/ > executor-settings.dconf`
 
 Import: `dconf load /org/gnome/shell/extensions/executor/ < executor-settings.dconf`
 
-***
+<br/><br/>
 
-## Use cases
+# **Use cases**
 Let me know what your use cases are and I will add them here.
 
 I for example use this extension for hardware monitoring:
 <img src="docs/use-case-1.png" alt="settings" width="500">
 
-***
+<br/><br/>
 
-## Debugging
+# **Debugging**
 
 If you have no output or other issues you can have a look into the log:
 ```console
 journalctl /usr/bin/gnome-shell -f
 ``` 
 
-***
-
-## Development
+<br/><br/>
 
-Please feel free to contribute and suggest ideas or report bugs.
+# **Development**
 
-Special thanks for testing and your valuable input and ideas to make this extensions even better:\
-[@mrsnl](https://github.com/mrsnl) [@peterrus](https://github.com/peterrus)
+Please feel free to contribute and suggest ideas or report bugs!

extension.js

@@ -331,10 +331,20 @@ async function setOutput(location, index) {
 
     executorSettingsArray.forEach(setting => {
         location.commandsOutput[index] = location.commandsOutput[index].replace(setting, "");
+    })
+
+    executorSettingsArray.forEach(setting => {
         let settingDivided = setting.substring(1, setting.length - 1).split(".");
+
         if (settingDivided[1] == "css") {
             location.output[index].add_style_class_name(settingDivided[2])
         }
+
+        if (settingDivided[1] == "markup") {
+            location.output[index].get_clutter_text().set_text(location.commandsOutput[index]);
+            location.output[index].get_clutter_text().set_use_markup(true);
+            location.output[index].set_use_markup(true);
+        }
     })
 
     location.output[index].set_text(location.commandsOutput[index]);

metadata.json

@@ -9,5 +9,5 @@
     "40"
   ],
   "url": "https://github.com/raujonas/executor",
-  "version": 11
+  "version": 12
 }