Expanding card and modal inline

Signed-off-by: sachanakshat <akshat.sachan@thalesgroup.com>

catalog/card.html

@@ -0,0 +1,37 @@
+<div class= "card link">  
+    <div class="card-inner">
+      <div class="front">
+        <div class="chip">
+          <small class="pattern-type"> {{pattern.type | upcase }}</small>
+        </div>
+        <h4 class="pattern-name">{{pattern.name}}</h4>
+        <div class="pattern-image-container">
+          <img class= "pattern-image" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
+        </div>
+        <h6 class="pattern-id">
+          <img class="smp"
+          src="{{site.baseurl}}/assets/images/logos/service-mesh-pattern.svg"
+          loading="lazy" />
+          <span id="patId{{pattern.patternId}}" class="pat">
+            {% assign bigPatId = pattern.patternId%}
+            {% assign patId = bigPatId | split: "-" %}
+
+            {% if patId[2] %}
+              MESHERY{{patId[2]}}
+            {%else%}
+              {{pattern.patternId}}
+            {% endif %}
+          </span>
+        </h6>
+      </div> 
+      <div class="back">
+
+      </div>
+    </div>
+  </div>  
+
+<style>
+  .chip{
+    float: left;
+  }
+</style>

catalog/index.html

@@ -76,7 +76,7 @@
       newDiv.setAttribute('type', pattern.type);
       newDiv.setAttribute('technology', pattern.technology);
       newDiv.setAttribute('status', pattern.Status);
-      let str = "{% include card.html %}      <!-- modal included -->      {% include modal.html %}";
+      let str = '<div w3-include-html="card.html"></div><div w3-include-html="modal.html"></div>';
       newDiv.innerHTML += str;
       toAdd.appendChild(newDiv);
     }

catalog/modal.html

@@ -0,0 +1,54 @@
+<div id="open-modal" class="modal-window">
+  <!-- <div class="click-container"> -->
+    <div class="modal-content">
+      <div class="modal-image">
+        <div class="chip chip-modal">
+          {% if pattern.filters.type == "wasm filter" %}
+          <a href="{{ site.baseurl }}/catalog/webassembly">
+            <h6 class="pattern-type"> {{pattern.filters.type | upcase }}</h6>
+          {% else %}
+            <a href="{{ site.baseurl }}/catalog/{{ pattern.type | slugify }}">
+          {% endif %}
+              <h6 class="pattern-type"> {{pattern.type | upcase }}</h6>
+            </a>
+        </div>
+        <button class="modal-close close">&times;</button>
+        {%if pattern.filters.type == "wasm filter" %}
+        <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/webassembly_logo.svg'" loading="lazy"/>
+        {%else%}
+        <img class="image-class" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/>
+        {%endif%}
+        <h4 class="related-patterns">RELATED PATTERNS</h4>
+        {% include related-patterns.html %}
+      </div>
+      <div class="vertical-line"></div>
+      <div class="modal-info">
+        <h2 class="modal-h2">{{pattern.name | upcase }} {% include read-more.html %}</h2>
+        {% if pattern.patternInfo %}
+        <h3 class="modal-h3">What this pattern does</h3>
+        <p class="content-toggle contentdata">
+          {{pattern.patternInfo | replace: '\\n', '<br/>' | replace: '\n', '<br/>' }}
+        </p>
+        <span class="read-more" href="read-more.html">{% include expand.html %}</span>
+        <h3 class="modal-h3">Caveats and Considerations</h3>
+        <p>{{pattern.patternCaveats}}</p>
+        {% else %}
+        <h3 class="modal-h3">What this filter does</h3>
+        <p class="content-toggle contentdata">
+          {{pattern.filterInfo }}
+        </p>
+        <span class="read-more">...read more</span>
+        <h3 class="modal-h3">Caveats and Considerations</h3>
+        <p>{{pattern.filterCaveats}}</p>
+        {% endif %}
+          <h3 class="modal-h3">Technologies</h3>
+          {% include partials/compatibility.html %}
+        {% include copy-and-download.html %}
+      </div>
+    </div>
+
+ <script src="{{ site.baseurl }}/assets/js/catalog-modal.js"></script>
+
+
+  <!-- </div> -->
+</div>