fix: Introduce new macros to keep reusable tag navigation items (#81)

asyncapi · Oct 8, 2020 · acad4bf · acad4bf
1 parent 45bc473
commit acad4bf
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 119 deletions.
diff --git a/partials/operations/by_tags.html b/partials/operations/by_tags.html
@@ -1,3 +1,6 @@
+{% from "./tag_nav_item_sub.html" import tagNavItemSub %}
+{% from "./tag_nav_item_pub.html" import tagNavItemPub %}
+
 {% if asyncapi.hasTags() %}
   {% for categorytags in asyncapi.tags() %}
     <div class="mt-4 {% if open %}is-open{% endif %}">
@@ -13,41 +16,12 @@
 
       <div class="children">
         {% for channelName, channel in asyncapi.channels() %}
-           {% if channel.publish() and channel.publish().hasTags() and channel.publish() | containTags(categorytags) %}
-            <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-publish-{{ channelName }}">
-              <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Publish">
-                Pub
-              </span>
-              {% if channel.publish().summary() %}
-                <span style="padding-top: 2px;">
-                  {{ channel.publish().summary() }}
-                </span>
-              {% else %}
-                <div style="display:inline-block;">
-                  {{ slicedString(channelName, 'padding-top: 2px;') }}
-                </div>
-              {% endif %}
-            </a>
+          {% if channel.publish() and channel.publish().hasTags() and channel.publish() | containTags(categorytags) %}
+            {{ tagNavItemPub(channel, channelName) }}
           {% endif %}
 
           {% if channel.subscribe() and channel.subscribe().hasTags() and channel.subscribe() | containTags(categorytags) %}
-            <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-subscribe-{{ channelName }}">
-              {% if channel.deprecated %}
-                <span title="Deprecated"></span>
-              {% endif %}
-              <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Subscribe">
-                Sub
-              </span>
-              {% if channel.subscribe().summary() %}
-                <span style="padding-top: 2px;">
-                  {{ channel.subscribe().summary() }}
-                </span>
-              {% else %}
-                <div style="display:inline-block;">
-                  {{ slicedString(channelName, 'padding-top: 2px;') }}
-                </div>
-              {% endif %}
-            </a>
+            {{ tagNavItemSub(channel, channelName) }}
           {% endif %}
         {% endfor %}
       </div>
@@ -72,37 +46,11 @@
     <div class="children">
       {% for channelName, channel in asyncapi.channels() %}
         {% if channel.hasPublish() and (not channel.publish().hasTags() or not channel.publish() | containTags(asyncapi.tags())) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-publish-{{ channelName }}">
-            <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Publish">
-              Pub
-            </span>
-            {% if channel.publish().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.publish().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemPub(channel, channelName) }}
         {% endif %}
 
         {% if channel.hasSubscribe() and (not channel.subscribe().hasTags() or not channel.subscribe() | containTags(asyncapi.tags())) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-subscribe-{{ channelName }}">
-            <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Subscribe">
-              Sub
-            </span>
-            {% if channel.subscribe().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.subscribe().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemSub(channel, channelName) }}
         {% endif %}
       {% endfor %}
     </div>

diff --git a/partials/operations/by_tags_no_root.html b/partials/operations/by_tags_no_root.html
@@ -1,3 +1,6 @@
+{% from "./tag_nav_item_sub.html" import tagNavItemSub %}
+{% from "./tag_nav_item_pub.html" import tagNavItemPub %}
+
 {% for tag in asyncapi | operationsTags %}
   <div class="mt-4 {% if open %}is-open{% endif %}">
     <div class="js-prop cursor-pointer py-2 flex property">
@@ -14,40 +17,11 @@
     <div class="children">
       {% for channelName, channel in asyncapi.channels() %}
         {% if channel.publish() and channel.publish().hasTags() and channel.publish() | containTags(tag) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-publish-{{ channelName }}">
-            <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Publish">
-              Pub
-            </span>
-            {% if channel.publish().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.publish().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemPub(channel, channelName) }}
         {% endif %}
 
         {% if channel.subscribe() and channel.subscribe().hasTags() and channel.subscribe() | containTags(tag) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-subscribe-{{ channelName }}">
-            {% if channel.deprecated %}
-              <span title="Deprecated"></span>
-            {% endif %}
-            <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Subscribe">
-              Sub
-            </span>
-            {% if channel.subscribe().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.subscribe().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemSub(channel, channelName) }}
         {% endif %}
       {% endfor %}
     </div>
@@ -70,37 +44,11 @@
     <div class="children">
       {% for channelName, channel in asyncapi.channels() %}
         {% if channel.hasPublish() and (not channel.publish().hasTags() or not channel.publish() | containTags(asyncapi | operationsTags())) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-publish-{{ channelName }}">
-            <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Publish">
-              Pub
-            </span>
-            {% if channel.publish().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.publish().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemPub(channel, channelName) }}
         {% endif %}
 
         {% if channel.hasSubscribe() and (not channel.subscribe().hasTags() or not channel.subscribe() | containTags(asyncapi | operationsTags())) %}
-          <a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3" href="#operation-subscribe-{{ channelName }}">
-            <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded" style="height: 21px;font-size: 11px;" title="Subscribe">
-              Sub
-            </span>
-            {% if channel.subscribe().summary() %}
-              <span style="padding-top: 2px;">
-                {{ channel.subscribe().summary() }}
-              </span>
-            {% else %}
-              <div style="display:inline-block;">
-                {{ slicedString(channelName, 'padding-top: 2px;') }}
-              </div>
-            {% endif %}
-          </a>
+          {{ tagNavItemSub(channel, channelName) }}
         {% endif %}
       {% endfor %}
     </div>

diff --git a/partials/operations/tag_nav_item_pub.html b/partials/operations/tag_nav_item_pub.html
@@ -0,0 +1,23 @@
+{% from "../sliced-string.html" import slicedString %}
+
+
+{% macro tagNavItemPub(channel, channelName) %}
+
+<a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
+    href="#operation-publish-{{ channelName }}">
+    <span class="bg-blue-dark font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded"
+        style="height: 21px;font-size: 11px;" title="Publish">
+        Pub
+    </span>
+    {% if channel.publish().summary() %}
+    <span style="padding-top: 2px;">
+        {{ channel.publish().summary() }}
+    </span>
+    {% else %}
+    <div style="display:inline-block;">
+        {{ slicedString(channelName, 'padding-top: 2px;') }}
+    </div>
+    {% endif %}
+</a>
+
+{% endmacro %}
diff --git a/partials/operations/tag_nav_item_sub.html b/partials/operations/tag_nav_item_sub.html
@@ -0,0 +1,23 @@
+{% from "../sliced-string.html" import slicedString %}
+
+
+{% macro tagNavItemSub(channel, channelName) %}
+
+<a class="js-menu-item flex break-words no-underline text-grey-darkest mt-8 sm:mt-8 md:mt-3"
+    href="#operation-subscribe-{{ channelName }}">
+    <span class="bg-green-dark font-bold no-underline text-white uppercase p-1 mr-2 rounded"
+        style="height: 21px;font-size: 11px;" title="Subscribe">
+        Sub
+    </span>
+    {% if channel.subscribe().summary() %}
+    <span style="padding-top: 2px;">
+        {{ channel.subscribe().summary() }}
+    </span>
+    {% else %}
+    <div style="display:inline-block;">
+        {{ slicedString(channelName, 'padding-top: 2px;') }}
+    </div>
+    {% endif %}
+</a>
+
+{% endmacro %}