Patterns browser v2

content/patterns/ansible-edge-gitops-kasten/_index.md

@@ -1,5 +1,6 @@
 ---
 title: OpenShift Virtualization Data Protection with Veeam Kasten
+date: 2024-11-06
 tier: sandbox
 summary: This pattern uses OpenShift Virtualization to simulate an edge environment for VMs, protected by Veeam Kasten.
 rh_products:

content/patterns/cockroachdb/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Cockroach
+date: 2022-12-14
 tier: sandbox
 Summary: A multicloud pattern using cockroachdb and submariner, deployed via RHACM.
 rh_products:

content/patterns/coco-pattern/_index.adoc

@@ -31,7 +31,7 @@ A core goal of confidential computing is to use this technology to isolate the w
 image::coco-pattern/isolation.png[Schematic describing the isolation of confidential contains from the hosting system]
 
 
-This pattern uses https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.7/html/user_guide/deploying-on-azure#deploying-cc_azure-cc[Red Hat OpenShift sandbox containers] to deploy and configure confidential containers on Microsoft Azure. 
+This pattern uses https://docs.redhat.com/en/documentation/openshift_sandboxed_containers/1.7/html/user_guide/deploying-on-azure#deploying-cc_azure-cc[Red Hat OpenShift sandbox containers] to deploy and configure confidential containers on Microsoft Azure.
 
 It deploys three copies of 'Hello OpenShift' to demonstrate some of the security boundaries that enforced with confidential containers.
 
@@ -46,7 +46,7 @@ It deploys three copies of 'Hello OpenShift' to demonstrate some of the security
 **This pattern is a demonstration only and contains configuration that is not best practice**
 
 - The default configuration deploys everything in a single cluster for testing purposes. The https://www.ietf.org/archive/id/draft-ietf-rats-architecture-22.html[RATS] architecture mandates that the Key Broker Service (e.g. https://github.com/confidential-containers/trustee[Trustee]) is in a trusted security zone.
-- The https://github.com/confidential-containers/trustee/tree/main/attestation-service[Attestation Service] has wide open security policies. 
+- The https://github.com/confidential-containers/trustee/tree/main/attestation-service[Attestation Service] has wide open security policies.
 
 == Future work
 

content/patterns/connected-vehicle-architecture/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Connected Vehicle Architecture
+date: 2022-12-14
 tier: sandbox
 Summary: A distributed cloud-native application that implements key aspects of a modern IoT architecture.
 rh_products:

content/patterns/kong-gateway/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Kong
+date: 2022-12-14
 tier: sandbox
 Summary: A pattern for Kong Gateway Control Plane and Data Plane demo.
 rh_products:

content/patterns/multicloud-gitops-Portworx/_index.md

@@ -1,6 +1,6 @@
 ---
 title: Multicloud GitOps with Portworx Enterprise
-date: 2023-18-05
+date: 2023-05-18
 tier: sandbox
 summary: This pattern helps you develop and deploy applications on an open hybrid cloud in a stable, simple, and secure way. It includes persistent storage for stateful applications.
 rh_products:

layouts/partials/menu-patterns-browser.html

@@ -20,19 +20,7 @@ <h2 class="accordion-header" id="typeHeading">
           <div class="pf-c-accordion__expanded-content-body">
             <a href="/learn/about-pattern-tiers-types/">What do these tiers mean?</a>
             <div class="pf-c-select__menu-group">
-              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-patterntype">
-                <label class="pf-c-check pf-c-select__menu-item" for="type:maintained">
-                  <input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:maintained" name="maintained"/>
-                  <span class="pf-c-check__label">Maintained</span>
-                </label>
-                <label class="pf-c-check pf-c-select__menu-item" for="type:tested">
-                  <input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:tested" name="tested"/>
-                  <span class="pf-c-check__label">Tested</span>
-                </label>
-                <label class="pf-c-check pf-c-select__menu-item" for="type:sandbox">
-                  <input class="pf-c-check__input" type="checkbox" onclick="filterSelection(this.id)" id="type:sandbox" name="sandbox"/>
-                  <span class="pf-c-check__label">Sandbox</span>
-                </label>
+              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-patterntype" id="TiersItems">
               </fieldset>
           </div>
           </div>
@@ -56,13 +44,7 @@ <h2 class="accordion-header" id="industriesHeading">
         <div id="collapseIndustries" class="pf-c-accordion__expanded-content collapse" aria-labelledby="industriesHeading" data-bs-parent="#patternsAccordionNav">
           <div class="pf-c-accordion__expanded-content-body">
             <div class="pf-c-select__menu-group">
