Merge pull request #89 from zachlasiuk/main

Search/filtering tests, and display fixes.

assets/css/ads-radio-button.css

@@ -0,0 +1,61 @@
+
+/* inspiration from here:   https://stackoverflow.com/questions/4253920/how-do-i-change-the-color-of-radio-buttons   */
+.ads-radio-style {
+    display: inline-block;
+    position: relative;
+    padding: 0;
+    margin: 10px 0 0;
+    white-space: nowrap;
+  }
+
+  .ads-radio-style input[type='radio'] {
+    display: none;
+  }
+
+  .ads-radio-style label {
+    color: var(--ads-checkbox-label-color);
+    font-weight: normal;
+  }
+
+  .ads-radio-style label:before {
+    vertical-align: top; 
+    content: " ";
+    display: inline-block;
+    position: relative;
+    top: 5px;
+    margin: 0 8px 0 0;
+    width: 16px;
+    height: 16px;
+    border-radius: 11px;
+    border: 1px solid var(--ads-checkbox-border-color);
+    background-color: var(--ads-checkbox-background-color);
+  }
+
+  .ads-radio-style input[type=radio]:hover + label:after {
+    border-radius: 11px;
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    top: 9px;
+    left: 4px;
+    content: " ";
+    display: block;
+    background: var(--ads-checkbox-cross-color-hover);  /* depends on theme */
+  }
+
+
+  .ads-radio-style input[type=radio]:checked + label:before {
+    border-color:var(--ads-checkbox-border-color-checked);
+  }
+
+  .ads-radio-style input[type=radio]:checked + label:after {
+    border-radius: 11px;
+    width: 8px;
+    height: 8px;
+    position: absolute;
+    top: 9px;
+    left: 4px;
+    content: " ";
+    display: block;
+    background: var(--ads-checkbox-cross-color-checked);
+  }

assets/css/list-pages.css

@@ -79,21 +79,22 @@ html[theme="dark"] .sorting-criteria.active {
     border-bottom: 2.2px solid hsla(0,0%,100%,.9);
 }
 
+
+
 .filter-facet {
-    --ads-tag-background-color: #fff;
-    --ads-tag-background-color-hover: #f7f7f7;
-    --ads-tag-border-color: 1px solid #5d6c7a;
-    --ads-tag-border-color-hover: 1px solid #11809f;
-    --ads-tag-color: #5d6c7a;
-    --ads-tag-color-hover: #11809f;
-}
-html[theme="dark"] .filter-facet {
-    --ads-tag-background-color: #1F2023;
-    --ads-tag-background-color-hover: #1a1a1a;
-    --ads-tag-border-color: 1px solid #e5eceb;
-    --ads-tag-border-color-hover: 1px solid #00c1de;
-    --ads-tag-color: #fff;
-    --ads-tag-color-hover: #11809f;
+    --ads-tag-background-color:         var(--arm-color-footing);
+    --ads-tag-background-color-hover:   var(--arm-color-footing);
+    --ads-tag-border-color:             var(--arm-dark-grey);
+    --ads-tag-border-color-hover:       var(--arm-dark-grey);
+    --ads-tag-color:                    var(--white);
+    --ads-tag-color-hover:              var(--white);
+}
+
+.filter-facet.not-all {
+    --ads-tag-background-color:         var(--arm-black);
+    --ads-tag-background-color-hover:   var(--arm-black);
+    --ads-tag-border-color:             var(--arm-green);
+    --ads-tag-border-color-hover:       var(--arm-green);
 }
 
 

build_steps/update_active_categories.py

@@ -1,33 +1,54 @@
 import os, yaml
+from pathlib import Path
+
+
+# Get the absolute path to this python file's directory
+script_dir = Path(__file__).parent.absolute()
+
+# Relative path to content from script, then tet absolute path to content by combining, and use Resolve to handle backwards".."
+opensource_relative_path = Path('../content/opensource_packages')
+opensource_absolute_path = (script_dir / opensource_relative_path).resolve()
+
+commercial_relative_path = Path('../content/commercial_packages')
+commercial_absolute_path = (script_dir / commercial_relative_path).resolve()
+
+# Same process for the YAML data file:
+yaml_relative_path = Path('../data/all_categories.yml')
+yaml_absolute_path = (script_dir / yaml_relative_path).resolve()
+
+
+
+print('Updating active categories...')
 
 # LOAD ALL CATS
 all_cats = ''
-with open('data/all_categories.yml', 'r') as all_cat_file:
+with open(yaml_absolute_path, 'r') as all_cat_file:
     all_cats = yaml.safe_load(all_cat_file)
 
+
 # CREATE NEW ACTIVE_CATS LIST
-content_dir = 'content/sw_database'
+content_directories = [opensource_absolute_path, commercial_absolute_path]
+
 active_cats = []
