pinned LPs setup, awaiting actual pinned LPs

Author: chrismoroney

assets/css/list-pages.css

@@ -224,6 +224,28 @@ ads-card.path-card .learning-path-title-div { /* xs and sm */
     font-size: 0.9rem!important;
 }
 
+.pinned-featured-label {
+    color: inherit;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
+
+ads-card.path-card ads-card-content {
+    position: relative;
+}
+
+.pinned-corner-icon {
+    position: absolute;
+    top: 12px;
+    right: 14px;
+    color: var(--arm-web-safe-orange);
+    font-size: 0.95rem;
+}
+
+html[theme="dark"] .pinned-corner-icon {
+    color: var(--arm-orange);
+}
+
 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,7 @@ key_ip:
 - Cortex-A
 - Cortex-R
 maintopic: true
+pinned_learning_paths:
 subtitle: Build smarter, real-time vehicle software on reliable Arm platforms.
 title: Automotive
 weight: 4

content/learning-paths/cross-platform/_index.md

@@ -1,3 +1,4 @@
 ---
+pinned_learning_paths:
 title: Cross Platform
 ---

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

@@ -8,6 +8,7 @@ key_ip:
 - Cortex-M
 - Ethos-U
 maintopic: true
+pinned_learning_paths:
 operatingsystems_filter:
 - Android: 2
 - Baremetal: 31

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

@@ -6,6 +6,7 @@ differentiating_info:
 key_ip:
 - Cortex-A
 maintopic: true
+pinned_learning_paths:
 operatingsystems_filter:
 - Android: 2
 - ChromeOS: 2

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

@@ -8,6 +8,7 @@ key_ip:
 - Immortalis
 - Mali
 maintopic: true
+pinned_learning_paths:
 operatingsystems_filter:
 - Android: 35
 - Linux: 36

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

@@ -6,6 +6,9 @@ differentiating_info:
 key_ip:
 - Neoverse
 maintopic: true
+pinned_learning_paths:
+- nginx_tune
+- codec
 operatingsystems_filter:
 - Android: 3
 - Linux: 211

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

@@ -12,9 +12,17 @@
 
 <ads-card link="{{.learning_path.Permalink}}" class='path-card'>
     <ads-card-content slot="content">
+        {{ if .is_pinned }}
+            <span class="pinned-corner-icon" aria-label="Pinned learning path" title="Pinned learning path">
+                <i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
+            </span>
+        {{ end }}
         <!-- SUBJECT -->
         <p class="card-subject u-margin-top-0 u-margin-bottom-1/2">
             {{ upper .learning_path.Params.subjects }}
+            {{ if .is_pinned }}
+                <span class="pinned-featured-label">&nbsp;| FEATURED</span>
+            {{ end }}
         </p>
         <!-- Title of Learning Path -->
         <div class="learning-path-title-div">
@@ -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>