Skip to content

Commit 6baef99

Browse files
cnunciatocnunciato
authored
Support cloud collections and videos (#12522)
1 parent 83b08e5 commit 6baef99

File tree

7 files changed

+54
-11
lines changed

7 files changed

+54
-11
lines changed

‎archetypes/tutorials/single/index.md

+6
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,12 @@ meta_desc: Here is a brief description of what this tutorial's all about.
1212
# An image for the tutorial. It appears on tutorial page and in social-media previews.
1313
meta_image: meta.png
1414

15+
# An optional video for the tutorial. When present, it appears at the top of the page, replacing
16+
# the meta image. YouTube and HTML5 video sources are supported.
17+
# video:
18+
# url: /blog/drift-detection/drift.mp4
19+
# youtube: Q8tw6YTD3ac
20+
1521
# The order in which the tutorial appears in most lists. Order is ascending, so higher numbers
1622
# mean the tutorial will appear further down the list. Positive integers only.
1723
weight: 999

‎layouts/partials/tutorials/nav.html

+14-4
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@
1717
{{ end }}
1818
{{ end }}
1919

20+
{{ $providers := slice }}
21+
{{ range .Site.Data.tutorials.collections }}
22+
{{ if and (.featured) (eq .type "provider") (ne (index $.Site.Taxonomies.collections .id) nil) }}
23+
{{ $collectionPath := (printf "/tutorials/%s/" .id) }}
24+
{{ $providers = $providers | append (dict "id" .id "label" .name "href" $collectionPath "active" (eq $collectionPath $currentPath)) }}
25+
{{ end }}
26+
{{ end }}
27+
2028
{{ $collections := slice }}
2129
{{ range .Site.Data.tutorials.collections }}
2230
{{ if and (ne .type "provider") (ne (index $.Site.Taxonomies.collections .id) nil) }}
@@ -25,10 +33,12 @@
2533
{{ end }}
2634
{{ end }}
2735

28-
{{ $menuItems = slice
29-
(dict "id" "get-started" "label" "Get started" "href" "/docs/get-started/" "children" $clouds)
30-
(dict "id" "collections" "label" "Collections" "href" nil "children" $collections)
31-
}}
36+
{{ $menuItems = slice }}
37+
{{ $menuItems = $menuItems | append (dict "id" "get-started" "label" "Get started" "href" "/docs/get-started/" "children" $clouds) }}
38+
{{ if gt (len $providers) 0 }}
39+
{{ $menuItems = $menuItems | append (dict "id" "providers" "label" "Browse by cloud" "href" nil "children" $providers) }}
40+
{{ end }}
41+
{{ $menuItems = $menuItems | append (dict "id" "collections" "label" "Collections" "href" nil "children" $collections) }}
3242

3343
{{/* On module pages, show the member topics and a link back to the home page. */}}
3444
{{ else if eq .Kind "section" }}

‎layouts/partials/video.html

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{{ $src := .url }}
2+
{{ $title := .title }}
3+
{{ $controls := default true .controls }}
4+
{{ $autoplay := default false .autoplay }}
5+
{{ $loop := default false .loop }}
6+
7+
<video class="flex outline-none rounded w-full" title="{{ $title }}"
8+
{{ if $controls }} controls {{ end }}
9+
{{ if $autoplay }} autoplay muted playsinline {{ end }}
10+
{{ if $loop }} loop {{ end }}>
11+
<source src="{{ $src }}" />
12+
</video>

‎layouts/partials/youtube.html

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{{ $id := .id }}
2+
{{ $title := .title }}
3+
4+
<!-- This is based on the output of the Hugo `youtube` shortcode. -->
5+
<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
6+
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="allowfullscreen" loading="eager" referrerpolicy="strict-origin-when-cross-origin" src="https://www.youtube.com/embed/{{ $id }}?autoplay=0&controls=1&end=0&loop=0&mute=0&start=0" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;" title="{{ $title }}"></iframe>
7+
</div>

‎layouts/taxonomy/collection.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ <h1>{{ $collection.name }}</h1>
2626
{{ $perRow := 3 }}
2727
{{ range $index, $item := .Pages }}
2828
<li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
29-
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
29+
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
3030
<div class="mb-2 pb-2 border-b border-gray-200">
3131
<h3 class="no-anchor font-normal text-xl flex items-center">
3232
<a class="text-gray-800" href="{{ $item.RelPermalink }}">

‎layouts/tutorials/section.html

+3-3
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ <h1>{{ .Title }}</h1>
2222
{{ $provider := index (and ((where $.Site.Data.tutorials.collections "type" "provider")) ((where $.Site.Data.tutorials.collections "id" $id))) 0 }}
2323

2424
<li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
25-
<div class="p-6 border border-gray-300 w-full gradient-card shadow-xl rounded-md">
25+
<div class="p-6 border border-gray-300 w-full gradient-card shadow-xl rounded-md h-full">
2626
<div class="flex items-center justify-between mb-4">
2727
<h3 class="flex-grow whitespace-nowrap font-display font-normal no-anchor mb-0">{{ $provider.name }} tutorials</h3>
2828
<img class="h-6 flex-shrink hidden sm:block" src="{{ $provider.logo }}" />
@@ -60,7 +60,7 @@ <h2>Collections</h2>
6060
{{ $ordinal = add $ordinal 1}}
6161

6262
<li class="lg:w-1/{{ $perRow }} {{ if ne (mod $ordinal $perRow) 0 }}lg:pr-4{{ end }}">
63-
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
63+
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
6464
<div class="mb-2 pb-2 border-b border-gray-200">
6565
<h3 class="no-anchor font-normal text-xl flex items-center">
6666
<a class="text-gray-800" href="/tutorials/{{ $taxonomy }}/">
@@ -91,7 +91,7 @@ <h2>All tutorials</h2>
9191
{{ $perRow = 3 }}
9292
{{ range $index, $item := where .Pages ".Params.listed" "ne" false }}
9393
<li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
94-
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
94+
<div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
9595
<div class="mb-2 pb-2 border-b border-gray-200">
9696
<h3 class="no-anchor font-normal text-xl flex items-center">
9797
<a class="text-gray-800" href="{{ $item.RelPermalink }}">

‎layouts/tutorials/single.html

+11-3
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,15 @@
1414
<h1>{{ .Title }}</h1>
1515
<div class="h1-gradient"></div>
1616
</div>
17-
{{ if .Params.meta_image }}
17+
{{ if .Params.video }}
18+
<div class="shadow-sm border border-gray-300 rounded overflow-hidden">
19+
{{ if .Params.video.url }}
20+
{{ partial "video" (dict "url" .Params.video.url "title" (default .Title .Params.video.title)) }}
21+
{{ else if .Params.video.youtube }}
22+
{{ partial "youtube" (dict "id" .Params.video.youtube "title" (default .Title .Params.video.title)) }}
23+
{{ end }}
24+
</div>
25+
{{ else if .Params.meta_image }}
1826
<div>
1927
<img class="shadow-sm border border-gray-300 rounded" src="./{{ .Params.meta_image }}">
2028
</div>
@@ -25,7 +33,7 @@ <h1>{{ .Title }}</h1>
2533
{{ if .Params.youll_learn }}
2634
<div class="flex flex-col lg:flex-row my-8">
2735
<div class="">
28-
<h4 class="mb-4">In this tutorial, you'll learn:</h2>
36+
<h2 class="mb-4">In this tutorial, you'll learn:</h2>
2937
<ul class="list-none p-0">
3038
{{ range .Params.youll_learn }}
3139
<li>
@@ -40,7 +48,7 @@ <h4 class="mb-4">In this tutorial, you'll learn:</h2>
4048
{{ if .Params.prereqs }}
4149
<div class="flex flex-col lg:flex-row my-8">
4250
<div class="">
43-
<h4 class="mb-4">Prerequisites:</h4>
51+
<h2 class="mb-4">Prerequisites:</h2>
4452
<ul class="list-none p-0">
4553
{{ range .Params.prereqs }}
4654
<li>

0 commit comments

Comments
 (0)