Implement the Docsy theme (#561)

* Enable Docsy theme

* Set config params for use with Docsy theme

* Remove layout files which directly conflict with Docsy theme

* Add overriding blog content template

This template overrides the default Docsy file - it accounts for
multiple authors, as well as authors containing attributes. By default,
in Docsy the post's 'author' parameter is a string containing the
author's name.

* Update docs subsection layout with Docsy markup

* Add custom sidebar-nav with icons for external links

* Add hooks partials as per Docsy guidelines

Docsy provides `head-end.html` and `body-end.html` as entry-points to
extending these areas of the theme. Existing partials for applicable
scripts and stylesheets have been migrated to these new partials.

* Add theme style variables override file

* Remove Algolia DocSearch styles and script

* Enable Google search with placeholder engine

* Add optimized header logo to Docsy header

* Add shortcode for building 'Used By' logos

* Implement home page

Refactors hompage to make the switch over from Bulma to Bootstrap.
This also entails reworking some of the shortcodes, and using Docsy's
built-in features wherever possible, such as the blocks/cover shortcode.

* Disable alternate layout for root language pages in docs

* Render auth_alts pages with shortcode instead of custom layout

* Use CSS to set background on cover blocks

* Implement 'about' page

Adds content file and shortcodes as needed to implement the 'About' page
using the Docsy theme using Docsy shortcodes.

* Implement 'showcase' page

Adds content file and shortcodes as needed to implement the 'Showcase'
page using the Docsy theme using Docsy shortcodes.

* Implement 'community' page

Adds content file and shortcodes as needed to implement the 'Community'
page using the Docsy theme using Docsy shortcodes.

* Override Docsy's list community layout

Docsy has a default 'list.html' layout file, which is opinionated about
the opening copy and block structure of this page.

* Import new site stylesheet into overridden main imports

* Apply external link icon styles

* Size homepage logo responsively

* Hide root /docs leaf pages from sidebar nav

* Move FAQ to the /docs/what_is_grpc section

* Add new in-page TOC for large screens and down

This overrides the default Docsy 'baseof' for the docs section, as well
as a new partial and styles to wrap the default table of contents in an
expandable menu.

* Clean up docs index pages for basic list layout

* Implement 'alert' Docsy shortcode in content

Docsy has a single shortcode for handling the type of functionality that
several shortcodes are currently. Whether the Docsy 'alert' shortcode is
further customized later or not, this change will allow several files to
be replaced with one.

* Replace Reddit with Google Group link in footer

* Override list page layout for the docs section

This new override is in place to account for custom frontmatter params.
Currently, the index pages for individual programming languages are
given a custom layout.

* Replace alt layout with flag for language indexes

This replaces the use of an alternate layout file for programming
language home pages with a flag that can lean on the newly overidden
'docs/list.html' template file.

* Add comments to site-specific stylesheet

* Disable Docsy overrides of default Bootstrap buttons

* Add new shortcode for rendering ToC on main pages

* Override Docsy secondary color with 'gRPC blue'

* Hide subsection list on Overview page

* Override Hugo sitemap and hide legacy pages on it

The 'quickstart' and 'tutorials' pages under the root /docs folder are
to be left, but hidden from in-page navigation and indexing. This uses
the example-site Docsy sitemap.xml file to override the default Hugo
one. A frontmatter param of 'private' is used as a flag to hide the page
from the sitemap.

* Remove unused layout, partials and shortcodes

* Disable ToC on language list pages

* Translate image rendering from Bulma to Bootstrap

* Add bannner partial to main page templates

This refactors the optional banner set in the site config from Bulma to
a custom class. In order to include the partial in the base site
structure, the default 'baseof' layout file has been overriden.

* Override breadcrumb partial to display on mobile as well

* Override Docsy CSS partial with diffs from old CSS partial

* Extract language home page content to partial

* Refactor 404 page to use Docsy-like structure and classes

* Translate buttons shortcode from Bulma to Bootstrap

* Refactor contribute page to have same structure as the other standalone pages

* Fix overflow issue with docs content on small mobile screens

* Fix user logo height on 'about' page

* Apply base and responsive styling to homepage images

* Support short titles for side nav and breadcrumbs

This change makes a check for a frontmatter param for shortened titles
while building links. It also revises the name of the param from the
existing "short" to "short_title".

* Enable "simple" view of languages index page

Frontmatter param of "simple_list" is provided by Docsy

* Remove javascript partial no longer required

As Alpine is no longer in use to trigger modals and the anchor tag
offset has been generated by Docsy, the JavaScript partial can be
removed.

* Revert auto-format changes

* Give same max-width to main content as container

In the docs section and the blog, the max-width is defined by Docsy as
80%. This intentionally caps that value at the same max-width defined by
the 'container' used elsewhere for very large screens.

* Remove list bullets and increase spacing on prog-lang-home pages

* Add redirect rule for FAQ page

* Specify 'main' branch when building meta links

The gRPC repo has updated its "master" branch to the gaining-acceptance
"main" naming.

* Enable multi-language support on site

This sets up a folder structure and configuration to enable future work
to add multiple languages to the site. To add another language, create
content under an approprite content/ subdirectory and add the key to the
'languages' param in config. As soon as a second language is added, a
dropdown menu will be generated in the Docsy top nav to select the
language.

* Revert git command in netlfy build steps

* Give supported language pages custom titles

Since this is overriding Docsy's "head" partial, the ranging over the
default "alternative output formats" and creating broken links has been
commented out of the partial as well.

* Revert "Revert git command in netlfy build steps"

This reverts commit 60a6fc076f.

* Disable Docsy buttons using variable override

* Remove deprecation warning on use of '.Dir'

assets/scss/_grpc.scss

@@ -0,0 +1,162 @@
+// GLOBAL
+
+.constrained-width {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 1140px;
+}
+
+.banner {
+  width: 100%;
+  position: fixed;
+  margin-left: -15px;
+  z-index: 32;
+  top: 4rem;
+  background: $gray-100;
+  text-align: center;
+
+  & p {
+    padding: 0.5rem;
+  }
+}
+
+.image--modal-trigger {
+  cursor: pointer;
+}
+
+a:not(.td-sidebar-link) > .fa-external-link-alt::before {
+  margin-left: 3px;
+}
+a > .fa-external-link-alt::before {
+  font-size: 50%;
+  opacity: 0.8;
+  vertical-align: top;
+}
+
+/*
+Docsy's 'cover/block' option for setting background images does
+not currrently support svg's. This sets the background on hero
+sections site wide to the original site's background svg.
+*/
+.td-cover-block {
+  background-image: url("/img/graphic-04.svg");
+}
+
+// NAVBAR
+
+// Docsy includes the site name by default. This is in place
+// to hide the span text, leaving only the logo svg
+.navbar-brand span:last-child {
+  display: none;
+}
+
+// PAGES
+
+.homepage__logo {
+  width: 100%;
+}
+
+.homepage-features {
+  background-color: $gray-100;
+}
+
+.homepage-features__icon {
+  width: 50%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+}
+
+.homepage-cncf__logo {
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 500px;
+}
+
+.about__user-logo {
+  max-height: 5rem;
+}
+
+@media screen and (min-width: 540px) {
+  .homepage-features {
+    padding-right: 3rem;
+    padding-left: 3rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .homepage__logo,
+  .homepage-cncf__logo {
+    width: 50%;
+  }
+
+  .homepage-features__icon {
+    margin-right: 1rem;
+    max-width: 172px;
+  }
+}
+
+// DOCS
+// In-page toc. Apply this class as a modifier to the Docsy-provided .td-toc
+.td-toc--inline {
+  padding-top: 0;
+  padding-bottom: 0;
+  border-left: none;
+  position: static;
+  height: auto;
+}
+
+#td-content__toc-link span i.fa-chevron-down {
+  transition: transform 250ms ease-in-out;
+}
+
+#td-content__toc-link[aria-expanded="true"] span i.fa-chevron-down {
+  transform: rotate(-180deg);
+}
+
+// Prevent overflow on mobile devices in case of very long inline-block elements.
+.td-content {
+  word-break: break-word;
+  max-width: 1140px;
+}
+
+/* To ensure that the top page header and description are rendered
+above the inline ToC, this hides them from displaying in the main
+content block */
+body:not(.td-blog) .td-content:not(.list-page) {
+  & h1:first-child {
+    display: none;
+  }
+
+  & div.lead {
+    display: none;
+  }
+}
+
+// Spacing fix for page-meta-links. Whitespace in template is stripped in production.
+.td-page-meta a i {
+  margin-right: 0.25rem;
+}
+
+// Language Home Pages
+.prog-lang-home__list {
+  & h4 {
+    margin-bottom: 0.75rem;
+  }
+
+  & ul {
+    padding-left: 0.25rem;
+    padding-bottom: 0.5rem;
+    list-style: none;
+  }
+
+  & li {
+    padding-bottom: 0.25rem;
+  }
+}
+
+@media screen and (min-width: 992px) {
+  .td-content figure {
+    max-width: 80%;
+  }
+}

