feat: use tailwind v2 and decrease css size with purge and minify

README.md

@@ -32,6 +32,7 @@ npm install -g @asyncapi/generator
 
     >**NOTE:** If you have to modify the [`dummy.yml`](https://github.com/asyncapi/generator/blob/master/test/docs/dummy.yml) file to develop your features, open a PR with the changes in the [asyncapi/generator](https://github.com/asyncapi/generator) repository.
 
+1. Adjust styling and generate `tailwind.min.css` with `npm run generate:assets`
 1. Generate output with watcher enabled: `npm run develop`.
 1. Open HTML in your browser: `open ./test/output/index.html`.
 

package.json

@@ -22,17 +22,20 @@
     "lint": "echo \"No linter specified yet\"",
     "test": "ava",
     "release": "semantic-release",
-    "develop": "ag https://raw.githubusercontent.com/asyncapi/generator/v1.0.0-rc.12/test/docs/dummy.yml ./ -o test/output --force-write --watch-template",
-    "generate:assets": "echo 'No additional assets need to be generated at the moment'",
+    "develop": "ag https://raw.githubusercontent.com/asyncapi/generator/v1.0.0/test/docs/dummy.yml ./ -o test/output --force-write --watch-template",
+    "generate:assets": "cross-env NODE_ENV=production postcss template/css/main.css -o template/css/tailwind.min.css",
     "bump:version": "npm --no-git-tag-version --allow-same-version version $VERSION"
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@asyncapi/generator-filters": "^1.1.0",
+    "autoprefixer": "^10.2.1",
+    "postcss-cli": "^8.3.1",
+    "puppeteer": "^5.3.1",
     "rimraf": "^3.0.2",
-    "puppeteer": "^5.3.1"
+    "tailwindcss": "^2.0.2"
   },
   "devDependencies": {
     "@asyncapi/parser": "^1.3.2",
@@ -42,8 +45,12 @@
     "@semantic-release/release-notes-generator": "^9.0.1",
     "ava": "^3.9.0",
     "conventional-changelog-conventionalcommits": "^4.2.3",
+    "cross-env": "^7.0.3",
     "semantic-release": "^17.0.4"
   },
