Skip to content

Commit 39c3c4f

Browse files
jasonrandrewsjasonrandrews
authored
Merge pull request #3085 from ArmDeveloperEcosystem/main
Production update with Learning Path pinning
2 parents bdece89 + e622bd4 commit 39c3c4f

10 files changed

Lines changed: 205 additions & 8 deletions

File tree

‎assets/css/list-pages.css‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -185,6 +185,13 @@ ads-card.path-card {
185185
--ads-card-background-color-hover: var(--arm-light-grey);
186186
--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); */
187187
}
188+
189+
ads-card.path-card.featured-path-card {
190+
--ads-card-border-width: 0;
191+
--ads-card-border-color: transparent;
192+
--ads-card-border-color-hover: transparent;
193+
}
194+
188195
html[theme='dark'] ads-card.path-card {
189196
--ads-card-background-color: var(--arm-color-base);
190197
--ads-card-border-color: #000000;
@@ -196,6 +203,45 @@ html[theme='dark'] ads-card.path-card {
196203
--ads-card-box-shadow-hover: #000 @50%, X:0 Y: 3 B:12; /* probably not working */
197204
}
198205

206+
html[theme='dark'] ads-card.path-card.featured-path-card {
207+
--ads-card-border-width: 0;
208+
--ads-card-border-color: transparent;
209+
--ads-card-border-color-hover: transparent;
210+
}
211+
212+
ads-card.path-card.featured-path-card ads-card-content::before {
213+
content: "";
214+
position: absolute;
215+
inset: 0;
216+
border-radius: 10px;
217+
padding: 3px;
218+
background: linear-gradient(135deg,
219+
var(--arm-green) 0%,
220+
var(--arm-green) 50%,
221+
var(--arm-web-safe-blue) 50%,
222+
var(--arm-web-safe-blue) 100%);
223+
-webkit-mask:
224+
linear-gradient(#fff 0 0) content-box,
225+
linear-gradient(#fff 0 0);
226+
-webkit-mask-composite: xor;
227+
mask-composite: exclude;
228+
pointer-events: none;
229+
opacity: 0.4;
230+
transition: opacity 0.3s ease-in-out;
231+
}
232+
233+
html[theme='dark'] ads-card.path-card.featured-path-card ads-card-content::before {
234+
background: linear-gradient(135deg,
235+
var(--arm-green) 0%,
236+
var(--arm-green) 50%,
237+
var(--arm-light-blue) 50%,
238+
var(--arm-light-blue) 100%);
239+
}
240+
241+
ads-card.path-card.featured-path-card:hover ads-card-content::before {
242+
opacity: 1;
243+
}
244+
199245

200246
.basics-title:hover {
201247
transition: color 0.3s ease-in-out;
@@ -208,6 +254,12 @@ ads-card.path-card:hover .learning-path-title {
208254
color: var(--arm-green);
209255
}
210256

257+
ads-card.path-card:hover .pinned-inline-icon,
258+
ads-card.path-card:hover .pinned-featured-label {
259+
transition: color 0.3s ease-in-out;
260+
color: var(--arm-green);
261+
}
262+
211263
/* adjust height depending on screen size */
212264
ads-card.path-card .learning-path-title-div { /* xs and sm */
213265
min-height: 50px;
@@ -224,6 +276,35 @@ ads-card.path-card .learning-path-title-div { /* xs and sm */
224276
font-size: 0.9rem!important;
225277
}
226278

279+
.pinned-header-row {
280+
display: flex;
281+
align-items: center;
282+
gap: 0.35rem;
283+
margin-bottom: 0.3rem;
284+
}
285+
286+
.pinned-featured-label {
287+
color: var(--arm-web-safe-blue);
288+
font-weight: 400;
289+
letter-spacing: normal;
290+
}
291+
292+
.pinned-inline-icon {
293+
color: var(--arm-web-safe-blue);
294+
font-size: 0.95rem;
295+
line-height: 1;
296+
}
297+
298+
.pinned-inline-icon i {
299+
display: inline-block;
300+
transform: rotate(-45deg);
301+
}
302+
303+
html[theme="dark"] .pinned-inline-icon,
304+
html[theme="dark"] .pinned-featured-label {
305+
color: var(--arm-light-blue);
306+
}
307+
227308
html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
228309
color: var(--arm-web-safe-blue);
229310
}

‎content/learning-paths/automotive/_index.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ key_ip:
77
- Cortex-A
88
- Cortex-R
99
maintopic: true
10+
pinned_learning_paths:
11+
- openadkit1_container
12+
- learning-paths/cross-platform/simd-loops
13+
- openadkit2_safetyisolation
1014
subtitle: Build smarter, real-time vehicle software on reliable Arm platforms.
1115
title: Automotive
1216
weight: 4

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ key_ip:
88
- Cortex-M
99
- Ethos-U
1010
maintopic: true
11+
pinned_learning_paths:
12+
- vcpkg-tool-installation
13+
- raspberry-pi-smart-home
14+
- introduction-to-tinyml-on-arm
1115
operatingsystems_filter:
1216
- Android: 1
1317
- Baremetal: 30

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ differentiating_info:
66
key_ip:
77
- Cortex-A
88
maintopic: true
9+
pinned_learning_paths:
10+
- wsl2
11+
- dgx_spark_isaac_robotics
12+
- learning-paths/cross-platform/multiplying-matrices-with-sme2
913
operatingsystems_filter:
1014
- Android: 3
1115
- ChromeOS: 2

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ key_ip:
88
- Immortalis
99
- Mali
1010
maintopic: true
11+
pinned_learning_paths:
12+
- voice-assistant
13+
- nss-unreal
14+
- vulkan-ml-sample
1115
operatingsystems_filter:
1216
- Android: 40
1317
- Linux: 40

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ differentiating_info:
66
key_ip:
77
- Neoverse
88
maintopic: true
9+
pinned_learning_paths:
10+
- arm-mcp-server
11+
- learning-paths/cross-platform/vectorization-comparison
12+
- performix-microarchitecture
913
operatingsystems_filter:
1014
- Android: 3
1115
- Linux: 223

‎content/subjects/ml/_index.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: AI
3+
slug: ml
4+
pinned_learning_paths:
5+
- learning-paths/cross-platform/kleidiai-explainer
6+
- learning-paths/servers-and-cloud-computing/vllm-acceleration
7+
- learning-paths/laptops-and-desktops/pytorch-finetuning-on-spark
8+
---

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

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,50 @@
4040
<!-- Sort using the CalculatedDate -->
4141
{{ $sorted_paths_to_list := sort $blogs "calculated_date" "desc" }}
4242

43+
<!-- Allow taxonomy term pages to pin learning paths via term front matter.
44+
Hugo does not expose term bundle front matter on .Params here, so resolve it explicitly.
45+
Example: content/subjects/ml/_index.md
46+
-->
47+
{{ $term_content_page := site.GetPage (printf "/%s/%s" .Data.Plural (.Data.Term | urlize)) }}
48+
{{ $pinned_paths := default (slice) .Params.pinned_learning_paths }}
49+
{{ with $term_content_page }}
50+
{{ $pinned_paths = default $pinned_paths .Params.pinned_learning_paths }}
51+
{{ end }}
52+
{{ $blogs_by_path := dict }}
53+
{{ $blogs_by_slug := dict }}
54+
{{ $slug_counts := dict }}
55+
{{ range $sorted_paths_to_list }}
56+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
57+
{{ $slug_key := replaceRE "^.*/" "" $path_key }}
58+
{{ $blogs_by_path = merge $blogs_by_path (dict $path_key .) }}
59+
{{ $blogs_by_slug = merge $blogs_by_slug (dict $slug_key .) }}
60+
{{ $slug_count := default 0 (index $slug_counts $slug_key) }}
61+
{{ $slug_counts = merge $slug_counts (dict $slug_key (add $slug_count 1)) }}
62+
{{ end }}
63+
{{ $pinned_lookup := dict }}
64+
{{ $ordered_paths_to_list := slice }}
65+
{{ range $pinned_paths }}
66+
{{ $raw_pin := trim . "/" }}
67+
{{ $path_key := "" }}
68+
{{ if hasPrefix $raw_pin "learning-paths/" }}
69+
{{ $path_key = $raw_pin }}
70+
{{ else if eq (default 0 (index $slug_counts $raw_pin)) 1 }}
71+
{{ with index $blogs_by_slug $raw_pin }}
72+
{{ $path_key = trim .learning_path.RelPermalink "/" }}
73+
{{ end }}
74+
{{ end }}
75+
{{ with and $path_key (index $blogs_by_path $path_key) }}
76+
{{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
77+
{{ $pinned_lookup = merge $pinned_lookup (dict $path_key true) }}
78+
{{ end }}
79+
{{ end }}
80+
{{ range $sorted_paths_to_list }}
81+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
82+
{{ if not (index $pinned_lookup $path_key) }}
83+
{{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
84+
{{ end }}
85+
{{ end }}
86+
4387

4488

4589
<!-- Hugo crawl over learning path directories and display the main categories -->
@@ -83,9 +127,11 @@ <h3 class="u-margin-top-0">Filter</h3>
83127

84128
<div class="c-col c-col-12">
85129
<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">
86-
{{ range $sorted_paths_to_list }}
130+
{{ range $ordered_paths_to_list }}
131+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
132+
{{ $is_pinned := index $pinned_lookup $path_key }}
87133
<!-- This div assigns a category tag for each LP for filtering (cross platform need to iterate over the shared_between var) -->
88-
<div class='path-div search-div
134+
<div class='path-div search-div gradient-box
89135
{{if eq .learning_path.Parent.Title "Cross Platform"}}
90136
{{ with .learning_path.Params.shared_between }}
91137
{{ range .}}
@@ -96,7 +142,7 @@ <h3 class="u-margin-top-0">Filter</h3>
96142
tag-{{.learning_path.Parent.Title | urlize}}
97143
{{end}}'>
98144
<!-- Path card formatting -->
99-
{{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date) }}
145+
{{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date "is_pinned" $is_pinned) }}
100146
</div>
101147
{{ end }}
102148
</div>
@@ -105,4 +151,4 @@ <h3 class="u-margin-top-0">Filter</h3>
105151
</div>
106152
</div>
107153

108-
{{ end }}
154+
{{ end }}

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

Lines changed: 36 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,38 @@
4848
<!-- Sort using the CalculatedDate -->
4949
{{ $sorted_paths_to_list := sort $blogs "calculated_date" "desc" }}
5050

51+
<!-- Allow category-level pinning via front matter:
52+
pinned_learning_paths:
53+
- /learning-paths/<category>/<path-slug>/
54+
-->
55+
{{ $pinned_paths := default (slice) .Params.pinned_learning_paths }}
56+
{{ $blogs_by_path := dict }}
57+
{{ range $sorted_paths_to_list }}
58+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
59+
{{ $blogs_by_path = merge $blogs_by_path (dict $path_key .) }}
60+
{{ end }}
61+
{{ $pinned_lookup := dict }}
62+
{{ $ordered_paths_to_list := slice }}
63+
{{ range $pinned_paths }}
64+
{{ $raw_pin := trim . "/" }}
65+
{{ $path_key := "" }}
66+
{{ if hasPrefix $raw_pin "learning-paths/" }}
67+
{{ $path_key = $raw_pin }}
68+
{{ else }}
69+
{{ $path_key = printf "learning-paths/%s/%s" $section_title $raw_pin }}
70+
{{ end }}
71+
{{ with index $blogs_by_path $path_key }}
72+
{{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
73+
{{ $pinned_lookup = merge $pinned_lookup (dict $path_key true) }}
74+
{{ end }}
75+
{{ end }}
76+
{{ range $sorted_paths_to_list }}
77+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
78+
{{ if not (index $pinned_lookup $path_key) }}
79+
{{ $ordered_paths_to_list = $ordered_paths_to_list | append . }}
80+
{{ end }}
81+
{{ end }}
82+
5183
{{/*
5284
{{ range $sorted_paths_to_list }}
5385
<p>{{ .learning_path.Title }}</p>
@@ -103,7 +135,9 @@
103135

104136
<div class="c-col c-col-12">
105137
<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">
106-
{{ range $sorted_paths_to_list }}
138+
{{ range $ordered_paths_to_list }}
139+
{{ $path_key := trim .learning_path.RelPermalink "/" }}
140+
{{ $is_pinned := index $pinned_lookup $path_key }}
107141
<!-- This div assigns tags for each LP for filtering. -->
108142
<div class='path-div search-div gradient-box
109143
{{ with .learning_path.Params.skillLevels }}
@@ -134,7 +168,7 @@
134168
{{ end }}
135169
'>
136170
<!-- Path card formatting -->
137-
{{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date) }}
171+
{{ partial "general-formatting/path-ads-card.html" (dict "learning_path" .learning_path "calculated_date" .calculated_date "is_pinned" $is_pinned) }}
138172
</div>
139173
{{ end }}
140174
</div>

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,16 @@
1010
- _default/term.html
1111
*/}}
1212

13-
<ads-card link="{{.learning_path.Permalink}}" class='path-card'>
13+
<ads-card link="{{.learning_path.Permalink}}" class='path-card{{ if .is_pinned }} featured-path-card{{ end }}'>
1414
<ads-card-content slot="content">
15+
{{ if .is_pinned }}
16+
<div class="pinned-header-row">
17+
<span class="pinned-inline-icon" aria-label="Pinned learning path" title="Pinned learning path">
18+
<i class="fa-solid fa-thumbtack" aria-hidden="true"></i>
19+
</span>
20+
<span class="pinned-featured-label">| FEATURED</span>
21+
</div>
22+
{{ end }}
1523
<!-- SUBJECT -->
1624
<p class="card-subject u-margin-top-0 u-margin-bottom-1/2">
1725
{{ upper .learning_path.Params.subjects }}
@@ -37,4 +45,4 @@ <h6 class="search-title learning-path-title">{{.learning_path.Title}}</h6>
3745
&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>
3846
</p>
3947
</ads-card-content>
40-
</ads-card>
48+
</ads-card>

0 commit comments

Comments
 (0)