assets/scss/_variables_project.scss

@@ -0,0 +1,12 @@
+// Bootstrap/Docsy variable overrides here
+$primary: #244c5a;
+$secondary: #5ac5c5;
+$info: #379c9c;
+$gray-100: #fafafa;
+
+$display1-weight: 300;
+$display2-weight: 300;
+
+$link-color: #379c9c;
+
+$enable-rounded: false;

assets/scss/main.scss

@@ -0,0 +1,66 @@
+// Import any new stylesheets here
+
+@import "support/functions";
+@import "variables";
+@import "variables_project";
+@import "support/mixins";
+
+@import "../vendor/bootstrap/scss/bootstrap";
+
+@import "../vendor/Font-Awesome/scss/fontawesome.scss";
+@import "../vendor/Font-Awesome/scss/solid.scss";
+@import "../vendor/Font-Awesome/scss/brands.scss";
+
+@import "support/utilities";
+@import "colors";
+@import "boxes";
+@import "blog";
+@import "code";
+@import "nav";
+@import "sidebar-tree";
+@import "sidebar-toc";
+@import "buttons";
+@import "breadcrumb";
+@import "alerts";
+@import "content";
+@import "search";
+@import "main-container";
+@import "blocks/blocks";
+@import "section-index";
+@import "pageinfo";
+@import "grpc";
+
+@if $td-enable-google-fonts {
+  @import url($web-font-path);
+}
+
+footer {
+  min-height: 150px;
+
+  @include media-breakpoint-down(md) {
+    min-height: 200px;
+  }
+}
+
+// Adjust anchors vs the fixed menu.
+@include media-breakpoint-up(md) {
+  .td-offset-anchor:target {
+    display: block;
+    position: relative;
+    top: -4rem;
+    visibility: hidden;
+  }
+
+  h2[id]:before,
+  h3[id]:before,
+  h4[id]:before,
+  h5[id]:before {
+    display: block;
+    content: " ";
+    margin-top: -5rem;
+    height: 5rem;
+    visibility: hidden;
+  }
+}
+
+@import "styles_project";

