WIP: Replace the docs left nav and TOC

pulumi · Aug 31, 2024 · 20d8d47 · 20d8d47
1 parent f8e6612
commit 20d8d47
Show file tree

Hide file tree

Showing 110 changed files with 2,278 additions and 1,678 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -18,7 +18,9 @@ cypress
 data
 docfx
 infrastructure
-theme
+theme/stencil/dist
+theme/stencil/www
+theme/stencil/src/components.d.ts
 tools
 layouts
 scripts

diff --git a/assets/css/bundle.css b/assets/css/bundle.css
@@ -18338,7 +18338,8 @@ div.packages section.featured-packages div.featured-packages-content div.feature
 
 div.pulumi-deployments{
   box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);
-  --tw-shadow: 0 10px 15px -3pxrgba(0,0,0,.1),0 4px 6px -2pxrgba(0,0,0,.05) padding: 2.5rem;
+  --tw-shadow: 0 10px 15px -3pxrgba (0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  padding:2.5rem;
   background-color:#fff;
   border:1px solid #e5e5df;
   border-radius:.5rem;
@@ -22360,6 +22361,25 @@ pulumi-convert #editors .editor .diagnostics .details{
   line-height: 1rem;
 }
 
+#docs-main-nav pulumi-docs-nav a:hover{
+  text-decoration: none
+}
+
+#docs-main-nav pulumi-docs-nav li{
+  border-radius: 0.25rem;
+  padding: 0.125rem
+}
+
+#docs-main-nav pulumi-docs-nav li:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgba(237, 239, 251, var(--tw-bg-opacity))
+}
+
+#docs-main-nav pulumi-docs-nav li>ol{
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity))
+}
+
 pulumi-filter-select pulumi-filter-select-option-group{
   font-family: Gilroy, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   font-size: 1rem;

diff --git a/assets/js/bundle.js b/assets/js/bundle.js
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
@@ -3,7 +3,7 @@
         <div class="docs-main-nav-toggle-wrapper">
             <div class="docs-main-nav-wrapper">
                 <div id="docs-main-nav" class="docs-main-nav">
-                    {{ partial "docs/main-nav.html" . }}
+                    {{ partial "docs/nav.html" (dict "ctx" . "type" "pulumi-iac") }}
                 </div>
             </div>
             <div class="docs-nav-toggle">
@@ -25,10 +25,6 @@ <h1>{{ .Title }}</h1>
                     <div class="h1-gradient"></div>
                 </div>
 
-                <div class="docs-table-of-contents docs-toc-mobile">
-                    {{ partial "docs/table-of-contents.html" . }}
-                </div>
-
                 {{ if .Params.docs_home }}
                     {{ partial "docs/special-pages/docs-home.html" . }}
                 {{ else if .Params.cloud_overview }}
@@ -42,7 +38,7 @@ <h1>{{ .Title }}</h1>
             </div>
 
             <div class="docs-table-of-contents docs-toc-desktop">
-                {{ partial "docs/table-of-contents.html" . }}
+                {{ partial "docs/toc.html" }}
 
                 {{ partial "docs/feedback.html" . }}
 

diff --git a/layouts/partials/docs/nav.html b/layouts/partials/docs/nav.html
@@ -0,0 +1,39 @@
+{{ if eq .type "pulumi-iac"}}
+    <pulumi-docs-nav>
+        <ol>
+            <li><a href="/download">Download and install</a></li>
+            <li><a href="/get-started">Get started</a></li>
+            <li>
+                <div class="flex justify-between">
+                    <a href="/get-started">Concepts</a>
+                    <button></button>
+                </div>
+                <ol>
+                    <li><a href="/download">How Pulumi works</a></li>
+                    <li><a href="/get-started">Projects</a></li>
+                </ol>
+            </li>
+        </ol>
+    </pulumi-docs-nav>
+{{ else if eq .type "pulumi-esc" }}
+    <pulumi-docs-nav>
+        <ol>
+            <li><a href="/download">Download and install</a></li>
+            <li><a href="/get-started">Get started</a></li>
+        </ol>
+    </pulumi-docs-nav>
+{{ else if eq .type "pulumi-cloud" }}
+    <pulumi-docs-nav>
+        <ol>
+            <li><a href="/download">Download and install</a></li>
+            <li><a href="/get-started">Get started</a></li>
+        </ol>
+    </pulumi-docs-nav>
+{{ else }}
+    <pulumi-docs-nav>
+        <ol>
+            <li><a href="/download">Download and install</a></li>
+            <li><a href="/get-started">Get started</a></li>
+        </ol>
+    </pulumi-docs-nav>
+{{ end }}
diff --git a/layouts/partials/docs/toc.html b/layouts/partials/docs/toc.html
@@ -0,0 +1 @@
+<pulumi-docs-toc></pulumi-docs-toc>
diff --git a/layouts/partials/tutorials/toc.html b/layouts/partials/tutorials/toc.html
@@ -0,0 +1 @@
+<docs-toc></docs-toc>
diff --git a/layouts/tutorials/module.html b/layouts/tutorials/module.html
@@ -37,7 +37,7 @@ <h2 class="mb-4">In this tutorial, you'll learn:</h2>
                 </div>
                 <div class="flex flex-col lg:flex-row my-8">
                     <div class="">
-                        <h2 class="mb-4">Prerequisites:</h4>
+                        <h2 class="prerequisites" class="mb-4">Prerequisites:</h4>
                         <ul class="list-none p-0">
                             {{ range .Params.prereqs }}
                                 <li>

diff --git a/layouts/tutorials/single.html b/layouts/tutorials/single.html
@@ -33,7 +33,7 @@ <h1>{{ .Title }}</h1>
                 {{ if .Params.youll_learn }}
                     <div class="flex flex-col lg:flex-row my-8">
                         <div class="">
-                            <h2 class="mb-4">In this tutorial, you'll learn:</h2>
+                            <h2 class="mb-4 no-toc">In this tutorial, you'll learn:</h2>
                             <ul class="list-none p-0">
                                 {{ range .Params.youll_learn }}
                                     <li>
@@ -48,7 +48,7 @@ <h2 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="">
-                            <h2 class="mb-4">Prerequisites:</h2>
+                            <h2 id="prerequisites" class="mb-4">Prerequisites:</h2>
                             <ul class="list-none p-0">
                                 {{ range .Params.prereqs }}
                                     <li>
@@ -66,6 +66,7 @@ <h2 class="mb-4">Prerequisites:</h2>
             </div>
         </div>
         <div class="sticky top-10 pt-8 max-h-75 xl:w-2/12 hidden xl:block">
+            {{ partial "tutorials/toc.html" }}
             {{ partial "tutorials/feedback.html" . }}
             {{ partial "tutorials/right-nav-ad.html" }}
         </div>

diff --git a/theme/src/scss/_about.scss b/theme/src/scss/_about.scss
@@ -6,7 +6,7 @@
 
     #about-nav {
         @apply flex gap-x-9;
-        
+
         list-style: none !important;
 
         li {
@@ -57,7 +57,7 @@
         width: 230px;
         border-radius: 14px;
         background: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);
-    
+
         a {
             height: 226px;
             width: 226px;
@@ -76,7 +76,7 @@
 
     .dot-overlay {
         @apply w-full h-full absolute top-0 left-0 pointer-events-none;
-        z-index: -1;;
+        z-index: -1;
     }
 
     .title {
@@ -95,7 +95,7 @@
         height: 150px;
         border-right: 4px solid;
         border-image-slice: 1;
-        border-image-source: linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%)
+        border-image-source: linear-gradient(#f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);
     }
 
     .social-overlay {
@@ -109,15 +109,22 @@
     }
 }
 
-#we-are-pulumi, #who-we-are, #what-we-believe, #community, #history, #awards, #newsroom, #join-us {
+#we-are-pulumi,
+#who-we-are,
+#what-we-believe,
+#community,
+#history,
+#awards,
+#newsroom,
+#join-us {
     scroll-margin-top: 75px;
 }
 
 .photo-container {
     img {
         border: double 6px transparent;
         border-radius: 6px;
-        background-image: linear-gradient(white, white), linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%);
+        background-image: linear-gradient(white, white), linear-gradient(#f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);
         background-origin: border-box;
         background-clip: padding-box, border-box;
     }
@@ -127,33 +134,34 @@
     max-width: 1440px;
 }
 