-for content_file in os.listdir(content_dir):
-    if (content_file != ('_index.md')) and content_file.endswith('.md'):
-        # OBTAIN CATEGORY FROM FILE
-        cat = None
-        with open(os.path.join(content_dir, content_file), 'r') as f:
-            for line in f:
-                if 'category:' in line:
-                    print(line.replace('category:','').strip())
-                    cat = line.replace('category:','').strip()
-                    break
-
-            #content_all = f.read()
-            #start = content_all.find('---')
-            #end = content_all.find('---', start + 3)
-            #content_metadata = content_all[start+3:end].strip()
-            #cat = yaml.safe_load(content_metadata).get('category')
-        # ADD TO ACTIVE_CATS LIST IF NOT ALREADY PRESENT
-        if cat in all_cats:
-            if cat not in active_cats:
-                active_cats.append(cat)
+for content_directory in content_directories:
+    for content_file in os.listdir(content_directory):
+        if (content_file != ('_index.md')) and content_file.endswith('.md'):
+            # OBTAIN CATEGORY FROM FILE
+            cat = None
+            with open(os.path.join(content_directory, content_file), 'r') as f:
+                for line in f:
+                    if 'category:' in line:
+                        cat = line.replace('category:','').strip()
+                        break
+            # ADD TO ACTIVE_CATS LIST IF NOT ALREADY PRESENT
+            if cat in all_cats:
+                if cat not in active_cats:
+                    active_cats.append(cat)
+
+# Order list alphabetically
+active_cats = sorted(active_cats)     
+for cat in active_cats:
+    print('   '+cat)
 
 # SAVE ACTIVE_CATS LIST
 with open('data/active_categories.yml', 'w') as active_cats_file:

data/active_categories.yml

@@ -1,22 +1,22 @@
+- AI/ML
 - CI/CD
+- Compilers/Tools
+- Compression
+- Containers and Orchestration
+- Content mgmt platforms
+- Crypto
 - Data-format
+- Databases - Big-data
 - Databases - noSQL
-- Storage
-- Containers and Orchestration
-- Runtimes
-- Networking
-- Compilers/Tools
-- Monitoring/Observability
+- Distros
+- E-commerce platforms
+- Languages and Frameworks
 - Messaging/Comms
-- Databases - Big-data
+- Monitoring/Observability
+- Networking
+- Operating System
+- Runtimes
 - Service Mesh
+- Storage
 - Video
-- E-commerce platforms
-- Crypto
 - Web Server
-- Languages and Frameworks
-- AI/ML
-- Distros
-- Compression
-- Operating System
-- Content mgmt platforms

data/categories.yml

@@ -0,0 +1,73 @@
+category_list:
+  - group: OS & Languages
+    categories:
+      - name: Operating System
+        description: Operating systems including linux kernel and tools.
+      - name: Compilers/Tools
+        description: Compilers and other build tools that help generate and optimize machine readable binary code from various high-level programming languages.
+      - name: Runtimes
+        description: Frameworks for development and execution of high-level application bytecode into machine-specific code at runtime such as Java or .Net.
+      - name: Languages and Frameworks
+        description: Programming languages and frameworks for building software applications.
+  - group: Web
+    categories:
+      - name: Web Server
+        description: Software that processes and delivers HTTP based requests for web content.
+      - name: E-commerce platforms
+        description: Platforms for building and managing online stores and transactions.
+      - name: Content mgmt platforms
+        description: Software that manages, collects, retrieves and delivers different types of content on the web.
+  - group: Database
+    categories:
+      - name: Database
+        description: Structured, un-structured or hybrid organized collection of data.
+      - name: Databases - noSQL
+        description: Non-relational databases designed for scalability and flexibility in handling unstructured data.
+      - name: Databases - Big-data
+        description: Database systems optimized for storing and processing large volumes of data across distributed environments.
+      - name: Data-format
+        description: Formats for structuring and encoding data for storage, transmission, or processing.
+      - name: Compression
+        description: Algorithms and techniques for reducing the size of data for storage or transmission.
+  - group: Cloud-native
+    categories:
+      - name: Containers and Orchestration
+        description: Containers package the source code of an application and its dependencies in a single unit. Container Orchestration tools automate the management and deployment of containerized applications.
+      - name: Messaging/Comms
+        description: Systems for exchanging messages or facilitating communication between distributed applications.
+      - name: Monitoring/Observability
+        description: Tools and practices for tracking and understanding the behavior and performance of software systems.
+      - name: Service Mesh
+        description: Service Mesh manages and secures communication between services in distributed computing environments.
+      - name: DevOps
+        description: Tools that help automate software development process.
+  - group: Storage
+    categories:
+      - name: Storage
+        description: Systems for storing and managing data, ranging from traditional disk storage to distributed file systems.
+  - group: Networking
+    categories:
+      - name: Networking
+        description: Communication of data across different types of network media - both wired and wireless.
+  - group: Media
+    categories:
+      - name: Video
+        description: Software for encoding, decoding and translating video from one format to another.
+      - name: Gaming
+        description: Software for running and streaming video games and other device applications on the cloud.
+  - group: AI/ML/HPC
+    categories:
+      - name: AI/ML
+        description: Technologies and algorithms for creating systems that can learn from data and make predictions or decisions.
+      - name: HPC
+        description: Software to solve advance computational problems using large clusters of systems.
+  - group: Security
+    categories:
+      - name: Crypto
+        description: Software for cryptographic operations on data including encryption, decryption, authentication etc.
+      - name: Security applications
+        description: Practices, tools, and protocols for protecting systems, networks, and data from unauthorized access or attacks.
+  - group: Miscellaneous
+    categories:
+      - name: Miscellaneous
+        description: Packages that do not fit in any other categories.

