WIP: Replace the docs left nav and TOC

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

Hide file tree

Showing 110 changed files with 2,134 additions and 1,389 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
@@ -729,7 +729,7 @@ video {
   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%)
 }
 
 .about-card .social-overlay li{
@@ -748,7 +748,7 @@ video {
 .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
 }
@@ -761,16 +761,16 @@ video {
   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
 }
 
 .about-us-gradient-hero:before{
-  background:linear-gradient(180deg, #f1d1a0 0%, #AE6BFE 100%);
+  background:linear-gradient(180deg, #f1d1a0 0%, #ae6bfe 100%);
   content:"";
   display:block;
   height:100%;
@@ -793,11 +793,11 @@ video {
   border-radius:50%;
   bottom:-340px;
   filter:blur(40px);
-  background:radial-gradient(#F87579, #F7BF2A)
+  background:radial-gradient(#f87579, #f7bf2a)
 }
 
 .about-us-gradient-hero .element-1:before{
-  background:radial-gradient(#FCC247, #DA86D8);
+  background:radial-gradient(#fcc247, #da86d8);
   content:"";
   display:block;
   height:100%;
@@ -823,7 +823,7 @@ video {
 }
 
 .about-us-gradient-hero .element-2: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%;
@@ -850,7 +850,7 @@ video {
 }
 
 .about-us-gradient-hero .element-3:before{
-  background:radial-gradient(#47C2C0, #B78FA8);
+  background:radial-gradient(#47c2c0, #b78fa8);
   content:"";
   display:block;
   height:100%;
@@ -881,7 +881,7 @@ video {
   height:600px;
   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
 }
@@ -2492,7 +2492,7 @@ a.dismissable-banner>div.banner{
   align-items:center;
   padding:20px 85px 22px 16px;
   position:fixed;
-  background:linear-gradient(90deg, #F6E8C4 0%, #F5D6D7 18.23%, #EFD1D9 38.02%, #DFC8DC 53.65%, #DACBE4 74.48%, #D6D8F5 100%);
+  background:linear-gradient(90deg, #f6e8c4 0%, #f5d6d7 18.23%, #efd1d9 38.02%, #dfc8dc 53.65%, #dacbe4 74.48%, #d6d8f5 100%);
   left:0;
   bottom:0;
   width:100%;
@@ -4402,7 +4402,7 @@ div.highlight .copy-button{
 
 .docs-list-main div.table-of-contents div.package-card,body.section-registry div.table-of-contents div.package-card{
   display:none;
-  box-shadow:0px 4px 4px 0px #DCDCDC40
+  box-shadow:0px 4px 4px 0px #dcdcdc40
 }
 
 @media(min-width: 1024px){
@@ -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;
@@ -18486,7 +18487,7 @@ body.section-pulumi-up .pulumiup-bg-green{
 }
 
 body.section-pulumi-up .yellow-blue-gradient{
-  background:linear-gradient(180deg, #7BDEFF 0.21%, #F0F9DE 25.21%, #DBF4E4 76.77%, #85E0FC 100.21%)
+  background:linear-gradient(180deg, #7bdeff 0.21%, #f0f9de 25.21%, #dbf4e4 76.77%, #85e0fc 100.21%)
 }
 
 body.section-pulumi-up .btn-primary:hover{
@@ -20772,7 +20773,7 @@ a.pulumi-ai-badge div p i{
 }
 
 .section-tutorials .gradient-card,.section-collections .gradient-card{
-  background:linear-gradient(121deg, #F6F7FD 0%, #F9F7FC 5.24%, #F9F5FA 9.77%, #FEF8F9 14.35%, #FFFDF7 17.83%, #FFF 22.11%, #FFF 79.52%, #FFFDF7 86.29%, #FEF8F9 89.41%, #F9F5FA 92.9%, #F9F7FC 96.56%, #F6F7FD 100%, #F6F7FD 100%),#fff
+  background:linear-gradient(121deg, #f6f7fd 0%, #f9f7fc 5.24%, #f9f5fa 9.77%, #fef8f9 14.35%, #fffdf7 17.83%, #fff 22.11%, #fff 79.52%, #fffdf7 86.29%, #fef8f9 89.41%, #f9f5fa 92.9%, #f9f7fc 96.56%, #f6f7fd 100%, #f6f7fd 100%),#fff
 }
 
 .section-tutorials .gradient-highlight, .section-collections .gradient-highlight{
@@ -22360,6 +22361,88 @@ pulumi-convert #editors .editor .diagnostics .details{
   line-height: 1rem;
 }
 
+#docs-main-nav pulumi-docs-nav{
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+  font-size: 1rem;
+  line-height: 1.5rem
+}
+
+#docs-main-nav pulumi-docs-nav ol{
+  --tw-bg-opacity: 1;
+  background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+  padding-left: 0.75rem
+}
+
+.docs-list-main .docs-main-content-wrapper .docs-main-content section.cloud-overview #docs-main-nav pulumi-docs-nav a{
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  gap:12px
+}
+
+@media (max-width: 768px){
+  .docs-list-main .docs-main-content-wrapper .docs-main-content section.cloud-overview #docs-main-nav pulumi-docs-nav a,.docs-list-main .docs-main-content-wrapper .docs-main-content section.cloud-overview div.cols-2{
+    flex-direction:column
+  }
+}
+
+#docs-main-nav pulumi-docs-nav a{
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+#docs-main-nav pulumi-docs-nav a:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgba(237, 239, 251, var(--tw-bg-opacity));
+  text-decoration: none
+}
+
+#docs-main-nav pulumi-docs-nav a button{
+  border-radius: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem
+}
+
+#docs-main-nav pulumi-docs-nav a button:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgba(184, 189, 240, var(--tw-bg-opacity))
+}
+
+#docs-main-nav pulumi-docs-nav a button:active{
+  --tw-bg-opacity: 1;
+  background-color: rgba(219, 222, 247, var(--tw-bg-opacity))
+}
+
+.docs-list-main .docs-main-content section.docs-content div.highlight pre,.docs-list-main .docs-main-content section.docs-content code,.docs-list-main .docs-main-content section.docs-content .font-mono,body.section-registry section.docs-content div.highlight pre,body.section-registry section.docs-content code,body.section-registry section.docs-content .font-mono{
+  font-family:"Iosevka";
+  font-weight:400;
+  font-family:"Iosevka";
+  font-weight:400
+}
+
+#docs-main-nav pulumi-docs-nav a button::after{
+  font-family: Roboto Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  --tw-text-opacity: 1;
+  color: rgba(46, 55, 130, var(--tw-text-opacity));
+}
+
+#docs-main-nav pulumi-docs-nav li{
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem
+}
+
+#docs-main-nav pulumi-docs-toc h2{
+  padding-top: 0px
+}
+
 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,24 +25,19 @@ <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 }}
                     {{ partial "docs/special-pages/cloud-overview.html" . }}
                 {{ end }}
 
-
                 <section class="docs-content">
                     {{ .Content }}
                 </section>
             </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,50 @@
+{{ 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>
+                <a href="/get-started">Concepts</a>
+                <ol>
+                    <li>
+                        <a href="/download">How Pulumi works</a>
+                        <ol>
+                            <li><a href="/download">Download and install</a></li>
+                            <li><a href="/get-started">Get started</a></li>
+                        </ol>
+                    </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 @@
+<pulumi-docs-toc></pulumi-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>