Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WIP: Replace the docs left nav and TOC #12646

Closed
wants to merge 2 commits into from
Closed

WIP: Replace the docs left nav and TOC #12646

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b7d262
Run Prettier
cnunciato Aug 31, 2024
b56b7cd
Add a new docs left nav and TOC
cnunciato Aug 31, 2024
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
4 changes: 3 additions & 1 deletion .prettierignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ cypress
data
docfx
infrastructure
theme
theme/stencil/dist
theme/stencil/www
theme/stencil/src/components.d.ts
tools
layouts
scripts
Expand Down
125 changes: 110 additions & 15 deletions assets/css/bundle.css
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions assets/css/marketing.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
/*!*********************************************************************************************************************************************************************************************************************!*\
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/scss/_marketing.scss ***!
\*********************************************************************************************************************************************************************************************************************/
/*! tailwindcss v2.2.15 | MIT License | https://tailwindcss.com */

/*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
Expand Down
67 changes: 1 addition & 66 deletions assets/js/bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions assets/js/marketing.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

9 changes: 2 additions & 7 deletions layouts/docs/list.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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" . }}

Expand Down
50 changes: 50 additions & 0 deletions layouts/partials/docs/nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }}
1 change: 1 addition & 0 deletions layouts/partials/docs/toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<pulumi-docs-toc></pulumi-docs-toc>
1 change: 1 addition & 0 deletions layouts/partials/tutorials/toc.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<pulumi-docs-toc></pulumi-docs-toc>
2 changes: 1 addition & 1 deletion layouts/tutorials/module.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions layouts/tutorials/single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
91 changes: 50 additions & 41 deletions theme/src/scss/_about.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

#about-nav {
@apply flex gap-x-9;

list-style: none !important;

li {
Expand Down Expand Up @@ -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;
Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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;
}
Expand All @@ -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;
}

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down
Loading
Loading