config.yaml

@@ -4,8 +4,20 @@ title: gRPC
 disableKinds: [taxonomy, taxonomyTerm]
 pygmentsCodeFences: true
 
+theme: ['docsy']
+
+enableGitInfo: true
+
+contentDir: 'content/en'
+defaultContentLanguage: 'en'
+defaultContentLanguageInSubdir: false
+
 params:
-  repo: https://github.com/grpc/grpc.io
+  copyright: 'The Linux Foundation'
+  repo: &repo 'https://github.com/grpc/grpc.io'
+  github_repo: *repo
+  github_project_repo: *repo
+  github_branch: 'main'
   branch: main
   locale: en_US
   grpc_vers:
@@ -14,6 +26,18 @@ params:
     java: v1.34.1
   font_awesome_version: 5.12.1
   description: A high-performance, open source universal RPC framework
+  ui:
+    sidebar_menu_compact: true
+    navbar_logo: true
+
+    # If Algolia DocSearch is enabled, sidebar search is not supported
+    sidebar_search_disable: false
+
+    # Adds a reading time to the top of each doc.
+    # If you want this feature, but occasionally need to remove the Reading time from a single page,
+    # add "hide_readingtime: true" to the page's front matter
+    readingtime:
+      enable: false
 
   show_banner: false
 
@@ -47,11 +71,44 @@ params:
     hero: grpc-logo.png
     footer: grpc-horizontal-white.png
 
+  links:
+    user:
+      - name: 'Twitter'
+        url: 'https://twitter.com/grpcio'
+        icon: 'fab fa-twitter'
+        desc: 'Follow us on Twitter!'
+      - name: 'Google Groups'
+        url: 'https://groups.google.com/g/grpc-io'
+        icon: 'fab fa-google'
+        desc: 'Join our Google community'
+    developer:
+      - name: 'GitHub'
+        url: 'https://github.com/grpc'
+        icon: 'fab fa-github'
+        desc: 'Development takes place here!'
+      - name: 'Gitter'
+        url: https://gitter.im/grpc/grpc
+        icon: 'fab fa-gitter'
+        desc: 'Where developers come to talk'
+
+  # Google Custom Search Engine ID. Remove or comment out to disable search.
+  gcs_engine_id: '788f3b1ec3a111a2f'
+
+  # Enable Algolia DocSearch
+  algolia_docsearch: false
+
+  #Enable offline search with Lunr.js
+  offlineSearch: false
+
 markup:
   goldmark:
     renderer: {unsafe: true}
   highlight:
     style: manni
+  tableOfContents:
+    startLevel: 2
+    endLevel: 5
+    ordered: false
 
 # Configuration required for auto-generating the Netlify _redirects file
 mediaTypes:
@@ -113,3 +170,11 @@ menu:
       url: /faq/
       weight: 7
       parent: docs
+
+languages:
+  en:
+    title: gRPC
+    description: A high-performance, open source universal RPC framework
+    weight: 1
+    languageName: 'English'
+    languageDirection: 'ltr'

content/docs/languages/java/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/kotlin/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/node/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/objective-c/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/php/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/python/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/languages/ruby/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/platforms/android/kotlin/api.md

@@ -1,6 +0,0 @@
----
-title: API reference
-short: API
-weight: 90
-# Note: this is a placeholder page. The URL to this page redirects elsewhere.
----

content/docs/what-is-grpc/_index.md

@@ -1,9 +0,0 @@
----
-title: What is gRPC?
-weight: 1
----
-
-New to gRPC? Start with the following pages:
-
-- [Introduction to gRPC](introduction/)
-- [Core concepts, architecture and lifecycle](core-concepts/)

