Production update with Learning Path pinning

assets/css/list-pages.css

@@ -185,6 +185,13 @@ ads-card.path-card {
     --ads-card-background-color-hover: var(--arm-light-grey);
     --ads-card-box-shadow-hover: 0 3px 6px 1px rgba(0,0,0,0.16);  /* 0 1px 3px 3px rgba(0,0,0,0.25); */
 }
+
+ads-card.path-card.featured-path-card {
+    --ads-card-border-width: 0;
+    --ads-card-border-color: transparent;
+    --ads-card-border-color-hover: transparent;
+}
+
 html[theme='dark'] ads-card.path-card {
     --ads-card-background-color: var(--arm-color-base);
     --ads-card-border-color: #000000;
@@ -196,6 +203,45 @@ html[theme='dark'] ads-card.path-card {
     --ads-card-box-shadow-hover:  #000 @50%, X:0 Y: 3 B:12; /* probably not working */
 }
 
+html[theme='dark'] ads-card.path-card.featured-path-card {
+    --ads-card-border-width: 0;
+    --ads-card-border-color: transparent;
+    --ads-card-border-color-hover: transparent;
+}
+
+ads-card.path-card.featured-path-card ads-card-content::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 10px;
+    padding: 3px;
+    background: linear-gradient(135deg,
+        var(--arm-green) 0%,
+        var(--arm-green) 50%,
+        var(--arm-web-safe-blue) 50%,
+        var(--arm-web-safe-blue) 100%);
+    -webkit-mask:
+        linear-gradient(#fff 0 0) content-box,
+        linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    pointer-events: none;
+    opacity: 0.4;
+    transition: opacity 0.3s ease-in-out;
+}
+
+html[theme='dark'] ads-card.path-card.featured-path-card ads-card-content::before {
+    background: linear-gradient(135deg,
+        var(--arm-green) 0%,
+        var(--arm-green) 50%,
+        var(--arm-light-blue) 50%,
+        var(--arm-light-blue) 100%);
+}
+
+ads-card.path-card.featured-path-card:hover ads-card-content::before {
+    opacity: 1;
+}
+
 
 .basics-title:hover {
     transition: color 0.3s ease-in-out;
@@ -208,6 +254,12 @@ ads-card.path-card:hover  .learning-path-title {
     color: var(--arm-green);
 }
 
+ads-card.path-card:hover .pinned-inline-icon,
+ads-card.path-card:hover .pinned-featured-label {
+    transition: color 0.3s ease-in-out;
+    color: var(--arm-green);
+}
+
 /* adjust height depending on screen size */
 ads-card.path-card .learning-path-title-div { /* xs and sm */
     min-height: 50px;
@@ -224,6 +276,35 @@ ads-card.path-card .learning-path-title-div { /* xs and sm */
     font-size: 0.9rem!important;
 }
 
+.pinned-header-row {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    margin-bottom: 0.3rem;
+}
+
+.pinned-featured-label {
+    color: var(--arm-web-safe-blue);
+    font-weight: 400;
+    letter-spacing: normal;
+}
+
+.pinned-inline-icon {
+    color: var(--arm-web-safe-blue);
+    font-size: 0.95rem;
+    line-height: 1;
+}
+
+.pinned-inline-icon i {
+    display: inline-block;
+    transform: rotate(-45deg);
+}
+
+html[theme="dark"] .pinned-inline-icon,
+html[theme="dark"] .pinned-featured-label {
+    color: var(--arm-light-blue);
+}
+
 html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
     color: var(--arm-web-safe-blue);
 }

content/learning-paths/automotive/_index.md

@@ -7,6 +7,10 @@ key_ip:
 - Cortex-A
 - Cortex-R
 maintopic: true
+pinned_learning_paths:
+- openadkit1_container
+- learning-paths/cross-platform/simd-loops
+- openadkit2_safetyisolation
 subtitle: Build smarter, real-time vehicle software on reliable Arm platforms.
 title: Automotive
 weight: 4

content/learning-paths/embedded-and-microcontrollers/_index.md

@@ -8,6 +8,10 @@ key_ip:
 - Cortex-M
 - Ethos-U
 maintopic: true
+pinned_learning_paths:
+- vcpkg-tool-installation
+- raspberry-pi-smart-home
+- introduction-to-tinyml-on-arm
 operatingsystems_filter:
 - Android: 1
 - Baremetal: 30

content/learning-paths/laptops-and-desktops/_index.md

@@ -6,6 +6,10 @@ differentiating_info:
 key_ip:
 - Cortex-A
 maintopic: true
+pinned_learning_paths:
+- wsl2
+- dgx_spark_isaac_robotics
+- learning-paths/cross-platform/multiplying-matrices-with-sme2
 operatingsystems_filter:
 - Android: 3
 - ChromeOS: 2

content/learning-paths/mobile-graphics-and-gaming/_index.md

@@ -8,6 +8,10 @@ key_ip:
 - Immortalis
 - Mali
 maintopic: true
+pinned_learning_paths:
+- voice-assistant
+- nss-unreal
+- vulkan-ml-sample
 operatingsystems_filter:
 - Android: 40
 - Linux: 40

content/learning-paths/servers-and-cloud-computing/_index.md

@@ -6,6 +6,10 @@ differentiating_info:
 key_ip:
 - Neoverse
 maintopic: true
+pinned_learning_paths:
+- arm-mcp-server
+- learning-paths/cross-platform/vectorization-comparison
+- performix-microarchitecture
 operatingsystems_filter:
 - Android: 3
 - Linux: 223

content/subjects/ml/_index.md

@@ -0,0 +1,8 @@
+---
+title: AI
+slug: ml
+pinned_learning_paths:
+- learning-paths/cross-platform/kleidiai-explainer
+- learning-paths/servers-and-cloud-computing/vllm-acceleration
+- learning-paths/laptops-and-desktops/pytorch-finetuning-on-spark
+---

themes/arm-design-system-hugo-theme/layouts/_default/term.html

@@ -40,6 +40,50 @@
 <!-- Sort using the CalculatedDate -->
 {{ $sorted_paths_to_list := sort $blogs "calculated_date" "desc" }}
 
+<!-- Allow taxonomy term pages to pin learning paths via term front matter.
+     Hugo does not expose term bundle front matter on .Params here, so resolve it explicitly.
+     Example: content/subjects/ml/_index.md
+-->
+{{ $term_content_page := site.GetPage (printf "/%s/%s" .Data.Plural (.Data.Term | urlize)) }}
+{{ $pinned_paths := default (slice) .Params.pinned_learning_paths }}
+{{ with $term_content_page }}
+    {{ $pinned_paths = default $pinned_paths .Params.pinned_learning_paths }}
+{{ end }}
+{{ $blogs_by_path := dict }}
+{{ $blogs_by_slug := dict }}
+{{ $slug_counts := dict }}
+{{ range $sorted_paths_to_list }}
+    {{ $path_key := trim .learning_path.RelPermalink "/" }}
+    {{ $slug_key := replaceRE "^.*/" "" $path_key }}
+    {{ $blogs_by_path = merge $blogs_by_path (dict $path_key .) }}
+    {{ $blogs_by_slug = merge $blogs_by_slug (dict $slug_key .) }}
+    {{ $slug_count := default 0 (index $slug_counts $slug_key) }}
+    {{ $slug_counts = merge $slug_counts (dict $slug_key (add $slug_count 1)) }}
+{{ end }}
+{{ $pinned_lookup := dict }}
+{{ $ordered_paths_to_list := slice }}
+{{ range $pinned_paths }}
+    {{ $raw_pin := trim . "/" }}
+    {{ $path_key := "" }}
+    {{ if hasPrefix $raw_pin "learning-paths/" }}
+        {{ $path_key = $raw_pin }}
+    {{ else if eq (default 0 (index $slug_counts $raw_pin)) 1 }}
+        {{ with index $blogs_by_slug $raw_pin }}
+            {{ $path_key = trim .learning_path.RelPermalink "/" }}
+        {{ end }}
+    {{ end }}
+    {{ with and $path_key (index $blogs_by_path $path_key) }}
+        {{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
+        {{ $pinned_lookup = merge $pinned_lookup (dict $path_key true) }}
+    {{ end }}
+{{ end }}
+{{ range $sorted_paths_to_list }}
+    {{ $path_key := trim .learning_path.RelPermalink "/" }}
+    {{ if not (index $pinned_lookup $path_key) }}
+        {{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
+    {{ end }}
+{{ end }}
+
 
 
 <!--  Hugo crawl over learning path directories and display the main categories -->
@@ -83,9 +127,11 @@ <h3 class="u-margin-top-0">Filter</h3>
 
             <div class="c-col c-col-12">
                 <div id='path-container' class="u-display-grid u-gap-1 sm:u-grid-columns-1 md:u-grid-columns-2 xl:u-grid-columns-2 xxl:u-grid-columns-3 u-margin-top-1">
-                    {{ range $sorted_paths_to_list }}
+                    {{ range $ordered_paths_to_list }}
+                        {{ $path_key := trim .learning_path.RelPermalink "/" }}
+                        {{ $is_pinned := index $pinned_lookup $path_key }}
                         <!-- This div assigns a category tag for each LP for filtering (cross platform need to iterate over the shared_between var) -->
-                        <div class='path-div search-div
+                        <div class='path-div search-div gradient-box
                                     {{if eq .learning_path.Parent.Title "Cross Platform"}}
                                         {{ with .learning_path.Params.shared_between }}
                                             {{ range .}}
@@ -96,7 +142,7 @@ <h3 class="u-margin-top-0">Filter</h3>
                                         tag-{{.learning_path.Parent.Title | urlize}}
                                     {{end}}'>  
                             <!-- Path card formatting -->
-                            {{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date) }}    
+                            {{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date "is_pinned" $is_pinned) }}    
                         </div>           
                     {{ end }}
                 </div>
@@ -105,4 +151,4 @@ <h3 class="u-margin-top-0">Filter</h3>
     </div>
 </div>
 
-{{ end }}
+{{ end }}

themes/arm-design-system-hugo-theme/layouts/learning-paths/list.html

@@ -48,6 +48,38 @@
 <!-- Sort using the CalculatedDate -->
 {{ $sorted_paths_to_list := sort $blogs "calculated_date" "desc" }}
 
+<!-- Allow category-level pinning via front matter:
+     pinned_learning_paths:
+       - /learning-paths/<category>/<path-slug>/
+-->
+{{ $pinned_paths := default (slice) .Params.pinned_learning_paths }}
+{{ $blogs_by_path := dict }}
+{{ range $sorted_paths_to_list }}
+    {{ $path_key := trim .learning_path.RelPermalink "/" }}
+    {{ $blogs_by_path = merge $blogs_by_path (dict $path_key .) }}
+{{ end }}
+{{ $pinned_lookup := dict }}
+{{ $ordered_paths_to_list := slice }}
+{{ range $pinned_paths }}
+    {{ $raw_pin := trim . "/" }}
+    {{ $path_key := "" }}
+    {{ if hasPrefix $raw_pin "learning-paths/" }}
+        {{ $path_key = $raw_pin }}
+    {{ else }}
+        {{ $path_key = printf "learning-paths/%s/%s" $section_title $raw_pin }}
+    {{ end }}
+    {{ with index $blogs_by_path $path_key }}
+        {{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
+        {{ $pinned_lookup = merge $pinned_lookup (dict $path_key true) }}
+    {{ end }}
+{{ end }}
+{{ range $sorted_paths_to_list }}
+    {{ $path_key := trim .learning_path.RelPermalink "/" }}
+    {{ if not (index $pinned_lookup $path_key) }}
+        {{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
+    {{ end }}
+{{ end }}
+
 {{/* 
 {{ range $sorted_paths_to_list }}
   <p>{{ .learning_path.Title }}</p>
@@ -103,7 +135,9 @@
 
             <div class="c-col c-col-12">
                 <div id='path-container' class="u-display-grid u-gap-1 sm:u-grid-columns-1 md:u-grid-columns-2 xl:u-grid-columns-2 xxl:u-grid-columns-3 u-margin-top-1">
-                    {{ range $sorted_paths_to_list }}
+                    {{ range $ordered_paths_to_list }}
+                        {{ $path_key := trim .learning_path.RelPermalink "/" }}
+                        {{ $is_pinned := index $pinned_lookup $path_key }}
                         <!-- This div assigns tags for each LP for filtering. -->
                         <div class='path-div search-div gradient-box
                                 {{ with .learning_path.Params.skillLevels }}
@@ -134,7 +168,7 @@
                                 {{ end }}
                                 '>                            
                             <!-- Path card formatting -->
-                            {{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date) }}    
+                            {{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date "is_pinned" $is_pinned) }}    
                         </div>           
                     {{ end }}
                 </div>

themes/arm-design-system-hugo-theme/layouts/partials/general-formatting/path-ads-card.html

@@ -10,8 +10,16 @@
     - _default/term.html
 */}}
 
-<ads-card link="{{.learning_path.Permalink}}" class='path-card'>
+<ads-card link="{{.learning_path.Permalink}}" class='path-card{{ if .is_pinned }} featured-path-card{{ end }}'>
     <ads-card-content slot="content">
+        {{ if .is_pinned }}
+            <div class="pinned-header-row">
+                <span class="pinned-inline-icon" aria-label="Pinned learning path" title="Pinned learning path">
+                    <i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
+                </span>
+                <span class="pinned-featured-label">| FEATURED</span>
+            </div>
+        {{ end }}
         <!-- SUBJECT -->
         <p class="card-subject u-margin-top-0 u-margin-bottom-1/2">
             {{ upper .learning_path.Params.subjects }}
@@ -37,4 +45,4 @@ <h6 class="search-title learning-path-title">{{.learning_path.Title}}</h6>
             &nbsp;<span class="time-to-complete-string" name="{{.learning_path.Params.minutes_to_complete}}">{{partial "server-side-processing/time-beautifier.html" .learning_path.Params.minutes_to_complete}}</span>
         </p>
     </ads-card-content>
-</ads-card>
+</ads-card>