-              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-industry">
-                {{ range $name, $taxonomy := .Site.Taxonomies.industries }}
-                <label class="pf-c-check pf-c-select__menu-item" for="industries:{{- $name | urlize -}}">
-                  <input class="pf-c-check__input" type="checkbox" id="industries:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{- $name | humanize | title  -}}"/>
-                  <span class="pf-c-check__label">{{- $name | humanize | title  -}}</span>
-                </label>
-                {{ end }}
+              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-industry" id="IndustriesItems">
               </fieldset>
             </div>
           </div>
@@ -86,13 +68,7 @@ <h2 class="accordion-header" id="rhProductHeading">
         <div id="collapseRhProducts" class="pf-c-accordion__expanded-content collapse" aria-labelledby="productHeading" data-bs-parent="#patternsAccordionNav">
           <div class="pf-c-accordion__expanded-content-body">
             <div class="pf-c-select__menu-group">
-              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-rh-products">
-                {{ range $name, $taxonomy := .Site.Taxonomies.rh_products }}
-                <label class="pf-c-check pf-c-select__menu-item" for="rh_products:{{- $name | urlize -}}">
-                  <input class="pf-c-check__input" type="checkbox" id="rh_products:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{ $taxonomy.Page.Title }}"/>
-                  <span class="pf-c-check__label wrappable">{{ $taxonomy.Page.Title }}</span>
-                </label>
-                {{ end }}
+              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-rh-products" id="RhProductsItems">
               </fieldset>
             </div>
           </div>
@@ -116,13 +92,7 @@ <h2 class="accordion-header" id="otherProductHeading">
         <div id="collapseOtherProducts" class="pf-c-accordion__expanded-content collapse" aria-labelledby="otherProductHeading" data-bs-parent="#patternsAccordionNav">
           <div class="pf-c-accordion__expanded-content-body">
             <div class="pf-c-select__menu-group">
-              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-RHproducts">
-                {{ range $name, $taxonomy := .Site.Taxonomies.other_products }}
-                <label class="pf-c-check pf-c-select__menu-item" for="other_products:{{- $name | urlize -}}">
-                  <input class="pf-c-check__input" type="checkbox" id="other_products:{{- $name | urlize -}}" onclick="filterSelection(this.id)" name="{{ $taxonomy.Page.Title }}"/>
-                  <span class="pf-c-check__label wrappable">{{ $taxonomy.Page.Title }}</span>
-                </label>
-                {{ end }}
+              <fieldset class="pf-c-select__menu-fieldset" aria-labelledby="select-checkbox-expanded-selected-group-otherproducts" id="OtherProductsItems">
               </fieldset>
             </div>
           </div>

layouts/partials/patterns-browser.html

@@ -25,45 +25,35 @@ <h1 class="pf-c-title pf-m-4xl">
       {{ $patterns := where $.Pages "Section" "patterns"}}
       <div class="pf-l-stack pf-m-gutter">
         <div class="pf-l-stack__item pf-u-text-align-right pattern-count-style">
-          <span id="pattern-count">{{- len $patterns -}}</span> of {{ len $patterns }}  patterns displayed
+          <label class="pf-c-form__label" for="form-vertical-name">
+            <span class="pf-c-form__label-text">Sort:</span>
+          </label>
+          <select
+            class
+            id="select-pattern-sort"
+            name="select-pattern-sort"
+            aria-label="Selector for pattern sort"
+            onchange="filterSelection()"
+          >
+            <option value="atoz" selected>A to Z</option>
+            <option value="ztoa">Z to A</option>
+            <option value="newest">Newest</option>
+            <option value="oldest">Oldest</option>
+          </select>
+        </div>
+        <div class="pf-l-stack__item pf-u-text-align-right pattern-count-style" id="pattern-counter">
+        </div>
+        <div class="pf-l-stack__item" id="patternLoaderSpinner">
         </div>
         <div class="pf-l-stack__item">
-          <div class="pf-l-gallery pf-m-gutter" style="--pf-l-gallery--GridTemplateColumns--min: 300px;">
-            {{ range $pattern :=  $patterns.ByTitle }}
-              {{ $data := newScratch }}
-              {{ $data.Set "tags" slice }}
-              {{ $params := .Params }}
-              {{ range $taxonomyname, $taxonomy := .Site.Taxonomies }}
-
-                {{ if isset $params $taxonomyname }}
-                  {{ range $term := $pattern.Param $taxonomyname }}
-                    {{ $taglist := $data.Get "tags" }}
-                    {{ $taglist := $taglist | append (string (printf "%s:%s" $taxonomyname ($term | urlize) | printf "%s" )) }}
-                    {{ $data.Set "tags" $taglist }}
-                  {{ end }}
-
-                {{ end }}
-              {{ end }}
-              {{ $taglist := $data.Get "tags" }}
-              {{ $validated := .Param "tier" }}
-              {{ if (eq $validated "maintained" ) }}
-                {{ .Scratch.Set "patterntype" "type:maintained" }}
-              {{ else if (eq $validated "tested" ) }}
-                {{ .Scratch.Set "patterntype" "type:tested" }}
-              {{ else }}
-                  {{ .Scratch.Set "patterntype" "type:sandbox" }}
-              {{ end }}
-              {{ $patterntype := .Scratch.Get "patterntype"  }}
-              <div class="pf-l-gallery__item filterDiv" tag-data="{{ delimit $taglist " " }} {{ $patterntype }}" style="display: grid;">
-                {{ .Render "summary-with-image" }}
-              </div>
-            {{ end }}
+          <div class="pf-l-gallery pf-m-gutter" style="--pf-l-gallery--GridTemplateColumns--min: 300px;" id="patternCards">
           </div>
         </div>
       </div>
     </div>
     </div>