-
-
 .about-us-gradient-hero {
     border-top: 6px solid;
     border-bottom: 6px solid;
     border-image-slice: 1;
-    border-image-source: linear-gradient(90deg, #F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%);
+    border-image-source: linear-gradient(90deg, #f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);
     height: 20rem;
     overflow: hidden;
     position: relative;
-    background: linear-gradient(180deg, #FCC247 0%, #F06DE9 100%);
+    background: linear-gradient(180deg, #fcc247 0%, #f06de9 100%);
     z-index: 10;
-  
+
     &:before {
-        background: linear-gradient(180deg, #f1d1a0 0%, #AE6BFE 100%);
-        content: '';    
+        background: linear-gradient(180deg, #f1d1a0 0%, #ae6bfe 100%);
+        content: "";
         display: block;
         height: 100%;
         position: absolute;
-        top: 0; left: 0;
+        top: 0;
+        left: 0;
         opacity: 0;
         width: 100%;
         z-index: -150;
         animation: opacity-animation 8s infinite ease-in-out;
     }
 
-    .element-1, .element-2, .element-3 {
+    .element-1,
+    .element-2,
+    .element-3 {
         position: absolute;
     }
 
@@ -163,15 +171,16 @@
         border-radius: 50%;
         bottom: -340px;
         filter: blur(40px);
-        background: radial-gradient(#F87579, #F7BF2A);
+        background: radial-gradient(#f87579, #f7bf2a);
 
         &:before {
-            background: radial-gradient(#FCC247, #DA86D8);
-            content: '';    
+            background: radial-gradient(#fcc247, #da86d8);
+            content: "";
             display: block;
             height: 100%;
             position: absolute;
-            top: 0; left: 0;
+            top: 0;
+            left: 0;
             opacity: 0;
             width: 100%;
             z-index: -150;
@@ -189,17 +198,18 @@
         filter: blur(30px);
         transform: skew(20deg, 8deg);
         border-radius: 4% 96% 60% 40% / 61% 70% 30% 39%;
-    
+
         &:before {
-            background: radial-gradient(rgba(116, 188, 248, 0.9), #B78FA8);
+            background: radial-gradient(rgba(116, 188, 248, 0.9), #b78fa8);
             border-radius: 4% 96% 60% 40% / 61% 70% 30% 39%;
             left: 18.5%;
             bottom: 20%;
-            content: '';    
+            content: "";
             display: block;
             height: 100%;
             position: absolute;
-            top: 0; left: 0;
+            top: 0;
+            left: 0;
             opacity: 0;
             width: 100%;
             z-index: -150;
@@ -215,14 +225,15 @@
         top: -15%;
         transform: rotate(90deg);
         filter: blur(40px);
-        
+
         &:before {
-            background: radial-gradient(#47C2C0, #B78FA8);
-            content: '';    
+            background: radial-gradient(#47c2c0, #b78fa8);
+            content: "";
             display: block;
             height: 100%;
             position: absolute;
-            top: 0; left: 0;
+            top: 0;
+            left: 0;
             opacity: 0;
             width: 100%;
             z-index: -150;
@@ -231,34 +242,32 @@
     }
 }
 
-
 @keyframes opacity-animation {
-  0% {
-    opacity: 0;
-  } 
-  
-  50% {
-    opacity: 1
-  }
-  100% {
-    opacity: 0;
-  }
+    0% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 1;
+    }
+    100% {
+        opacity: 0;
+    }
 }
 
 .value-card {
-    height: 600px;   
+    height: 600px;
 
     @screen xl {
         height: 465px;
     }
     border: double 2px transparent;
     border-radius: 12px;
-    background-image: linear-gradient(white, white), linear-gradient(#F7BF2A 0%, #F26E7E 18.23%, #BE5188 38.02%, #8A3391 53.65%, #805AC3 74.48%, #7682F4 100%);
+    background-image: linear-gradient(white, white), linear-gradient(#f7bf2a 0%, #f26e7e 18.23%, #be5188 38.02%, #8a3391 53.65%, #805ac3 74.48%, #7682f4 100%);
     background-origin: border-box;
     background-clip: padding-box, border-box;
 }
 
-
 .values-flex .value-card {
     width: 90%;
     height: auto;