setup for contributed models

_config.yml

@@ -68,6 +68,9 @@ collections:
   handbook:
     output: true
     permalink: /community/:collection/:name
+  custom-models:
+    output: true
+    permalink: /catalog/models/:name
 
 # Post URL format
 permalink: /blog/:year/:month/:name/

_config_dev.yml

@@ -44,7 +44,7 @@ collections:
     output: false
   contributors:
     output: true
-    permalink:  /community/members/:name
+    permalink: /community/members/:name
   extensions:
     output: true
     permalink: /:collection/:name
@@ -67,6 +67,9 @@ collections:
   handbook:
     output: true
     permalink: /community/:collection/:name
+  custom-models:
+    output: true
+    permalink: /catalog/models/:name
 
 # Post URL format
 permalink: /blog/:year/:month/:name/

_includes/catalog-base.html

@@ -155,8 +155,8 @@
 
     // Check each card against the search term
     let matchingCards = allPatternCards.filter(card => {
-      const filterValue = card.getAttribute("filter").toLowerCase();
-      return filterValue.includes(searchTerm);
+      const filterValue = card.getAttribute("filter")?.toLowerCase();
+      return filterValue?.includes(searchTerm);
     });
 
     // Hide all cards first (batch operation)

_includes/custom-modal.html

@@ -0,0 +1,195 @@
+<div class="card link" onclick="openCustomModal('{{ include.type }}')">
+  <div class="card-inner">
+    <div class="front">
+      <h4 class="pattern-name">Publish Your Own {{ include.type }}</h4>
+      <div class="pattern-image-container">
+        <img
+          class="pattern-image"
+          style="width: 40%;"
+          src="{{site.baseurl}}/assets/images/plus.svg"
+          alt="Publish Your Own {{ include.type }}"
+          loading="lazy"
+        />
+      </div>
+    </div>
+    <div class="back"></div>
+  </div>
+</div>
+
+<div id="customModal-{{ include.type }}" class="modal custom-modal">
+  <div class="custom-modal-content">
+    <span class="close-modal" onclick="closeCustomModal('{{ include.type }}')">&times;</span>
+    <div>
+      <h2>Publish Your Own {{ include.type }}</h2>
+      {% if include.type == "Model" %}
+           <div class="custom-modal-body">
+        <p>
+          Using
+          <a href="https://playground.meshery.io/settings?settingsCategory=Registry&tab=Models" target="_blank">Meshery's Registry</a>, 
+          you can create and import models to define the infrastructure components 
+          and their relationships in your cloud-native environments.
+        </p>
+
+        <p>
+          Meshery offers two primary ways to bring models into your system: Create and Import.
+        </p>
+
+        <dl>
+          <dt>Create:</dt>
+          <dd>
+            The recommended approach if you're starting fresh — it guides you through building a model 
+            step by step using an intuitive UI wizard.
+            <a href="https://docs.meshery.io/guides/configuration-management/creating-models#create-models">Learn more about creating models</a>
+          </dd>
+
+          <dt>Import:</dt>
+          <dd>
+            Ideal when you already have a model definition file (e.g., JSON, CSV) and 
+            simply want to bring it into Meshery.
+          </dd>
+          <dt>Publish your model to catalog:</dt>
+          <dd>
+ <ul>
+    <li>Fork the <code>meshery/meshery.io</code> repository.</li>
+    <li>Create a new branch in your fork of the <code>meshery/meshery.io</code> repository.</li>
+    <li>
+      Add your model definition (see 
+      <a href="https://github.com/meshery/meshery.io/blob/master/collections/_custom-models/_custom-model-definition-template.md" target="_blank">template</a> 
+      for reference) to the <code>collections/_custom-models</code> directory.
+    </li>
+    <li>Add your model oci artifact file to the <code>assets/modelfiles</code> directory.</li>
+    <li>Create a pull request to the <code>meshery/meshery.io</code> repository.</li>
+    <li>Once your pull request is merged, your model will be available in the next Meshery release.</li>
+  </ul>
+          </dd>
+        </dl>
+
+        <div style="text-align: center; margin-top: 2rem;">
+          <a href="https://docs.meshery.io/guides/configuration-management/creating-models#create-models" class="create-button">
+            View Complete Tutorial
+          </a>
+        </div>
+      </div>
+      {% endif %}
+    </div>
+  </div>
+</div>
+
+<script>
+  function openCustomModal(type) {
+    document.getElementById(`customModal-${type}`).style.display = "block";
+    document.body.classList.add("modal-open");
+  }
+
+  function closeCustomModal(type) {
+    document.getElementById(`customModal-${type}`).style.display = "none";
+    document.body.classList.remove("modal-open");
+  }
+
+  window.onclick = function(event) {
+    const modals = document.getElementsByClassName('modal');
+    for (let i = 0; i < modals.length; i++) {
+      if (event.target === modals[i]) {
+        modals[i].style.display = "none";
+        document.body.classList.remove("modal-open");
+      }
+    }
+  }
+</script>
+
+<style>
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.7);
+    animation: fadeIn 0.3s;
+  }
+
+  .custom-modal-content {
+    background-color: #1e1e1e;
+    margin: 10% auto;
+    padding: 2rem;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 700px;
+    box-shadow: 0 0 25px rgba(0,211,169,0.3);
+    border: 1px solid rgba(0,211,169,0.2);
+    position: relative;
+    animation: slideIn 0.4s;
+  }
+
+  .close-modal {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.2s;
+  }
+
+  .close-modal:hover {
+    color: #00d3a9;
+  }
+
+  .custom-modal-body {
+    margin-top: 1.5rem;
+    color: #f0f0f0;
+  }
+
+
+  .custom-modal-body dt {
+    color: #00d3a9;
+    font-weight: bold;
+    margin-top: 1rem;
+  }
+
+  .custom-modal-body dd {
+    margin-left: 0;
+    margin-bottom: 1rem;
+  }
+
+  .create-button {
+    background-color: #00d3a9;
+    color: #1a1a1a;
+    border: none;
+    padding: 0.75rem 2rem;
+    border-radius: 4px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.2s;
+    text-decoration: none;
+    display: inline-block;
+  }
+
+  .create-button:hover {
+    background-color: #00b890;
+  }
+
+  body.modal-open {
+    overflow: hidden;
+  }
+
+  @keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  @keyframes slideIn {
+    from { transform: translateY(-50px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+  }
+
+  @media (max-width: 768px) {
+    .custom-modal-content {
+      width: 90%;
+      padding: 1rem;
+      margin: 20% auto;
+    }
+  }
+</style>

_includes/partials/catalog-feature.html

@@ -208,7 +208,7 @@ <h3 class="catalog-subheading">Harness Well-Architected Kubernetes Patterns</h3>
 </p>
 
 {% include catalog-help-modal.html %} {% assign filters = site.filters %} {%
-assign models = site.models %} {% assign designs = site.catalog %} {% assign
+assign models = site.models | concat: site.custom-models %} {% assign designs = site.catalog %} {% assign
 total_filters = filters | size %} {% assign total_designs = designs | size %} {%
 assign total_models = models | size %}
 

collections/_custom-models/_custom-model-definition-template.md

@@ -0,0 +1,57 @@
+---
+layout: single-page-model
+item-type: model
+name: # TODO: Provide the unique name for this model
+subtitle: # TODO: Provide a brief subtitle for this model
+colorIcon: /assets/images/custom-integration/[YOUR-MODEL-NAME]/icons/color/[YOUR-MODEL-NAME]-color.svg # TODO: Replace with actual path
+whiteIcon: /assets/images/custom-integration/[YOUR-MODEL-NAME]/icons/white/[YOUR-MODEL-NAME]-white.svg # TODO: Replace with actual path
+docURL: https://docs.meshery.io/extensibility/integrations/[your-model-name] # TODO: Replace with actual documentation URL
+description: 
+category: # e.g. Provisioning. TODO: Specify category for this model
+subcategory: # e.g. Security & Compliance. TODO: Specify subcategory for this model
+registrant: # TODO: Specify the registrant (e.g., Artifact Hub, Community, Meshery Catalog, etc.)
+components: 
+- name: apisix-route
+  colorIcon: assets/images/integration/apisix/components/apisix-route/icons/color/apisix-route-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-route/icons/white/apisix-route-white.svg
+  description: 
+- name: apisix-cluster-config
+  colorIcon: assets/images/integration/apisix/components/apisix-cluster-config/icons/color/apisix-cluster-config-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-cluster-config/icons/white/apisix-cluster-config-white.svg
+  description: 
+- name: apisix-consumer
+  colorIcon: assets/images/integration/apisix/components/apisix-consumer/icons/color/apisix-consumer-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-consumer/icons/white/apisix-consumer-white.svg
+  description: 
+- name: apisix-global-rule
+  colorIcon: assets/images/integration/apisix/components/apisix-global-rule/icons/color/apisix-global-rule-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-global-rule/icons/white/apisix-global-rule-white.svg
+  description: 
+- name: apisix-plugin-config
+  colorIcon: assets/images/integration/apisix/components/apisix-plugin-config/icons/color/apisix-plugin-config-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-plugin-config/icons/white/apisix-plugin-config-white.svg
+  description: 
+- name: apisix-tls
+  colorIcon: assets/images/integration/apisix/components/apisix-tls/icons/color/apisix-tls-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-tls/icons/white/apisix-tls-white.svg
+  description: 
+- name: apisix-upstream
+  colorIcon: assets/images/integration/apisix/components/apisix-upstream/icons/color/apisix-upstream-color.svg
+  whiteIcon: assets/images/integration/apisix/components/apisix-upstream/icons/white/apisix-upstream-white.svg
+  description: 
+componentsCount: # 7
+
+relationships: 
+# relationshipsCount: 0 # TODO: Manually update this count if required by the layout, or remove if calculated dynamically.
+featureList: [
+# example list of features 
+
+  "Dynamic routing and load balancing",
+  "Authentication and authorization",
+  "Observability and analytics"
+]
+howItWorks: # "Integrates APISIX configurations"
+
+howItWorksDetails: # "Streamlined API gateway management and enhanced traffic routing in Kubernetes"
+
+---

collections/_pages/models.html

@@ -5,7 +5,7 @@
 permalink: /catalog/models
 ---
 
-{% assign models = site.models %}
+{% assign models = site.models | concat: site.custom-models %}
 <script>
     var models = {{ models | jsonify }};
 </script>
@@ -18,6 +18,10 @@ <h2 class="not-found" style="display: none;margin-top: 10rem;" id="not-found">
             No results match your filters. Try adjusting your selections or clearing some filters.
         </h2>
         <div class="row">
+                <div class="column column-lg custom-design-card models" style="display: block" patterntype="models"
+                    type="custom">
+                    {% include custom-modal.html type="Model"%}
+                </div>
             {% assign count = 0 %} {% for pattern in models %} {% if count < 6 %} {% assign should_display='block' %} {%
                 else %} {% assign should_display='none' %} {% endif %} <div class="column column-lg patternCard models"
                 filter="{{ pattern.name }}" type="{{ pattern.category }}" patternType="models" technology=""