Apply automatic changes

chore: update readme template
2026-09-12 01:23:31 +00:00 · 2024-05-15 06:25:08 +00:00 · 2024-05-11 19:58:24 +00:00 · 2024-05-11 21:57:26 +02:00 · 2024-05-11 13:10:01 +02:00 · 2024-05-11 13:05:53 +02:00
100 changed files with 1372 additions and 18456 deletions
@@ -1,8 +1,4 @@
 node_modules
-backend/coverage
-backend/.nyc_output
 build
-.DS_Store
-test.dot
-test.png
-.awcache
+.bundle
+_site
@@ -1,29 +0,0 @@
-language: node_js
-
-services:
-  - docker
-
-cache:
-  directories:
-  - node_modules
-  - $HOME/.cache/electron
-  - $HOME/.cache/electron-builder
-  - $HOME/.npm/_prebuilds
-
-node_js:
-  - "10"
-
-os:
-  - linux
-  - osx
-
-install:
-  - npm install
-
-script:
-  - npm run build
-  - npm run test
-  - if [[ "$TRAVIS_TAG" != "" ]]; then npm run prepare-release; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package-with-docker  -- linux; fi
-  - if [[ "$TRAVIS_OS_NAME" == "osx" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package -- mac; fi
-  - if [[ "$TRAVIS_OS_NAME" == "linux" ]] && [[ "$TRAVIS_TAG" != "" ]]; then npm run package-with-docker -- win; fi
@@ -0,0 +1 @@
+mqtt-explorer.com
@@ -0,0 +1,150 @@
+[back](./)
+
+# 0.4.0-beta1
+
+  - Fix Copy & Paste
+  - Allow setting QoS for subscriptions
+  - Show Meassge ID (for QoS > 0)
+  - Improve JSON editor
+  - Allow multiple connections to the same broker from MQTT Explorer (random client ids)
+  - Remove recursive topic removal limit
+  - Retain focus on publish input fields when publishing
+  - Fix editor layout issue
+  - Fix password input
+  - Fix charts where json properties contain periods
+  - Fix publish sidebar width
+  - Fix plot range selection
+  - Update Electron
+
+A downgrade to a version prior to 0.4.0 is due to a new configuration format not possible.
+
+
+# 0.3.5
+  - Add keyboard support
+    - Navigate with arrow keys and tab return and escape
+    - Delete topic topics with the delete key
+  - Add time range options to chart panel
+  - Add "Clear Data" option to charts
+  - Add support for client certificates
+  - Add support for SNI (encryption-related)
+  - Make connection profile list scrollable
+  - Improve the browsability of previous messages
+  - various small fixes
+
+# 0.3.2
+  - Ubuntu performance fix
+
+# 0.3.1
+  - Ubuntu bugfix release
+  - Add wayland support (for snap builds)
+
+# 0.3.0
+
+  - Add functionality to plot JSON data
+  - Add chart panel, containing multiple plots (bottom panel)
+  - Chart panel and settings will be restored on restart
+  - Charts can be paused
+  - Panels can be hidden/overlap others completely
+  - Plot range can be customized
+  - Plot interpolation can be customized
+  - Migrated public broker from iot.eclipse.org to mqtt.eclipse.org
+  - Fix unrounded time intervals in the message history
+  - Fix weird plot curve interpolations
+
+# 0.2.6
+
+  - Add a pause function
+  - Add light / dark themes
+  - Add localized date formatting
+  - Allow pinning self-signed-certificates
+  - Allow copying values from the message history
+  - Buffer changes while in pause mode
+  - Improve layout
+  - Improve numeric plot layout and smooth curves
+  - Improve scroll behavior message history
+  - Improve performance and memory footprint by ~30%
+  - Improve text selection behavior (Ctrl+A) for value preview and history
+  - Immediately apply changed settings
+  - Fix memory leak on search and disconnect - Deactivate auto-update for Windows portable releases.
+  - Fix OSX code-signing and auto-update
+
+# 0.2.3
+
+  - Highlight differences in the last received message with a "diff" view
+  - Magnify app content with "Ctrl +", "Ctrl -", "Ctrl 0"
+  - Make user interactions more predictable by removing "select topic on mouse over"
+  - Add "Quick Preview" setting, to enable topic selection on mouse over
+  - Add JSON formatter
+  - Show error when connection to the mqtt broker is lost
+  - Fix bug where mqtt explorer resets the tree after a reconnect
+  - Fix MQTT-Client id
+
+# 0.2.1, 0.2.2
+  - Release for Mac App Store
+  - Release for Microsoft Store
+
+# 0.2.0
+
+  - Support multiple connection profiles
+  - Support custom subscriptions
+  - Delete Topics recursively
+  - Add option to disable activity indicator
+  - Add connection health indicator
+  - Remember settings after exiting the app
+  - Fixed ws:// connections
+  - Fixed exception after failed connection
+  - Rework topic selection indicator
+  - Fix scrollbar (draggable scroll handle)
+  - Improve look & feel
+  - Reduce binary size by ~60%
+
+# 0.1.3
+
+  - Add search function
+  - Fix a crash on windows
+  - Greatly increase performance
+  - Show broker statistics (Settings sidebar)
+  - Show more content in topic preview
+  - Make right sidebar resizable
+  - Fixed minor visual imperfections.
+
+# 0.1.0
+
+  - Improved error handling  
+  - Fix plot
+
+# 0.0.9
+
+  - Plot topics in a graph 
+  - Delete retained topics with click 
+  - Show message retention and QoS
+  - Set message retain and QoS
+  - Subscribed to broker statistics: $SYS topic
+  - Improved error handling  
+  - Fixed Copy&Paste 
+  - Crash on launch 
+
+# 0.0.7
+
+  - Fix auto-updater fallback
+  - Add debugging capability
+  - Show receive date next to message value
+  - Fix certificate validation switch
+
+# 0.0.6
+
+  - Fix issue with mqtt authentication
+
+# 0.0.5
+  - Fix performance bottleneck
+  - Fix missing icons
+
+# 0.0.3
+  - Add splash screen
+
+# 0.0.2
+  - Fixed bugs
+  - Added bugs
+
+# 0.0.1
+  - Initial Release
@@ -0,0 +1,2 @@
+source 'https://rubygems.org'
+gem 'github-pages', group: :jekyll_plugins
@@ -0,0 +1,248 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    activesupport (4.2.10)
+      i18n (~> 0.7)
+      minitest (~> 5.1)
+      thread_safe (~> 0.3, >= 0.3.4)
+      tzinfo (~> 1.1)
+    addressable (2.5.2)
+      public_suffix (>= 2.0.2, < 4.0)
+    coffee-script (2.4.1)
+      coffee-script-source
+      execjs
+    coffee-script-source (1.11.1)
+    colorator (1.1.0)
+    commonmarker (0.17.13)
+      ruby-enum (~> 0.5)
+    concurrent-ruby (1.1.5)
+    dnsruby (1.61.2)
+      addressable (~> 2.5)
+    em-websocket (0.5.1)
+      eventmachine (>= 0.12.9)
+      http_parser.rb (~> 0.6.0)
+    ethon (0.12.0)
+      ffi (>= 1.3.0)
+    eventmachine (1.2.7)
+    execjs (2.7.0)
+    faraday (0.15.4)
+      multipart-post (>= 1.2, < 3)
+    ffi (1.10.0)
+    forwardable-extended (2.6.0)
+    gemoji (3.0.0)
+    github-pages (197)
+      activesupport (= 4.2.10)
+      github-pages-health-check (= 1.16.1)
+      jekyll (= 3.7.4)
+      jekyll-avatar (= 0.6.0)
+      jekyll-coffeescript (= 1.1.1)
+      jekyll-commonmark-ghpages (= 0.1.5)
+      jekyll-default-layout (= 0.1.4)
+      jekyll-feed (= 0.11.0)
+      jekyll-gist (= 1.5.0)
+      jekyll-github-metadata (= 2.12.1)
+      jekyll-mentions (= 1.4.1)
+      jekyll-optional-front-matter (= 0.3.0)
+      jekyll-paginate (= 1.1.0)
+      jekyll-readme-index (= 0.2.0)
+      jekyll-redirect-from (= 0.14.0)
+      jekyll-relative-links (= 0.6.0)
+      jekyll-remote-theme (= 0.3.1)
+      jekyll-sass-converter (= 1.5.2)
+      jekyll-seo-tag (= 2.5.0)
+      jekyll-sitemap (= 1.2.0)
+      jekyll-swiss (= 0.4.0)
+      jekyll-theme-architect (= 0.1.1)
+      jekyll-theme-cayman (= 0.1.1)
+      jekyll-theme-dinky (= 0.1.1)
+      jekyll-theme-hacker (= 0.1.1)
+      jekyll-theme-leap-day (= 0.1.1)
+      jekyll-theme-merlot (= 0.1.1)
+      jekyll-theme-midnight (= 0.1.1)
+      jekyll-theme-minimal (= 0.1.1)
+      jekyll-theme-modernist (= 0.1.1)
+      jekyll-theme-primer (= 0.5.3)
+      jekyll-theme-slate (= 0.1.1)
+      jekyll-theme-tactile (= 0.1.1)
+      jekyll-theme-time-machine (= 0.1.1)
+      jekyll-titles-from-headings (= 0.5.1)
+      jemoji (= 0.10.2)
+      kramdown (= 1.17.0)
+      liquid (= 4.0.0)
+      listen (= 3.1.5)
+      mercenary (~> 0.3)
+      minima (= 2.5.0)
+      nokogiri (>= 1.8.5, < 2.0)
+      rouge (= 2.2.1)
+      terminal-table (~> 1.4)
+    github-pages-health-check (1.16.1)
+      addressable (~> 2.3)
+      dnsruby (~> 1.60)
+      octokit (~> 4.0)
+      public_suffix (~> 3.0)
+      typhoeus (~> 1.3)
+    html-pipeline (2.11.0)
+      activesupport (>= 2)
+      nokogiri (>= 1.4)
+    http_parser.rb (0.6.0)
+    i18n (0.9.5)
+      concurrent-ruby (~> 1.0)
+    jekyll (3.7.4)
+      addressable (~> 2.4)
+      colorator (~> 1.0)
+      em-websocket (~> 0.5)
+      i18n (~> 0.7)
+      jekyll-sass-converter (~> 1.0)
+      jekyll-watch (~> 2.0)
+      kramdown (~> 1.14)
+      liquid (~> 4.0)
+      mercenary (~> 0.3.3)
+      pathutil (~> 0.9)
+      rouge (>= 1.7, < 4)
+      safe_yaml (~> 1.0)
+    jekyll-avatar (0.6.0)
+      jekyll (~> 3.0)
+    jekyll-coffeescript (1.1.1)
+      coffee-script (~> 2.2)
+      coffee-script-source (~> 1.11.1)
+    jekyll-commonmark (1.3.1)
+      commonmarker (~> 0.14)
+      jekyll (>= 3.7, < 5.0)
+    jekyll-commonmark-ghpages (0.1.5)
+      commonmarker (~> 0.17.6)
+      jekyll-commonmark (~> 1)
+      rouge (~> 2)
+    jekyll-default-layout (0.1.4)
+      jekyll (~> 3.0)
+    jekyll-feed (0.11.0)
+      jekyll (~> 3.3)
+    jekyll-gist (1.5.0)
+      octokit (~> 4.2)
+    jekyll-github-metadata (2.12.1)
+      jekyll (~> 3.4)
+      octokit (~> 4.0, != 4.4.0)
+    jekyll-mentions (1.4.1)
+      html-pipeline (~> 2.3)
+      jekyll (~> 3.0)
+    jekyll-optional-front-matter (0.3.0)
+      jekyll (~> 3.0)
+    jekyll-paginate (1.1.0)
+    jekyll-readme-index (0.2.0)
+      jekyll (~> 3.0)
+    jekyll-redirect-from (0.14.0)
+      jekyll (~> 3.3)
+    jekyll-relative-links (0.6.0)
+      jekyll (~> 3.3)
+    jekyll-remote-theme (0.3.1)
+      jekyll (~> 3.5)
+      rubyzip (>= 1.2.1, < 3.0)
+    jekyll-sass-converter (1.5.2)
+      sass (~> 3.4)
+    jekyll-seo-tag (2.5.0)
+      jekyll (~> 3.3)
+    jekyll-sitemap (1.2.0)
+      jekyll (~> 3.3)
+    jekyll-swiss (0.4.0)
+    jekyll-theme-architect (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-cayman (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-dinky (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-hacker (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-leap-day (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-merlot (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-midnight (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-minimal (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-modernist (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-primer (0.5.3)
+      jekyll (~> 3.5)
+      jekyll-github-metadata (~> 2.9)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-slate (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-tactile (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-theme-time-machine (0.1.1)
+      jekyll (~> 3.5)
+      jekyll-seo-tag (~> 2.0)
+    jekyll-titles-from-headings (0.5.1)
+      jekyll (~> 3.3)
+    jekyll-watch (2.2.1)
+      listen (~> 3.0)
+    jemoji (0.10.2)
+      gemoji (~> 3.0)
+      html-pipeline (~> 2.2)
+      jekyll (~> 3.0)
+    kramdown (1.17.0)
+    liquid (4.0.0)
+    listen (3.1.5)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+      ruby_dep (~> 1.2)
+    mercenary (0.3.6)
+    mini_portile2 (2.4.0)
+    minima (2.5.0)
+      jekyll (~> 3.5)
+      jekyll-feed (~> 0.9)
+      jekyll-seo-tag (~> 2.1)
+    minitest (5.11.3)
+    multipart-post (2.0.0)
+    nokogiri (1.10.2)
+      mini_portile2 (~> 2.4.0)
+    octokit (4.14.0)
+      sawyer (~> 0.8.0, >= 0.5.3)
+    pathutil (0.16.2)
+      forwardable-extended (~> 2.6)
+    public_suffix (3.0.3)
+    rb-fsevent (0.10.3)
+    rb-inotify (0.10.0)
+      ffi (~> 1.0)
+    rouge (2.2.1)
+    ruby-enum (0.7.2)
+      i18n
+    ruby_dep (1.5.0)
+    rubyzip (1.2.2)
+    safe_yaml (1.0.5)
+    sass (3.7.4)
+      sass-listen (~> 4.0.0)
+    sass-listen (4.0.0)
+      rb-fsevent (~> 0.9, >= 0.9.4)
+      rb-inotify (~> 0.9, >= 0.9.7)
+    sawyer (0.8.1)
+      addressable (>= 2.3.5, < 2.6)
+      faraday (~> 0.8, < 1.0)
+    terminal-table (1.8.0)
+      unicode-display_width (~> 1.1, >= 1.1.1)
+    thread_safe (0.3.6)
+    typhoeus (1.3.1)
+      ethon (>= 0.9.0)
+    tzinfo (1.2.5)
+      thread_safe (~> 0.1)
+    unicode-display_width (1.5.0)
+
+PLATFORMS
+  ruby
+
+DEPENDENCIES
+  github-pages
+
+BUNDLED WITH
+   2.0.1
@@ -1,26 +1,135 @@
-# MQTT-Explorer
-[![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)
+<a href="#" onClick="a=window;a.location='ht'+'tps:'+'/'+'/pay'+'pal.me/'+'ThomasNordquist'"><img src="https://img.shields.io/badge/Sponsor-PayPal-Flat.svg?color=0070ba&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHZpZXdCb3g9IjAgMCAyNCAzMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjMyIiA+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDIpIiBmaWxsPSIjZWE0YWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDJjLS45NyAwLTEuNjkuNDItMi4yIDEtLjUxLjU4LS43OC45Mi0uOCAxLS4wMi0uMDgtLjI4LS40Mi0uOC0xLS41Mi0uNTgtMS4xNy0xLTIuMi0xLTEuNjMyLjA4Ni0yLjk1NCAxLjMzMy0zIDMgMCAuNTIuMDkgMS41Mi42NyAyLjY3QzEuMjUgOC44MiAzLjAxIDEwLjYxIDYgMTNjMi45OC0yLjM5IDQuNzctNC4xNyA1LjM0LTUuMzNDMTEuOTEgNi41MSAxMiA1LjUgMTIgNWMtLjA0Ny0xLjY5LTEuMzQyLTIuOTEzLTMtM3oiPjwvcGF0aD4KPC9zdmc+Cgo=" /></a>

-### Version v0.0.5
-See the whole picture of your message queue.
-The perfect tool to integrate new services, IoT devices in your network.
-This application subscribes to all topics on your MQTT-Server and displays your message queue hierarchy, allowing you to drill-down to the topics that are of interest.
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2500">
+<ol class="carousel-indicators">
+<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+</ol>
+<div class="carousel-inner">
+<div class="carousel-item active">
+<a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</div>
+</div>
+<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>
+</div>
+
+<span class="slider">
+  <a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+  <a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+  <a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</span>
+
+## Version 0.4.0-beta.6
+
+MQTT Explorer is a comprehensive MQTT client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.
+
+### Features
+
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Diff view of current and previous received messages
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- Dark/Light Themes
+- ... [See Changelog to see all features](./Changelog)
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.

 ## Download
-The app is prebuilt for Windows ([portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.0.5&#x2F;MQTT-Explorer-0.0.5.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.0.5&#x2F;MQTT-Explorer-Setup-0.0.5.exe)), Linux ([AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.0.5&#x2F;MQTT-Explorer-0.0.5-x86_64.AppImage)) and Mac ([dmg](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.0.5&#x2F;MQTT-Explorer-0.0.5.dmg)).

-More architectures and package types: [Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.

-![screen2](https://user-images.githubusercontent.com/7721625/51109225-dbe22200-17f4-11e9-8f6b-c6a27c07c90e.png)
+| Platform | | Downloads |
+|:----------:|:-------------:|:------:|
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://get.microsoft.com/images/en-us%20dark.svg" width="165" /></a><br />**[portable](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.exe), [installer](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-Setup-0.4.0-beta.6.exe)** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://itunes.apple.com/app/apple-store/id1455214828?pt=118225860&ct=mqtt-explorer.com&mt=8"><img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-mac-app-store.svg" height="40"/></a><br />**[Intel](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.dmg), [ARM](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6-arm64.dmg)** <br /> *[How to start untrusted apps](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac)*|
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **[AppImage](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer-0.4.0-beta.6.AppImage), [deb](https:&#x2F;&#x2F;github.com&#x2F;thomasnordquist&#x2F;MQTT-Explorer&#x2F;releases&#x2F;download&#x2F;v0.4.0-beta.6&#x2F;MQTT-Explorer_0.4.0-beta.6_amd64.deb)**<br />*Run AppImage:<br />Make it executable and double-click it.* |

-## Develop
-PRs and issues are welcome
+[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

-Install with `npm run install`, build with `npm run build`
+## Video

-Start with `npm run start`
+<div class="osx-frame">
+<div class="titlebar">
+<div class="buttons">
+<div class="close"></div>
+<div class="minimize"></div>
+<div class="zoom"></div>
+</div>
+MQTT Explorer
+</div>
+<div class="content">
+<video style="width: 100%" autoplay muted loop>
+<source type="video/mp4" src="./video.mp4">
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.gif)
+</video></div>
+</div>
+<br>

-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+## Performance

-## License
-Not yet decided which license exactly, but the basic idea is: "You may do whatever you want with this tool, except sell it."
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
+
+## IoT Applications
+
+List of useful IoT applications using MQTT to integrate devices / services
+
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support
+
+## Feedback
+<form onsubmit="if(!this.elements.noshow.value){ this.action='https://docs.google.com/forms/d/e/1FAIpQLSePeIHoZxpbB_-ku4H97go8JPhfdrlxNc-nHPGQuWB6g-U3HQ/formResponse?embedded=true' }">
+
+### What do you like?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.1944371594"></textarea>
+
+### What can be improved?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.22814098"></textarea>
+
+### Email (optional)
+
+<span style="display: flex"><input style="padding: 8px; flex: 2; border-radius: 5px; box-shadow: 5px 5px; border: 1px solid" type="email" name="entry.2055444782" /><button type="submit" style="padding: 8px; margin-left: 16px; border: 1px solid #2879d0; border-radius: 5px; background-color: #eee; box-shadow: 5px 5px #ccc; text-align: right; color: #2879d0;">Submit</button></span>
+
+<input class="noshow" name="noshow" value="">
+
+</form>
+
+
+<div style="text-align: center; width: 100%">
+Ideas and bugs can also be reported on [github](https://github.com/thomasnordquist/MQTT-Explorer/issues).
+</div>
+
+## Telemetry
+
+App telemetry has been removed, we rely on your bug reports to [GitHub issues](https://github.com/thomasnordquist/MQTT-Explorer/issues)
@@ -1,26 +1,135 @@
-# MQTT-Explorer
-[![Build Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Downloads](https://img.shields.io/github/release/thomasnordquist/mqtt-explorer.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Downloads](https://img.shields.io/github/downloads/thomasnordquist/mqtt-explorer/total.svg)](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+[![Build_Status](https://travis-ci.org/thomasnordquist/MQTT-Explorer.svg?branch=master)](https://travis-ci.org/thomasnordquist/MQTT-Explorer)
+[![Build status](https://ci.appveyor.com/api/projects/status/c35tkm29rm4m5364/branch/master?svg=true)](https://ci.appveyor.com/project/thomasnordquist/mqtt-explorer/branch/master)
+[![Codacy Badge](https://api.codacy.com/project/badge/Grade/47b26e03fce543ceac7914214482334a)](https://app.codacy.com/app/thomasnordquist/MQTT-Explorer?utm_source=github.com&utm_medium=referral&utm_content=thomasnordquist/MQTT-Explorer&utm_campaign=Badge_Grade_Dashboard)
+<a href="#" onClick="a=window;a.location='ht'+'tps:'+'/'+'/pay'+'pal.me/'+'ThomasNordquist'"><img src="https://img.shields.io/badge/Sponsor-PayPal-Flat.svg?color=0070ba&logo=data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgICB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIKICAgIHZlcnNpb249IjEuMSIgYmFzZVByb2ZpbGU9ImZ1bGwiIHZpZXdCb3g9IjAgMCAyNCAzMiIgd2lkdGg9IjI0IiBoZWlnaHQ9IjMyIiA+CiAgICA8cGF0aCB0cmFuc2Zvcm09InNjYWxlKDIpIiBmaWxsPSIjZWE0YWFhIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05IDJjLS45NyAwLTEuNjkuNDItMi4yIDEtLjUxLjU4LS43OC45Mi0uOCAxLS4wMi0uMDgtLjI4LS40Mi0uOC0xLS41Mi0uNTgtMS4xNy0xLTIuMi0xLTEuNjMyLjA4Ni0yLjk1NCAxLjMzMy0zIDMgMCAuNTIuMDkgMS41Mi42NyAyLjY3QzEuMjUgOC44MiAzLjAxIDEwLjYxIDYgMTNjMi45OC0yLjM5IDQuNzctNC4xNyA1LjM0LTUuMzNDMTEuOTEgNi41MSAxMiA1LjUgMTIgNWMtLjA0Ny0xLjY5LTEuMzQyLTIuOTEzLTMtM3oiPjwvcGF0aD4KPC9zdmc+Cgo=" /></a>

-### Version {{ version }}
-See the whole picture of your message queue.
-The perfect tool to integrate new services, IoT devices in your network.
-This application subscribes to all topics on your MQTT-Server and displays your message queue hierarchy, allowing you to drill-down to the topics that are of interest.
+<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="2500">
+<ol class="carousel-indicators">
+<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
+</ol>
+<div class="carousel-inner">
+<div class="carousel-item active">
+<a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+</div>
+<div class="carousel-item">
+<a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</div>
+</div>
+<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
+<span class="carousel-control-prev-icon" aria-hidden="true"></span>
+<span class="sr-only">Previous</span>
+</a>
+<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
+<span class="carousel-control-next-icon" aria-hidden="true"></span>
+<span class="sr-only">Next</span>
+</a>
+</div>
+
+<span class="slider">
+  <a href="./img/screen2.png"><img src="./img/screen2_small.png" /></a>
+  <a href="./img/screen3.png"><img src="./img/screen3_small.png" /></a>
+  <a href="./img/screen-composite.png"><img src="./img/screen-composite_small.png" /></a>
+</span>
+
+## Version {{ version }}
+
+MQTT Explorer is a comprehensive MQTT client that provides a structured overview of your MQTT topics and makes working with devices/services on your broker dead-simple.
+
+### Features
+
+- Visualize topics and topic activity
+- Delete retained topics
+- Search/filter topics
+- Delete topics recursively
+- Diff view of current and previous received messages
+- Publish topics
+- Plot numeric topics
+- Retain a history of each topic
+- Dark/Light Themes
+- ... [See Changelog to see all features](./Changelog)
+
+The hierarchical view makes this tool so easy to use and differentiates the **MQTT Explorer** from other great MQTT clients like [MQTTLens](https://chrome.google.com/webstore/detail/mqttlens/hemojaaeigabkbcookmlgmdigohjobjm), [MQTTBox](http://workswithweb.com/mqttbox.html) and [MQTT.fx](https://mqttfx.jensd.de/).  
+This MQTT Client strives to be a MQTT swiss-army-knife, the perfect tool to integrate new services and IoT devices on your network.

 ## Download
-The app is prebuilt for Windows ({{windowsTargets}}), Linux ({{linuxTargets}}) and Mac ({{macTargets}}).

-More architectures and package types: [Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)
+Developing this tool takes a lot of effort, sweat and time, please consider rating the App on the Windows or Mac app store <img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" /><img src="./res/star.svg" width="16" />.  
+If you feel like a feature is missing or you found a bug, please leave me a [comment / issue](https://github.com/thomasnordquist/MQTT-Explorer/issues) and I'll see what I can do.

-![screen2](https://user-images.githubusercontent.com/7721625/51109225-dbe22200-17f4-11e9-8f6b-c6a27c07c90e.png)
+| Platform | | Downloads |
+|:----------:|:-------------:|:------:|
+| ![windows](https://user-images.githubusercontent.com/7721625/51445407-b4172080-1d04-11e9-8c70-d8413d1d6d8b.png) | **Windows** | <a href="https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge"><img src="https://get.microsoft.com/images/en-us%20dark.svg" width="165" /></a><br />**{{windowsTargets}}** |
+| ![mac](https://user-images.githubusercontent.com/7721625/51445390-921d9e00-1d04-11e9-8339-351469ef20ae.png) | **Mac** | <a href="https://itunes.apple.com/app/apple-store/id1455214828?pt=118225860&ct=mqtt-explorer.com&mt=8"><img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-download-on-the-mac-app-store.svg" height="40"/></a><br />**{{macTargets}}** <br /> *[How to start untrusted apps](https://support.apple.com/guide/mac-help/open-a-mac-app-from-an-unidentified-developer-mh40616/mac)*|
+| ![ubuntu](https://user-images.githubusercontent.com/7721625/51445401-a5306e00-1d04-11e9-9b9b-20e196b82142.png) | **Ubuntu**<br />*debian, mint, neon, fedora, etc...* | <a href="https://snapcraft.io/mqtt-explorer" title="Get it from the Snap Store"><img src="https://snapcraft.io/static/images/badges/en/snap-store-black.svg" width="165" /></a><br />`snap install mqtt-explorer`<br />[Ubuntu Store](snap://mqtt-explorer) |
+| ![linux](https://user-images.githubusercontent.com/7721625/51445392-947ff800-1d04-11e9-8c7f-a30efb755651.png) | **Linux**<br />*almost every linux* | **{{linuxTargets}}**<br />*Run AppImage:<br />Make it executable and double-click it.* |

-## Develop
-PRs and issues are welcome
+[More Downloads](https://github.com/thomasnordquist/MQTT-Explorer/releases)

-Install with `npm run install`, build with `npm run build`
+## Video

-Start with `npm run start`
+<div class="osx-frame">
+<div class="titlebar">
+<div class="buttons">
+<div class="close"></div>
+<div class="minimize"></div>
+<div class="zoom"></div>
+</div>
+MQTT Explorer
+</div>
+<div class="content">
+<video style="width: 100%" autoplay muted loop>
+<source type="video/mp4" src="./video.mp4">
+![screencast](https://user-images.githubusercontent.com/7721625/53954172-b7f4db80-40d5-11e9-852c-f8d85e511a00.gif)
+</video></div>
+</div>
+<br>

-The `app` directory contains all the rendering logic, the `backend` directory currently contains the models, tests, connection management.
+## Performance

-## License
-Not yet decided which license exactly, but the basic idea is: "You may do whatever you want with this tool, except sell it."
+This MQTT Client is optimized to handle thousands of topics and at hundreds of thousands messages per minute.
+
+Custom subscriptions can limit the amount of messages **MQTT Explorer** needs to process, subscriptions can be managed in the advanced connection settings.  
+In very large productive environments brokers may handle an extreme load of topics, subscribing with a wildcard topic is in this scenario not advised.
+
+## IoT Applications
+
+List of useful IoT applications using MQTT to integrate devices / services
+
+- [Home Assistant](https://www.home-assistant.io/) - Open source home automation gateway
+- [OpenHAB](https://www.openhab.org/) - Smart Home Gateway
+- [Node-RED](https://nodered.org/) - Flow-based programming for the Internet of Things
+- [zigbee2mqtt](https://github.com/Koenkk/zigbee2mqtt) - A ZigBee to MQTT bridge
+- [Tasmota](https://github.com/arendst/Sonoff-Tasmota) - ESP8266 firmware with MQTT support
+
+## Feedback
+<form onsubmit="if(!this.elements.noshow.value){ this.action='https://docs.google.com/forms/d/e/1FAIpQLSePeIHoZxpbB_-ku4H97go8JPhfdrlxNc-nHPGQuWB6g-U3HQ/formResponse?embedded=true' }">
+
+### What do you like?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.1944371594"></textarea>
+
+### What can be improved?
+<textarea style="width: 100%; border-radius: 5px; box-shadow: 5px 5px;" name="entry.22814098"></textarea>
+
+### Email (optional)
+
+<span style="display: flex"><input style="padding: 8px; flex: 2; border-radius: 5px; box-shadow: 5px 5px; border: 1px solid" type="email" name="entry.2055444782" /><button type="submit" style="padding: 8px; margin-left: 16px; border: 1px solid #2879d0; border-radius: 5px; background-color: #eee; box-shadow: 5px 5px #ccc; text-align: right; color: #2879d0;">Submit</button></span>
+
+<input class="noshow" name="noshow" value="">
+
+</form>
+
+
+<div style="text-align: center; width: 100%">
+Ideas and bugs can also be reported on [github](https://github.com/thomasnordquist/MQTT-Explorer/issues).
+</div>
+
+## Telemetry
+
+App telemetry has been removed, we rely on your bug reports to [GitHub issues](https://github.com/thomasnordquist/MQTT-Explorer/issues)
@@ -0,0 +1,15 @@
+theme: jekyll-theme-architect
+title: MQTT Explorer
+description: An all-round MQTT client that provides a structured topic overview
+author:
+  name: Thomas Nordquist
+  picture: https://avatars1.githubusercontent.com/u/7721625?s=460&v=4 
+github_username: thomasnordquist
+logo: https://user-images.githubusercontent.com/7721625/52227945-5280b580-28b1-11e9-804c-75a842537393.png
+plugins:
+  - jekyll-seo-tag
+google_analytics: UA-133696837-1
+
+markdown: kramdown
+kramdown:
+  parse_block_html: true
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+    <meta charset='utf-8'>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <script
+    src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
+    integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
+    crossorigin="anonymous"></script>
+    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
+    <link rel="stylesheet" href="{{ '/assets/css/print.css' | relative_url }}" media="print" type="text/css">
+    <link rel="stylesheet" href="./osx-frame.css">
+
+    <!--[if lt IE 9]>
+    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
+    <![endif]-->
+
+    <style>
+      .noshow {display: none}
+
+      @media (min-width: 768px) { 
+        .slider {
+          display: flex;
+        }
+        .carousel {
+          display: none;
+        }
+      }
+
+      @media (max-width: 768px) { 
+        .slider {
+          display: none;
+        }
+        .carousel {
+          display: block;
+        }
+      }
+
+      form>h3::before {
+        content: '' !important;
+        margin-left: 0 !important;
+      }
+
+      .carousel-control-next-icon, .carousel-control-prev-icon {
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        background-size: 70%;
+        background-repeat: no-repeat;
+        background-color: grey;
+        border-radius: 5px;
+      }
+
+      .inner img {
+        border-radius: 8px;
+      }
+
+      .slider a {
+        padding: 4px;
+      }
+      .carousel-item, .slider img {
+        box-shadow: 0px 0px 5px #6b6b6b;
+      }
+    </style>
+
+    {% seo %}
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-TRN5K6H');</script>
+    <!-- End Google Tag Manager -->
+    <script>
+      function trackConversion(url) {
+        const conversions = {
+          'snap://mqtt-explorer': 'snap',
+          'https://snapcraft.io/mqtt-explorer': 'snap',
+          'https://geo.itunes.apple.com/us/app/mqtt-explorer/id1455214828?mt=12&app=apps': 'Mac App Store',
+          'https://www.microsoft.com/store/apps/9PP8SFM082WD?ocid=badge': 'Microsoft Store',
+          'https://github.com/thomasnordquist/MQTT-Explorer/releases/download/': 'binary download'
+        }
+        const conversion = Object.keys(conversions).find(function(conversionUrlPrefix) { return url.startsWith(conversionUrlPrefix) })
+        if (conversion) {
+          ga('send', 'event', 'outbound', 'download', conversions[conversion], {
+            'transport': 'beacon',
+            'hitCallback': function(){ document.location = url; }
+          });
+        } else {
+          ga('send', 'event', 'outbound', 'click', url, {
+            'transport': 'beacon',
+            'hitCallback': function(){ document.location = url; }
+          });
+        }
+      }
+
+    function didLoad() {
+      if (!Array.prototype.filter || !Array.prototype.find || !String.prototype.startsWith) {
+        return
+      }
+
+      Object.values(document.getElementsByTagName('a'))
+        .filter(function(a) { return !a.href.startsWith(a.baseURI)})
+        .forEach(function(a) { a.onclick = function() { trackConversion(a.href) }})
+    }
+    </script>
+  </head>
+
+  <body onload="didLoad()">
+    <header>
+      <div class="inner">
+        <a href="{{ '/' | absolute_url }}">
+          <h1 style="display: inline">
+            <img src="./icon.png" style="
+              height: 1em;
+              display: inline;
+              vertical-align: top;
+              margin-top: -0.04em;
+            "></img>
+            {{ site.title | default: site.github.repository_name }}
+          </h1>
+        </a>
+        <h2>{{ site.description | default: site.github.project_tagline }}</h2>
+        {% if site.github.is_project_page %}
+          <a href="{{ site.github.repository_url }}" style="box-sizing: initial" class="button"><small>View project on</small> GitHub</a>
+        {% endif %}
+        {% if site.github.is_user_page %}
+          <a href="{{ site.github.owner_url }}" class="button"><small>Follow me on</small> GitHub</a>
+        {% endif %}
+      </div>
+    </header>
+
+    <div id="content-wrapper">
+      <div class="inner clearfix">
+        <section id="main-content">
+          {{ content }}
+        </section>
+
+        <aside id="sidebar">
+          {% if site.show_downloads %}
+            <a href="{{ site.github.zip_url }}" class="button">
+              <small>Download</small>
+              .zip file
+            </a>
+            <a href="{{ site.github.tar_url }}" class="button">
+              <small>Download</small>
+              .tar.gz file
+            </a>
+          {% endif %}
+
+          {% if site.github.is_project_page %}
+            <h2>Author</h2>
+            <img src="{{ site.author.picture }}" width="200" />
+            <h3>{{ site.author.name }}</h3>
+            <p class="repo-owner"><a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a></p>
+          {% endif %}
+
+          <br />
+          <h3>In the media</h3>
+          <blockquote class="twitter-tweet" data-width="200">
+          <p lang="en" dir="ltr">If you’re seeking a comprehensive and easy to use 
+          <a href="https://twitter.com/hashtag/MQTT?src=hash&amp;ref_src=twsrc%5Etfw">#MQTT</a> client for 
+          <a href="https://twitter.com/hashtag/Ubuntu?src=hash&amp;ref_src=twsrc%5Etfw">#Ubuntu</a> then look no further than MQTT Explorer.
+          <br>
+          <br>snap install mqtt-explorer
+          <a href="https://t.co/1nd0Z8VQeR">https://t.co/1nd0Z8VQeR</a> 
+          <a href="https://t.co/8XKenpQu0p">pic.twitter.com/8XKenpQu0p</a>
+          </p>
+          &mdash; Ubuntu (@ubuntu) 
+          <a href="https://twitter.com/ubuntu/status/1125747632910077953?ref_src=twsrc%5Etfw">May 7, 2019</a>
+          </blockquote>
+          <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
+            
+        </aside>
+      </div>
+    </div>
+
+    {% if site.google_analytics %}
+      <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', '{{ site.google_analytics }}', 'auto');
+        ga('send', 'pageview');
+      </script>
+    {% endif %}
+  </body>
+</html>
@@ -0,0 +1,3 @@
+require 'webrick'
+include WEBrick
+WEBrick::HTTPUtils::DefaultMimeTypes.store 'mp4', 'video/mpeg'
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <meta charset="UTF-8" />
-        <title>MQTT-Explorer</title>
-        <style>
-          body, html {
-            margin: 0;
-            padding: 0;
-          }
-          @keyframes example {
-            0%   {background-color: inherit;}
-            25%  {background-color: #3f51b5;}
-            50%  {background-color: #3f51b5;}
-            100% {background-color: inherit;}
-          }
-
-          ::-webkit-scrollbar {
-            width: 8px;
-            height: 8px;
-          }
-
-          ::-webkit-scrollbar-corner {
-            background-color: rgba(0, 0, 0, 0.0);
-          }
-
-          ::-webkit-scrollbar-track {
-              -webkit-box-shadow: inset 0 0 6px rgba(30,30,30,0.3);
-          }
-
-          ::-webkit-scrollbar-thumb {
-              background-color: rgba(140,140,140,0.8);
-              #-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.8);
-          }
-        </style>
-        <style>
-          #splash {
-            z-index: 1000000;
-            background-color: #303030;
-            display: block;
-            width: 100vw;
-            height: 100vh;
-            position: fixed;
-            opacity: 1;
-          }
-          #splash1 {
-            margin: 37vh auto 0 auto;
-            height: 25vh;
-            width: 25vh;
-            background-image:url('./rings.svg');
-            background-size: cover;
-          }
-          #splash2 {
-            margin: 0 auto;
-          }
-          @keyframes unsplash {
-            0%   {opacity: 1;}
-            100% {opacity: 0;}
-          }
-        </style>
-        <script src="http://localhost:35729/livereload.js"></script>
-
-    </head>
-    <body>
-        <div id="splash"><div id="splash1"></div></div>
-        <div id="app" style="font:-webkit-control"></div>
-        <script>
-          function onLoad() {
-            var script = document.createElement("script");
-            script.src = "./build/bundle.js"
-            document.head.appendChild(script);
-          }
-          document.addEventListener('DOMContentLoaded', onLoad(), false);
-        </script>
-    </body>
-</html>
@@ -1,45 +0,0 @@
-{
-  "name": "mqtt-explorer-app",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "build": "webpack --mode production"
-  },
-  "author": "",
-  "license": "ISC",
-  "devDependencies": {
-    "@material-ui/icons": "^3.0.1",
-    "@material-ui/lab": "^3.0.0-alpha.27",
-    "@types/react": "^16.7.18",
-    "@types/react-dom": "^16.0.11",
-    "@types/react-redux": "^6.0.12",
-    "electron-nucleus": "^1.11.0",
-    "react": "^16.7.0",
-    "react-dom": "^16.7.0",
-    "react-redux": "^6.0.0",
-    "redux": "^4.0.1",
-    "webpack-livereload-plugin": "^2.2.0"
-  },
-  "dependencies": {
-    "@material-ui/core": "^3.7.1",
-    "@types/node": "^10.12.18",
-    "@types/sha1": "^1.1.1",
-    "@types/socket.io-client": "^1.4.32",
-    "@types/vis": "^4.21.9",
-    "awesome-typescript-loader": "^5.2.1",
-    "copy-text-to-clipboard": "^1.0.4",
-    "jquery": "^3.3.1",
-    "lodash.throttle": "^4.1.1",
-    "moving-average": "^1.0.0",
-    "react-ace": "^6.3.2",
-    "react-json-view": "^1.19.1",
-    "sha1": "^1.1.1",
-    "socket.io-client": "^2.2.0",
-    "source-map-loader": "^0.2.4",
-    "typescript": "^3.2.2",
-    "webpack": "^4.28.2",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.14"
-  }
-}
@@ -1,42 +0,0 @@
-<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
-<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
-    <g fill="none" fill-rule="evenodd" transform="translate(1 1)" stroke-width="2">
-        <circle cx="22" cy="22" r="6" stroke-opacity="0">
-            <animate attributeName="r"
-                 begin="1.5s" dur="3s"
-                 values="6;22"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                 begin="1.5s" dur="3s"
-                 values="1;0" calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-width"
-                 begin="1.5s" dur="3s"
-                 values="2;0" calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-        <circle cx="22" cy="22" r="6" stroke-opacity="0">
-            <animate attributeName="r"
-                 begin="3s" dur="3s"
-                 values="6;22"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-opacity"
-                 begin="3s" dur="3s"
-                 values="1;0" calcMode="linear"
-                 repeatCount="indefinite" />
-            <animate attributeName="stroke-width"
-                 begin="3s" dur="3s"
-                 values="2;0" calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-        <circle cx="22" cy="22" r="8">
-            <animate attributeName="r"
-                 begin="0s" dur="1.5s"
-                 values="6;1;2;3;4;5;6"
-                 calcMode="linear"
-                 repeatCount="indefinite" />
-        </circle>
-    </g>
-</svg>
@@ -1,115 +0,0 @@
-import * as React from 'react'
-import * as q from '../../backend/src/Model'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-import { AppState } from './reducers'
-import Connection from './components/ConnectionSetup/Connection'
-import CssBaseline from '@material-ui/core/CssBaseline'
-import Settings from './components/Settings'
-import Sidebar from './components/Sidebar/Sidebar'
-import TitleBar from './components/TitleBar'
-import Tree from './components/Tree/Tree'
-import UpdateNotifier from './UpdateNotifier'
-import { connect } from 'react-redux'
-
-interface State {
-  selectedNode?: q.TreeNode,
-  connectionId?: string
-}
-
-interface Props {
-  name: string
-  theme: Theme
-  settingsVisible: boolean
-}
-
-class App extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      selectedNode: undefined,
-    }
-  }
-
-  private getStyles(): {[s: string]: React.CSSProperties} {
-    const { theme } = this.props
-    const drawerWidth = 300
-    return {
-      left: {
-        backgroundColor: theme.palette.background.default,
-        color: theme.palette.text.primary,
-        height: 'calc(100vh - 64px)',
-        float: 'left',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-        width: '60vw',
-      },
-      right: {
-        height: 'calc(100vh - 64px)',
-        color: theme.palette.text.primary,
-        float: 'left',
-        width: '40vw',
-        overflowY: 'scroll',
-        overflowX: 'hidden',
-        display: 'block',
-      },
-      centerContent: {
-        width: '100vw',
-        overflow: 'hidden',
-      },
-      content: {
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        marginLeft: 0,
-      },
-      contentShift: {
-        padding: 0,
-        backgroundColor: theme.palette.background.default,
-        transition: theme.transitions.create('margin', {
-          easing: theme.transitions.easing.easeOut,
-          duration: theme.transitions.duration.enteringScreen,
-        }),
-        marginLeft: drawerWidth,
-      },
-    }
-  }
-
-  public render() {
-    const { settingsVisible } = this.props
-    const { content, contentShift, centerContent } = this.getStyles()
-    return (
-      <div style={centerContent}>
-        <CssBaseline />
-        <Settings />
-        <div style={settingsVisible ? contentShift : content}>
-            <TitleBar />
-            <div style={centerContent}>
-              <div style={this.getStyles().left}>
-                <Tree connectionId={this.state.connectionId} didSelectNode={(node: q.TreeNode) => {
-                  this.setState({ selectedNode: node })
-                }} />
-              </div>
-              <div style={this.getStyles().right}>
-                <Sidebar connectionId={this.state.connectionId} />
-              </div>
-            </div>
-        </div>
-        <UpdateNotifier />
-        <Connection onConnection={(connectionId: string) => this.setState({ connectionId })}/>
-      </div >
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    settingsVisible: state.settings.visible,
-  }
-}
-
-export default withStyles({}, { withTheme: true })(connect(mapStateToProps)(App))
@@ -1,219 +0,0 @@
-import * as React from 'react'
-
-import {
-   Button,
-   IconButton,
-   Modal,
-   Paper,
-   Snackbar,
-   SnackbarContent,
-   Typography,
-} from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { UpdateInfo, checkForUpdates, rendererEvents, updateAvailable } from '../../events'
-import { green, red } from '@material-ui/core/colors'
-
-import { AppState } from './reducers'
-import Close from '@material-ui/icons/Close'
-import CloudDownload from '@material-ui/icons/CloudDownload'
-import { UpdateFileInfo } from 'builder-util-runtime'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { updateNotifierActions } from './actions'
-
-interface Props {
-  showUpdateNotification: boolean
-  showUpdateDetails: boolean
-  classes: any
-  actions: any
-}
-
-class UpdateNotifier extends React.Component<Props, {}> {
-  private updateInfo?: UpdateInfo
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      selectedNode: undefined,
-    }
-  }
-
-  public componentDidMount() {
-    rendererEvents.emit(checkForUpdates, undefined)
-    rendererEvents.subscribe(updateAvailable, this.handleUpdate)
-  }
-
-  public componentWillUnmount() {
-    rendererEvents.unsubscribeAll(updateAvailable)
-  }
-
-  private handleUpdate = (updateInfo: UpdateInfo) => {
-    this.updateInfo = updateInfo
-    this.props.actions.showUpdateNotification(true)
-  }
-
-  private onCloseNotification = (event: React.SyntheticEvent<any>, reason: string) => {
-    if (reason === 'clickaway') {
-      return
-    }
-    this.props.actions.showUpdateNotification(false)
-  }
-
-  private closeNotification = () => {
-    this.props.actions.showUpdateNotification(false)
-  }
-
-  private showDetails = () => {
-    this.props.actions.showUpdateNotification(false)
-    this.props.actions.showUpdateDetails(true)
-  }
-
-  private hideDetails = () => {
-    this.props.actions.showUpdateDetails(false)
-  }
-
-  public render() {
-    return (
-      <div>
-        {this.renderUpdateNotification()}
-        {this.renderUpdateDetails()}
-      </div>
-    )
-  }
-
-  private renderUpdateNotification() {
-    const snackbarAnchor: any = {
-      vertical: 'top',
-      horizontal: 'right',
-    }
-
-    return (
-      <Snackbar
-        anchorOrigin={snackbarAnchor}
-        open={this.props.showUpdateNotification}
-        autoHideDuration={7000}
-        onClose={this.onCloseNotification}
-      >
-        <SnackbarContent
-          className={this.props.classes.success}
-          message="Update available"
-          action={this.notificationActions()}
-        />
-      </Snackbar>
-    )
-  }
-
-  private notificationActions() {
-    return [(
-        <Button key="undo" size="small" onClick={this.showDetails}>
-          Download
-        </Button>
-      ), (
-        <IconButton
-          key="close"
-          aria-label="Close"
-          color="inherit"
-          className={this.props.classes.close}
-          onClick={this.closeNotification}
-        >
-          <Close />
-        </IconButton>
-      ),
-    ]
-  }
-
-  private renderUpdateDetails() {
-    if (!this.updateInfo) {
-      return null
-    }
-    const releaseNotes = (this.updateInfo.releaseNotes as string) || ''
-    return (
-      <Modal
-        open={this.props.showUpdateDetails}
-        disableAutoFocus={true}
-        onClose={this.hideDetails}
-      >
-        <Paper className={this.props.classes.root}>
-          <Typography variant="h6" className={this.props.classes.title}>Version {this.updateInfo.version}</Typography>
-          <Typography className={this.props.classes.title}>Changelog</Typography>
-          <div className={this.props.classes.releaseNotes} dangerouslySetInnerHTML={{ __html: releaseNotes }} />
-          {this.renderDownloads(this.updateInfo)}
-          <Button className={this.props.classes.closeButton} color="secondary" onClick={this.hideDetails}>Close</Button>
-        </Paper>
-      </Modal>
-    )
-  }
-
-  private urlToFilename(url: string) {
-    const parts = url.split('/')
-
-    return parts[parts.length - 1]
-  }
-
-  private renderDownloads(updateInfo: UpdateInfo) {
-    console.log(updateInfo)
-    return updateInfo.files
-      .map((file: UpdateFileInfo, index: number) => (
-        <div key={index}>
-          <Button
-            className={this.props.classes.download}
-            href={file.url}
-          >
-            <IconButton><CloudDownload /></IconButton>{this.urlToFilename(file.url)}
-          </Button>
-        </div>
-      ))
-  }
-}
-
-const styles = (theme: Theme) => ({
-  success: {
-    backgroundColor: green[600],
-    color: theme.typography.button.color,
-  },
-  close: {
-    padding: theme.spacing.unit / 2,
-  },
-  root: {
-    minWidth: '350px',
-    maxWidth: '500px',
-    backgroundColor: theme.palette.background.default,
-    margin: '20vh auto auto auto',
-    padding: `${2 * theme.spacing.unit}px`,
-    outline: 'none',
-  },
-  title: {
-    color: theme.palette.text.primary,
-  },
-  releaseNotes: {
-    overflow: 'auto scroll',
-    color: theme.palette.text.secondary,
-    backgroundColor: 'rgba(60, 60, 60, 0.6)',
-    maxHeight: '28vh',
-  },
-  paper: {
-    padding: `${theme.spacing.unit * 2}px`,
-    color: theme.palette.text.secondary,
-  },
-  download: {
-    width: '100%',
-  },
-  closeButton: {
-    display: 'block',
-    margin: '0 0 0 auto',
-  },
-})
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    showUpdateNotification: state.showUpdateNotification,
-    showUpdateDetails: state.showUpdateDetails,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(updateNotifierActions, dispatch),
-  }
-}
-
-export default withStyles(styles, { withTheme: true })(connect(mapStateToProps, mapDispatchToProps)(UpdateNotifier))
@@ -1,21 +0,0 @@
-import { ActionTypes, NodeOrder, CustomAction } from '../reducers'
-
-export const setAutoExpandLimit = (autoExpandLimit: number = 0): CustomAction => {
-  return {
-    autoExpandLimit,
-    type: ActionTypes.setAutoExpandLimit,
-  }
-}
-
-export const toggleSettingsVisibility = (): CustomAction => {
-  return {
-    type: ActionTypes.toggleSettingsVisibility,
-  }
-}
-
-export const setNodeOrder = (nodeOrder: NodeOrder = NodeOrder.none): CustomAction => {
-  return {
-    nodeOrder,
-    type: ActionTypes.setNodeOrder,
-  }
-}
@@ -1,15 +0,0 @@
-import { ActionTypes, CustomAction } from '../reducers'
-
-export const setPublishTopic = (topic: string): CustomAction  => {
-  return {
-    publishTopic: topic,
-    type: ActionTypes.setPublishTopic,
-  }
-}
-
-export const setPublishPayload = (payload: string): CustomAction => {
-  return {
-    publishPayload: payload,
-    type: ActionTypes.setPublishPayload,
-  }
-}
@@ -1,9 +0,0 @@
-import { ActionTypes, CustomAction } from '../reducers'
-import * as q from '../../../backend/src/Model'
-
-export const selectTopic = (topic: q.TreeNode): CustomAction => {
-  return {
-    selectedTopic: topic,
-    type: ActionTypes.selectTopic,
-  }
-}
@@ -1,15 +0,0 @@
-import { ActionTypes, CustomAction } from '../reducers'
-
-export const showUpdateNotification = (show: boolean): CustomAction => {
-  return {
-    type: ActionTypes.showUpdateNotification,
-    showUpdateNotification: show,
-  }
-}
-
-export const showUpdateDetails = (show: boolean): CustomAction => {
-  return {
-    type: ActionTypes.showUpdateDetails,
-    showUpdateDetails: show,
-  }
-}
@@ -1,6 +0,0 @@
-import * as settingsActions from './Settings'
-import * as sidebarActions from './Sidebar'
-import * as treeActions from './Tree'
-import * as updateNotifierActions from './UpdateNotifier'
-
-export { settingsActions, treeActions, sidebarActions, updateNotifierActions }
@@ -1,339 +0,0 @@
-import * as React from 'react'
-
-import {
-  Button,
-  CircularProgress,
-  FormControl,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  Input,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Modal,
-  Paper,
-  Switch,
-  TextField,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
-import { DataSourceState, MqttOptions } from '../../../../backend/src/DataSource'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-import { addMqttConnectionEvent, makeConnectionStateEvent, removeConnection, rendererEvents } from '../../../../events'
-
-import Notification from './Notification'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
-
-import sha1 = require('sha1')
-
-interface Props {
-  classes: {[s: string]: string}
-  theme: Theme
-  onAbort: () => void,
-  onConnection: (connectionId: string) => void
-}
-
-const protocols = [
-  'mqtt://',
-  'ws://',
-]
-
-interface State {
-  connecting: boolean
-  connectionId?: string
-  error?: string
-  visible: boolean
-  host: string
-  protocol: string
-  port: number
-  tls: boolean
-  certValidation: boolean
-  clientId: string
-  username: string
-  password: string
-  showPassword: boolean
-}
-
-declare var window: any
-
-class Connection extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    const storedSettingsString = window.localStorage.getItem('connectionSettings')
-    let storedSettings
-    try {
-      storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
-    } catch {
-      window.localStorage.setItem('connectionSettings', undefined)
-    }
-
-    const defaultState = {
-      visible: true,
-      host: 'iot.eclipse.org',
-      protocol: protocols[0],
-      port: 1883,
-      tls: false,
-      certValidation: true,
-      clientId: '',
-      username: '',
-      password: '',
-      connecting: false,
-      connectionId: undefined,
-      showPassword: false,
-    }
-
-    this.state = Object.assign({}, defaultState, storedSettings)
-  }
-
-  private saveConnectionSettings() {
-    window.localStorage.setItem('connectionSettings', JSON.stringify(this.state))
-  }
-
-  private handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword })
-  }
-
-  private optionsFromState(): MqttOptions {
-    const protocol = this.state.protocol === 'tcp://' ? 'mqtt://' : this.state.protocol
-    const url = `${protocol}${this.state.host}:${this.state.port}`
-
-    return {
-      url,
-      username: this.state.username || undefined,
-      password: this.state.password || undefined,
-      tls: this.state.tls,
-      certValidation: this.state.certValidation,
-    }
-  }
-
-  private connect() {
-    this.setState({
-      connecting: true,
-    })
-
-    const options = this.optionsFromState()
-    const connectionId = (sha1(Math.random() + JSON.stringify(options)).slice(0, 8)) as string
-    this.setState({ connectionId })
-    rendererEvents.emit(addMqttConnectionEvent, { options, id: connectionId })
-    const event = makeConnectionStateEvent(connectionId)
-
-    rendererEvents.subscribe(event, (state: DataSourceState) => {
-      console.log(state)
-      if (state.connected) {
-        this.props.onConnection(connectionId)
-        this.setState({ visible: false })
-      } else if (state.error) {
-        this.setState({ error: state.error })
-        this.disconnect()
-      }
-    })
-  }
-
-  private disconnect() {
-    this.setState({
-      connecting: false,
-    })
-    rendererEvents.emit(removeConnection, this.state.connectionId)
-  }
-
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      root: {
-        minWidth: 550,
-        maxWidth: 650,
-        backgroundColor: theme.palette.background.default,
-        margin: '14vh auto auto auto',
-        padding: `${2 * theme.spacing.unit}px`,
-        outline: 'none',
-      },
-      title: {
-        color: theme.palette.text.primary,
-      },
-      paper: {
-        padding: theme.spacing.unit * 2,
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-      },
-      textField: {
-        width: '100%',
-      },
-      switch: {
-        marginTop: `${1 * theme.spacing.unit}px`,
-      },
-      button: {
-        margin: theme.spacing.unit,
-      },
-      passwordFormControl: {
-        marginTop: '16px',
-      },
-    }
-  }
-
-  private handleChange = (name: string) => (event: any) => {
-    const state: any = {
-      [name]: event.target.value,
-    }
-    this.setState(state)
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    const passwordVisibilityButton = (
-      <InputAdornment position="end">
-        <IconButton
-          aria-label="Toggle password visibility"
-          onClick={this.handleClickShowPassword}
-        >
-          {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
-        </IconButton>
-      </InputAdornment>
-    )
-
-    let renderError = null
-    if (this.state.error) {
-      renderError = (
-        <Notification
-          message={this.state.error}
-          type="error"
-          onClose={() => { this.setState({ error: undefined }) }}
-        />
-      )
-    }
-
-    return (
-      <div>
-        {renderError}
-        <Modal open={this.state.visible} disableAutoFocus={true}>
-            <Paper className={classes.root}>
-              <Toolbar>
-                <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
-              </Toolbar>
-              <form className={classes.container} noValidate={true} autoComplete="off">
-                <Grid container={true} spacing={24}>
-                  <Grid item={true} xs={2}>
-                    <TextField
-                      select={true}
-                      label="Protocol"
-                      className={classes.textField}
-                      value={this.state.protocol}
-                      onChange={this.handleChange('protocol')}
-                      margin="normal"
-                    >
-                      {protocols.map((value: string) => (
-                        <MenuItem key={value} value={value}>
-                          {value}
-                        </MenuItem>
-                      ))}
-                    </TextField>
-                  </Grid>
-                  <Grid item xs={7}>
-                    <TextField
-                      label="Host"
-                      className={classes.textField}
-                      value={this.state.host}
-                      onChange={this.handleChange('host')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={3}>
-                    <TextField
-                      label="Port"
-                      className={classes.textField}
-                      value={this.state.port}
-                      onChange={this.handleChange('port')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <TextField
-                      label="Username"
-                      className={classes.textField}
-                      value={this.state.username}
-                      onChange={this.handleChange('username')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.passwordFormControl}`}>
-                      <InputLabel htmlFor="adornment-password">Password</InputLabel>
-                      <Input
-                        id="adornment-password"
-                        type={this.state.showPassword ? 'text' : 'password'}
-                        value={this.state.password}
-                        onChange={this.handleChange('password')}
-                        endAdornment={passwordVisibilityButton}
-                      />
-                    </FormControl>
-                  </Grid>
-                  <Grid item={true} xs={4}>
-                    <div className={classes.switch}>
-                      <FormControlLabel
-                        control={(
-                          <Switch
-                            checked={this.state.certValidation}
-                            onChange={() => this.setState({ certValidation: !this.state.certValidation })}
-                            color="primary"
-                          />
-                        )}
-                        label="Validate certificate"
-                        labelPlacement="bottom"
-                      />
-                    </div>
-                  </Grid>
-                  <Grid item={true} xs={4}>
-                    <div className={classes.switch}>
-                      <FormControlLabel
-                        control={(
-                          <Switch
-                            checked={this.state.tls}
-                            onChange={() => this.setState({ tls: !this.state.tls })}
-                            color="primary"
-                          />
-                        )}
-                        label="Encryption (tls)"
-                        labelPlacement="bottom"
-                      />
-                    </div>
-                  </Grid>
-                  <Grid item={true} xs={4} />
-                </Grid>
-                <br />
-                <div style={{ textAlign: 'right' }}>
-                  <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
-                    Save
-                  </Button>
-                  {this.renderConnectButton()}
-                </div>
-              </form>
-            </Paper>
-        </Modal>
-      </div>
-    )
-  }
-
-  private renderConnectButton() {
-    const { classes } = this.props
-
-    if (this.state.connecting) {
-      return <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickAbort}>
-        <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
-      </Button>
-    }
-    return <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
-      Connect
-    </Button>
-  }
-
-  private onClickConnect = () => {
-    this.connect()
-  }
-
-  private onClickAbort = () => {
-    this.disconnect()
-  }
-}
-
-export default withStyles(Connection.styles, { withTheme: true })(Connection)
@@ -1,55 +0,0 @@
-import * as React from 'react'
-
-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { green, red } from '@material-ui/core/colors'
-
-enum MessageType {
-  success = 'success',
-  error = 'error',
-}
-
-interface Props {
-  message?: string
-  type: MessageType
-  onClose: () => void
-  classes: any
-}
-
-class Notification extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  public static styles = (theme: Theme) => ({
-    success: {
-      backgroundColor: green[600],
-      color: theme.typography.button.color,
-    },
-    error: {
-      backgroundColor: red[600],
-      color: theme.typography.button.color,
-    },
-  })
-
-  public render() {
-    return (
-      <Snackbar
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'left',
-        }}
-        open={Boolean(this.props.message)}
-        autoHideDuration={10000}
-        onClose={this.props.onClose}
-      >
-        <SnackbarContent
-          className={this.props.classes[this.props.type]}
-          message={this.props.message}
-        />
-      </Snackbar>
-    )
-  }
-}
-
-export default withStyles(Notification.styles)(Notification)
@@ -1,70 +0,0 @@
-import * as React from 'react'
-import { Snackbar, SnackbarContent } from '@material-ui/core'
-import FileCopy from '@material-ui/icons/FileCopy'
-import Check from '@material-ui/icons/Check'
-import green from '@material-ui/core/colors/green'
-import { withStyles, Theme } from '@material-ui/core/styles'
-
-const copy = require('copy-text-to-clipboard')
-
-interface Props {
-  value: string
-  classes: any
-}
-
-interface State {
-  didCopy: boolean
-  snackBarOpen: boolean
-}
-
-const styles = (theme: Theme) => ({
-  snackbar: {
-    backgroundColor: green[600],
-    color: theme.typography.button.color,
-  },
-})
-
-class Copy extends React.Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { didCopy: false, snackBarOpen: false }
-  }
-
-  public render() {
-    const icon = !this.state.didCopy
-      ? <FileCopy fontSize="inherit" style={{ cursor: 'pointer' }} onClick={this.handleClick} />
-      : <Check fontSize="inherit" style={{ cursor: 'default' }} />
-
-    return <span>
-      <span style={{ fontSize: '16px' }}>{icon}</span>
-      <span>
-        <Snackbar
-          anchorOrigin={{
-            vertical: 'bottom',
-            horizontal: 'left',
-          }}
-          open={this.state.snackBarOpen}
-          autoHideDuration={2000}
-          onClose={() => { this.setState({ snackBarOpen: false }) }}
-        >
-          <SnackbarContent
-            className={this.props.classes.snackbar}
-            message="Copied to clipboard"
-          />
-        </Snackbar>
-      </span>
-    </span>
-  }
-
-  private handleClick = (event: React.MouseEvent) => {
-    event.stopPropagation()
-
-    copy(this.props.value)
-    this.setState({ didCopy: true, snackBarOpen: true })
-    setTimeout(() => {
-      this.setState({ didCopy: false })
-    }, 1500)
-  }
-}
-
-export default withStyles(styles)(Copy)
@@ -1,153 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../backend/src/Model'
-
-import { AppState, NodeOrder } from '../reducers'
-import {
-  Divider,
-  Drawer,
-  IconButton,
-  Input,
-  InputLabel,
-  MenuItem,
-  Select,
-  Typography,
-} from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
-import ChevronRight from '@material-ui/icons/ChevronRight'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { settingsActions } from '../actions'
-
-const styles: StyleRulesCallback = theme => ({
-  drawer: {
-    backgroundColor: theme.palette.background.default,
-    flexShrink: 0,
-  },
-  paper: {
-    width: '300px',
-  },
-  title: {
-    color: theme.palette.text.primary,
-    paddingTop: `${theme.spacing.unit}px`,
-    ...theme.mixins.toolbar,
-  },
-  input: {
-    minWidth: '150px',
-    margin: `auto ${theme.spacing.unit}px auto ${2 * theme.spacing.unit}px`,
-  },
-})
-
-interface Props {
-  actions?: any
-  autoExpandLimit: number
-  visible: boolean
-  store?: any
-  classes: any
-  nodeOrder: NodeOrder
-}
-
-class Settings extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-    this.state = {}
-  }
-
-  public render() {
-    const { classes, actions, visible } = this.props
-    return (
-      <Drawer
-        anchor="left"
-        className={classes.drawer}
-        open={visible}
-        variant="persistent"
-      >
-        <div
-          className={classes.paper}
-          tabIndex={0}
-          role="button"
-        >
-
-          <Typography className={classes.title} variant="h6" color="inherit">
-            <IconButton onClick={actions.toggleSettingsVisibility}>
-              <ChevronRight />
-            </IconButton>
-            Settings
-          </Typography>
-          <Divider />
-
-          {this.renderAutoExpand()}
-          {this.renderNodeOrder()}
-        </div>
-      </Drawer>
-    )
-  }
-
-  private renderAutoExpand() {
-    const { classes, autoExpandLimit } = this.props
-    return (
-        <div style={{ padding: '8px' }}>
-        <InputLabel htmlFor="auto-expand">Auto Expand</InputLabel>
-        <Select
-            value={autoExpandLimit}
-            onChange={this.onChangeAutoExpand}
-            input={<Input name="auto-expand" id="auto-expand-label-placeholder" />}
-            name="auto-expand"
-            className={classes.input}
-        >
-          <MenuItem value={0}><em>Collapsed</em></MenuItem>
-          <MenuItem value={2}>Few</MenuItem>
-          <MenuItem value={3}>Some</MenuItem>
-          <MenuItem value={10}>Most</MenuItem>
-          <MenuItem value={1E6}>All</MenuItem>
-        </Select>
-      </div>
-    )
-  }
-
-  private onChangeAutoExpand = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setAutoExpandLimit(e.target.value)
-  }
-
-  private renderNodeOrder() {
-    const { classes, nodeOrder } = this.props
-
-    return (
-      <div style={{ padding: '8px' }}>
-      <InputLabel htmlFor="auto-expand">Topic order</InputLabel>
-      <Select
-          value={nodeOrder}
-          onChange={this.onChangeSorting}
-          input={<Input name="node-order" id="node-order-label-placeholder" />}
-          displayEmpty={true}
-          name="node-order"
-          className={classes.input}
-      >
-        <MenuItem value={NodeOrder.none}><em>default</em></MenuItem>
-        <MenuItem value={NodeOrder.abc}>a-z</MenuItem>
-        <MenuItem value={NodeOrder.messages}>{NodeOrder.messages}</MenuItem>
-        <MenuItem value={NodeOrder.topics}>{NodeOrder.topics}</MenuItem>
-      </Select>
-    </div>)
-  }
-
-  private onChangeSorting = (e: React.ChangeEvent<HTMLSelectElement>) => {
-    this.props.actions.setNodeOrder(e.target.value)
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    autoExpandLimit: state.settings.autoExpandLimit,
-    nodeOrder: state.settings.nodeOrder,
-    visible: state.settings.visible,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(settingsActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(mapStateToProps, mapDispatchToProps)(Settings))
@@ -1,89 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Badge, Typography } from '@material-ui/core'
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-interface HistoryItem {
-  title: string
-  value: string
-}
-
-interface Props {
-  items: HistoryItem[]
-  onClick?: (index: number, element: EventTarget) => void
-  classes: any
-}
-
-interface State {
-  collapsed: boolean
-}
-
-class MessageHistory extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      collapsed: true,
-    }
-  }
-
-  public renderHistory() {
-    const messageStyle: React.CSSProperties = { textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden' }
-    const elements = this.props.items.map((element, index) => (
-      <div
-        key={index}
-        style={{
-          backgroundColor: 'rgba(80, 80, 80, 0.6)',
-          margin: '8px',
-          padding: '8px 8px 0 8px',
-          cursor: this.props.onClick ? 'pointer' : 'inherit',
-        }}
-        onClick={(event: React.MouseEvent) => this.props.onClick && this.props.onClick(index, event.target)}
-      >
-        <div><i>{element.title}</i></div>
-        <div style={messageStyle}>
-          <span><pre>{element.value}</pre></span>
-        </div>
-      </div>
-    ))
-
-    return (
-      <div style={{ backgroundColor: 'rgba(60, 60, 60, 0.6)', marginTop: '16px' }}>
-        <Typography
-          onClick={this.toggle}
-          style={{ cursor: 'pointer' }}
-        >
-          {this.state.collapsed ? '▶' : '▼'} History
-        </Typography>
-        <div style={{ maxHeight: '230px', overflowY: 'scroll'  }}>
-          {this.state.collapsed ? null : elements}
-        </div>
-      </div>
-    )
-  }
-
-  public render() {
-    const visible = this.props.items.length > 0 && this.state.collapsed
-    return (
-      <Badge
-        style={{ display: 'block', width: '100%' }}
-        invisible={!visible}
-        badgeContent={this.props.items.length}
-        color="primary"
-        classes={{ badge: this.props.classes.badge }}
-      >
-        {this.renderHistory()}
-      </Badge>
-    )
-  }
-
-  private toggle = () => {
-    this.setState({ collapsed: !this.state.collapsed })
-  }
-}
-
-const styles = (theme: Theme) => ({
-  badge: { top: '-8px', left:'64px' },
-})
-
-export default withStyles(styles)(MessageHistory)
@@ -1,76 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Theme, withTheme } from '@material-ui/core/styles'
-
-import Fade from '@material-ui/core/Fade'
-import History from './History'
-import Paper from '@material-ui/core/Paper'
-import Popper from '@material-ui/core/Popper'
-import ValueRenderer from './ValueRenderer'
-
-const throttle = require('lodash.throttle')
-
-interface Props {
-  node?: q.TreeNode
-  theme: Theme
-  onSelect: (message: q.Message) => void
-}
-
-interface State {
-  displayMessage?: q.Message,
-  anchorEl?: HTMLElement
-}
-
-class MessageHistory extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = { }
-  }
-
-  private updateNode = throttle(() => {
-    this.setState(this.state)
-  }, 300)
-
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-    nextProps.node && nextProps.node.onMessage.subscribe(this.updateNode)
-  }
-
-  public componentWillMount() {
-    this.props.node && this.props.node.onMessage.subscribe(this.updateNode)
-  }
-
-  public componentWillUnMount() {
-    this.props.node && this.props.node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  public render() {
-    const { node } = this.props
-    if (!node) {
-      return null
-    }
-
-    const history = node.messageHistory.toArray()
-    const historyElements = history.map(message => ({
-      title: message.received.toGMTString(),
-      value: message.value,
-    }))
-
-    return (
-      <div>
-        <History
-          items={historyElements}
-          onClick={this.displayMessage}
-        />
-      </div>
-    )
-  }
-
-  private displayMessage = (index: number, eventTarget: EventTarget) => {
-    const message = this.props.node && this.props.node.messageHistory.toArray()[index]
-    this.props.onSelect(message)
-  }
-}
-
-export default withTheme()(MessageHistory)
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Typography } from '@material-ui/core'
-
-interface Props {
-  node: q.TreeNode
-}
-
-class NodeStats extends React.Component<Props, {}> {
-  constructor(props: any) {
-    super(props)
-  }
-
-  public render() {
-    const { node } = this.props
-
-    return (
-      <div>
-        <Typography>Messages: #{node.messages}</Typography>
-        <Typography>Subtopics: {node.leafCount()}</Typography>
-        <Typography>Messages Subtopics: #{node.leafMessageCount()}</Typography>
-      </div>
-    )
-  }
-}
-
-export default NodeStats
@@ -1,7 +0,0 @@
-interface Message {
-  topic: string
-  payload?: string
-  sent: Date
-}
-
-export default Message
@@ -1,234 +0,0 @@
-// tslint:disable-next-line
-import 'react-ace'
-import 'brace/mode/json'
-import 'brace/mode/text'
-import 'brace/mode/xml'
-import 'brace/theme/monokai'
-
-import * as React from 'react'
-import * as brace from 'brace'
-import * as q from '../../../../../backend/src/Model'
-
-import {
-  Button,
-  Fab,
-  FormControlLabel,
-  InputAdornment,
-  Radio,
-  RadioGroup,
-  TextField,
-  Typography,
-} from '@material-ui/core'
-import { makePublishEvent, rendererEvents } from '../../../../../events'
-
-import { default as AceEditor } from 'react-ace'
-import { AppState } from '../../../reducers'
-import History from '../History'
-import Message from './Model/Message'
-import Navigation from '@material-ui/icons/Navigation'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { sidebarActions } from '../../../actions'
-
-interface Props {
-  node?: q.TreeNode
-  connectionId?: string
-  topic?: string
-  payload?: string
-  actions: any
-}
-
-interface State {
-  mode: string
-  history: Message[]
-}
-
-class Publish extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = { mode: 'json', history: [] }
-  }
-
-  private updatePayload = (value: string, event?: any) => {
-    this.props.actions.setPublishPayload(value)
-  }
-
-  private updateTopic = (e: React.ChangeEvent<HTMLInputElement>) => {
-    console.log(e.target.value)
-    this.props.actions.setPublishTopic(e.target.value)
-  }
-
-  private updateMode = (e: React.ChangeEvent<{}>, value: string) => {
-    this.setState({ mode: value })
-  }
-
-  private publish = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    const topic = this.currentTopic() || ''
-    const payload = this.props.payload
-
-    if (this.props.connectionId && topic) {
-      rendererEvents.emit(makePublishEvent(this.props.connectionId), { topic, payload })
-      this.addMessageToHistory(topic, payload)
-    }
-  }
-
-  private addMessageToHistory(topic: string, payload?: string) {
-    // Remove duplicates
-    let filteredHistory = this.state.history.filter(e => e.payload !== payload || e.topic !== topic)
-    filteredHistory = filteredHistory.slice(-7)
-    const history: Message[] = [...filteredHistory, { topic, payload, sent: new Date() }]
-    this.setState({ history })
-  }
-
-  public render() {
-    return (
-      <div style={{ flexGrow: 1, marginLeft: '8px' }}>
-        {this.topic()}
-        {this.editor()}
-        {this.history()}
-      </div>
-    )
-  }
-
-  private currentTopic(): string | undefined {
-    const { node, topic } = this.props
-    const selectedNodePath = (node ? node.path() : undefined)
-
-    return (topic !== undefined) ? topic : selectedNodePath
-  }
-
-  private topic() {
-    const topicStr = this.currentTopic() || ''
-
-    return (
-      <div>
-        <Typography>Topic</Typography>
-        <TextField
-          placeholder="example/topic"
-          style={{ width: '100%' }}
-          margin="normal"
-          value={topicStr}
-          multiline={true}
-          onChange={this.updateTopic}
-          InputProps={{ onBlur: this.onTopicBlur }}
-        />
-      </div>
-    )
-  }
-
-  private onTopicBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (!e.target.value) {
-      this.props.actions.setPublishTopic(undefined)
-    }
-  }
-
-  private editorOptions = {
-    showLineNumbers: false,
-    tabSize: 2,
-  }
-
-  private publishButton() {
-    return (
-      <Button
-        variant="contained"
-        size="small"
-        color="primary"
-        onClick={this.publish}
-      >
-        <Navigation style={{ marginRight: '8px' }} /> Publish
-      </Button>
-    )
-  }
-
-  private editorMode() {
-    const labelStyle = { margin: '0 8px 0 8px' }
-    return (
-      <div style={{ marginTop: '16px' }}>
-        <div style={{ width: '100%', lineHeight: '64px' }}>
-          <RadioGroup
-            style={{ display: 'inline-block', float: 'left' }}
-            value={this.state.mode}
-            onChange={this.updateMode}
-            row={true}
-          >
-            <FormControlLabel
-              value="text"
-              style={labelStyle}
-              control={<Radio color="primary" />}
-              label="raw"
-              labelPlacement="top"
-            />
-            <FormControlLabel
-              value="xml"
-              style={labelStyle}
-              control={<Radio color="primary" />}
-              label="xml"
-              labelPlacement="top"
-            />
-            <FormControlLabel
-              value="json"
-              style={labelStyle}
-              control={<Radio color="primary" />}
-              label="json"
-              labelPlacement="top"
-            />
-          </RadioGroup>
-          <div style={{ float: 'right', marginRight: '16px' }}>
-            {this.publishButton()}
-          </div>
-        </div>
-      </div>
-    )
-  }
-
-  private history() {
-    const items = this.state.history.map(message => ({
-      title: message.topic,
-      value: message.payload,
-    }))
-
-    return <History items={items} onClick={this.didSelectHistoryEntry} />
-  }
-
-  private didSelectHistoryEntry = (index: number) => {
-    let message = this.state.history[index]
-    this.props.actions.setPublishTopic(message.topic)
-    this.props.actions.setPublishPayload(message.payload)
-  }
-
-  private editor() {
-    return (
-      <div style={{ width: '100%', display: 'block' }}>
-        {this.editorMode()}
-        <AceEditor
-          mode={this.state.mode}
-          theme="monokai"
-          name="UNIQUE_ID_OF_DIV"
-          width="100%"
-          height="200px"
-          showGutter={true}
-          value={this.props.payload}
-          onChange={this.updatePayload}
-          setOptions={this.editorOptions}
-          editorProps={{ $blockScrolling: true }}
-        />
-      </div>
-    )
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(sidebarActions, dispatch),
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    topic: state.sidebar.publishTopic,
-    payload: state.sidebar.publishPayload,
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(Publish)
@@ -1,176 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import {
-  ExpansionPanel,
-  ExpansionPanelDetails,
-  ExpansionPanelSummary,
-  Fade,
-  Paper,
-  Popper,
-  Typography,
-} from '@material-ui/core'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-
-import { AppState } from '../../reducers'
-import Copy from '../Copy'
-import ExpandMore from '@material-ui/icons/ExpandMore'
-import MessageHistory from './MessageHistory'
-import NodeStats from './NodeStats'
-import Publish from './Publish/Publish'
-import Topic from './Topic'
-import ValueRenderer from './ValueRenderer'
-import { connect } from 'react-redux'
-
-const throttle = require('lodash.throttle')
-
-interface Props {
-  node?: q.TreeNode,
-  classes: any,
-  theme: Theme,
-  connectionId?: string,
-}
-
-interface State {
-  node: q.TreeNode,
-  compareMessage?: q.Message
-}
-
-class Sidebar extends React.Component<Props, State> {
-  private valueRef: any = React.createRef<HTMLDivElement>()
-  private updateNode = throttle(() => {
-    this.setState(this.state)
-  }, 300)
-
-  constructor(props: any) {
-    super(props)
-    console.error('Find and fix me #state')
-    this.state = { node: new q.Tree() }
-  }
-
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      drawer: {
-        display: 'block',
-        height: '100%',
-      },
-      valuePaper: {
-        margin: `${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px ${theme.spacing.unit}px`,
-      },
-      heading: {
-        fontSize: theme.typography.pxToRem(15),
-        fontWeight: theme.typography.fontWeightRegular,
-      },
-    }
-  }
-
-  public componentWillReceiveProps(nextProps: Props) {
-    this.props.node && this.removeUpdateListener(this.props.node)
-    nextProps.node && this.registerUpdateListener(nextProps.node)
-    this.props.node && this.setState({ node: this.props.node })
-
-    if (this.props.node !== nextProps.node) {
-      this.setState({ compareMessage: undefined })
-    }
-  }
-
-  private registerUpdateListener(node: q.TreeNode) {
-    node.onMerge.subscribe(this.updateNode)
-    node.onMessage.subscribe(this.updateNode)
-  }
-
-  private removeUpdateListener(node: q.TreeNode) {
-    node.onMerge.unsubscribe(this.updateNode)
-    node.onMessage.unsubscribe(this.updateNode)
-  }
-
-  public render() {
-    return (
-      <div className={this.props.classes.drawer}>
-        {this.renderNode()}
-      </div>
-    )
-  }
-
-  private detailsStyle = { padding: '0px 16px 8px 8px', display: 'block' }
-
-  private renderNode() {
-    const { classes, node } = this.props
-
-    const copyTopic = node ? <Copy value={node.path()} /> : null
-    const copyValue = node && node.message ? <Copy value={node.message.value} /> : null
-    const summeryStyle = { minHeight: '0' }
-    return (
-      <div>
-        <ExpansionPanel key="topic" defaultExpanded={true} disabled={!Boolean(this.props.node)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Topic {copyTopic}</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            <Topic node={this.props.node} didSelectNode={this.updateNode} />
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel key="value" defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Value {copyValue}</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            <div ref={this.valueRef}><ValueRenderer message={this.props.node && this.props.node.message} /></div>
-            <div><MessageHistory onSelect={this.handleMessageHistorySelect} node={this.props.node} /></div>
-            <Popper open={Boolean(this.state.compareMessage)} anchorEl={this.valueRef.current} placement="left" transition={true}>
-              {({ TransitionProps }) => (
-                <Fade {...TransitionProps} timeout={350}>
-                  <Paper>
-                    <ValueRenderer message={this.state.compareMessage} />
-                  </Paper>
-                </Fade>
-              )}
-            </Popper>
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel defaultExpanded={true}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Publish</Typography>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails style={this.detailsStyle}>
-            <Publish node={this.props.node} connectionId={this.props.connectionId} />
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
-        <ExpansionPanel defaultExpanded={Boolean(this.props.node)}>
-          <ExpansionPanelSummary expandIcon={<ExpandMore />} style={summeryStyle}>
-            <Typography className={classes.heading}>Stats</Typography>
-          </ExpansionPanelSummary>
-          {this.renderNodeStats()}
-        </ExpansionPanel>
-      </div>
-    )
-  }
-
-  private handleMessageHistorySelect = (message: q.Message) => {
-    if (message !== this.state.compareMessage) {
-      this.setState({ compareMessage: message })
-    } else {
-      this.setState({ compareMessage: undefined })
-    }
-  }
-
-  private renderNodeStats() {
-    if (!this.props.node) {
-      return null
-    }
-
-    return (
-      <ExpansionPanelDetails style={this.detailsStyle}>
-        <NodeStats node={this.props.node} />
-      </ExpansionPanelDetails>
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    node: state.selectedTopic,
-  }
-}
-
-export default withStyles(Sidebar.styles, { withTheme: true })(connect(mapStateToProps)(Sidebar))
@@ -1,59 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-import Button from '@material-ui/core/Button'
-import { withStyles, Theme, StyleRulesCallback } from '@material-ui/core/styles'
-
-interface Props {
-  classes: any
-  theme: Theme
-  node?: q.TreeNode
-  selected?: q.TreeNode
-  didSelectNode: (node: q.TreeNode) => void
-}
-
-const styles: StyleRulesCallback<string> = (theme: Theme) => ({
-  button: {
-    textTransform: 'none',
-    padding: '3px 5px 3px 5px',
-    minWidth: '30px',
-  },
-})
-
-class Topic extends React.Component<Props, {}> {
-  public render() {
-    const { node } = this.props
-    if (!node) {
-      return null
-    }
-
-    let key = 0
-    const breadCrumps = node.branch()
-      .map(node => node.sourceEdge)
-      .filter(edge => Boolean(edge))
-      .map(edge =>
-        [(
-          <Button
-            onClick={() => this.setState({ node: edge!.target })}
-            size="small"
-            color="secondary"
-            className={this.props.classes.button}
-            key={edge!.hash()}
-          >
-            {edge!.name}
-          </Button>
-        )],
-      )
-
-    if (breadCrumps.length === 0) {
-      return null
-    }
-
-    const joinedBreadCrumps = breadCrumps.reduce((prev, current) =>
-      prev.concat([<span key={key += 1}>/</span>]).concat(current),
-    )
-
-    return <span style={{ lineHeight: '2.2em' }}>{joinedBreadCrumps}</span>
-  }
-}
-
-export default withStyles(styles, { withTheme: true })(Topic)
@@ -1,67 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Theme, withTheme } from '@material-ui/core/styles'
-
-import { default as ReactJson } from 'react-json-view'
-
-interface Props {
-  message?: q.Message
-  theme: Theme
-}
-
-class ValueRenderer extends React.Component<Props, {}> {
-  public render() {
-    return <div>{this.renderValue()}</div>
-  }
-
-  public renderValue() {
-    const { message } = this.props
-    if (!message) {
-      return null
-    }
-
-    let json
-    try {
-      json = JSON.parse(message.value)
-    } catch (error) {
-      return this.renderRawValue(message.value)
-    }
-
-    if (typeof json === 'string') {
-      return this.renderRawValue(message.value)
-    } else if (typeof json === 'number') {
-      return this.renderRawValue(message.value)
-    } else if (typeof json === 'boolean') {
-      return this.renderRawValue(message.value)
-    } else {
-      const theme = (this.props.theme.palette.type === 'dark') ? 'monokai' : 'bright:inverted'
-      return (
-        <ReactJson
-          style={{ width: '100%' }}
-          src={json}
-          name={null}
-          theme={theme}
-        />
-      )
-    }
-  }
-
-  private renderRawValue(value: string) {
-    const style: React.CSSProperties = {
-      backgroundColor: 'rgba(80, 80, 80, 0.6)',
-      wordBreak: 'break-all',
-      width: '100%',
-      overflow: 'auto hidden',
-      display: 'block',
-      lineHeight: '1.2em',
-      padding: '12px 5px 12px 5px',
-      maxWidth: '40vw',
-      color: this.props.theme.palette.text.primary,
-    }
-
-    return <pre style={style}><code>{value}</code></pre>
-  }
-}
-
-export default withTheme()(ValueRenderer)
@@ -1,3 +0,0 @@
-import Sidebar from './Sidebar'
-
-export { Sidebar }
@@ -1,126 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../backend/src/Model'
-
-import { AppBar, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
-import Menu from '@material-ui/icons/Menu'
-import Search from '@material-ui/icons/Search'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { fade } from '@material-ui/core/styles/colorManipulator'
-import { settingsActions } from '../actions'
-
-const styles: StyleRulesCallback = theme => ({
-  title: {
-    display: 'none',
-    [theme.breakpoints.up('sm')]: {
-      display: 'block',
-    },
-  },
-  search: {
-    position: 'relative',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
-    },
-    marginRight: theme.spacing.unit * 2,
-    marginLeft: 0,
-    width: '100%',
-    [theme.breakpoints.up('sm')]: {
-      marginLeft: theme.spacing.unit * 3,
-      width: 'auto',
-    },
-  },
-  searchIcon: {
-    width: theme.spacing.unit * 9,
-    height: '100%',
-    position: 'absolute',
-    pointerEvents: 'none',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  inputRoot: {
-    color: 'inherit',
-    width: '100%',
-  },
-  inputInput: {
-    paddingTop: theme.spacing.unit,
-    paddingRight: theme.spacing.unit,
-    paddingBottom: theme.spacing.unit,
-    paddingLeft: theme.spacing.unit * 10,
-    transition: theme.transitions.create('width'),
-    width: '100%',
-    [theme.breakpoints.up('md')]: {
-      width: 200,
-    },
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-})
-
-interface Props {
-  classes: any
-  actions: any
-}
-
-interface State {
-  selectedNode?: q.TreeNode
-  settingsVisible: boolean
-  autoExpandLimit: number
-}
-
-class TitleBar extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      selectedNode: undefined,
-      settingsVisible: false,
-      autoExpandLimit: 0,
-    }
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    return (
-      <AppBar position="static">
-        <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={this.props.actions.toggleSettingsVisibility}>
-            <Menu />
-          </IconButton>
-          <Typography className={classes.title} variant="h6" color="inherit">MQTT-Explorer</Typography>
-        </Toolbar>
-      </AppBar>
-    )
-  }
-
-  private renderSearch() {
-    const { classes } = this.props
-
-    return <div className={classes.search}>
-      <div className={classes.searchIcon}>
-        <Search />
-      </div>
-      <InputBase
-        placeholder="Search…"
-        classes={{
-          root: classes.inputRoot,
-          input: classes.inputInput,
-        }}
-      />
-    </div>
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(settingsActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TitleBar))
@@ -1,135 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { makeConnectionMessageEvent, rendererEvents } from '../../../../events'
-
-import { AppState } from '../../reducers'
-import TreeNode from './TreeNode'
-import { connect } from 'react-redux'
-
-const MovingAverage = require('moving-average')
-
-const timeInterval = 10 * 1000
-const average = MovingAverage(timeInterval)
-
-declare var window: any
-
-interface Props {
-  autoExpandLimit: number
-  didSelectNode?: (node: q.TreeNode) => void
-  connectionId?: string
-}
-
-interface TreeState {
-  tree: q.Tree
-  msg: any
-}
-
-class Tree extends React.Component<Props, TreeState> {
-  private updateTimer?: any
-  private lastUpdate: number = 0
-  private perf: number = 0
-
-  constructor(props: any) {
-    super(props)
-    const tree = new q.Tree()
-    this.state = { tree, msg: {} }
-  }
-
-  public time(): number {
-    const time = performance.now() - this.perf
-    this.perf = performance.now()
-
-    return time
-  }
-
-  private performanceCallback = (ms: number) => {
-    average.push(Date.now(), ms)
-  }
-
-  public throttledStateUpdate(state: any) {
-    if (this.updateTimer) {
-      return
-    }
-
-    const expectedRenderTime = average.forecast()
-    const updateInterval = Math.max(expectedRenderTime * 7, 300)
-    const timeUntilNextUpdate = updateInterval - (performance.now() - this.lastUpdate)
-
-    this.updateTimer = setTimeout(() => {
-      window.requestIdleCallback(() => {
-        this.lastUpdate = performance.now()
-        this.updateTimer && clearTimeout(this.updateTimer)
-        this.updateTimer = undefined
-        this.setState(state)
-      }, { timeout: 500 })
-    }, Math.max(0, timeUntilNextUpdate))
-  }
-
-  public componentWillReceiveProps(nextProps: Props) {
-    if (this.props.connectionId) {
-      const event = makeConnectionMessageEvent(this.props.connectionId)
-      rendererEvents.unsubscribeAll(event)
-    }
-    if (nextProps.connectionId) {
-      const event = makeConnectionMessageEvent(nextProps.connectionId)
-      rendererEvents.subscribe(event, this.handleNewData)
-    }
-  }
-
-  public componentDidMount() {
-    if (this.props.connectionId) {
-      const event = makeConnectionMessageEvent(this.props.connectionId)
-      rendererEvents.subscribe(event, this.handleNewData)
-    }
-  }
-
-  public componentWillUnmount() {
-    if (this.props.connectionId) {
-      const event = makeConnectionMessageEvent(this.props.connectionId)
-      rendererEvents.unsubscribeAll(event)
-    }
-  }
-
-  private handleNewData = (msg: any) => {
-    const edges = msg.topic.split('/')
-    const node = q.TreeNodeFactory.fromEdgesAndValue(edges, Buffer.from(msg.payload, 'base64').toString())
-    this.state.tree.updateWithNode(node.firstNode())
-
-    this.throttledStateUpdate({ msg, tree: this.state.tree })
-  }
-
-  public render() {
-    console.log('render called')
-
-    const style: React.CSSProperties = {
-      lineHeight: '1.1',
-      cursor: 'default',
-    }
-
-    return (
-      <div style={style}>
-        <TreeNode
-          animateChages={true}
-          autoExpandLimit={this.props.autoExpandLimit}
-          isRoot={true}
-          didSelectNode={this.props.didSelectNode}
-          treeNode={this.state.tree}
-          name="/"
-          collapsed={false}
-          key="rootNode"
-          lastUpdate={this.state.tree.lastUpdate}
-          performanceCallback={this.performanceCallback}
-        />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    autoExpandLimit: state.settings.autoExpandLimit,
-  }
-}
-
-export default connect(mapStateToProps)(Tree)
@@ -1,237 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-import LabelImportant from '@material-ui/icons/LabelImportant'
-import TreeNodeSubnodes from './TreeNodeSubnodes'
-import TreeNodeTitle from './TreeNodeTitle'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { isElementInViewport } from '../helper/isElementInViewport'
-import { treeActions } from '../../actions'
-
-declare var performance: any
-
-const styles = (theme: Theme) => {
-  return {
-    collapsedSubnodes: {
-      color: theme.palette.text.secondary,
-    },
-    displayBlock: {
-      display: 'block',
-    },
-    node: {
-      display: 'block',
-      marginLeft: '10px',
-    },
-    hover: {
-      '&:hover': {
-        backgroundColor: 'rgba(80, 80, 80, 0.35)',
-      },
-    },
-    topicSelect: {
-      float: 'right' as 'right',
-      opacity: 0,
-      cursor: 'pointer',
-      marginTop: '-1px',
-    },
-  }
-}
-
-interface Props {
-  actions: any
-  lastUpdate: number
-  animateChages: boolean
-  isRoot?: boolean
-  treeNode: q.TreeNode
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  performanceCallback?: ((ms: number) => void) | undefined
-  didSelectNode?: (node: q.TreeNode) => void
-  classes: any
-  autoExpandLimit: number
-  style?: React.CSSProperties
-}
-
-interface State {
-  collapsedOverride: boolean | undefined
-}
-
-class TreeNode extends React.Component<Props, State> {
-  private dirtySubnodes: boolean = true
-  private dirtyEdges: boolean = true
-  private dirtyMessage: boolean = true
-  private animationDirty: boolean = false
-
-  private cssAnimationWasSetAt?: number
-
-  private willUpdateTime: number = performance.now()
-  private titleRef = React.createRef<HTMLDivElement>()
-  private topicSelectRef = React.createRef<HTMLDivElement>()
-
-  private subnodesDidchange = () => {
-    this.dirtySubnodes = true
-  }
-
-  private messageDidChange = () => {
-    this.dirtyMessage = true
-  }
-
-  private edgesDidChange = () => {
-    this.dirtyMessage = true
-  }
-
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      collapsedOverride: props.collapsed,
-    }
-  }
-
-  public componentDidMount() {
-    const { treeNode } = this.props
-    treeNode.onMerge.subscribe(this.subnodesDidchange)
-    treeNode.onEdgesChange.subscribe(this.edgesDidChange)
-    treeNode.onMessage.subscribe(this.messageDidChange)
-  }
-
-  public componentWillUnmount() {
-    const { treeNode } = this.props
-    treeNode.onMerge.unsubscribe(this.subnodesDidchange)
-    treeNode.onEdgesChange.unsubscribe(this.edgesDidChange)
-    treeNode.onMessage.unsubscribe(this.messageDidChange)
-  }
-
-  private stateHasChanged(newState: State) {
-    return this.state.collapsedOverride !== newState.collapsedOverride
-  }
-
-  private propsHasChanged(newProps: Props) {
-    return this.props.autoExpandLimit !== newProps.autoExpandLimit
-  }
-
-  public shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
-    return this.stateHasChanged(nextState)
-      || this.propsHasChanged(nextProps)
-      || this.dirtyEdges
-      || this.dirtyMessage
-      || this.dirtySubnodes
-      || this.animationDirty
-      || shouldRenderToRemoveCssAnimation
-  }
-
-  public componentDidUpdate() {
-    if (this.props.performanceCallback) {
-      const renderTime = performance.now() - this.willUpdateTime
-      this.props.performanceCallback(renderTime)
-    }
-  }
-
-  public componentWillUpdate() {
-    if (this.props.performanceCallback) {
-      this.willUpdateTime = performance.now()
-    }
-  }
-
-  private toggle() {
-    this.setState({ collapsedOverride: !this.collapsed() })
-  }
-
-  private collapsed() {
-    if (this.state.collapsedOverride !== undefined) {
-      return this.state.collapsedOverride
-    }
-
-    return this.props.treeNode.edgeCount() > this.props.autoExpandLimit
-  }
-
-  public render() {
-    const { classes } = this.props
-    const isDirty = this.dirtyEdges || this.dirtyMessage || this.dirtySubnodes
-    this.dirtyEdges = this.dirtyMessage = this.dirtySubnodes = false
-
-    const shouldStartAnimation = (isDirty && !this.animationDirty) && !this.props.isRoot
-    const animation = shouldStartAnimation ? { animation: 'example 0.5s' } : {}
-    this.animationDirty = shouldStartAnimation
-
-    return (
-      <div
-        key={this.props.treeNode.hash()}
-        className={`${classes.node} ${!this.props.isRoot ? classes.hover : ''}`}
-        onClick={this.didClickNode}
-        style={this.props.style}
-        onMouseOver={this.mouseOver}
-        onMouseOut={this.mouseOut}
-      >
-        <span ref={this.titleRef} style={animation}>
-          <TreeNodeTitle
-            collapsed={this.collapsed()}
-            treeNode={this.props.treeNode}
-            name={this.props.name}
-            lastUpdate={this.props.treeNode.lastUpdate}
-          />
-        </span>
-        <div
-          className={this.props.classes.topicSelect}
-          ref={this.topicSelectRef}
-          onClick={this.didSelectNode}
-          title="Select topic"
-        >
-          <LabelImportant style={{ fontSize: '14px' }} />
-        </div>
-        {this.renderNodes()}
-      </div>
-    )
-  }
-
-  private mouseOver = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '1'
-    }
-  }
-  private mouseOut = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '0'
-    }
-  }
-
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.topicSelectRef.current) {
-      this.topicSelectRef.current.style.opacity = '1'
-    }
-    this.props.actions.selectTopic(this.props.treeNode)
-  }
-
-  private didClickNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.toggle()
-    this.props.actions.selectTopic(this.props.treeNode)
-  }
-
-  private renderNodes() {
-    return (
-      <TreeNodeSubnodes
-        animateChanges={this.props.animateChages}
-        collapsed={this.collapsed()}
-        autoExpandLimit={this.props.autoExpandLimit}
-        didSelectNode={this.props.didSelectNode}
-        treeNode={this.props.treeNode}
-        lastUpdate={this.props.treeNode.lastUpdate}
-      />
-    )
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withStyles(styles)(connect(null, mapDispatchToProps)(TreeNode))
@@ -1,79 +0,0 @@
-import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
-
-import { AppState, NodeOrder } from '../../reducers'
-import { Theme, withTheme } from '@material-ui/core/styles'
-
-import TreeNode from './TreeNode'
-import { connect } from 'react-redux'
-
-export interface Props {
-  lastUpdate: number
-  nodeOrder?: NodeOrder
-  animateChanges: boolean
-  treeNode: q.TreeNode
-  autoExpandLimit: number
-  collapsed?: boolean | undefined
-  didSelectNode?: (node: q.TreeNode) => void
-  theme: Theme
-}
-
-class TreeNodeSubnodes extends React.Component<Props, {}> {
-  private sortedNodes(): q.TreeNode[] {
-    const { nodeOrder, treeNode } = this.props
-
-    let edges = Object.values(treeNode.edges)
-    if (nodeOrder === NodeOrder.abc) {
-      edges = edges.sort((a, b) => a.name.localeCompare(b.name))
-    }
-
-    let nodes = edges.map(edge => edge.target)
-    if (nodeOrder === NodeOrder.messages) {
-      nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
-    }
-    if (nodeOrder === NodeOrder.topics) {
-      nodes = nodes.sort((a, b) => b.leafCount() - a.leafCount())
-    }
-
-    return nodes
-  }
-
-  public render() {
-    const edges = Object.values(this.props.treeNode.edges)
-    if (edges.length === 0 || this.props.collapsed) {
-      return null
-    }
-
-    const listItemStyle = {
-      padding: '3px 0px 0px 8px',
-    }
-
-    const nodes = this.sortedNodes()
-    const listItems = nodes.map(node => (
-        <div key={node.hash()}>
-          <TreeNode
-            animateChages={this.props.animateChanges}
-            treeNode={node}
-            didSelectNode={this.props.didSelectNode}
-            autoExpandLimit={this.props.autoExpandLimit}
-            lastUpdate={node.lastUpdate}
-            style={listItemStyle}
-          />
-        </div>
-      ))
-
-    return (
-      <span style={{ display: 'block', clear: 'both' }} >
-        {listItems}
-      </span>
-    )
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    nodeOrder: state.settings.nodeOrder,
-  }
-}
-
-export default withTheme()(connect(mapStateToProps)(TreeNodeSubnodes))
@@ -1,99 +0,0 @@
-import * as React from 'react'
-import { connect } from 'react-redux'
-import { bindActionCreators } from 'redux'
-import { treeActions } from '../../actions'
-import * as q from '../../../../backend/src/Model'
-import { withTheme, Theme } from '@material-ui/core/styles'
-
-export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
-  treeNode: q.TreeNode
-  actions: any
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  theme: Theme
-  lastUpdate: number
-}
-
-class TreeNodeTitle extends React.Component<TreeNodeProps, {}> {
-  private getStyles() {
-    const { theme } = this.props
-    return {
-      collapsedSubnodes: {
-        color: theme.palette.text.secondary,
-      },
-      container: {
-        display: 'block',
-      },
-    }
-  }
-
-  private didSelectNode = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    if (this.props.treeNode.message) {
-      this.props.actions.selectTopic(this.props.treeNode)
-    }
-  }
-
-  public render() {
-    const style: React.CSSProperties = {
-      lineHeight: '1em',
-      whiteSpace: 'nowrap',
-    }
-    return (
-      <span style={style} onMouseOver={this.didSelectNode}>
-        {this.renderExpander()} {this.renderSourceEdge()} {this.renderCollapsedSubnodes()} {this.renderValue()}
-      </span>
-    )
-  }
-
-  private renderSourceEdge() {
-    const style: React.CSSProperties = {
-      fontWeight: 'bold',
-      overflow: 'hidden',
-      display: 'inline-block',
-    }
-    const name = this.props.name || (this.props.treeNode.sourceEdge && this.props.treeNode.sourceEdge.name)
-
-    return <span style={style}>{name}</span>
-  }
-
-  private renderValue() {
-    const style: React.CSSProperties = {
-      maxWidth: '15em',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      padding: '0',
-      marginLeft: '5px',
-      display: 'inline-block',
-    }
-    return this.props.treeNode.message
-      ? <span style={style}> = {this.props.treeNode.message.value.toString()}</span>
-      : null
-  }
-
-  private renderExpander() {
-    if (this.props.treeNode.edgeCount() === 0) {
-      return null
-    }
-
-    return this.props.collapsed ? '▶' : '▼'
-  }
-
-  private renderCollapsedSubnodes() {
-    if (this.props.treeNode.edgeCount() === 0 || !this.props.collapsed) {
-      return null
-    }
-
-    const messages = this.props.treeNode.leafMessageCount()
-    return <span style={this.getStyles().collapsedSubnodes}>({this.props.treeNode.leafCount()} nodes, {messages} messages)</span>
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(treeActions, dispatch),
-  }
-}
-
-export default withTheme()(connect(null, mapDispatchToProps)(TreeNodeTitle))
@@ -1,12 +0,0 @@
-declare const window: any
-declare const document: any
-
-export function isElementInViewport(el: any) {
-  const rect = el.getBoundingClientRect()
-  return (
-        rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
-  )
-}
@@ -1,45 +0,0 @@
-import './tracking'
-
-import * as React from 'react'
-import * as ReactDOM from 'react-dom'
-
-import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'
-import reducers, { AppState, NodeOrder } from './reducers'
-
-import App from './App'
-import { Provider } from 'react-redux'
-import { createStore } from 'redux'
-
-const initialAppState: AppState = {
-  settings: {
-    autoExpandLimit: 0,
-    nodeOrder: NodeOrder.none,
-    visible: false,
-  },
-  sidebar: {},
-  selectedTopic: undefined,
-  showUpdateDetails: false,
-}
-const store = createStore(reducers, initialAppState)
-
-const theme = createMuiTheme({
-  palette: {
-    type: 'dark',
-  },
-  typography: { useNextVariants: true },
-})
-
-const splash = document.getElementById('splash')
-if (splash) {
-  splash.style.animation = 'unsplash 1s ease-out 0s 1 normal forwards'
-  setTimeout(() => splash.remove(), 1100)
-}
-
-ReactDOM.render(
-    <MuiThemeProvider theme={theme}>
-      <Provider store={store}>
-        <App name="" />
-      </Provider>
-    </MuiThemeProvider>,
-    document.getElementById('app'),
-)
@@ -1,125 +0,0 @@
-import * as q from '../../../backend/src/Model'
-
-import { Action, Reducer } from 'redux'
-
-import { trackEvent } from '../tracking'
-
-export enum ActionTypes {
-  setAutoExpandLimit = 'SET_AUTO_EXPAND_LIMIT',
-  toggleSettingsVisibility = 'TOGGLE_SETTINGS_VISIBILITY',
-  setNodeOrder = 'SET_NODE_ORDER',
-  selectTopic = 'SELECT_TOPIC',
-  setPublishTopic = 'SET_PUBLISH_TOPIC',
-  setPublishPayload = 'SET_PUBLISH_PAYLOAD',
-  showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
-  showUpdateDetails = 'SHOW_UPDATE_DETAILS',
-}
-
-export interface CustomAction extends Action {
-  type: ActionTypes,
-  autoExpandLimit?: number
-  nodeOrder?: NodeOrder
-  selectedTopic?: q.TreeNode
-  publishTopic?: string
-  publishPayload?: string
-  showUpdateNotification?: boolean
-  showUpdateDetails?: boolean
-}
-
-export interface SidebarState {
-  publishTopic?: string
-  publishPayload?: string
-}
-
-export interface AppState {
-  settings: SettingsState,
-  selectedTopic?: q.TreeNode
-  sidebar: SidebarState
-  showUpdateNotification?: boolean
-  showUpdateDetails: boolean
-}
-
-export interface SettingsState {
-  autoExpandLimit: number
-  visible: boolean
-  nodeOrder: NodeOrder
-}
-
-export enum NodeOrder {
-  none = 'none',
-  messages = '#messages',
-  abc = 'abc',
-  topics = '#topics',
-}
-
-const reducer: Reducer<AppState | undefined, CustomAction> = (state, action) => {
-  if (!state) {
-    throw Error('No initial state')
-  }
-  trackEvent(action.type)
-  console.log(action, state)
-  switch (action.type) {
-    case ActionTypes.setAutoExpandLimit:
-      if (action.autoExpandLimit === undefined) {
-        return state
-      }
-      return {
-        ...state,
-        settings: {
-          ...state.settings,
-          autoExpandLimit: action.autoExpandLimit,
-        },
-      }
-    case ActionTypes.setPublishTopic:
-      return {
-        ...state,
-        sidebar: { ...state.sidebar, publishTopic: action.publishTopic },
-      }
-    case ActionTypes.setPublishPayload:
-      return {
-        ...state,
-        sidebar: { ...state.sidebar, publishPayload: action.publishPayload },
-      }
-    case ActionTypes.toggleSettingsVisibility:
-      return {
-        ...state,
-        settings: {
-          ...state.settings,
-          visible: !state.settings.visible,
-        },
-      }
-    case ActionTypes.selectTopic:
-      if (!action.selectedTopic) {
-        return state
-      }
-      return {
-        ...state,
-        selectedTopic: action.selectedTopic,
-      }
-    case ActionTypes.setNodeOrder:
-      if (!action.nodeOrder) {
-        return state
-      }
-      return {
-        ...state,
-        settings: { ...state.settings, nodeOrder: action.nodeOrder },
-      }
-    case ActionTypes.showUpdateNotification:
-      return {
-        ...state,
-        showUpdateNotification: action.showUpdateNotification,
-      }
-    case ActionTypes.showUpdateDetails:
-      if (action.showUpdateDetails === undefined) {
-        return state
-      }
-      return {
-        ...state,
-        showUpdateDetails: action.showUpdateDetails,
-      }
-    default:
-      return state
-  }
-}
-
-export default reducer
@@ -1,21 +0,0 @@
-let userId = window.localStorage.getItem('userId')
-const sha1 = require('sha1')
-
-if (!userId) {
-  userId = sha1(sha1(Math.random()) + sha1(performance.now()) + sha1(Date.now())).slice(0, 8) as string
-  window.localStorage.setItem('userId', userId)
-}
-
-const Nucleus = require('electron-nucleus')('5c3b3e0443b7cc00eec3782b', {
-  userId,
-  disableInDev: true,
-})
-
-export default Nucleus
-
-export function trackEvent(name: string) {
-  if (name.match(/^@@redux/)) {
-    return
-  }
-  Nucleus.track(name)
-}
@@ -1,25 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "strict": true,
-    "lib": ["es2017", "dom"],
-    "outDir": "./build/",
-    "sourceMap": true,
-    "module": "commonjs",
-    "target": "es5",
-    "jsx": "react"
-  },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "**/*.d.ts"
-  ],
-  "awesomeTypescriptLoaderOptions": {
-        "useCache": true,
-        "transpileModule": true,
-        "errorsAsWarnings": true
-    }
-}
@@ -1,49 +0,0 @@
-var LiveReloadPlugin = require('webpack-livereload-plugin');
-
-module.exports = {
-    entry: "./src/index.tsx",
-    output: {
-        filename: "bundle.js",
-        path: __dirname + "/build"
-    },
-    optimization: {
-      removeAvailableModules: false,
-      removeEmptyChunks: false,
-      splitChunks: false,
-    },
-
-    target: 'electron-renderer',
-
-    mode: 'production',
-
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "source-map",
-
-    resolve: {
-        // Add '.ts' and '.tsx' as resolvable extensions.
-        extensions: [".ts", ".tsx", ".js", ".json"]
-    },
-
-    module: {
-        rules: [
-            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
-            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
-
-            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
-            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
-        ]
-    },
-
-    plugins: [
-      new LiveReloadPlugin({})
-    ],
-
-    // When importing a module whose path matches one of the following, just
-    // assume a corresponding global variable exists and use that instead.
-    // This is important because it allows us to avoid bundling all of our
-    // dependencies, which allows browsers to cache those libraries between builds.
-    externals: {
-        // "react": "React",
-        // "react-dom": "ReactDOM"
-    }
-};
@@ -1,38 +0,0 @@
-{
-  "name": "mqtt-explorer-backend",
-  "version": "1.0.0",
-  "description": "",
-  "main": "build/index.js",
-  "scripts": {
-    "test": "mocha",
-    "build": "tsc",
-    "test-inspect": "mocha --inspect-brk",
-    "coverage": "nyc mocha",
-    "debug": "ts-node --inspect ./src/index.ts",
-    "postinstall": "npm run build"
-  },
-  "author": "",
-  "license": "ISC",
-  "nyc": {
-    "include": [
-      "src/**/*.ts",
-      "src/**/*.tsx"
-    ],
-    "exclude": [
-      "src/**/spec/*.spec.ts"
-    ],
-    "extension": [
-      ".ts",
-      ".tsx"
-    ],
-    "require": [
-      "ts-node/register"
-    ],
-    "reporter": [
-      "text-summary",
-      "html"
-    ],
-    "sourceMap": true,
-    "instrument": true
-  }
-}
@@ -1,15 +0,0 @@
-import { DataSourceStateMachine } from './'
-
-type MessageCallback = (topic: string, payload: Buffer) => void
-
-// A DataSource should automatically reconnect if connection was broken
-interface DataSource<DataSourceOptions> {
-  connect(options: DataSourceOptions): DataSourceStateMachine
-  disconnect(): void
-  onMessage(messageCallback: MessageCallback): void
-  publish(topic: string, payload: any): void
-  topicSeparator: string
-  stateMachine: DataSourceStateMachine
-}
-
-export { DataSource, MessageCallback }
@@ -1,47 +0,0 @@
-import { EventDispatcher } from '../../../events'
-
-export interface DataSourceState {
-  connecting: boolean
-  connected: boolean
-  error?: string
-}
-
-export class DataSourceStateMachine {
-  public onUpdate = new EventDispatcher<DataSourceState, DataSourceStateMachine>(this)
-  private state: DataSourceState = {
-    error: undefined,
-    connected: false,
-    connecting: false,
-  }
-
-  public setConnected(connected: boolean) {
-    this.state = {
-      connected,
-      error: undefined,
-      connecting: false,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public setError(error: Error) {
-    this.state = {
-      error: error.message,
-      connected: false,
-      connecting: false,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public setConnecting() {
-    this.state = {
-      error: undefined,
-      connected: false,
-      connecting: true,
-    }
-    this.onUpdate.dispatch(this.state)
-  }
-
-  public toJSON() {
-    return this.state
-  }
-}
@@ -1,82 +0,0 @@
-import * as Url from 'url'
-
-import { Client, connect as mqttConnect } from 'mqtt'
-import { DataSource, DataSourceStateMachine } from './'
-
-export interface MqttOptions {
-  url: string
-  username?: string
-  password?: string
-  tls: boolean
-  certValidation: boolean
-}
-
-export class MqttSource implements DataSource<MqttOptions> {
-  public stateMachine: DataSourceStateMachine = new DataSourceStateMachine()
-  private client: Client | undefined
-  private messageCallback?: (topic: string, message: Buffer) => void
-  private rootSubscription = '#'
-  public topicSeparator = '/'
-
-  public onMessage(messageCallback: (topic: string, message: Buffer) => void) {
-    this.messageCallback = messageCallback
-  }
-
-  public connect(options: MqttOptions): DataSourceStateMachine {
-    this.stateMachine.setConnecting()
-
-    const urlStr = options.tls ? options.url.replace(/^(mqtt|ws):/, '$1s:') : options.url
-    let url
-    try {
-      url = Url.parse(urlStr)
-    } catch (error) {
-      this.stateMachine.setError(error)
-      throw error
-    }
-
-    const client = mqttConnect(url, {
-      resubscribe: false,
-      rejectUnauthorized: !options.certValidation,
-      username: options.username,
-      password: options.password,
-    })
-
-    this.client = client
-
-    client.on('error', (error: Error) => {
-      console.log(error)
-      this.stateMachine.setError(error)
-    })
-
-    client.on('close', () => {
-      this.stateMachine.setConnected(false)
-    })
-
-    client.on('reconnect', () => {
-      this.stateMachine.setConnecting()
-    })
-
-    client.on('connect', () => {
-      this.stateMachine.setConnected(true)
-      client.subscribe(this.rootSubscription, (err: Error) => {
-        if (err) {
-          throw new Error('mqtt subscription failed')
-        }
-      })
-    })
-
-    client.on('message', (topic, message) => {
-      this.messageCallback && this.messageCallback(topic, message)
-    })
-
-    return this.stateMachine
-  }
-
-  public publish(topic: string, payload: any) {
-    this.client && this.client.publish(topic, payload)
-  }
-
-  public disconnect() {
-    this.client && this.client.end()
-  }
-}
@@ -1,3 +0,0 @@
-export { DataSource } from './DataSource'
-export { DataSourceState, DataSourceStateMachine } from './DataSourceState'
-export { MqttOptions, MqttSource } from './MqttSource'
@@ -1,35 +0,0 @@
-import { Hashable, TreeNode } from './'
-const sha1 = require('sha1')
-
-export class Edge implements Hashable {
-  public name: string
-
-  public target!: TreeNode
-  public source?: TreeNode | undefined
-  private cachedHash?: string
-
-  constructor(name: string) {
-    this.name = name
-  }
-
-  public edges() {
-    return this.target ? Object.values(this.target.edges) : []
-  }
-
-  public hash(): string {
-    if (!this.cachedHash) {
-      const previousHash = (this.source && this.source.sourceEdge) ? this.source.sourceEdge.hash() : ''
-      this.cachedHash = `H${sha1(previousHash + this.name)}`
-    }
-
-    return this.cachedHash
-  }
-
-  public firstEdge(): Edge {
-    if (this.source && this.source.sourceEdge) {
-      return this.source.sourceEdge.firstEdge()
-    }
-
-    return this
-  }
-}
@@ -1,3 +0,0 @@
-export interface Hashable {
-  hash(): string
-}
@@ -1,5 +0,0 @@
-export interface Message {
-  value?: any | undefined
-  length: number
-  received: Date
-}
@@ -1,60 +0,0 @@
-interface Lengthwise {
-  length: number
-}
-
-export class RingBuffer<T extends Lengthwise> {
-  private capacity: number
-  private maxItems: number
-  private usage: number = 0
-  private items: (any)[] = []
-  private start: number = 0
-  private end: number = 0
-
-  constructor(capacity: number, maxItems = Infinity) {
-    this.capacity = capacity
-    this.maxItems = maxItems
-  }
-
-  public toArray() {
-    return this.items.slice(this.start, this.end)
-  }
-
-  public add(item: T) {
-    const size = item.length
-    this.enforceCapacityConstraints(size)
-    this.usage += size
-    this.items[this.end] = item
-    this.end += 1
-  }
-
-  private enforceCapacityConstraints(addedItemSize: number) {
-    const remainingSize = this.capacity - (this.usage + addedItemSize)
-    if (remainingSize < 0) {
-      this.freeSomeSpace(Math.abs(remainingSize))
-    }
-    while ((this.end - this.start) >= this.maxItems) {
-      this.dropFirst()
-    }
-  }
-
-  private freeSpace(): number {
-    return this.capacity - this.usage
-  }
-
-  private isEmpty(): boolean {
-    return this.usage === 0
-  }
-
-  private freeSomeSpace(requiredSpace: number) {
-    while (this.freeSpace() < requiredSpace && !this.isEmpty()) {
-      this.dropFirst()
-    }
-  }
-
-  private dropFirst() {
-    const freedSpace = this.items[this.start].length
-    this.usage -= freedSpace
-    delete this.items[this.start]
-    this.start += 1
-  }
-}
@@ -1,7 +0,0 @@
-import { Edge, TreeNode } from './'
-
-export class Tree extends TreeNode {
-  constructor() {
-    super(undefined, undefined)
-  }
-}
@@ -1,142 +0,0 @@
-import { Edge, Message, RingBuffer } from './'
-import { EventDispatcher } from '../../../events'
-
-export class TreeNode {
-  public sourceEdge?: Edge
-  public message?: Message
-  public messageHistory: RingBuffer<Message> = new RingBuffer<Message>(3000, 100)
-  public edges: {[s: string]: Edge} = {}
-  public collapsed = false
-  public messages: number = 0
-  public lastUpdate: number = Date.now()
-
-  public onMerge = new EventDispatcher<void, TreeNode>(this)
-  public onEdgesChange = new EventDispatcher<void, TreeNode>(this)
-  public onMessage = new EventDispatcher<Message, TreeNode>(this)
-  private cachedLeafes?: TreeNode[]
-  private cachedLeafMessageCount?: number
-
-  constructor(sourceEdge?: Edge, message?: Message) {
-    if (sourceEdge) {
-      this.sourceEdge = sourceEdge
-      sourceEdge.target = this
-    }
-
-    message && this.setMessage(message)
-    this.onMerge.subscribe(() => {
-      this.cachedLeafes = undefined
-      this.cachedLeafMessageCount = undefined
-      this.lastUpdate = Date.now()
-    })
-    this.onEdgesChange.subscribe(() => {
-      this.lastUpdate = Date.now()
-    })
-    this.onMessage.subscribe(() => {
-      this.lastUpdate = Date.now()
-    })
-  }
-
-  public setMessage(message: Message) {
-    this.messageHistory.add(message)
-    this.message = message
-    this.messages += 1
-  }
-
-  public hash(): string {
-    return `N${(this.sourceEdge ? this.sourceEdge.hash() : '')}`
-  }
-
-  public firstNode(): TreeNode {
-    return this.sourceEdge && this.sourceEdge.source ? this.sourceEdge.source.firstNode() : this
-  }
-
-  public path(): string {
-    return this.branch()
-      .map(node => (node.sourceEdge && node.sourceEdge.name))
-      .filter(name => name !== undefined)
-      .join('/')
-  }
-
-  private previous(): TreeNode | undefined {
-    return this.sourceEdge ? this.sourceEdge.source || undefined : undefined
-  }
-
-  public addEdge(edge: Edge, emitUpdate: boolean = false) {
-    this.edges[edge.name] = edge
-    edge.source = this
-
-    if (emitUpdate) {
-      this.onEdgesChange.dispatch()
-    }
-  }
-
-  public branch(): TreeNode[] {
-    const previous = this.previous()
-    if (!previous) {
-      return [this]
-    }
-
-    return previous.branch().concat([this])
-  }
-
-  public updateWithNode(node: TreeNode) {
-    if (node.message) {
-      this.setMessage(node.message)
-      this.onMessage.dispatch(node.message)
-    }
-
-    this.mergeEdges(node)
-    this.onMerge.dispatch()
-  }
-
-  public leafMessageCount() {
-    if (this.cachedLeafMessageCount === undefined) {
-      this.cachedLeafMessageCount = this.leafes()
-        .map(leaf => leaf.messages)
-        .reduce((a, b) => a + b)
-    }
-
-    return this.cachedLeafMessageCount
-  }
-
-  public leafCount(): number {
-    return this.leafes().length
-  }
-
-  public edgeCount(): number {
-    return Object.values(this.edges).length
-  }
-
-  public leafes(): TreeNode[] {
-    if (this.cachedLeafes === undefined) {
-      if (Object.values(this.edges).length === 0) {
-        return [this]
-      }
-
-      this.cachedLeafes = Object.values(this.edges)
-        .map(e => e.target.leafes())
-        .reduce((a, b) => a.concat(b), [])
-    }
-
-    return this.cachedLeafes
-  }
-
-  private mergeEdges(node: TreeNode) {
-    const edgeKeys = Object.keys(node.edges)
-    let edgesDidUpdate = false
-
-    for (const edgeKey of edgeKeys) {
-      const matchingEdge = this.edges[edgeKey]
-      if (matchingEdge) {
-        matchingEdge.target.updateWithNode(node.edges[edgeKey].target)
-      } else {
-        this.addEdge(node.edges[edgeKey], false)
-        edgesDidUpdate = true
-      }
-    }
-
-    if (edgesDidUpdate) {
-      this.onEdgesChange.dispatch()
-    }
-  }
-}
@@ -1,25 +0,0 @@
-import { Edge, Tree, TreeNode } from './'
-
-interface HasLength {
-  length: number
-}
-
-export abstract class TreeNodeFactory {
-  public static fromEdgesAndValue<T extends HasLength>(edgeNames: string[], value?: T): TreeNode {
-    let currentNode: TreeNode = new Tree()
-    for (const edgeName of edgeNames) {
-      const edge = new Edge(edgeName)
-      const newNode = new TreeNode(edge)
-      edge.target = newNode
-      currentNode.addEdge(edge)
-      currentNode = newNode
-    }
-
-    currentNode.setMessage({
-      value,
-      length: value ? value.length : 0,
-      received: new Date(),
-    })
-    return currentNode
-  }
-}
@@ -1,7 +0,0 @@
-export { Edge } from './Edge'
-export { TreeNode } from './TreeNode'
-export { Message } from './Message'
-export { TreeNodeFactory } from './TreeNodeFactory'
-export { Tree } from './Tree'
-export { Hashable } from './Hashable'
-export * from './RingBuffer'
@@ -1,51 +0,0 @@
-import 'mocha'
-
-import { Edge, TreeNode, TreeNodeFactory } from '../'
-
-import { expect } from 'chai'
-
-describe('Edge', () => {
-  it('should contain a name', () => {
-    const e = new Edge('foo')
-    expect(e.name).to.equal('foo')
-  })
-
-  it('firstEdge should retireve the first edge', () => {
-    const topics = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-    const bazEdge = leaf.sourceEdge
-
-    if (!bazEdge) {
-      expect.fail('should not be undefined')
-      return
-    }
-
-    expect(bazEdge.name).to.eq('baz')
-    expect(bazEdge.firstEdge().name).to.eq('foo')
-  })
-
-  it('hash should not be empty', () => {
-    const e = new Edge('bar')
-    expect(e.hash().length).to.be.gt(0)
-  })
-
-  it('hash should be stable', () => {
-    const e = new Edge('bar')
-    const previousHash = e.hash()
-    expect(e.hash()).to.eq(previousHash)
-  })
-
-  it('hash should include change if parents are different', () => {
-    const topics1 = 'foo/bar/baz'.split('/')
-    const bazEdge1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined).sourceEdge
-
-    const topics2 = 'foo/foo/baz'.split('/')
-    const bazEdge2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined).sourceEdge
-
-    if (!bazEdge1 || !bazEdge2) {
-      throw Error('should not happen')
-    }
-
-    expect(bazEdge1.hash()).to.not.eq(bazEdge2.hash())
-  })
-})
@@ -1,46 +0,0 @@
-import { RingBuffer } from '../'
-import { expect } from 'chai'
-import 'mocha'
-
-describe('RingBuffer', () => {
-  it('should add a new value', () => {
-    const b = new RingBuffer(30)
-    b.add('hello')
-    expect(b.toArray()[0]).to.eq('hello')
-  })
-
-  it('should add a new value after the first', () => {
-    const b = new RingBuffer(30)
-    b.add('hello')
-    b.add('world')
-    expect(b.toArray()[1]).to.eq('world')
-  })
-
-  it('should remove old values if buffer size is reached', () => {
-    const b = new RingBuffer(6)
-    b.add('hello')
-    b.add('world')
-    expect(b.toArray()[0]).to.eq('world')
-  })
-
-  it('items bigger then the buffer should be stored anyway', () => {
-    const b = new RingBuffer(3)
-    b.add('hello')
-    expect(b.toArray()[0]).to.eq('hello')
-    b.add('world')
-    expect(b.toArray()[0]).to.eq('world')
-  })
-
-  it('max item count should be respected', () => {
-    const b = new RingBuffer(100, 3)
-    b.add('a')
-    b.add('b')
-    b.add('c')
-    b.add('d')
-    b.add('e')
-    expect(b.toArray().length).to.eq(3)
-    expect(b.toArray()[0]).to.eq('c')
-    expect(b.toArray()[1]).to.eq('d')
-    expect(b.toArray()[2]).to.eq('e')
-  })
-})
@@ -1,19 +0,0 @@
-import 'mocha'
-import './TreeNode.findNode'
-
-import { Tree, TreeNodeFactory } from '../'
-
-import { expect } from 'chai'
-
-describe('Tree', () => {
-  it('node can be merged into a tree', () => {
-    const tree = new Tree()
-
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    tree.updateWithNode(leaf.firstNode())
-    const expectedNode = tree.findNode('foo/bar')
-    expect(expectedNode).to.eq(leaf)
-  })
-})
@@ -1,29 +0,0 @@
-import 'mocha'
-import './TreeNode.findNode'
-
-import { TreeNodeFactory } from '../'
-import { expect } from 'chai'
-
-describe('TreeNode.findNode', () => {
-  it('findNode should retrieve node', () => {
-    const topics = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    const root = leaf.firstNode()
-    expect(root.sourceEdge).to.eq(undefined)
-
-    const barNode = root.findNode('foo/bar')
-    if (!barNode) {
-      expect.fail('did not find node')
-      return
-    }
-    expect(barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-
-    const bazNode = root.findNode('foo/bar/baz')
-    if (!bazNode) {
-      expect.fail('did not find node')
-      return
-    }
-    expect(bazNode.sourceEdge && bazNode.sourceEdge.name).to.eq('baz')
-  })
-})
@@ -1,19 +0,0 @@
-import { TreeNode } from  '../'
-declare module  '../' {
-    interface TreeNode {
-      findNode(path: String): TreeNode | undefined
-    }
-}
-
-TreeNode.prototype.findNode = function (path: String): TreeNode | undefined {
-  const topics = path.split('/')
-  const edge = this.edges[topics[0]]
-  const remainingTopics = topics.slice(1, topics.length)
-  if (edge && remainingTopics.length === 0) {
-    return edge.target
-  } else if (edge) {
-    return edge.target.findNode(remainingTopics.join('/'))
-  }
-
-  return undefined
-}
@@ -1,60 +0,0 @@
-import './TreeNode.findNode'
-import 'mocha'
-
-import { TreeNodeFactory } from  '../'
-import { expect } from 'chai'
-
-describe('TreeNode', () => {
-  it('firstNode should retrieve first node', () => {
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
-
-    expect(leaf.firstNode().edges['foo']).to.not.eq(undefined)
-  })
-
-  it('updateWithNode should update value', () => {
-    const topics = 'foo/bar'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics, '3')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-    const updateLeave = TreeNodeFactory.fromEdgesAndValue(topics, '5')
-
-    const root = leaf.firstNode()
-    root.updateWithNode(updateLeave.firstNode())
-
-    expect(root.sourceEdge).to.eq(undefined)
-    expect(leaf.message && leaf.message.value).to.eq('5')
-  })
-
-  it('updateWithNode should update intermediate nodes', () => {
-    const topics1 = 'foo/bar/baz'.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(topics1, '3')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-
-    const topics2 = 'foo/bar'.split('/')
-    const updateLeave = TreeNodeFactory.fromEdgesAndValue(topics2, '5')
-    leaf.firstNode().updateWithNode(updateLeave.firstNode())
-
-    const barNode = leaf.firstNode().findNode('foo/bar')
-    expect(barNode && barNode.sourceEdge && barNode.sourceEdge.name).to.eq('bar')
-    expect(barNode && barNode.message && barNode.message.value).to.eq('5')
-
-    expect(leaf.sourceEdge && leaf.sourceEdge.name).to.eq('baz')
-    expect(leaf.message && leaf.message.value).to.eq('3')
-  })
-
-  it('updateWithNode should add nodes to the tree', () => {
-    const topics1 = 'foo/bar'.split('/')
-    const leaf1 = TreeNodeFactory.fromEdgesAndValue(topics1, undefined)
-
-    const topics2 = 'foo/bar/baz'.split('/')
-    const leaf2 = TreeNodeFactory.fromEdgesAndValue(topics2, undefined)
-
-    leaf1.firstNode().updateWithNode(leaf2.firstNode())
-
-    const expectedNode = leaf1.firstNode().findNode('foo/bar/baz')
-    if (!expectedNode) {
-      expect.fail('merge seems to have failed')
-      return
-    }
-  })
-})
@@ -1,61 +0,0 @@
-import 'mocha'
-import './TreeNode.findNode'
-
-import { TreeNodeFactory } from '../'
-import { expect } from 'chai'
-
-describe('TreeNodeFactory', () => {
-  it('root node must not have a sourceEdge', () => {
-    const topic = 'foo/bar'
-    const edges = topic.split('/')
-    const leaf = TreeNodeFactory.fromEdgesAndValue(edges, undefined)
-
-    expect(leaf.firstNode().sourceEdge).to.eq(undefined)
-  })
-
-  it('should create node', () => {
-    const topic = 'foo/bar'
-    const edges = topic.split('/')
-    const node = TreeNodeFactory.fromEdgesAndValue(edges, '5')
-
-    if (!node.sourceEdge || !node.sourceEdge.source || !node.message) {
-      expect.fail('should not happen')
-      return
-    }
-
-    expect(node).to.not.eq(undefined)
-    expect(node.sourceEdge.name).to.eq('bar')
-    expect(node.message.value).to.eq('5')
-
-    const foo = node.firstNode().findNode('foo')
-    expect(foo && foo.sourceEdge && foo.sourceEdge.name).to.eq('foo')
-  })
-
-  it('node should contain edges in order', () => {
-    const topic = 'foo/bar/baz'
-    const edges = topic.split('/')
-    const node = TreeNodeFactory.fromEdgesAndValue(edges, '5')
-
-    if (!node.sourceEdge || !node.sourceEdge.source || !node.message) {
-      expect.fail('should not happen')
-      return
-    }
-
-    expect(node.message.value).to.eq('5')
-    expect(node.sourceEdge.name).to.eq('baz')
-
-    const barNode = node.sourceEdge.source
-    if (!barNode || !barNode.sourceEdge) {
-      expect.fail('should not fail')
-      return
-    }
-    expect(barNode.sourceEdge.name).to.eq('bar')
-
-    const fooNode = barNode.sourceEdge.source
-    if (!fooNode || !fooNode.sourceEdge) {
-      expect.fail('should not fail')
-      return
-    }
-    expect(fooNode.sourceEdge.name).to.eq('foo')
-  })
-})
@@ -1,79 +0,0 @@
-import {
-  AddMqttConnection,
-  EventDispatcher,
-  Message,
-  addMqttConnectionEvent,
-  backendEvents,
-  checkForUpdates,
-  makeConnectionMessageEvent,
-  makeConnectionStateEvent,
-  makePublishEvent,
-  removeConnection,
-  updateAvailable,
-} from '../../events'
-import { DataSource, MqttSource } from './DataSource'
-
-import { UpdateInfo } from 'builder-util-runtime'
-
-export class ConnectionManager {
-  private connections: {[s: string]: DataSource<any>} = {}
-
-  public manageConnections() {
-    backendEvents.subscribe(addMqttConnectionEvent, this.handleConnectionRequest)
-    backendEvents.subscribe(removeConnection, (connectionId: string) => this.removeConnection(connectionId))
-  }
-
-  private handleConnectionRequest = (event: AddMqttConnection) => {
-    const connectionId = event.id
-    const options = event.options
-    const connection = new MqttSource()
-    this.connections[connectionId] = connection
-
-    const connectionStateEvent = makeConnectionStateEvent(connectionId)
-    connection.stateMachine.onUpdate.subscribe((state) => {
-      backendEvents.emit(connectionStateEvent, state)
-    })
-
-    connection.connect(options)
-    this.handleNewMessagesForConnection(connectionId, connection)
-    backendEvents.subscribe(makePublishEvent(connectionId), (msg: Message) => {
-      this.connections[connectionId].publish(msg.topic, msg.payload)
-    })
-  }
-
-  private handleNewMessagesForConnection(connectionId: string, connection: MqttSource) {
-    const messageEvent = makeConnectionMessageEvent(connectionId)
-    connection.onMessage((topic: string, payload: Buffer) => {
-      let buffer = payload
-      if (buffer.length > 10000) {
-        buffer = buffer.slice(0, 10000)
-      }
-      backendEvents.emit(messageEvent, { topic, payload: buffer.toString('base64') })
-    })
-  }
-
-  public removeConnection(hash: string) {
-    const connection = this.connections[hash]
-    connection.disconnect()
-    delete this.connections[hash]
-  }
-
-  public closeAllConnections() {
-    Object.keys(this.connections)
-      .forEach(hash => this.removeConnection(hash))
-  }
-}
-
-class UpdateNotifier {
-  public onCheckUpdateRequest = new EventDispatcher<void, UpdateNotifier>(this)
-  constructor() {
-    backendEvents.subscribe(checkForUpdates, () => {
-      this.onCheckUpdateRequest.dispatch()
-    })
-  }
-  public notify(updateInfo: UpdateInfo) {
-    backendEvents.emit(updateAvailable, updateInfo)
-  }
-}
-
-export const updateNotifier = new UpdateNotifier()
@@ -1,3 +0,0 @@
--require ts-node/register
--require source-map-support/register
--recursive ./src/**/*.spec.ts
@@ -1,21 +0,0 @@
-{
-  "compileOnSave": true,
-  "compilerOptions": {
-    "noImplicitAny": true,
-    "strictNullChecks": true,
-    "outDir": "./build",
-    "strict": true,
-    "lib": ["es2017", "dom"],
-    "sourceMap": true
-  },
-  "includes": [
-    "src/**/*.ts"
-  ],
-  "exclude": [
-    "app",
-    "node_modules",
-    "src/**/*.spec.ts",
-    "**/*.d.ts",
-    "typings"
-  ]
-}
@@ -1,100 +0,0 @@
-const { app, BrowserWindow } = require('electron')
-const { autoUpdater } = require("electron-updater")
-const log = require('electron-log');
-const { ConnectionManager, updateNotifier } = require('./backend/build/backend/src/index.js')
-const fs = require('fs')
-const path = require('path')
-
-autoUpdater.logger = log;
-autoUpdater.logger.transports.file.level = 'info';
-log.info('App starting...');
-
-const connectionManager = new ConnectionManager()
-connectionManager.manageConnections()
-
-// Keep a global reference of the window object, if you don't, the window will
-// be closed automatically when the JavaScript object is garbage collected.
-let mainWindow
-
-function createWindow () {
-  const icon = path.join(__dirname, 'icon.png')
-  // Create the browser window.
-  mainWindow = new BrowserWindow({
-    width: 1024,
-    height: 700,
-    webPreferences: {
-      nodeIntegration: true
-    },
-    icon
-  })
-
-  console.log(icon)
-  // and load the index.html of the app.
-  mainWindow.loadFile('app/index.html')
-
-  // Open the DevTools.
-  // mainWindow.webContents.openDevTools()
-
-  // Emitted when the window is closed.
-  mainWindow.on('close', function () {
-    connectionManager.closeAllConnections()
-  })
-
-  // Emitted when the window is closed.
-  mainWindow.on('closed', function () {
-    // Dereference the window object, usually you would store windows
-    // in an array if your app supports multi windows, this is the time
-    // when you should delete the corresponding element.
-    mainWindow = null
-    app.quit()
-  })
-}
-
-// This method will be called when Electron has finished
-// initialization and is ready to create browser windows.
-// Some APIs can only be used after this event occurs.
-app.on('ready', () => {
-  createWindow()
-
-  let updateInfo
-  autoUpdater.on('update-available', (info) => {
-    console.log('there is an update')
-    updateInfo = info
-  })
-
-  autoUpdater.on('error', () => {
-    console.log('could not update due to error')
-
-    if (updateInfo) {
-      updateNotifier.notify(updateInfo)
-    }
-  })
-
-  updateNotifier.onCheckUpdateRequest.subscribe(() => {
-    try {
-      autoUpdater.checkForUpdatesAndNotify()
-    } catch (error) {
-      console.error(error)
-    }
-  })
-})
-
-// Quit when all windows are closed.
-app.on('window-all-closed', function () {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', function () {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (mainWindow === null) {
-    createWindow()
-  }
-})
-
-// In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
@@ -1,57 +0,0 @@
-import { IpcMain, IpcRenderer, ipcMain, ipcRenderer } from 'electron'
-
-import { Event } from './Events'
-
-interface EventBusInterface {
-  subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void): void
-  unsubscribeAll<MessageType>(event: Event<MessageType>): void
-  emit<MessageType>(event: Event<MessageType>, msg: MessageType): void
-}
-
-class IpcMainEventBus implements EventBusInterface {
-  private ipc: IpcMain
-  private client: any
-  constructor(ipc: IpcMain) {
-    this.ipc = ipc
-  }
-
-  public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
-    console.log('subscribing', event.topic)
-    this.ipc.on(event.topic, (event: any, arg: any) => {
-      this.client = event.sender
-      callback(arg)
-    })
-  }
-
-  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
-    this.ipc.removeAllListeners(event.topic)
-  }
-
-  public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
-    if (!this.client.isDestroyed()) {
-      this.client.send(event.topic, msg)
-    }
-  }
-}
-
-class IpcRendererEventBus implements EventBusInterface {
-  private ipc: IpcRenderer
-  constructor(ipc: IpcRenderer) {
-    this.ipc = ipc
-  }
-
-  public subscribe<MessageType>(event: Event<MessageType>, callback:(msg: MessageType) => void) {
-    this.ipc.on(event.topic, (_event: any, arg: any) => callback(arg))
-  }
-
-  public unsubscribeAll<MessageType>(event: Event<MessageType>) {
-    this.ipc.removeAllListeners(event.topic)
-  }
-
-  public emit<MessageType>(event: Event<MessageType>, msg: MessageType) {
-    this.ipc.send(event.topic, msg)
-  }
-}
-
-export const rendererEvents = new IpcRendererEventBus(ipcRenderer)
-export const backendEvents = new IpcMainEventBus(ipcMain)
@@ -1,47 +0,0 @@
-import { EventEmitter } from 'events'
-
-interface CallbackStore {
-  wrappedCallback: any
-  callback: any
-}
-
-export class EventDispatcher<Message, Dispatcher> {
-  private emitter = new EventEmitter()
-  private dispatcher: Dispatcher
-  private callbacks: CallbackStore[] = []
-
-  constructor(dispatcher: Dispatcher) {
-    this.dispatcher = dispatcher
-  }
-
-  public dispatch(msg: Message) {
-    this.emitter.emit('event', msg)
-  }
-
-  public subscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
-    const wrappedCallback = (msg: Message) => {
-      callback(msg, this.dispatcher)
-    }
-    this.emitter.on('event', wrappedCallback)
-
-    this.callbacks.push({
-      callback,
-      wrappedCallback,
-    })
-  }
-
-  public unsubscribe(callback: (msg: Message, dispatcher: Dispatcher) => void) {
-    const item = this.callbacks.find(store => store.callback === callback)
-    if (!item) {
-      return
-    }
-
-    this.emitter.removeListener('event', item.wrappedCallback)
-    this.callbacks = this.callbacks.filter(a => a !== item)
-  }
-
-  public removeAllListeners() {
-    this.emitter.removeAllListeners()
-    this.callbacks = []
-  }
-}
@@ -1,53 +0,0 @@
-import { DataSourceState, MqttOptions } from '../backend/src/DataSource'
-
-import { UpdateInfo } from 'builder-util-runtime'
-
-export { UpdateInfo } from 'builder-util-runtime'
-
-export interface Event<MessageType> {
-  topic: string
-}
-
-export interface AddMqttConnection {
-  id: string,
-  options: MqttOptions
-}
-
-export const addMqttConnectionEvent: Event<AddMqttConnection> = {
-  topic: 'connection/add/mqtt',
-}
-
-export const removeConnection: Event<string> = {
-  topic: 'connection/remove',
-}
-
-export function makeConnectionStateEvent(connectionId: string): Event<DataSourceState> {
-  return {
-    topic: `conn/state/${connectionId}`,
-  }
-}
-
-export const checkForUpdates: Event<void> = {
-  topic: 'app/update/check',
-}
-
-export const updateAvailable: Event<UpdateInfo> = {
-  topic: 'app/update/available',
-}
-
-export interface Message {
-  topic: string,
-  payload: any
-}
-
-export function makePublishEvent(connectionId: string): Event<Message> {
-  return {
-    topic: `conn/publish/${connectionId}`,
-  }
-}
-
-export function makeConnectionMessageEvent(connectionId: string): Event<Message> {
-  return {
-    topic: `conn/${connectionId}`,
-  }
-}
@@ -1,3 +0,0 @@
-export * from './Events'
-export * from './EventDispatcher'
-export * from './EventBus'
@@ -1,9 +0,0 @@
-const { EventEmitter } = require('events');
-
-const a = new EventEmitter()
-a.on('test', () => console.log('test'))
-a.on('test2', () => console.log('test2'))
-a.removeAllListeners('test')
-
-a.emit('test')
-a.emit('test2')
@@ -0,0 +1,14 @@
+convert screen1.png -resize 33% screen1_small.png
+convert screen2.png -resize 33% screen2_small.png
+convert screen3.png -resize 33% screen3_small.png
+convert screen_dark_mode.png -resize 33% screen_dark_mode_small.png
+
+convert -size 2560x1600 xc:black -fill white -draw "polygon 0,0 0,2560 2200,0" framemask.png
+convert screen_dark_mode.png framemask.png -alpha off -compose copy_opacity -composite first_half.png
+convert -respect-parenthesis screen4.png \( framemask.png -negate \) -alpha off -compose copy_opacity -composite second_half.png
+convert *_half.png -compose over -composite screen-composite.png
+
+convert screen-composite.png -resize 33% screen-composite_small.png
+rm framemask.png *_half.png
+
+optipng *.png
@@ -0,0 +1,152 @@
+/* ©2015 Johannes Jakob
+   Made with <3 in Germany */
+
+/* window BEGIN */
+
+.osx-frame {
+  background: #fff;
+  width: 100%;
+  margin: auto;
+  border: 1px solid #acacac;
+  border-radius: 6px;
+  box-shadow: 0px 0px 20px #acacac;
+}
+
+.titlebar {
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ebebeb, color-stop(1.0, #d5d5d5)));
+  background: -webkit-linear-gradient(top, #ebebeb, #d5d5d5);
+  background: -moz-linear-gradient(top, #ebebeb, #d5d5d5);
+  background: -ms-linear-gradient(top, #ebebeb, #d5d5d5);
+  background: -o-linear-gradient(top, #ebebeb, #d5d5d5);
+  background: linear-gradient(top, #ebebeb, #d5d5d5);
+  color: #4d494d;
+  font-size: 11pt;
+  line-height: 20px;
+  text-align: center;
+  width: 100%;
+  height: 20px;
+  border-top: 1px solid #f3f1f3;
+  border-bottom: 1px solid #b1aeb1;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  cursor: default;
+}
+
+.titlebar p {
+  margin-left: -61px;
+  display: inline-block;
+}
+
+.buttons {
+  padding-left: 10px;
+  padding-top: 3px;
+  float: left;
+  line-height: 0px;
+}
+
+.buttons div {
+  float: left;
+}
+
+.close {
+  background: #ff5c5c;
+  font-size: 9pt;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #e33e41;
+  border-radius: 50%;
+  display: inline-block;
+  opacity: 1;
+}
+
+.close:active {
+  background: #c14645;
+  border: 1px solid #b03537;
+}
+
+.close:active .closebutton {
+  color: #4e0002;
+}
+
+.closebutton {
+  color: #820005;
+  visibility: hidden;
+  cursor: default;
+}
+
+.minimize {
+  background: #ffbd4c;
+  font-size: 9pt;
+  line-height: 11px;
+  margin-left: 6px;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #e09e3e;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.minimize:active {
+  background: #c08e38;
+  border: 1px solid #af7c33;
+}
+
+.minimize:active .minimizebutton {
+  color: #5a2607;
+}
+
+.minimizebutton {
+  color: #9a5518;
+  visibility: hidden;
+  cursor: default;
+}
+
+.zoom {
+  background: #00ca56;
+  font-size: 9pt;
+  line-height: 11px;
+  margin-left: 6px;
+  width: 11px;
+  height: 11px;
+  border: 1px solid #14ae46;
+  border-radius: 50%;
+  display: inline-block;
+}
+
+.zoom:active {
+  background: #029740;
+  border: 1px solid #128435;
+}
+
+.zoom:active .zoombutton {
+  color: #003107;
+}
+
+.zoombutton {
+  color: #006519;
+  visibility: hidden;
+  cursor: default;
+}
+
+.content {
+  padding: 0;
+  margin: 0;
+  line-height: 0;
+  overflow: hidden;
+  border-radius: 0px 0px 5px 5px;
+}
+
+/* window END */
+
+/* content BEGIN */
+
+h3 {
+  margin-top: 0px;
+}
+
+/* content END */
@@ -1,10 +0,0 @@
-#!/bin/bash
-
-docker run --rm -ti \
- --env-file <(env | grep -iE 'DEBUG|NODE_|ELECTRON_|YARN_|NPM_|CI|CIRCLE|TRAVIS|APPVEYOR_|CSC_|_TOKEN|_KEY|AWS_|STRIP|BUILD_') \
- --env ELECTRON_CACHE="/root/.cache/electron" \
- --env ELECTRON_BUILDER_CACHE="/root/.cache/electron-builder" \
- -v ${PWD}:/project \
- -v ~/.cache/electron:/root/.cache/electron \
- -v ~/.cache/electron-builder:/root/.cache/electron-builder \
- electronuserland/builder:wine node_modules/.bin/ts-node package.ts $@
@@ -1,71 +1,31 @@
 {
-  "name": "MQTT-Explorer",
-  "version": "0.0.5",
-  "description": "Explore your message queues",
-  "main": "electron.js",
+  "name": "mqtt-explorer-gh-pages",
+  "version": "1.0.0",
+  "main": "index.js",
+  "description": "Github pages for MQTT Explorer",
  "scripts": {
-    "start": "electron .",
-    "install": "cd app; npm install; cd ..",
-    "test": "npm run test-backend",
-    "build": "cd app; npm run build; cd ..; cd backend; npm run build; cd ..",
-    "test-backend": "cd backend && npm run test && cd ..",
-    "prepare-release": "./prepare-release.sh",
-    "package": "ts-node package.ts",
-    "package-with-docker": "./package-with-docker.sh"
+    "readme": "ts-node updateReadme.ts"
  },
  "repository": {
    "type": "git",
-    "url": "https://github.com/thomasnordquist/MQTT-Explorer.git"
+    "url": "git+https://github.com/thomasnordquist/MQTT-Explorer.git"
  },
-  "build": {
-    "appId": "mqtt-explorer",
-    "nodeGypRebuild": false,
-    "mac": {
-      "category": "de.t7n.apps.mqtt-explorer",
-      "publish": [
-        "github"
-      ]
-    },
-    "linux": {
-      "category": "Development",
-      "maintainer": "Thomas Nordquist"
-    },
-    "directories": {
-      "app": "./",
-      "buildResources": "res",
-      "output": "build"
-    }
-  },
-  "author": "Thomas Nordquist",
-  "email": "xxnerowingerxx@gmail.com",
-  "homepage": "https://github.com",
+  "author": "",
  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/thomasnordquist/MQTT-Explorer/issues"
+  },
+  "homepage": "https://github.com/thomasnordquist/MQTT-Explorer#readme",
  "devDependencies": {
-    "@types/chai": "^4.1.7",
-    "@types/mocha": "^5.2.5",
    "@types/mustache": "^0.8.32",
-    "@types/node": "^10.12.18",
-    "@types/sha1": "^1.1.1",
-    "@types/socket.io": "^2.1.2",
+    "@types/semver-sort": "^0.0.5",
    "axios": "^0.18.0",
-    "chai": "^4.2.0",
-    "electron": "^4.0.0",
-    "electron-builder": "^20.38.4",
-    "mocha": "^5.2.0",
    "mustache": "^3.0.1",
-    "nyc": "^13.1.0",
-    "source-map-support": "^0.5.9",
-    "ts-node": "^7.0.1",
-    "tslint": "^5.12.0",
-    "tslint-config-airbnb": "^5.11.1",
-    "tslint-react": "^3.6.0",
-    "tslint-strict-null-checks": "^1.0.1",
-    "typescript": "^3.2.2"
+    "ts-node": "^8.0.3",
+    "typescript": "^3.4.2"
  },
  "dependencies": {
-    "electron-log": "^2.2.17",
-    "electron-updater": "^4.0.6",
-    "mqtt": "^2.18.8",
-    "sha1": "^1.1.1"
+    "@types/node": "^13.1.7",
+    "semver-sort": "^1.0.0"
  }
 }
@@ -1,76 +0,0 @@
-import * as builder from 'electron-builder'
-
-const linux: builder.CliOptions = {
-  x64: true,
-  ia32: true,
-  armv7l: true,
-  arm64: true,
-  linux: ['AppImage'],
-  projectDir: './build/clean',
-  publish: 'always',
-}
-
-const linuxSnap: builder.CliOptions = {
-  x64: true,
-  ia32: false,
-  armv7l: false,
-  arm64: false,
-  linux: ['snap'],
-  projectDir: './build/clean',
-  publish: 'always',
-}
-
-const win: builder.CliOptions = {
-  x64: true,
-  ia32: true,
-  armv7l: false,
-  arm64: false,
-  win: ['portable', 'nsis'],
-  projectDir: './build/clean',
-  publish: 'always',
-}
-
-const mac: builder.CliOptions = {
-  x64: true,
-  ia32: true,
-  armv7l: false,
-  arm64: false,
-  mac: ['dmg'],
-  projectDir: './build/clean',
-  publish: 'always',
-}
-
-async function executeBuild() {
-  console.log(process.argv[2])
-  switch (process.argv[2]) {
-    case 'win':
-      await builder.build(win)
-      break
-    case 'linux':
-      await builder.build(linux)
-      break
-    case 'snap':
-      try {
-        await builder.build(linuxSnap)
-      } catch {
-        // ignore
-      }
-      break
-    case 'mac':
-      await builder.build(mac)
-      break
-    default:
-      await builder.build(mac)
-  }
-}
-
-function build() {
-  try {
-    executeBuild()
-  } catch (error) {
-    console.error(error)
-    process.exit(1)
-  }
-}
-
-build()
@@ -1,28 +0,0 @@
-#!/bin/bash
-set -e
-
-ORIGINAL_DIR=`pwd`
-DIR=build/clean
-
-rm -rf "$DIR" || echo "Directory did not exist"
-mkdir -p "$DIR"
-
-git clone .git "$DIR"
-cd $DIR
-
-
-# App
-cd app
-  npm install
-cd ..
-
-# Backend
-cd backend
-  npm install;
-  #npm run test
-cd ..
-
-# Build
-npm run build
-rm -rf app/node_modules
-cd "$ORIGINAL_DIR"
@@ -0,0 +1,6 @@
+<svg version="1.1"
+     baseProfile="full"
+     width="200" height="200"
+     xmlns="http://www.w3.org/2000/svg">
+  <polygon points="100,10 40,198 190,78 10,78 160,198" fill="orange" style="fill-rule:nonzero;"/>
+</svg>
@@ -3,9 +3,12 @@
  "compilerOptions": {
    "noImplicitAny": true,
    "strictNullChecks": true,
-    "outDir": "./build",
+    "outDir": "./dist",
    "strict": true,
-    "lib": ["es2017"],
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "lib": ["es2017", "dom"],
    "sourceMap": true
-  }
+  },
+  "include": ["updateReadme.ts"]
 }
@@ -1,12 +0,0 @@
-{
-  "extends": ["tslint-config-airbnb", "tslint-react"],
-  "rules": {
-    "semicolon": [true, "never"],
-    "max-line-length": [true, 200],
-    "member-access": true,
-    "no-else-after-return": false,
-    "align": false,
-    "variable-name": false,
-    "jsx-no-lambda": false
-  }
-}
@@ -1,64 +1,81 @@
-import * as mustache from 'mustache'
-
-import { readFileSync, writeFileSync } from 'fs'
-
-import axios from 'axios'
+#!./node_modules/.bin/ts-node
+import * as mustache from 'mustache';
+import { readFileSync, writeFileSync } from 'fs';
+import axios from 'axios';
+import { desc } from 'semver-sort';

 interface Release {
-  name: string
-  assets: Asset[]
+  name: string;
+  tag_name: string;
+  assets: Asset[];
 }

 interface Asset {
-  name: string
-  browser_download_url: string
+  name: string;
+  browser_download_url: string;
 }

 function createUrl(title: string, path: string) {
-  return `[${title}](${path})`
+  return `[${title}](${path})`;
 }

 function fileExtension(file: string): string {
-  const match = file.match(/\.([a-zA-Z]+)$/)
+  const match = file.match(/\.([a-zA-Z]+)$/);

-  return (match && match[1]) || ''
+  return (match && match[1]) || '';
 }

 async function createReadme(): Promise<void> {
-  const release: Release = (await axios.get('https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases/latest')).data
+  const releases: Release[] = (
+    await axios.get('https://api.github.com/repos/thomasnordquist/mqtt-explorer/releases')
+  ).data;

-  const linux64 = release.assets.filter(asset => /(x86_64|amd64)\.(AppImage|deb|rpm)$/.test(asset.name))
-  const windowsInstaller = release.assets.find(asset => /Setup-.+\.exe$/.test(asset.name))
-  const windowsPortable = release.assets.find(asset => /-(?!Setup).+\.exe$/.test(asset.name))
-  const macDmg = release.assets.find(asset => /\.dmg$/.test(asset.name))
+  let latestRelease = desc(releases.map((release) => release.tag_name))[0];

-  if (linux64.length === 0 || !windowsInstaller || !windowsPortable || !macDmg) {
-    console.error('failed retrieving')
-    process.exit(1)
-    return
+  const release = releases.find((release) => release.tag_name === latestRelease)!;
+
+  const linux64 = release.assets.filter((asset) =>
+    /^(?:(?!(armv7l|arm64|i386)).)*\.(AppImage|deb|rpm)$/.test(asset.name),
+  );
+  const windowsInstaller = release.assets.find((asset) => /Setup-.+\.exe$/.test(asset.name));
+  const windowsPortable = release.assets.find((asset) => /-(?!Setup).+\.exe$/.test(asset.name));
+  const macDmgIntel = release.assets.find(
+    (asset) => /\.dmg$/.test(asset.name) && !/arm64/.test(asset.name),
+  );
+  const macDmgM1 = release.assets.find(
+    (asset) => /\.dmg$/.test(asset.name) && /arm64/.test(asset.name),
+  );
+
+  if (linux64.length === 0 || !windowsInstaller || !windowsPortable || !macDmgIntel) {
+    console.error('failed retrieving');
+    process.exit(1);
+    return;
  }

  const linuxTargets = linux64
-    .map(item => createUrl(fileExtension(item.browser_download_url), item.browser_download_url))
-    .join(', ')
+    .map((item) => createUrl(fileExtension(item.browser_download_url), item.browser_download_url))
+    .join(', ');

  const windowsTargets = [
    createUrl('portable', windowsPortable.browser_download_url),
    createUrl('installer', windowsInstaller.browser_download_url),
-  ].join(', ')
+  ].join(', ');

  const macTargets = [
-    createUrl('dmg', macDmg.browser_download_url),
-  ].join(', ')
+    createUrl('Intel', macDmgIntel.browser_download_url),
+    macDmgM1 && createUrl('ARM', macDmgM1.browser_download_url),
+  ]
+    .filter(Boolean)
+    .join(', ');

-  const template = readFileSync('./Readme.tpl.md').toString()
+  const template = readFileSync('./Readme.tpl.md').toString();
  const rendered = mustache.render(template, {
    linuxTargets,
    windowsTargets,
    macTargets,
    version: release.name,
-  })
-  writeFileSync('./Readme.md', rendered)
+  });
+  writeFileSync('./Readme.md', rendered);
 }

-createReadme()
+createReadme();
@@ -0,0 +1,115 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@types/mustache@^0.8.32":
+  version "0.8.32"
+  resolved "https://registry.npmjs.org/@types/mustache/-/mustache-0.8.32.tgz"
+  integrity sha512-RTVWV485OOf4+nO2+feurk0chzHkSjkjALiejpHltyuMf/13fGymbbNNFrSKdSSUg1TIwzszXdWsVirxgqYiFA==
+
+"@types/node@^13.1.7":
+  version "13.13.52"
+  resolved "https://registry.npmjs.org/@types/node/-/node-13.13.52.tgz"
+  integrity sha512-s3nugnZumCC//n4moGGe6tkNMyYEdaDBitVjwPxXmR5lnMG5dHePinH2EdxkG3Rh1ghFHHixAG4NJhpJW1rthQ==
+
+"@types/semver-sort@^0.0.5":
+  version "0.0.5"
+  resolved "https://registry.npmjs.org/@types/semver-sort/-/semver-sort-0.0.5.tgz"
+  integrity sha512-cIQG7kjdzHcsRrYYkP8N65BogntqItjMjG8uSgPEl1ej4dKj9QC8snCFJb3HHF/Cwqe0s0IflJjUU5wb1yrLDQ==
+
+arg@^4.1.0:
+  version "4.1.3"
+
+axios@^0.18.0:
+  version "0.18.1"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.18.1.tgz"
+  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
+  dependencies:
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+
+debug@=3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz"
+  integrity sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==
+  dependencies:
+    ms "2.0.0"
+
+diff@^4.0.1:
+  version "4.0.2"
+
+follow-redirects@1.5.10:
+  version "1.5.10"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
+is-buffer@^2.0.2:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.5.tgz"
+  integrity sha512-i2R6zNFDwgEHJyQUtJEk0XFi1i0dPFn/oqjK3/vPCcDeJvW5NQ83V8QbicfF1SupOaB0h8ntgBC2YiE7dfyctQ==
+
+make-error@^1.1.1:
+  version "1.3.6"
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+mustache@^3.0.1:
+  version "3.2.1"
+  resolved "https://registry.npmjs.org/mustache/-/mustache-3.2.1.tgz"
+  integrity sha512-RERvMFdLpaFfSRIEe632yDm5nsd0SDKn8hGmcUwswnyiE5mtdZLDybtHAz6hjJhawokF0hXvGLtx9mrQfm6FkA==
+
+semver-regex@^3.1.2:
+  version "3.1.4"
+  resolved "https://registry.npmjs.org/semver-regex/-/semver-regex-3.1.4.tgz"
+  integrity sha512-6IiqeZNgq01qGf0TId0t3NvKzSvUsjcpdEO3AQNeIjR6A2+ckTnQlDpl4qu1bjRv0RzN3FP9hzFmws3lKqRWkA==
+
+semver-sort@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/semver-sort/-/semver-sort-1.0.0.tgz"
+  integrity sha512-JicVlQKz/C//4BiPmbHEDou6HihXxo5xqB/8Hm9FaLJ6HHkRRvYgCECq4u/z0XF8kyJQ/KAZt++A/kYz/oOSSg==
+  dependencies:
+    semver "^5.0.3"
+    semver-regex "^3.1.2"
+
+semver@^5.0.3:
+  version "5.7.2"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
+  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+
+source-map-support@^0.5.17:
+  version "0.5.21"
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+source-map@^0.6.0:
+  version "0.6.1"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
+  integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
+
+ts-node@^8.0.3:
+  version "8.10.2"
+  resolved "https://registry.npmjs.org/ts-node/-/ts-node-8.10.2.tgz"
+  integrity sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==
+  dependencies:
+    arg "^4.1.0"
+    diff "^4.0.1"
+    make-error "^1.1.1"
+    source-map-support "^0.5.17"
+    yn "3.1.1"
+
+typescript@^3.4.2, typescript@>=2.7:
+  version "3.9.10"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-3.9.10.tgz"
+  integrity sha512-w6fIxVE/H1PkLKcCPsFqKE7Kv7QUwhU8qQY2MueZXWx5cPZdwFupLgKK3vntcK98BtNHZtAF4LA/yl2a7k8R6Q==
+
+yn@3.1.1:
+  version "3.1.1"
Author	SHA1	Message	Date
thomasnordquist	8edf5ad7c2	Apply automatic changes	2024-05-15 06:25:08 +00:00
thomasnordquist	51a1f5eef2	Apply automatic changes	2024-05-11 19:58:24 +00:00
Thomas Nordquist	952cb8d946	chore: update readme template	2024-05-11 21:57:26 +02:00
Thomas Nordquist	c70bf7f0a2	update readme	2024-05-11 13:10:01 +02:00
Thomas Nordquist	d74b4bd8ad	chore: update readme	2024-05-11 13:05:53 +02:00
Thomas Nordquist	dbeb3a7a18	add new version	2024-05-11 12:56:01 +02:00
Thomas Nordquist	6c6e4df164	Update links to build artifacts	2020-04-27 21:00:43 +02:00
Thomas Nordquist	c23f6e2a1a	Update changelog	2020-04-27 20:54:45 +02:00
Thomas Nordquist	ae9724408d	Update release	2020-04-27 20:51:20 +02:00
Thomas Nordquist	b36d26ebc6	Merge remote-tracking branch 'origin/gh-pages' into gh-pages	2020-04-27 20:45:52 +02:00
Thomas Nordquist	6e5068207b	Update dependecies	2020-01-17 12:46:17 +01:00
Thomas Nordquist	aac7bf3696	Document telemetry details in issue #52	2019-07-22 16:13:56 +02:00
Thomas Nordquist	a53670d368	Update Readme	2019-07-22 16:09:49 +02:00
Thomas Nordquist	737207297a	Update changelog	2019-07-18 12:15:13 +02:00
Thomas Nordquist	318e604169	Update Readme	2019-07-18 01:19:48 +02:00
Thomas Nordquist	024cd2925b	Update video	2019-07-17 20:32:44 +02:00
Thomas Nordquist	77c8986920	Update Readme	2019-07-17 20:31:05 +02:00
Thomas Nordquist	31a9e3f6e3	Combat form bots	2019-07-17 16:15:53 +02:00
Thomas Nordquist	5212a8330e	Update readme	2019-07-17 16:15:39 +02:00
Thomas Nordquist	d0a9b17b68	Add paypal.me link	2019-07-13 20:23:57 +02:00
Thomas Nordquist	4334bd9326	Add ubuntu tweer	2019-07-03 13:04:48 +02:00
Thomas Nordquist	a43dc11d98	Add survey	2019-07-02 23:51:45 +02:00
Thomas Nordquist	1200b40f1b	Update Readme	2019-06-21 02:10:10 +02:00
Thomas Nordquist	fcda705083	Update links	2019-06-19 08:48:49 +02:00
Thomas Nordquist	deea820107	Update links	2019-06-19 00:11:28 +02:00
Thomas Nordquist	427abf5647	Update screenshot	2019-06-19 00:09:54 +02:00
Thomas Nordquist	9fe9b08c55	Add version number	2019-06-18 23:53:01 +02:00
Thomas Nordquist	a2c77b5d2f	Update screenshot	2019-06-18 23:51:32 +02:00
Thomas Nordquist	202a04eea3	Update release	2019-06-18 23:36:49 +02:00
Thomas Nordquist	d2b42293c2	Update changelog	2019-06-18 15:03:10 +02:00
Thomas Nordquist	223d4b55aa	Update links	2019-05-13 12:50:52 +02:00
Thomas Nordquist	b452fac4a5	Fix spacing	2019-05-07 19:34:00 +02:00
Thomas Nordquist	c8a20d9d8d	Update version	2019-05-07 19:31:09 +02:00
Thomas Nordquist	2126f9a00c	Fix github button	2019-05-02 16:26:53 +02:00
Thomas Nordquist	9d2a2271cd	Update page	2019-05-02 12:59:37 +02:00
Thomas Nordquist	4add67ec5a	Update changelog	2019-04-25 00:30:25 +02:00
Thomas Nordquist	84709b29a1	Update template	2019-04-09 13:20:46 +02:00
Thomas Nordquist	1a4af8dbe5	Add OSX like frame	2019-04-09 13:17:48 +02:00
Thomas Nordquist	14fce24458	Use mp4 instaed of a gif	2019-04-09 12:33:27 +02:00
Thomas Nordquist	50d86478a0	Add jekyll local support	2019-04-09 12:33:04 +02:00
Thomas Nordquist	4ad4472dee	Add mp4 video instead of gif	2019-04-09 12:18:25 +02:00
Thomas Nordquist	7687b32b44	Remove duplicate MQTT Explorer titlte	2019-04-09 12:11:55 +02:00
Thomas Nordquist	88ab41875a	Update pages	2019-04-09 03:58:51 +02:00
Thomas Nordquist	48ee4dee29	Update page	2019-04-08 14:57:29 +02:00
Thomas Nordquist	3e5130b9d8	Update changelog	2019-04-08 14:42:57 +02:00
Thomas Nordquist	26ac4e0c27	Add changelog	2019-04-08 14:24:58 +02:00
Thomas Nordquist	03b304163d	Fix image location	2019-04-08 14:23:42 +02:00
Thomas Nordquist	16ed84193a	Initial commit	2019-04-04 20:36:35 +02:00