content/en/_index.md

@@ -0,0 +1,61 @@
+---
+---
+
+{{< blocks/cover image_anchor="top" height="max" color="primary" >}}
+<img class="homepage__logo" src="/img/logos/grpc-logo.png" />
+
+<p class="mb-3 display-2">
+	A high performance, open source universal RPC framework
+</p>
+<a
+	class="mx-auto mb-5 btn btn-lg btn-primary font-weight-bold"
+	href="/docs/what-is-grpc/introduction"
+>
+Learn more
+</a>
+<p class="mb-3 display-2 font-weight-normal">Get started!</p>
+<div class="inline-block align-middle">
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/go/quickstart/">Go</a>
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/cpp/quickstart/">C++</a>
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/java/quickstart/">Java</a>
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/python/quickstart/">Python</a>
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/csharp/quickstart/">C#</a>
+<a class="btn btn-lg btn-primary mb-2" href="/docs/languages/">…</a>
+{{< /blocks/cover >}}
+
+<div class="constrained-width">
+
+{{% blocks/lead color="white" %}}
+
+<h1 class="mb-3 display-1 text-primary">
+	Why gRPC?
+</h1>
+<h3 class="font-weight-light">
+	gRPC is a modern open source high performance RPC framework that can
+	run in any environment. It can efficiently connect services in and
+	across data centers with pluggable support for load balancing,
+	tracing, health checking and authentication. It is also applicable
+	in last mile of distributed computing to connect devices, mobile
+	applications and browsers to backend services.
+</h3>
+
+{{% /blocks/lead %}}
+
+<section class="homepage-features">
+{{< home/features >}}
+</section>
+
+<section class="homepage-used-by">
+{{< home/used-by >}}
+</section>
+
+<section class="homepage-cncf">
+<h2 class="mb-5 display-2 text-center">
+	gRPC is a <a href="https://cncf.io">Cloud Native Computing Foundation</a> incubation project
+</h2>
+<figure class="homepage-cncf__logo">
+	<img class="w-100" src="/img/logos/cncf-horizontal-color.png" alt="Cloud Native Computing Foundation logo" />
+</figure>
+</section>
+
+</div>

content/en/about/_index.md

@@ -3,12 +3,26 @@ title: About gRPC
 description: Who is using gRPC and why
 ---
 
+{{< blocks/cover image_anchor="top" height="sm" color="primary" >}}
+{{< page/header >}}
+{{< /blocks/cover >}}
+
+<div class="container">
+<div class="row my-5">
+
+{{< page/toc collapsed=true placement="inline" >}}
+
+<div class="col-12 col-lg-9">
+<div>
+
 gRPC is a modern open source high performance RPC framework that can run in any
 environment. It can efficiently connect services in and across data centers with
 pluggable support for load balancing, tracing, health checking and
 authentication. It is also applicable in last mile of distributed computing to
 connect devices, mobile applications and browsers to backend services.
 
+</div>
+
 ### The main usage scenarios
 
 * Efficiently connecting polyglot services in microservices style architecture
@@ -31,7 +45,9 @@ Below are details and quotes from some of our early adopters.
 
 Check out what people are saying below.
 
+<div class="row my-4">
 {{< testimonials >}}
+</div>
 
 ## The story behind gRPC
 
@@ -46,9 +62,16 @@ Google to power use cases from microservices to the "last mile" of computing
 For more background on why we created gRPC, see the [gRPC Motivation and Design
 Principles](/blog/principles/) on the [gRPC blog](/blog/).
 
-{{< note >}}
-  <a name="officially-supported-languages-and-platforms"></a>
+{{< alert title="Note" color="info" >}}
+<a name="officially-supported-languages-and-platforms"></a>
 
