From 7f357ba7a8ab7335403d32b84d6f9cd05a5d83a9 Mon Sep 17 00:00:00 2001
From: Waleed ASHRAF <waleedashraf@outlook.com>
Date: Fri, 22 May 2020 14:19:38 +0200
Subject: [PATCH 1/5] feat: make payload example collapsible

---
 partials/example.html | 62 ++++++++++++++++++++++++++++---------------
 1 file changed, 41 insertions(+), 21 deletions(-)

diff --git a/partials/example.html b/partials/example.html
index 0caed57d3..d2d65049c 100644
--- a/partials/example.html
+++ b/partials/example.html
@@ -1,4 +1,4 @@
-{% macro example(msg, channelName) %}
+{% macro example(msg, channelName, open=false) %}
 
 <form>
   <input type="radio" checked id="example-payload-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-payload-tab hidden" {% if not msg.payload() %}disabled{% endif %}/>
@@ -8,28 +8,48 @@
   <label for="example-headers-{{channelName}}-{{msg.uid()}}"
       class="py-1 px-2 mr-2 mb-4 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</label>
 
-  <div class="payload-examples mt-4">
-    {% if msg | getPayloadExamples | length %}
-      {% for ex in msg | getPayloadExamples %}
-        <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
-        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
-      {% endfor %}
-    {% elif msg.payload() %}
-    <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
-    <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
-    {% endif %}
+  <div class="{% if open %}is-open{% endif %}">
+    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
+      {% if msg.payload() | isExpandable %}
+        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
+          xmlns="http://www.w3.org/2000/svg" y="0">
+          <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
+        </svg>
+      {% endif %}
+    </div>
+    <div class="children payload-examples mt-4">
+      {% if msg | getPayloadExamples | length %}
+        {% for ex in msg | getPayloadExamples %}
+          <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
+          <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
+        {% endfor %}
+      {% elif msg.payload() %}
+      <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
+      <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
+      {% endif %}
+    </div>
   </div>
 
-  <div class="headers-examples mt-4">
-    {% if msg | getHeadersExamples | length %}
-      {% for ex in msg | getHeadersExamples %}
-        <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
-        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe  }}</code></pre>
-      {% endfor %}
-    {% elif msg.headers() %}
-    <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
-    <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
-    {% endif %}
+  <div class="{% if open %}is-open{% endif %}">
+    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
+      {% if msg.payload() | isExpandable %}
+        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
+          xmlns="http://www.w3.org/2000/svg" y="0">
+          <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
+        </svg>
+      {% endif %}
+    </div>
+    <div class="children headers-examples mt-4">
+      {% if msg | getHeadersExamples | length %}
+        {% for ex in msg | getHeadersExamples %}
+          <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
+          <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe  }}</code></pre>
+        {% endfor %}
+      {% elif msg.headers() %}
+      <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
+      <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
+      {% endif %}
+    </div>
   </div>
 </form>
 

From d6aff6352162f6ec30c48ea8260883005d58db42 Mon Sep 17 00:00:00 2001
From: Waleed ASHRAF <waleedashraf@outlook.com>
Date: Wed, 27 May 2020 12:26:56 +0200
Subject: [PATCH 2/5] fix: fix colors in css and div class

---
 partials/example.html | 5 +++--
 template/css/main.css | 8 ++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/partials/example.html b/partials/example.html
index d2d65049c..32651c0ad 100644
--- a/partials/example.html
+++ b/partials/example.html
@@ -1,6 +1,7 @@
 {% macro example(msg, channelName, open=false) %}
 
 <form>
+  <h5 class="examples-uid">{{msg.uid()}}</h5>
   <input type="radio" checked id="example-payload-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-payload-tab hidden" {% if not msg.payload() %}disabled{% endif %}/>
   <label for="example-payload-{{channelName}}-{{msg.uid()}}" class="py-1 px-2 mr-2 mb-4 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</label>
 
@@ -8,7 +9,7 @@
   <label for="example-headers-{{channelName}}-{{msg.uid()}}"
       class="py-1 px-2 mr-2 mb-4 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</label>
 
-  <div class="{% if open %}is-open{% endif %}">
+  <div class="children payload-examples mt-4 {% if open %}is-open{% endif %}">
     <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
       {% if msg.payload() | isExpandable %}
         <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
@@ -30,7 +31,7 @@ <h6 class="text-xs font-bold text-grey-darker italic">This example has been gene
     </div>
   </div>
 
-  <div class="{% if open %}is-open{% endif %}">
+  <div class="children headers-examples mt-4 {% if open %}is-open{% endif %}">
     <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
       {% if msg.payload() | isExpandable %}
         <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
diff --git a/template/css/main.css b/template/css/main.css
index 4c2c5bd9e..2c482c32f 100644
--- a/template/css/main.css
+++ b/template/css/main.css
@@ -100,6 +100,14 @@ a:hover {
   display: block;
 }
 