themes/arm-design-system-hugo-theme/layouts/index.html

@@ -27,7 +27,17 @@
 {{ $recent_packages := $.Site.Data.recently_added_packages }}
 
 <!-- Get all Filter categories from data file -->
+{{ $filter_category_dict := .Site.Data.categories }}
+
+{{/*   REMOVE WHEN NOT NEEDED */}}
 {{ $filter_categories := .Site.Data.active_categories }}
+{{ $all := slice "All" }}
+{{ $filter_categories := $all | append $filter_categories }}
+
+
+
+<!-- Define opensource vs commercial filter -->
+{{ $filter_licenses := slice "All" "Open source" "Commercial" }}
 
 {{/*******************************************************
 *******************************************************/}}
@@ -54,7 +64,17 @@
     <div class="c-row md:is-collapsed u-gap-1-1/2 u-flex-nowrap u-padding-top-2 u-padding-bottom-2-1/2">
         <!-- Filter bar on left -->
         <div class="c-col u-hide lg:u-display-block u-flex-shrink-0 filter-column-div">
-            {{ partial "eco-dashboard/filter-box.html" (dict "context" . "categories" $filter_categories)}}
+            <div id="filter-container-div">
+                {{/* MULTI CATEGORY STRUCTURE */}}
+                {{ partial "eco-dashboard/filter-dropdown-multilevel.html" (dict "context" . "title" "Category" "items" $filter_category_dict)}}
+
+                {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "License" "items" $filter_licenses)}}
+                {{/* {{ partial "eco-dashboard/filter-box.html" (dict "context" . "title" "Category" "items" $filter_categories)}}  */}}
+
+                {{/* SINGLE CATEGORY STRUCTURE 
+                {{ partial "eco-dashboard/filter-dropdown.html" (dict "context" . "title" "Category" "items" $filter_categories)}} */}}
+
+            </div>
         </div>
 
         <!-- Search & Results on Right -->
@@ -81,7 +101,10 @@ <h2 id="recently-added-note" class="minhang-mist-text">Most recently added packa
 
                 <div class="c-row">
                     <div class="c-col">
-                        <p style="text-align:center; padding-top: 32px; font-size: 1.25rem!important;">XYZ more packages. Explore by:<p>
+                        <p style="text-align:center; padding-top: 32px; font-size: 1.25rem!important;">
+                            {{sub (len $packages_alphabetical_order) (len $recent_packages) }} 
+                            more packages. Explore by:
+                        <p>
                         <div class="u-display-grid u-gap-1 sm:u-grid-columns-1 md:u-grid-columns-3 u-margin-top-1">
                             <ads-button id="filter-cta" level="primary">Filter by Category</ads-button>
                             <ads-button id="search-cta" level="primary">Search by Name</ads-button>
@@ -118,7 +141,7 @@ <h2 id="recently-added-note" class="minhang-mist-text">Most recently added packa
             console.log('OPEN MODAL, MOBILE');
         }
         else {
-            var category_element = document.getElementsByClassName('filter-column-div')[0];
+            var category_element = document.getElementById('filter-container-div');
 
             // force focus to top of element via smoth scroll (100px to account for sticky global nav)
             var rect = category_element.getBoundingClientRect(); // position relative to current viewport

themes/arm-design-system-hugo-theme/layouts/partials/eco-dashboard/active-filter-and-sort-bar.html

@@ -13,12 +13,26 @@
 
 <div id="current-tag-bar">
     <span>
-        <span id="tag-preface">Filters: </span>
+        <span id="tag-preface">Active Filters: </span>
     </span>
+        <!-- If always present -->
+        <ads-tag id="filter-tag-all" class="filter-facet group-license u-margin-left-1/2 u-margin-top-1/2 u-margin-bottom-1/2">
+            <span class="u-flex u-flex-row u-align-items-center u-gap-1/2">
+                <div id="filter-facet-display-name-group-license" class="filter-facet-display-name">License: All</div>
+            </span>
+        </ads-tag>
+        <ads-tag id="filter-tag-all" class="filter-facet group-category u-margin-left-1/2 u-margin-top-1/2 u-margin-bottom-1/2">
+            <span class="u-flex u-flex-row u-align-items-center u-gap-1/2">
+                <div id="filter-facet-display-name-group-category" class="filter-facet-display-name">Category: All</div>
+            </span>
+        </ads-tag>
+
     <!-- This area is filled dynamically by javascript & checkboxes -->
+    {{/* Not needed for radio behavior 
     <span  id="tag-clear-btn" hidden onclick="clearAllFilters()">
         Clear Filters
     </span>
+    */}}
 </div>
 
 <!-- Current results & sorting bar -->