+  "peerDependencies": {
+    "postcss": "^8.2.4"
+  },
   "release": {
     "branches": [
       "master"

partials/example.html

@@ -1,13 +1,13 @@
 {% macro example(msg, channelName, open=false) %}
 
 <form>
-  <h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
+  <h5 class="examples-uid text-orange-600 mt-4">{{msg.uid()}}</h5>
   {% 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>
+        <span class="px-2 mr-2 text-gray-200 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"
+          <svg class="expand inline align-baseline" 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>
@@ -16,12 +16,12 @@ <h5 class="examples-uid text-orange mt-4">{{msg.uid()}}</h5>
       <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>
+            <h6 class="text-xs font-bold text-gray-700">Example #{{loop.index}}</h6>
+            <pre class="hljs mb-4 border border-gray-800 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>
+        <pre class="hljs mb-4 border border-gray-800 rounded"><code>{{ msg.payload().json() | generateExample | safe }}</code></pre>
+        <h6 class="text-xs font-bold text-gray-700 italic">This example has been generated automatically.</h6>
         {% endif %}
       </div>
     </div>
@@ -30,9 +30,9 @@ <h6 class="text-xs font-bold text-grey-darker italic">This example has been gene
   {% 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>
+        <span class="px-2 mr-2 text-gray-200 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"
+          <svg class="expand inline align-baseline" 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>
@@ -41,12 +41,12 @@ <h6 class="text-xs font-bold text-grey-darker italic">This example has been gene
       <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>
+            <h6 class="text-xs font-bold text-gray-700">Example #{{loop.index}}</h6>
+            <pre class="hljs mb-4 border border-gray-800 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>
+        <pre class="hljs mb-4 border border-gray-800 rounded"><code>{{ msg.headers().json() | generateExample | safe }}</code></pre>
+        <h6 class="text-xs font-bold text-gray-700 italic">This example has been generated automatically.</h6>
         {% endif %}
       </div>
     </div>

partials/introduction.html

@@ -3,11 +3,11 @@
   <h1>{{asyncapi.info().title()}} {{asyncapi.info().version()}}</h1>
   <div class="leading-normal mb-4">
     {% if asyncapi.info().termsOfService() %}
-    <a class="border border-solid border-purple-lighter hover:bg-purple-lighter hover:text-purple-dark font-bold no-underline text-purple text-xs uppercase rounded mr-2 px-3 py-1"
+    <a class="border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 font-bold no-underline text-purple-500 text-xs uppercase rounded mr-2 px-3 py-1"
       href="{{asyncapi.info().termsOfService()}}" target="_blank">Terms of Service</a>
     {% endif %}
     {% if asyncapi.info().license() %}
-      <a class="border border-solid border-orange-lighter hover:bg-orange-lighter hover:text-orange-dark font-bold no-underline text-orange text-xs uppercase rounded mr-2 px-3 py-1"
+      <a class="border border-solid border-orange-300 hover:bg-orange-300 hover:text-orange-600 font-bold no-underline text-orange-500 text-xs uppercase rounded mr-2 px-3 py-1"
         href="{{asyncapi.info().license().url()}}" target="_blank">{{asyncapi.info().license().name()}}</a>
     {% endif %}
   </div>
@@ -20,11 +20,11 @@ <h1>{{asyncapi.info().title()}} {{asyncapi.info().version()}}</h1>
   <div class="leading-normal mb-4">
     {% if asyncapi.info().contact() %}
       {% if asyncapi.info().contact().url() %}
-      Contact link: <a class="border border-solid border-purple-lighter hover:bg-purple-lighter hover:text-purple-dark font-bold no-underline text-purple text-xs uppercase rounded mr-2 px-3 py-1"
+      Contact link: <a class="border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 font-bold no-underline text-purple-500 text-xs uppercase rounded mr-2 px-3 py-1"
         href="{{asyncapi.info().contact().url()}}" target="_blank">{%- if asyncapi.info().contact().name() %}{{asyncapi.info().contact().name()}}{%- else %}{{asyncapi.info().contact().url()}}{%- endif %}</a>
       {% endif %}
       {% if asyncapi.info().contact().email() %}
-      Contact email: <a class="border border-solid border-purple-lighter hover:bg-purple-lighter hover:text-purple-dark font-bold no-underline text-purple text-xs uppercase rounded mr-2 px-3 py-1"
+      Contact email: <a class="border border-solid border-purple-300 hover:bg-purple-300 hover:text-purple-600 font-bold no-underline text-purple-500 text-xs uppercase rounded mr-2 px-3 py-1"
         href="mailto:{{asyncapi.info().contact().email()}}" target="_blank">{{asyncapi.info().contact().email()}}</a>
       {% endif %}
     {% endif %}

partials/message.html

@@ -3,19 +3,19 @@
 
 {% macro message(msg, showIndex=false, index=0, open=false) %}
 
-<div class="bg-grey-lighter rounded p-4 mt-2">
-  <div class="text-sm text-grey-darker mb-2">
+<div class="bg-gray-200 rounded p-4 mt-2">
+  <div class="text-sm text-gray-700 mb-2">
     {% if showIndex %}
-    <span class="text-grey-darker font-bold mr-2">#{{index}}</span>
+    <span class="text-gray-700 font-bold mr-2">#{{index}}</span>
     {% endif %}
     {% if msg.title() %}
       {{msg.title()}}
-      <span class="border text-orange rounded text-xs ml-3 py-0 px-2">{{msg.uid()}}</span>
+      <span class="border text-orange-600 rounded text-xs ml-3 py-0 px-2">{{msg.uid()}}</span>
     {% else %}
-      <span class="border text-orange rounded text-s py-0 px-2">{{msg.uid()}}</span>
+      <span class="border text-orange-600 rounded text-s py-0 px-2">{{msg.uid()}}</span>
     {% endif %}
   </div>
-  <p class="text-grey-dark text-sm">{{msg.summary()}}</p>
+  <p class="text-gray-600 text-sm">{{msg.summary()}}</p>
 
   {{ tags(msg.tags()) }}
 

partials/operation.html

@@ -12,18 +12,18 @@
   <div class="operation pt-8 pb-8">
     <h3 class="font-mono text-base">
       {% if operationType === 'publish' %}
-      <span class="font-mono border border-blue text-blue uppercase p-1 rounded" title="Publish">Pub</span>
+      <span class="font-mono border border-blue-500 text-blue-500 uppercase p-1 rounded" title="Publish">Pub</span>
       {% endif %}
       {% if operationType === 'subscribe' %}
-      <span class="font-mono border border-green-dark text-green-dark uppercase p-1 rounded"
+      <span class="font-mono border border-green-600 text-green-600 uppercase p-1 rounded"
         title="Subscribe">Sub</span>
       {% endif %}
       {{ slicedString(channelName) }}
     </h3>
 
     <div class="mt-4 mb-4 markdown">{{ channel.description() | markdown2html | safe }}</div>
 
-    <p class="text-grey text-sm">{{operation.summary()}}</p>
+    <p class="text-gray-500 text-sm">{{operation.summary()}}</p>
     <div class="mt-4 mb-4 markdown">{{ operation.description() | markdown2html | safe }}</div>
 
 
@@ -34,13 +34,13 @@ <h3 class="font-mono text-base">
           <div class="js-prop cursor-pointer py-2 flex property">
             <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
               <span class="text" style="word-break: break-word;">Parameters</span>
-              <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
+              <svg class="expand inline align-baseline" 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>
             </div>
           </div>
-          <div class="children bg-grey-lighter p-4 rounded">
-            <div class="bg-grey-lightest pl-8 pr-8 rounded">
+          <div class="children bg-gray-200 p-4 rounded">
+            <div class="bg-gray-200 pr-8 rounded">
               {% for parameterName, parameter in channel.parameters() %}
                 {{ schemaProp(parameter.schema(), parameterName, odd=false, specialName=false, required=true, altDescription=parameter.description()) }}
               {% endfor %}

partials/operations/by_tags.html

@@ -8,7 +8,7 @@
         <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
           <span class="text-sm"
             style="word-break: break-word;text-transform: capitalize;">{{ categorytags.name() }}</span>
-          <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
+          <svg class="expand inline align-baseline" 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>
         </div>
@@ -37,7 +37,7 @@
         <span class="text-sm" style="word-break: break-word;text-transform: capitalize;">
           Untagged
         </span>
-        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
+        <svg class="expand inline align-baseline" 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>
       </div>

partials/operations/by_tags_no_root.html

@@ -8,7 +8,7 @@
         <span class="text-sm" style="word-break: break-word;text-transform: capitalize;">
           {{ tag }}
         </span>
-        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
+        <svg class="expand inline align-baseline" 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>
       </div>
@@ -35,7 +35,7 @@
         <span class="text-sm" style="word-break: break-word;text-transform: capitalize;">
           Untagged
         </span>
-        <svg class="expand" version="1.1" viewBox="0 0 24 24" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
+        <svg class="expand inline align-baseline" 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>
       </div>

partials/operations/tag_nav_item_pub.html

@@ -3,9 +3,9 @@
 
 {% 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"
+<a class="js-menu-item flex break-words no-underline text-gray-700 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"
+    <span class="bg-blue-600 font-bold h-6 no-underline text-white uppercase p-1 mr-2 rounded"
         style="height: 21px;font-size: 11px;" title="Publish">
         Pub
     </span>

partials/operations/tag_nav_item_sub.html

@@ -3,9 +3,9 @@
 
 {% 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"
+<a class="js-menu-item flex break-words no-underline text-gray-700 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"
+    <span class="bg-green-600 font-bold no-underline text-white uppercase p-1 mr-2 rounded"
         style="height: 21px;font-size: 11px;" title="Subscribe">
         Sub
     </span>

partials/schema-item.html

@@ -1,12 +1,12 @@
 {% macro schemaItem(propName, odd=false) %}
 
-<div class="{% if odd %}bg-grey-lightest{% else %}bg-grey-lighter{% endif %} pl-8 pr-8 rounded">
+<div class="{% if odd %}bg-gray-100{% else %}bg-gray-200{% endif %} pl-8 pr-8 rounded">
     <div class="js-prop cursor-pointer py-2 flex property">
         <div class="pr-4" style="margin-top:-2px; min-width: 25%;">
             <span class="text-sm" style="word-break: break-word;">{{ propName }}</span>
         </div>
         <div>
-            <div class="capitalize text-sm text-teal font-bold">
+            <div class="capitalize text-sm text-teal-500 font-bold">
                 [CIRCULAR]
             </div>        
         </div>