Replace home page video with carousel

assets/js/main.js

@@ -50,4 +50,37 @@ function generateMiniToc() {
     $(".blog-sidebar-toggle").click(function () {
         $(".blog-sidebar-content").toggleClass("hidden");
     });
+
+    // Home-page carousel. Items cycle every four seconds. Clicking a label stops the
+    // cycling and shows the selected item.
+    var carouselIndex = 1;
+
+    var carouselInterval = window.setInterval(function() {
+        showCarouselItem(carouselIndex);
+        carouselIndex++;
+
+        if (carouselIndex > 2) {
+            carouselIndex = 0;
+        }
+    }, 4000);
+
+    $(".carousel-item-label").click(function() {
+        clearInterval(carouselInterval);
+
+        var i = $(".carousel-item-label").index(this);
+        showCarouselItem(i);
+    });
+
+    function showCarouselItem(i) {
+        $(".carousel-item")
+            .css("opacity", 0)
+            .eq(i)
+            .css("opacity", 1);
+
+        $(".carousel-item-label")
+            .removeClass("border-b-2")
+            .eq(i)
+            .addClass("border-b-2");
+    }
+
 }(jQuery));

assets/sass/styles.scss

@@ -112,6 +112,10 @@ main {
 
 .transition-all {
     @include transition(all);
+
+    &-200 {
+        @include transition($duration: 200ms);
+    }
 }
 
 .github-widget {

layouts/index.html

@@ -1,5 +1,5 @@
 {{ define "hero" }}
-    <header class="header-hero">
+    <header class="header-hero header-hero-glow">
         <div class="header-hero-items container mx-auto">
             <div class="header-hero-item">
                 <h1>Modern Infrastructure as Code</h1>
@@ -13,12 +13,19 @@ <h1>Modern Infrastructure as Code</h1>
                 </div>
             </div>
             <div class="header-hero-item">
-                <iframe class="rounded shadow-lg max-w-full"
-                    width="648" height="356"
-                    src="https://www.youtube.com/embed/B2Z2bT4Q-NY?rel=0"
-                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                    frameborder="0"
-                    allowfullscreen></iframe>
+                <div class="max-w-xl text-center">
+                    {{ partial "chrome.html" . }}
+                    <div class="relative overflow-auto relative rounded-b">
+                        <img class="carousel-item opacity-1 transition-all-200" src="/images/home/carousel-code.png" alt="Pulumi code">
+                        <img class="carousel-item opacity-0 transition-all-200 absolute inset-0" src="/images/home/carousel-cli.png" alt="Pulumi CLI">
+                        <img class="carousel-item opacity-0 transition-all-200 absolute inset-0" src="/images/home/carousel-console.png" alt="Pulumi Console">
+                    </div>
+                    <div class="inline-flex text-sm font-bold my-6">
+                        <a class="carousel-item-label cursor-pointer pb-1 border-b-2 border-orange-500">Code</a>
+                        <a class="carousel-item-label cursor-pointer pb-1 mx-4 border-orange-500">CLI</a>
+                        <a class="carousel-item-label cursor-pointer pb-1 border-orange-500">Console</a>
+                    </ul>
+                </div>
             </div>
         </div>
     </header>

layouts/partials/chrome.html

@@ -0,0 +1,7 @@
+<div class="bg-gray-400 rounded-t">
+    <div class="flex p-3">
+        <div class="bg-red-600 rounded-full h-3 w-3"></div>
+        <div class="bg-yellow-600 rounded-full h-3 w-3 mx-2"></div>
+        <div class="bg-green-600 rounded-full h-3 w-3"></div>
+    </div>
+</div>

layouts/partials/code.html

@@ -5,13 +5,7 @@
 
 <div class="code-mode-{{ default "light" .mode }} {{ if .chrome }} code-chrome {{ end }} code-{{ .lang }}">
     {{ if .chrome }}
-        <div class="bg-gray-400 rounded-t">
-            <div class="flex p-3">
-                <div class="bg-red-600 rounded-full h-3 w-3"></div>
-                <div class="bg-yellow-600 rounded-full h-3 w-3 mx-2"></div>
-                <div class="bg-green-600 rounded-full h-3 w-3"></div>
-            </div>
-        </div>
+        {{ partial "chrome.html" . }}
     {{ end }}
     {{ highlight .code $lang (default "" .opts) }}
 </div>

layouts/partials/header.html

@@ -18,8 +18,8 @@
 
 <nav class="nav-main bg-purple-700 py-6 px-4 lg:px-0 border-t border-purple-500">
     <div class="container mx-auto">
-        <header class="flex items-center justify-between flex-wrap">
-            <div class="flex items-center flex-shrink-0 text-white mr-6">
+        <header class="flex items-center justify-between flex-wrap md:flex-no-wrap">
+            <div class="flex items-center flex-shrink-0 text-white lg:mr-6">
                 <a class="block" href="/">
                     <img class="h-10 block" src="/images/logo/logo-inv.svg" alt="Pulumi logo">
                 </a>
@@ -33,7 +33,7 @@
 
             <ul class="nav-header-items hidden w-full flex-grow md:flex md:items-center md:w-auto text-white text-sm md:text-xs lg:text-sm uppercase pt-4 md:pt-0">
                 {{ range $.Site.Menus.header }}
-                    <li>
+                    <li class="whitespace-no-wrap">
                         {{ $active := hasPrefix $.RelPermalink .URL }}
                         <a href="{{ .URL }}" class="block py-2 px-4 md:px-0 md:py-0 md:px-4 md:py-2 my-2 md:my-0 lg:mx-4 border hover:border-purple-500 hover:bg-purple-600 rounded {{ if $active }}border-purple-500 bg-purple-600{{ else }}border-purple-700{{ end }}">
                             {{ .Name }}