Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions assets/config/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,11 @@ module.exports = {
},
},
},

variants: {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

margin: [
"responsive",
"hover",
]
}
}
35 changes: 35 additions & 0 deletions assets/js/carousel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
(function($) {

// The 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);
32 changes: 0 additions & 32 deletions assets/js/main.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,36 +51,4 @@ function generateMiniToc() {
$(".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));
24 changes: 24 additions & 0 deletions assets/js/nav.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
(function(document, $) {

// The main navigation bar. Binds handlers for showing and hiding
// the big purple submenu on non-touch devices.

var isTouchDevice = "ontouchstart" in document;

if (!isTouchDevice) {

$(".nav-header-items li a").mouseenter(function(event) {
var item = $(event.target).data("submenu");
$(".submenu-item").hide();
$(".submenu-item-" + item).show();
});

$(".submenu").mouseleave(function(event) {
// Only hide the submenu if the mouse moves to an element that
// isn't the main menu.
if (event.relatedTarget !== $("nav.nav-main").get(0)) {
$(".submenu-item").hide();
}
});
}
})(document, jQuery);
1 change: 1 addition & 0 deletions content/product/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ layout: product
menu:
header:
weight: 1
identifier: product
---
1 change: 1 addition & 0 deletions content/why-pulumi/_index.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ layout: why-pulumi
menu:
header:
weight: 2
identifier: why
---
4 changes: 2 additions & 2 deletions layouts/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ <h1>Modern Infrastructure as Code</h1>
{{ 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">
<img class="carousel-item opacity-0 transition-all-200 absolute inset-0 z-10" src="/images/home/carousel-cli.png" alt="Pulumi CLI">
<img class="carousel-item opacity-0 transition-all-200 absolute inset-0 z-10" 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>
Expand Down
120 changes: 119 additions & 1 deletion layouts/partials/header.html
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
{{ range $.Site.Menus.header }}
<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 }}">
<a href="{{ .URL }}" data-submenu="{{ .Identifier }}" 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 }}
</a>
</li>
Expand All @@ -51,3 +51,121 @@
</header>
</div>
</nav>
<div class="submenu">
<div class="text-white relative overflow-visible">
<div class="submenu-item submenu-item-product hidden absolute inset-x-0 z-50 bg-purple-700 shadow-lg pt-8 pb-16">
<div class="container mx-auto flex items-start">
<div class="w-1/2 pr-12 border-r border-purple-500 text-purple-100 text-sm">
<h3 class="text-white">The Pulumi Platform</h3>
<p class="text-white">
Cloud Apps and Infrastructure for any cloud using languages you already know and love.
</p>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/product#pulumi-sdk" }}">Pulumi SDK</a>
<span>&rarr; Cloud native infrastructure as code.</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/product#pulumi-crosswalk" }}">Pulumi Crosswalk</a>
<span>&rarr; Productive infrastructure as code with built-in best practices.</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/product#pulumi-saas" }}">Pulumi SaaS</a>
<span>&rarr; Continuously deliver and manage cloud software for any cloud.</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/product#multi-cloud-subscription" }}">Multi-Cloud Subscription</a>
<span>&rarr; End-to-end Kubernetes solutions to achieve multi-cloud.</span>
</li>
</ul>
<p>
<span class="text-white">Pulumi is open source, free to start, and has plans available for teams.</span>
<a class="text-orange-500 hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/pricing" }}">View Pricing</a> &rarr;
</p>
</div>
<div class="w-1/2 pl-12 text-purple-100 text-sm">
<h3 class="text-white">Get Started</h3>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/docs/reference/install" }}">Install (Mac, Windows, Linux)</a> &rarr;
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/docs" }}">Documentation and Examples</a> &rarr;
</li>
</ul>
<h3 class="text-white">Migrate to Pulumi</h3>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/migrate/cloudformation.md" }}">from CloudFormation</a> &rarr;
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/migrate/terraform.md" }}">from Terraform</a> &rarr;
</li>
</ul>
</div>
</div>
</div>
<div class="submenu-item submenu-item-why hidden absolute inset-x-0 z-50 bg-purple-700 shadow pt-8 pb-16">
<div class="container mx-auto flex items-start">
<div class="w-1/2 pr-12 border-r border-purple-500 text-purple-100 text-sm">
<h3 class="text-white">Solutions for All Teams and Engineers</h3>
<p class="text-white">
Maximize cloud velocity for Dev, DevOps, and IT, no matter your team size.
</p>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/why-pulumi#for-developers" }}">For Developers</a>
<span>&rarr; Your favorite languages, tools, and libraries.</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/why-pulumi#for-operators" }}">For DevOps and IT</a>
<span>&rarr; Empower your team to deliver to many clouds.</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400" href="{{ relref . "/why-pulumi#for-business-leaders" }}">For Business Leaders</a>
<span>&rarr; Modern multi-cloud for startups and enterprises.</span>
</li>
</ul>
</div>
<div class="w-1/4 px-12 border-r border-purple-500 text-purple-100 text-sm">
<h3 class="text-white">Any Code</h3>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/topics/serverless.md" }}">Serverless</a>
<span>&rarr;</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/topics/containers.md" }}">Containers</a>
<span>&rarr;</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/topics/kubernetes.md" }}">Kubernetes</a>
<span>&rarr;</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/docs/reference/tutorials/aws/tutorial-ec2-webserver" }}">Infrastructure</a>
<span>&rarr;</span>
</li>
</ul>
</div>
<div class="w-1/4 pl-12 text-purple-100 text-sm">
<h3 class="text-white">Migrate to Pulumi</h3>
<ul class="p-0 leading-loose">
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/partner/aws.md" }}">AWS</a>
<span>&rarr;</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/partner/azure.md" }}">Azure</a>
<span>&rarr;</span>
</li>
<li>
<a class="text-orange-500 font-bold hover:text-orange-400 hover:mr-1 transition-all" href="{{ relref . "/partner/gcp.md" }}">GCP</a>
<span>&rarr;</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
4 changes: 3 additions & 1 deletion layouts/partials/scripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@
hash in filename, so no need to add query param to cache bust.
-->
{{ $main := resources.Get "js/main.js" }}
{{ $nav := resources.Get "js/nav.js" }}
{{ $carousel := resources.Get "js/carousel.js" }}
{{ $langchoose := resources.Get "js/langchoose.js" }}
{{ $noselect := resources.Get "js/noselect.js" }}
{{ $js := slice $main $langchoose $noselect | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
{{ $js := slice $main $nav $carousel $langchoose $noselect | resources.Concat "js/bundle.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>