render catalog items in batches

_includes/copy-and-download.html

@@ -14,7 +14,7 @@
         </a>
         {% endif %}
 
-        <a href="/catalog/{{type.patternId}}/{{type.publishedVersion}}/design.yml" download="{{type.name}}.yml">
+        <a href="/catalog/{% if pattern.filterInfo %}/{{ type.downloadLink }}{% else %}{{type.patternId}}/{{type.publishedVersion}}/design.yml {% endif %}" download="{{type.name}}.yml">
           <button id="resourceDownloadBtn" data-patternId="{{type.patternId}}" onclick="sendCloudTelemetry()"
             class="import" style="width: 7rem;">
             Download
@@ -59,4 +59,4 @@
     patternId && fetch(`https://cloud.layer5.io/api/content/patterns/download/${patternId}`)
   }
 
-</script>
+</script>

_includes/patterns-filter.html

@@ -457,7 +457,7 @@
       for(let i=0; i<patternCards.length; i++){
         let cc = [];
         let cardCategory;
-        const type = patternCards[i].getAttribute("type").toLowerCase();
+        const type = patternCards[i].getAttribute("type")?.toLowerCase();
         const technology = patternCards[i].getAttribute("technology")
         const patternType = patternCards[i].getAttribute("patternType").toLowerCase();
         if(technology){

collections/_pages/catalog.html

@@ -1,6 +1,6 @@
 ---
 layout: catalog
-title: Cloud Native Catalogsz
+title: Cloud Native Catalogs
 permalink: /catalog
 ---
 
@@ -53,77 +53,94 @@
   }
 </style>
 
-{% assign catalog = site.collections | concat: site.catalog | concat: site.models | sort: 'name' %}
+{% assign models = site.models %}
+{% assign catalog = site.catalog %}
+{% assign max_catalog = site.catalog | size %}
+{% assign max_models = site.models | size %}
+{% assign catalog_index = 0 %}
+{% assign models_index = 0 %}
+
+{% assign catalog_batches = max_catalog | divided_by: 6 | ceil %}
+{% assign models_batches = max_models | divided_by: 6 | ceil %}
+{% assign total_batches = catalog_batches | plus: models_batches %}
+
 <div class="section-container">
-
   {% include view-all.html %}
 
   <div class="row">
     <h2 class="not-found" style="display: none;" id="not-found">
       No results found
     </h2>
     {% assign count = 0 %}
-    {% for pattern in catalog %}
-        {% if count < 9 %}
-          {% assign should_display = 'block' %}
-        {% else %}
-          {% assign should_display = 'none' %}
-        {% endif %}
-
-    {% if pattern.patternInfo and pattern.Status != "ComingSoon" %}
-    {% assign last = pattern.compatibility | last %}
-    <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      patternType="designs"
-      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {{ should_display }};"
-    >
-      {% include card.html %}
-    </div>
-    {% assign count = count | plus: 1 %}
-    {% elsif pattern.filterInfo %}
-    {% assign last = pattern.compatibility | last %}
-    <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      patternType="wasm filters"
-      technology='["wasm-filter"{% for item in pattern.compatibility %}{% if forloop.first %}, {% endif %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {{ should_display }};"
-    >
-      {% include wasm-card.html %}
-    </div>
-    {% assign count = count | plus: 1 %}
-    {% elsif pattern.componentsCount %}
-    <div
-      class="column column-lg patternCard modelCard"
-      filter="{{ pattern.name }}"
-      type="model"
-      patternType="models"
-      technology=''
-      style="display: {{ should_display }};"
-    >
-      {% include models/card.html model=pattern %}
-    </div>
-    {% assign count = count | plus: 1 %}
-    {% elsif pattern.patternInfo and pattern.Status == "ComingSoon" %}
-    {% assign last = pattern.compatibility | last %}
-     <div
-      class="column column-lg patternCard"
-      filter="{{ pattern.name }}"
-      type="{{ pattern.type }}"
-      technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
-      status="{{ pattern.Status }}"
-      style="display: {{ should_display }};"
-    >
-      {% include coming-soon.html %}
-    </div>
-    {% assign count = count | plus: 1 %}
-    {% endif %} 
+    {% for batch in (0..total_batches) %}
+      {% if catalog_index >= max_catalog and models_index >= max_models %}
+        {% break %}
+      {% endif %}
+      {% if catalog_index < max_catalog %}
+        {% assign batch_catalog = catalog | slice: catalog_index, 6 %}
+        {% for pattern in batch_catalog %}
+          {% if pattern.patternInfo and pattern.Status != "ComingSoon" %}
+            {% assign last = pattern.compatibility | last %}
+              <div
+                class="column column-lg patternCard"
+                filter="{{ pattern.name }}"
+                type="{{ pattern.type }}"
+                patternType="designs"
+                technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
+                status="{{ pattern.Status }}"
+                style="display: {% if count < 10 %}block{% else %}none{% endif %};"
+              >
+                {% include card.html %}
+              </div>
+            {% assign count = count | plus: 1 %}
+          {% elsif pattern.filterInfo %}
+            {% assign last = pattern.compatibility | last %}
+              <div
+                class="column column-lg patternCard"
+                filter="{{ pattern.name }}"
+                type="{{ pattern.type }}"
+                patternType="wasm filters"
+                technology='["wasm-filter"{% for item in pattern.compatibility %}{% if forloop.first %}, {% endif %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
+                status="{{ pattern.Status }}"
+                style="display: {% if count < 10 %}block{% else %}none{% endif %};"
+              >
+                {% include wasm-card.html %}
+              </div>
+            {% assign count = count | plus: 1 %}
+          {% elsif pattern.patternInfo and pattern.Status == "ComingSoon" %}
+            {% assign last = pattern.compatibility | last %}
+             <div
+                class="column column-lg patternCard"
+                filter="{{ pattern.name }}"
+                type="{{ pattern.type }}"
+                technology='[{% for item in pattern.compatibility %}"{{ item | downcase | replace: ' ', '-' }}"{% if item != last %},{% endif %}{% endfor %}]'
+                status="{{ pattern.Status }}"
+                style="display: {% if count < 10 %}block{% else %}none{% endif %};"
+              >
+                {% include coming-soon.html %}
+              </div>
+            {% assign count = count | plus: 1 %}
+          {% endif %} 
+        {% endfor %}
+        {% assign catalog_index = catalog_index | plus: 6 %}
+      {% endif %}
+
+      {% if models_index < max_models %}
+        {% assign batch_models = models | slice: models_index, 6 %}
+        {% for model in batch_models %}
+          <div
+            class="column column-lg patternCard modelCard"
+            filter="{{ model.name }}"
+
+            patternType="models"
+            style="display: {% if count < 10 %}block{% else %}none{% endif %};"
+          >
+            {% include models/card.html model=model %}
+          </div>
+          {% assign count = count | plus: 1 %}
+        {% endfor %}
+        {% assign models_index = models_index | plus: 6 %}
+      {% endif %}
     {% endfor %}
   </div>
 </div>