diff --git a/_includes/card.html b/_includes/card.html index 6c9211a0c1..453dc59217 100644 --- a/_includes/card.html +++ b/_includes/card.html @@ -8,7 +8,7 @@ </div> <h4 class="pattern-name">{{pattern.name}}</h4> <div class="pattern-image-container"> - <img class= "pattern-image" + <img class= "pattern-image pattern-snapshot" data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png" data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" diff --git a/_includes/modal.html b/_includes/modal.html index d8e1f841f6..a74e4eb8c2 100644 --- a/_includes/modal.html +++ b/_includes/modal.html @@ -16,7 +16,11 @@ <h6 class="pattern-type"> {{pattern.type | upcase }}</h6> {%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" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" /> {%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" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" /> + <img class="image-class pattern-snapshot" + data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png" + data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" + src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" + onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy" onclick="toggleFullScreenImage('{{ pattern.patternId }}')" /> {%endif%} <h4 class="related-patterns">RELATED PATTERNS</h4> {% include related-patterns.html %} diff --git a/_includes/partials/mini-card.html b/_includes/partials/mini-card.html index 6936654ef7..909dffae6c 100644 --- a/_includes/partials/mini-card.html +++ b/_includes/partials/mini-card.html @@ -7,7 +7,11 @@ <small class="modal-pattern-type"> {{pttrn.type}}</small> </div> <h5 class="modal-pattern-name">{{pttrn.name}}</h5> - <img class= "modal-pattern-image" src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pttrn.patternId}}.png" onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/> + <img class= "modal-pattern-image pattern-snapshot" + data-snapshot-light="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-light.png" + data-snapshot-dark="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" + src="https://raw.githubusercontent.com/layer5labs/meshery-extensions-packages/master/action-assets/design-assets/{{pattern.patternId}}-dark.png" + onerror="this.src='/assets/images/patterns/service-mesh.svg'" loading="lazy"/> <div> <h6 class="modal-pattern-id"> <img class="modal-smp"