-    <script src="{{ "js/filter.js" | relURL }}"></script>
+    <div id="debug"></div>
+    <script src="{{ "js/patterns-browser-v2.js" | relURL }}"></script>
   </section>
   {{ partial "footer.html" . }}
 </main>

layouts/patterns/list.json.json

@@ -1,9 +1,48 @@
 {{- if (eq .RelPermalink "/patterns/") }}
+
+  {{/* Patterns */}}
   {{- $patterns := where $.Pages "Section" "patterns"}}
-  {{- $patterns_len := $patterns | len }}
-    {{- $pattern_list := slice }}
-    {{- range $index, $pattern :=  $patterns.ByTitle }}
-      {{- $pattern_list = $pattern_list | append (dict $pattern.Title $pattern.Params) }}
-    {{- end }}
-  {{- $pattern_list | jsonify }}
+  {{- $pattern_list := slice }}
+  {{- range $index, $pattern :=  $patterns.ByTitle }}
+    {{- $object := dict "Name" $pattern.LinkTitle "Link" $pattern.RelPermalink "Params" $pattern.Params -}}
+    {{- $pattern_list = $pattern_list | append $object -}}
+  {{- end }}
+
+  {{/* Red Hat Products */}}
+  {{- $rh_products := .Site.Taxonomies.rh_products }}
+  {{- $rh_products_list := slice }}
+  {{- range $index, $rh_product :=  $rh_products.Alphabetical }}
+    {{- $rh_products_list = $rh_products_list | append (dict "Name" $rh_product.Name "LinkTitle" $rh_product.Page.LinkTitle) }}
+  {{- end }}
+  {{- $rh_products_filter_types := slice "AND" "OR" }}
+  {{- $rh_products_dict := dict "filter_list" $rh_products_list "filter_types" $rh_products_filter_types }}
+
+  {{/* Other Products */}}
+  {{- $other_products := .Site.Taxonomies.other_products }}
+  {{- $other_products_list := slice }}
+  {{- range $index, $other_product :=  $other_products.Alphabetical }}
+    {{- $other_products_list = $other_products_list | append (dict "Name" $other_product.Name "LinkTitle" $other_product.Page.LinkTitle) }}
+  {{- end }}
+  {{- $other_products_filter_types := slice "AND" "OR" }}
+  {{- $other_products_dict := dict "filter_list" $other_products_list "filter_types" $other_products_filter_types }}
+
+  {{/* Industries */}}
+  {{- $industries := .Site.Taxonomies.industries }}
+  {{- $industries_list := slice }}
+  {{- range $index, $industry :=  $industries.Alphabetical }}
+    {{- $industries_list = $industries_list | append (dict "Name" $industry.Name "LinkTitle" $industry.Page.LinkTitle) }}
+  {{- end }}
+  {{- $industries_filter_types := slice "AND" "OR" }}
+  {{- $industries_dict := dict "filter_list" $industries_list "filter_types" $industries_filter_types }}
+
+  {{/* Tiers */}}
+  {{- $tiers_list := slice -}}
+  {{- $tiers_list = $tiers_list | append (dict "Name" "maintained" "LinkTitle" "Maintained" "color" "green") }}
+  {{- $tiers_list = $tiers_list | append (dict "Name" "tested" "LinkTitle" "Tested" "color" "blue") }}
+  {{- $tiers_list = $tiers_list | append (dict "Name" "sandbox" "LinkTitle" "Sandbox" "color" "oragne") }}
+  {{- $tiers_filter_types := slice "OR" }}
+  {{- $tiers_dict := dict "filter_list" $tiers_list "filter_types" $tiers_filter_types }}
+
+  {{- $filter_categories := dict "rh_products" $rh_products_dict "other_products" $other_products_dict "industries" $industries_dict "tier" $tiers_dict -}}
+  {{- dict "patterns" $pattern_list "filter_categories" $filter_categories | jsonify }}
 {{- end }}