Support cloud collections and videos (#12522)

pulumi · Aug 15, 2024 · 6baef99 · 6baef99
1 parent 83b08e5
commit 6baef99
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 11 deletions.
diff --git a/archetypes/tutorials/single/index.md b/archetypes/tutorials/single/index.md
@@ -12,6 +12,12 @@ meta_desc: Here is a brief description of what this tutorial's all about.
 # An image for the tutorial. It appears on tutorial page and in social-media previews.
 meta_image: meta.png
 
+# An optional video for the tutorial. When present, it appears at the top of the page, replacing
+# the meta image. YouTube and HTML5 video sources are supported.
+# video:
+#     url: /blog/drift-detection/drift.mp4
+#     youtube: Q8tw6YTD3ac
+
 # The order in which the tutorial appears in most lists. Order is ascending, so higher numbers
 # mean the tutorial will appear further down the list. Positive integers only.
 weight: 999

diff --git a/layouts/partials/tutorials/nav.html b/layouts/partials/tutorials/nav.html
@@ -17,6 +17,14 @@
                             {{ end }}
                         {{ end }}
 
+                        {{ $providers := slice }}
+                        {{ range .Site.Data.tutorials.collections }}
+                            {{ if and (.featured) (eq .type "provider") (ne (index $.Site.Taxonomies.collections .id) nil) }}
+                                {{ $collectionPath := (printf "/tutorials/%s/" .id) }}
+                                {{ $providers = $providers | append (dict "id" .id "label" .name "href" $collectionPath "active" (eq $collectionPath $currentPath)) }}
+                            {{ end }}
+                        {{ end }}
+
                         {{ $collections := slice }}
                         {{ range .Site.Data.tutorials.collections }}
                             {{ if and (ne .type "provider") (ne (index $.Site.Taxonomies.collections .id) nil) }}
@@ -25,10 +33,12 @@
                             {{ end }}
                         {{ end }}
 
-                        {{ $menuItems = slice
-                            (dict "id" "get-started" "label" "Get started" "href" "/docs/get-started/" "children" $clouds)
-                            (dict "id" "collections" "label" "Collections" "href" nil "children" $collections)
-                        }}
+                        {{ $menuItems = slice }}
+                        {{ $menuItems = $menuItems | append (dict "id" "get-started" "label" "Get started" "href" "/docs/get-started/" "children" $clouds) }}
+                        {{ if gt (len $providers) 0 }}
+                            {{ $menuItems = $menuItems | append (dict "id" "providers" "label" "Browse by cloud" "href" nil "children" $providers) }}
+                        {{ end }}
+                        {{ $menuItems = $menuItems | append (dict "id" "collections" "label" "Collections" "href" nil "children" $collections) }}
 
                     {{/* On module pages, show the member topics and a link back to the home page. */}}
                     {{ else if eq .Kind "section" }}

diff --git a/layouts/partials/video.html b/layouts/partials/video.html
@@ -0,0 +1,12 @@
+{{ $src := .url }}
+{{ $title := .title }}
+{{ $controls := default true .controls }}
+{{ $autoplay := default false .autoplay }}
+{{ $loop := default false .loop }}
+
+<video class="flex outline-none rounded w-full" title="{{ $title }}"
+    {{ if $controls }} controls {{ end }}
+    {{ if $autoplay }} autoplay muted playsinline {{ end }}
+    {{ if $loop }} loop {{ end }}>
+    <source src="{{ $src }}" />
+</video>
diff --git a/layouts/partials/youtube.html b/layouts/partials/youtube.html
@@ -0,0 +1,7 @@
+{{ $id := .id }}
+{{ $title := .title }}
+
+<!-- This is based on the output of the Hugo `youtube` shortcode. -->
+<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
+    <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>
+</div>
diff --git a/layouts/taxonomy/collection.html b/layouts/taxonomy/collection.html
@@ -26,7 +26,7 @@ <h1>{{ $collection.name }}</h1>
                             {{ $perRow := 3 }}
                             {{ range $index, $item := .Pages }}
                                 <li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
-                                    <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
+                                    <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
                                         <div class="mb-2 pb-2 border-b border-gray-200">
                                             <h3 class="no-anchor font-normal text-xl flex items-center">
                                                 <a class="text-gray-800" href="{{ $item.RelPermalink }}">

diff --git a/layouts/tutorials/section.html b/layouts/tutorials/section.html
@@ -22,7 +22,7 @@ <h1>{{ .Title }}</h1>
                             {{ $provider := index (and ((where $.Site.Data.tutorials.collections "type" "provider")) ((where $.Site.Data.tutorials.collections "id" $id))) 0 }}
 
                             <li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
-                                <div class="p-6 border border-gray-300 w-full gradient-card shadow-xl rounded-md">
+                                <div class="p-6 border border-gray-300 w-full gradient-card shadow-xl rounded-md h-full">
                                     <div class="flex items-center justify-between mb-4">
                                         <h3 class="flex-grow whitespace-nowrap font-display font-normal no-anchor mb-0">{{ $provider.name }} tutorials</h3>
                                         <img class="h-6 flex-shrink hidden sm:block" src="{{ $provider.logo }}" />
@@ -60,7 +60,7 @@ <h2>Collections</h2>
                                     {{ $ordinal = add $ordinal 1}}
 
                                     <li class="lg:w-1/{{ $perRow }} {{ if ne (mod $ordinal $perRow) 0 }}lg:pr-4{{ end }}">
-                                        <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
+                                        <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
                                             <div class="mb-2 pb-2 border-b border-gray-200">
                                                 <h3 class="no-anchor font-normal text-xl flex items-center">
                                                     <a class="text-gray-800" href="/tutorials/{{ $taxonomy }}/">
@@ -91,7 +91,7 @@ <h2>All tutorials</h2>
                         {{ $perRow = 3 }}
                         {{ range $index, $item := where .Pages ".Params.listed" "ne" false }}
                             <li class="lg:w-1/{{ $perRow }} {{ if ne (mod (add $index 1) $perRow) 0 }}lg:pr-4{{ end }}">
-                                <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full">
+                                <div class="bg-white shadow-lg p-6 border rounded-md border-gray-200 w-full h-full">
                                     <div class="mb-2 pb-2 border-b border-gray-200">
                                         <h3 class="no-anchor font-normal text-xl flex items-center">
                                             <a class="text-gray-800" href="{{ $item.RelPermalink }}">

diff --git a/layouts/tutorials/single.html b/layouts/tutorials/single.html
@@ -14,7 +14,15 @@
                     <h1>{{ .Title }}</h1>
                     <div class="h1-gradient"></div>
                 </div>
-                {{ if .Params.meta_image }}
+                {{ if .Params.video }}
+                    <div class="shadow-sm border border-gray-300 rounded overflow-hidden">
+                        {{ if .Params.video.url }}
+                            {{ partial "video" (dict "url" .Params.video.url "title" (default .Title .Params.video.title)) }}
+                        {{ else if .Params.video.youtube }}
+                            {{ partial "youtube" (dict "id" .Params.video.youtube "title" (default .Title .Params.video.title)) }}
+                        {{ end }}
+                    </div>
+                {{ else if .Params.meta_image }}
                     <div>
                         <img class="shadow-sm border border-gray-300 rounded" src="./{{ .Params.meta_image }}">
                     </div>
@@ -25,7 +33,7 @@ <h1>{{ .Title }}</h1>
                 {{ if .Params.youll_learn }}
                     <div class="flex flex-col lg:flex-row my-8">
                         <div class="">
-                            <h4 class="mb-4">In this tutorial, you'll learn:</h2>
+                            <h2 class="mb-4">In this tutorial, you'll learn:</h2>
                             <ul class="list-none p-0">
                                 {{ range .Params.youll_learn }}
                                     <li>
@@ -40,7 +48,7 @@ <h4 class="mb-4">In this tutorial, you'll learn:</h2>
                 {{ if .Params.prereqs }}
                     <div class="flex flex-col lg:flex-row my-8">
                         <div class="">
-                            <h4 class="mb-4">Prerequisites:</h4>
+                            <h2 class="mb-4">Prerequisites:</h2>
                             <ul class="list-none p-0">
                                 {{ range .Params.prereqs }}
                                     <li>