-  Our table of **officially supported languages and platforms** has moved!
-  See [Official support](/docs/#official-support).
-{{< /note >}}
+Our table of **officially supported languages and platforms** has moved!
+See [Official support](/docs/#official-support).
+{{< /alert >}}
+
+</div>
+
+{{< page/toc placement="sidebar" >}}
+
+</div>
+</div>

content/en/blog/grpc-web-interceptor.md

@@ -47,10 +47,10 @@ The `StreamInterceptor` interface declaration is similar, except that the
 `invoker` return type is `ClientReadableStream` instead of `Promise`. For
 implementation details, see [interceptor.js][].
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   A `StreamInterceptor` can be applied to any RPC with a `ClientReadableStream`
   return type, whether it's a unary or a server-streaming RPC.
-{{< /note >}}
+{{< /alert >}}
 
 ## What can I do with an interceptor?
 
@@ -182,12 +182,12 @@ const client = new MyServiceClient(
     host, creds, {'streamInterceptors': [interceptor1, interceptor2, interceptor3]});
 ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   Interceptors are executed in reverse order for request processing, and in
   order for response processing, as illustrated here:
 
   ![Interceptor processing order](/img/grpc-web-interceptors.png)
-{{< /note >}}
+{{< /alert >}}
 
 ## Feedback
 

content/en/blog/wireshark.md

@@ -41,14 +41,14 @@ This post focuses on the analysis of captured gRPC messages. To learn how to
 store network traffic in _capture files_, see the [Capturing Live Network
 Data][] section of the [Wireshark User’s Guide][].
 
-{{<note>}}
+{{< alert title="Note" color="info" >}}
   Currently, only **plain text** gRPC messages can be parsed by Wireshark. While
   [Wireshark supports TLS dissection][], it requires per-session secret keys. As
   of the time of writing, gRPC libraries do not support the exporting of such
   keys.
 
   [Wireshark supports TLS dissection]: https://gitlab.com/wireshark/wireshark/-/wikis/tls
-{{</note>}}
+{{</alert>}}
 
 ## Examples
 

content/en/community/_index.md

@@ -2,21 +2,35 @@
 title: Community
 ---
 
+{{< blocks/cover color="primary" height="sm" >}}
+{{< page/header >}}
+{{< /blocks/cover >}}
+
+<div class="container">
+<div class="row my-5">
+
+{{< page/toc collapsed=true placement="inline" >}}
+
+<div class="col-12 col-lg-9">
+<div>
+
 gRPC has an active community of developers who are using, enhancing, and building valuable integrations with other software projects. We'd love your help to improve and extend the project. You can reach us via the [Mailing List](https://groups.google.com/forum/#!forum/grpc-io), [Gitter channel](https://gitter.im/grpc/grpc), or [Twitter](https://twitter.com/grpcio) to start engaging with the project and its members.
 
+</div>
+
 ## Contribute on GitHub
 
 gRPC has an active community of developers who are using, enhancing and building valuable integrations with other software projects. We are always looking for active contributors in gRPC and gRPC Ecosystem. Here are a few areas where we would love community contribution in grpc project. Be sure to follow our [community addition guidelines](/contribute/).
 
-## [gRPC C-based](https://github.com/grpc/grpc/labels/disposition%2Fhelp%20wanted)
+### [gRPC C-based](https://github.com/grpc/grpc/labels/disposition%2Fhelp%20wanted)
 
 Or shortcut to [C](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3Aarea%2Fcore+label%3A%22disposition%2Fhelp+wanted%22), [C++](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2Fc%2B%2B), [Node.js](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2Fnode), [Python](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2FPython), [Ruby](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2Fruby), [Objective-C](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2FObjC), [PHP](https://github.com/grpc/grpc/issues?q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2Fphp), and [C#](https://github.com/grpc/grpc/issues?utf8=%E2%9C%93&q=is%3Aopen+is%3Aissue+label%3A%22disposition%2Fhelp+wanted%22+label%3Alang%2Fc%23+).
 
-## [gRPC Java](https://github.com/grpc/grpc-java/labels/help%20wanted)
+### [gRPC Java](https://github.com/grpc/grpc-java/labels/help%20wanted)
 
 For Android Java and Java.
 
-## [gRPC Go](https://github.com/grpc/grpc-go/labels/Status:%20help%20wanted)
+### [gRPC Go](https://github.com/grpc/grpc-go/labels/Status:%20help%20wanted)
 
 For the Go implementation.
 
@@ -41,3 +55,10 @@ Join the [subreddit](https://www.reddit.com/r/grpc/).
 ## Community meetings
 
 We hold a community video conference every other week. It's a way to discuss the status of work and show off things the community is working on. Meeting information and notes can be found at [bit.ly/grpcmeetings](https://bit.ly/grpcmeetings).
+
+</div>
+
+{{< page/toc placement="sidebar" >}}
+
+</div>
+</div>

content/en/contribute.md

@@ -2,6 +2,23 @@
 title: Contributing to gRPC
 ---
 
+{{< blocks/cover height="sm" color="primary" >}}
+{{< page/header >}}
+{{< /blocks/cover >}}
+
+<div class="container">
+<div class="row my-5">
+
+<div class="d-lg-none col-9">
+<div class="td-toc td-toc--inline">
+{{< page/toc collapsed=true >}}
+</div>
+</div>
+
+<div class="col-12 col-lg-9">
+
+<div class="mb-5">
+
 To contribute to gRPC documentation, please fork the [gRPC repository on GitHub](https://github.com/grpc/grpc.io) and start submitting pull requests.
 
 ## Contribute guidelines for gRPC
@@ -14,18 +31,37 @@ We welcome contributions to any of our three core repositories:
 
 {{< button text="View guidelines" url="https://github.com/grpc/grpc/blob/master/CONTRIBUTING.md" >}}
 
+</div>
+<div class="mb-5">
+
 ## Contribution guidelines for the gRPC Ecosystem
 
 The [gRPC Ecosystem](https://github.com/grpc-ecosystem/) is a different organization where we collect and curate valuable integrations of other projects with gRPC. You can propose a new project for it by filling out the **Propose new project** form.
 
 {{< button text="View guidelines" url="https://github.com/grpc/grpc-contrib/blob/master/CONTRIBUTING.md" >}}
 
+</div>
+<div class="mb-5">
+
 ## Edit our site on GitHub
 
 Click the below button to visit the repo for our site. You can then click the "Fork" button in the upper-right area of the screen to create a copy of our site on your GitHub account called a "fork." Make any changes you want in your fork, and when you are ready to send those changes to us, go to the index page for your fork and click **New Pull Request** to let us know about it.
 
 {{< button text="Browse this site's source code" url="https://github.com/grpc/grpc.io" >}}
 
+</div>
+<div class="mb-5">
+
 ## Being a member of the gRPC organization on github
 
 Being an organization member is not required for the vast majority of the contributions. Membership is required for certain administrative tasks such as accepting a pull request, or closing issues. If you wish to be part of the gRPC organization on github, please [get in touch with us](/community/). Please note that in order to be part of the organization, your GitHub account needs to have [two-factor authentication enabled](https://help.github.com/articles/securing-your-account-with-two-factor-authentication-2fa/).
+
+</div>
+</div>
+<div class="d-none d-lg-block col-3">
+<div class="td-toc td-toc--inline ml-5">
+{{< page/toc >}}
+</div>
+</div>
+</div>
+</div>

content/en/docs/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Documentation
+no_list: true
 ---
 
 Learn about key gRPC concepts, try a quick start, find tutorials and reference

content/en/docs/guides/_index.md

@@ -6,7 +6,3 @@ nav_children: pages
 ---
 
 The documentation covers the following techniques:
-
-- [Authentication](auth/)
-- [Benchmarking](benchmarking/)
-- [Error handling](error/)

content/en/docs/guides/auth.md

@@ -44,11 +44,11 @@ The following authentication mechanisms are built-in to gRPC:
   most gRPC language implementations will not let you send credentials on an
   unencrypted channel.
 
-{{< warning >}}
+{{< alert title="Warning" color="warning" >}}
   Google credentials should only be used to connect to Google services. Sending
   a Google issued OAuth2 token to a non-Google service could result in this
   token being stolen and used to impersonate the client to Google services.
-{{< /warning >}}
+{{< /alert >}}
 
 ### Authentication API
 

content/en/docs/guides/benchmarking.md

@@ -19,12 +19,13 @@ visualization.
   * [Multi-language performance dashboard @master (latest dev version)](https://performance-dot-grpc-testing.appspot.com/explore?dashboard=5652536396611584)
   * [C++ detailed performance dashboard @master (latest dev version)](https://performance-dot-grpc-testing.appspot.com/explore?dashboard=5685265389584384)
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   Are you seeing "**no data available**" messages in the performance dashboard?
   This is a known issue, see [grpc/grpc#23297][].
 
   [grpc/grpc#23297]: https://github.com/grpc/grpc/issues/23297
-{{< /note >}}
+
+{{< /alert >}}
 
 ### Performance testing design
 

content/en/docs/languages/_index.md

@@ -1,8 +1,10 @@
 ---
 title: Supported languages
-short: Languages
+short_title: Languages
 weight: 2
 nav_children: section
+notoc: true
+simple_list: true
 ---
 
 Each gRPC language / [platform][] has links to the following pages and more:
@@ -13,16 +15,4 @@ Each gRPC language / [platform][] has links to the following pages and more:
 
 Select a language to get started:
 
-- [C# / .NET](csharp/)
-- [C++](cpp/)
-- [Dart](dart/)
-- [Go](go/)
-- [Java](java/)
-- [Kotlin/JVM](kotlin/)
-- [Node.js](node/)
-- [Objective-C](objective-c/)
-- [PHP](php/)
-- [Python](python/)
-- [Ruby](ruby/)
-
 [platform]: {{< relref "platforms" >}}

content/en/docs/languages/cpp/_index.md

@@ -1,6 +1,7 @@
 ---
 title: C++
-layout: prog_lang_home
+prog_lang_home: true
+notoc: true
 src_repo: https://github.com/grpc/grpc
 content:
   - learn_more:

content/en/docs/languages/cpp/alts.md

@@ -1,7 +1,6 @@
 ---
 title: ALTS authentication in C++
-short: ALTS
-layout: auth_alts
+short_title: ALTS
 description: >
   An overview of gRPC authentication in C++ using Application Layer Transport
   Security (ALTS).
@@ -58,3 +57,5 @@ code:
         context->auth_context(), {"foo@iam.gserviceaccount.com"});
     ```
 ---
+
+{{% docs/auth_alts %}}

content/en/docs/languages/cpp/api.md

@@ -1,6 +1,6 @@
 ---
 title: API reference
-short: API
+short_title: API
 weight: 90
 # Note: this is a placeholder page. The URL to this page redirects elsewhere.
 ---

content/en/docs/languages/cpp/async.md

@@ -1,6 +1,6 @@
 ---
 title: Asynchronous-API tutorial
-short: Async-API tutorial
+short_title: Async-API tutorial
 weight: 60
 spelling: cSpell:ignore classgrpc Impl's
 ---

content/en/docs/languages/cpp/basics.md

@@ -357,9 +357,9 @@ address and port we want to connect to - in our case we'll use no SSL:
 grpc::CreateChannel("localhost:50051", grpc::InsecureChannelCredentials());
 ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
 In order to set additional options for the *channel*, use the `grpc::CreateCustomChannel()` api with any special channel arguments - `grpc::ChannelArguments`.
-{{< /note >}}
+{{< /alert >}}
 
 Now we can use the channel to create our stub using the `NewStub` method provided in the `RouteGuide` class we generated from our .proto.
 

content/en/docs/languages/cpp/quickstart.md

@@ -141,12 +141,11 @@ the steps of the previous section.
     $ make -j
     ```
 
-    {{< note >}}
+    {{< alert title="Note" color="info" >}}
   **Getting build failures?** Most issues, at this point, are a result of a
   faulty installation. Ensure that the have the right versions of `cmake`, and
   carefully recheck your installation.
-    {{< /note >}}
-
+    {{< /alert >}}
 
 ### Try it!
 
@@ -342,13 +341,14 @@ from the example **build** directory `examples/cpp/helloworld/cmake/build`:
     Greeter received: Hello again world
     ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   Interested in an **asynchronous** version of the client and server?
   You'll find the `greeter_async_{client,server}.cc` files in the
   [example's source directory][src].
 
   [src]: https://github.com/grpc/grpc/tree/master/examples/cpp/helloworld
-{{< /note >}}
+
+{{< /alert >}}
 
 ### What's next
 

content/en/docs/languages/csharp/_index.md

@@ -2,7 +2,7 @@
 title: C#
 description: The original core-library implementation of gRPC for C#
 api_path: grpc/LANG/api/Grpc.Core
-layout: prog_lang_home
+prog_lang_home: true
 src_repo: https://github.com/grpc/grpc
 content:
   - learn_more:
@@ -15,4 +15,3 @@ content:
     - "[grpc repo]($src_repo_url)"
     - "[Daily builds](daily-builds)"
 ---
-

content/en/docs/languages/csharp/api.md

@@ -1,6 +1,6 @@
 ---
 title: API reference
-short: API
+short_title: API
 weight: 90
 # Note: this is a placeholder page. The URL to this page redirects elsewhere.
 ---

content/en/docs/languages/csharp/dotnet.md

@@ -13,10 +13,10 @@ The following pages cover the C# implementation of gRPC for .NET
 Several sample applications are available from the [examples][] folder in the
 [grpc-dotnet][] repository.
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   Looking for gRPC C# core-library documentation?
   See the [gRPC C# main page](..).
-{{< /note >}}
+{{< /alert >}}
 
 [examples]: https://github.com/grpc/grpc-dotnet/tree/master/examples
 [grpc-dotnet]: https://github.com/grpc/grpc-dotnet

content/en/docs/languages/csharp/quickstart.md

@@ -4,12 +4,13 @@ description: This guide gets you started with gRPC in C# with a simple working e
 weight: 10
 ---
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   This page uses the [gRPC C# core-library][core-library] implementation. For
   documentation covering gRPC for .NET, see [gRPC for .NET](../dotnet/).
 
   [core-library]: https://github.com/grpc/grpc/tree/master/src/csharp
-{{< /note >}}
+
+{{< /alert >}}
 
 ### Prerequisites
 
@@ -55,10 +56,10 @@ From the `examples/csharp/Helloworld` directory:
 > dotnet build Greeter.sln
 ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
 If you want to use gRPC C# from a project that uses the "classic" .csproj files (supported by Visual Studio 2013, 2015 and older versions of Mono), please refer to the
 [Greeter using "classic" .csproj](https://github.com/grpc/grpc/blob/{{< param grpc_vers.core >}}/examples/csharp/HelloworldLegacyCsproj/README.md) example.
-{{< /note >}}
+{{< /alert >}}
 
 ### Run a gRPC application
 

content/en/docs/languages/dart/_index.md

@@ -1,6 +1,7 @@
 ---
 title: Dart
-layout: prog_lang_home
+prog_lang_home: true
+notoc: true
 api_path: https://pub.dev/documentation/grpc
 content:
   - learn_more:

content/en/docs/languages/dart/api.md

@@ -1,6 +1,6 @@
 ---
 title: API reference
-short: API
+short_title: API
 weight: 90
 # Note: this is a placeholder page. The URL to this page redirects elsewhere.
 ---

content/en/docs/languages/dart/quickstart.md

@@ -31,9 +31,9 @@ spelling: cSpell:ignore Iprotos
       $ export PATH="$PATH:$HOME/.pub-cache/bin"
       ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   Dart gRPC supports the Flutter and Server platforms.
-{{< /note >}}
+{{< /alert >}}
 
 ### Get the example code
 

content/en/docs/languages/go/_index.md

@@ -1,6 +1,7 @@
 ---
 title: Go
-layout: prog_lang_home
+prog_lang_home: true
+notoc: true
 api_path: https://pkg.go.dev/google.golang.org/grpc
 content:
   - learn_more:

content/en/docs/languages/go/alts.md

@@ -1,7 +1,6 @@
 ---
 title: ALTS authentication in Go
-short: ALTS
-layout: auth_alts
+short_title: ALTS
 description: >
   An overview of gRPC authentication in Go using Application Layer Transport
   Security (ALTS).
@@ -50,3 +49,5 @@ code:
     err := alts.ClientAuthorizationCheck(ctx, []string{"foo@iam.gserviceaccount.com"})
     ```
 ---
+
+{{% docs/auth_alts %}}

content/en/docs/languages/go/api.md

@@ -1,6 +1,6 @@
 ---
 title: API reference
-short: API
+short_title: API
 weight: 90
 # Note: this is a placeholder page. The URL to this page redirects elsewhere.
 ---

content/en/docs/languages/go/basics.md

@@ -600,10 +600,10 @@ Got message Third message at point(0, 3)
 Got message Sixth message at point(0, 3)
 ```
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   We've omitted timestamps from the client and server trace output shown in this
   page.
-{{< /note >}}
+{{< /alert >}}
 
 [download]: https://github.com/grpc/grpc-go/archive/{{< param grpc_vers.go >}}.zip
 [grpc-go]: https://github.com/grpc/grpc-go

content/en/docs/languages/go/generated-code.md

@@ -1,6 +1,6 @@
 ---
 title: Go Generated-code reference
-short: Generated code
+short_title: Generated code
 weight: 95
 ---
 

content/en/docs/languages/java/_index.md

@@ -1,6 +1,7 @@
 ---
 title: Java
-layout: prog_lang_home
+prog_lang_home: true
+notoc: true
 spelling: cSpell:ignore javadoc Kanti Katirtzis Nikos Sharma Tomo Tuhin youtube Varun
 api_path: grpc-java/javadoc
 content:

content/en/docs/languages/java/alts.md

@@ -1,7 +1,6 @@
 ---
 title: ALTS authentication in Java
-short: ALTS
-layout: auth_alts
+short_title: ALTS
 description: >
   An overview of gRPC authentication in Java using Application Layer Transport
   Security (ALTS).
@@ -45,3 +44,5 @@ code:
         call, Lists.newArrayList("foo@iam.gserviceaccount.com"));
     ```
 ---
+
+{{% docs/auth_alts %}}

content/en/docs/languages/java/api.md

@@ -0,0 +1,6 @@
+---
+title: API reference
+short_title: API
+weight: 90
+# Note: this is a placeholder page. The URL to this page redirects elsewhere.
+---

content/en/docs/languages/java/generated-code.md

@@ -1,6 +1,6 @@
 ---
 title: Java generated-code reference
-short: Generated code
+short_title: Generated code
 weight: 95
 spelling: cSpell:ignore buildscript classpath grpcexample motd srcs xolstice
 ---
@@ -318,4 +318,4 @@ the command-line syntax is as follows:
 ```sh
 $ protoc --plugin=protoc-gen-grpc-java \
   --grpc-java_out="$OUTPUT_FILE" --proto_path="$DIR_OF_PROTO_FILE" "$PROTO_FILE"
-```
+```

content/en/docs/languages/java/quickstart.md

@@ -52,10 +52,10 @@ From the `examples` directory:
 
 Congratulations! You've just run a client-server application with gRPC.
 
-{{< note >}}
+{{< alert title="Note" color="info" >}}
   We've omitted timestamps from the client and server trace output shown in this
   page.
-{{< /note >}}
+{{< /alert >}}
 
 ### Update the gRPC service
 

content/en/docs/languages/kotlin/_index.md

@@ -1,6 +1,7 @@
 ---
 title: Kotlin/JVM
-layout: prog_lang_home
+prog_lang_home: true
+notoc: true
 language: Kotlin
 api_path: https://javadocs.dev/io.grpc/grpc-kotlin-stub/latest
 content:

content/en/docs/languages/kotlin/api.md

@@ -0,0 +1,6 @@
+---
+title: API reference
+short_title: API
+weight: 90
+# Note: this is a placeholder page. The URL to this page redirects elsewhere.
+---

content/en/docs/languages/node/_index.md

@@ -1,5 +1,6 @@
 ---
 title: Node
+notoc: true
 ---
 
 These language-specific pages are available:

content/en/docs/languages/node/api.md

@@ -0,0 +1,6 @@
+---
+title: API reference
+short_title: API
+weight: 90
+# Note: this is a placeholder page. The URL to this page redirects elsewhere.
+---