+.payload-examples, .headers-examples polygon {
+  fill: #fff;
+}
+
+.examples-uid {
+  color: #fff;
+}
+
 /* PANELS */
 
 .sidebar-panel {

From 5cbe5ed8c04c39aa251ce5f95edc59f7009391bd Mon Sep 17 00:00:00 2001
From: Waleed ASHRAF <waleedashraf@outlook.com>
Date: Wed, 27 May 2020 13:53:26 +0200
Subject: [PATCH 3/5] fix: always show headers and payload

---
 partials/example.html | 17 ++++++-----------
 template/css/main.css | 11 +++++------
 2 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/partials/example.html b/partials/example.html
index 32651c0ad..15c7daca0 100644
--- a/partials/example.html
+++ b/partials/example.html
@@ -2,15 +2,9 @@
 
 <form>
   <h5 class="examples-uid">{{msg.uid()}}</h5>
-  <input type="radio" checked id="example-payload-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-payload-tab hidden" {% if not msg.payload() %}disabled{% endif %}/>
-  <label for="example-payload-{{channelName}}-{{msg.uid()}}" class="py-1 px-2 mr-2 mb-4 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</label>
-
-  <input type="radio" id="example-headers-{{channelName}}-{{msg.uid()}}" name="tab" class="examples-headers-tab hidden" {% if not msg.headers() %}disabled{% endif %} />
-  <label for="example-headers-{{channelName}}-{{msg.uid()}}"
-      class="py-1 px-2 mr-2 mb-4 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</label>
-
-  <div class="children payload-examples mt-4 {% if open %}is-open{% endif %}">
-    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
+  <div class="payload-examples mt-4 {% if open %}is-open{% endif %}">
+    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
+      <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</span>
       {% if msg.payload() | isExpandable %}
         <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
           xmlns="http://www.w3.org/2000/svg" y="0">
@@ -31,8 +25,9 @@ <h6 class="text-xs font-bold text-grey-darker italic">This example has been gene
     </div>
   </div>
 
-  <div class="children headers-examples mt-4 {% if open %}is-open{% endif %}">
-    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer py-2{% endif %} flex property">
+  <div class="headers-examples mt-4 {% if open %}is-open{% endif %}">
+    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
+      <span class="px-2 mr-2 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</span>
       {% if msg.payload() | isExpandable %}
         <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
           xmlns="http://www.w3.org/2000/svg" y="0">
diff --git a/template/css/main.css b/template/css/main.css
index 2c482c32f..5d6a9e699 100644
--- a/template/css/main.css
+++ b/template/css/main.css
@@ -77,11 +77,6 @@ a:hover {
 
 /* EXAMPLES */
 
-.payload-examples,
-.headers-examples {
-  display: none;
-}
-
 .examples-payload-tab:checked + label {
   background-color: #38a89d;
   border-color: #38a89d;
@@ -100,10 +95,14 @@ a:hover {
   display: block;
 }
 
-.payload-examples, .headers-examples polygon {
+.payload-examples polygon, .headers-examples polygon {
   fill: #fff;
 }
 
+.payload-examples .text-grey-lightest, .headers-examples .text-grey-lightest {
+  align-self: center;
+}
+
 .examples-uid {
   color: #fff;
 }

From f6a27780ec77233bfaa0d4b09f9eb1b6bc58dd37 Mon Sep 17 00:00:00 2001
From: Waleed ASHRAF <waleedashraf@outlook.com>
Date: Wed, 27 May 2020 16:04:37 +0200
Subject: [PATCH 4/5] fix: adjust margins and text color

---
 partials/example.html | 6 +++---
 template/css/main.css | 4 ----
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/partials/example.html b/partials/example.html
index 15c7daca0..e85a6750c 100644
--- a/partials/example.html
+++ b/partials/example.html
@@ -1,8 +1,8 @@
 {% macro example(msg, channelName, open=false) %}
 
 <form>
-  <h5 class="examples-uid">{{msg.uid()}}</h5>
-  <div class="payload-examples mt-4 {% if open %}is-open{% endif %}">
+  <h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
+  <div class="payload-examples mb-4 {% if open %}is-open{% endif %}">
     <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
       <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</span>
       {% if msg.payload() | isExpandable %}
@@ -25,7 +25,7 @@ <h6 class="text-xs font-bold text-grey-darker italic">This example has been gene
     </div>
   </div>
 
-  <div class="headers-examples mt-4 {% if open %}is-open{% endif %}">
+  <div class="headers-examples mb-4 {% if open %}is-open{% endif %}">
     <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
       <span class="px-2 mr-2 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</span>
       {% if msg.payload() | isExpandable %}
diff --git a/template/css/main.css b/template/css/main.css
index 5d6a9e699..f241f2feb 100644
--- a/template/css/main.css
+++ b/template/css/main.css
@@ -103,10 +103,6 @@ a:hover {
   align-self: center;
 }
 
-.examples-uid {
-  color: #fff;
-}
-
 /* PANELS */
 
 .sidebar-panel {

From 8a15a76e1b30d2180a09515d901bd46aff4337de Mon Sep 17 00:00:00 2001
From: Waleed ASHRAF <waleedashraf@outlook.com>
Date: Thu, 28 May 2020 10:39:10 +0200
Subject: [PATCH 5/5] fix: only show headers/payload when available

---
 partials/example.html | 88 ++++++++++++++++++++++---------------------
 1 file changed, 46 insertions(+), 42 deletions(-)

diff --git a/partials/example.html b/partials/example.html
index e85a6750c..dd2e14fce 100644
--- a/partials/example.html
+++ b/partials/example.html
@@ -2,51 +2,55 @@
 
 <form>
   <h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
-  <div class="payload-examples mb-4 {% if open %}is-open{% endif %}">
-    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
-      <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer {% if not msg.payload() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.payload() %}title="This message does not have a payload"{% endif %}>Payload</span>
-      {% if msg.payload() | isExpandable %}
-        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
-          xmlns="http://www.w3.org/2000/svg" y="0">
-          <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
-        </svg>
-      {% endif %}
+  {% if msg.payload() %}
+    <div class="payload-examples mb-4 {% if open %}is-open{% endif %}">
+      <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
+        <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Payload</span>
+        {% if msg.payload() | isExpandable %}
+          <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
+            xmlns="http://www.w3.org/2000/svg" y="0">
+            <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
+          </svg>
+        {% endif %}
+      </div>
+      <div class="children payload-examples mt-4">
+        {% if msg | getPayloadExamples | length %}
+          {% for ex in msg | getPayloadExamples %}
+            <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
+            <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
+          {% endfor %}
+        {% elif msg.payload() %}
+        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
+        <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
+        {% endif %}
+      </div>
     </div>
-    <div class="children payload-examples mt-4">
-      {% if msg | getPayloadExamples | length %}
-        {% for ex in msg | getPayloadExamples %}
-          <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
-          <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ex | dump(2) | safe }}</code></pre>
-        {% endfor %}
-      {% elif msg.payload() %}
-      <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
-      <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
-      {% endif %}
-    </div>
-  </div>
+  {% endif %}
 
-  <div class="headers-examples mb-4 {% if open %}is-open{% endif %}">
-    <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
-      <span class="px-2 mr-2 text-sm border rounded focus:outline-none cursor-pointer {% if not msg.headers() %}text-grey-dark border-grey-dark opacity-25{% else %}text-grey-lightest{% endif %}" {% if not msg.headers() %}title="This message does not have headers"{% endif %}>Headers</span>
-      {% if msg.payload() | isExpandable %}
-        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
-          xmlns="http://www.w3.org/2000/svg" y="0">
-          <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
-        </svg>
-      {% endif %}
-    </div>
-    <div class="children headers-examples mt-4">
-      {% if msg | getHeadersExamples | length %}
-        {% for ex in msg | getHeadersExamples %}
-          <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
-          <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe  }}</code></pre>
-        {% endfor %}
-      {% elif msg.headers() %}
-      <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
-      <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
-      {% endif %}
+  {% if msg.headers() %}
+    <div class="headers-examples mb-4 {% if open %}is-open{% endif %}">
+      <div class="{% if  msg.payload() | isExpandable %}js-prop cursor-pointer {% endif %} flex property">
+        <span class="px-2 mr-2 text-grey-lightest text-sm border rounded focus:outline-none cursor-pointer">Headers</span>
+        {% if msg.payload() | isExpandable %}
+          <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0"
+            xmlns="http://www.w3.org/2000/svg" y="0">
+            <polygon points="17.3 8.3 12 13.6 6.7 8.3 5.3 9.7 12 16.4 18.7 9.7 "></polygon>
+          </svg>
+        {% endif %}
+      </div>
+      <div class="children headers-examples mt-4">
+        {% if msg | getHeadersExamples | length %}
+          {% for ex in msg | getHeadersExamples %}
+            <h6 class="text-xs font-bold text-grey-darker">Example #{{loop.index}}</h6>
+            <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ ex | dump(2) | safe  }}</code></pre>
+          {% endfor %}
+        {% elif msg.headers() %}
+        <pre class="hljs mb-4 border border-grey-darkest rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
+        <h6 class="text-xs font-bold text-grey-darker italic">This example has been generated automatically.</h6>
+        {% endif %}
+      </div>
     </div>
-  </div>
+  {% endif %}
 </form>
 
 {% endmacro %}