Address fixes and add meta (GitHub) links to pages (#578)

* Fixup to make comment consistent with others * Replace missing FA icon with equivalent * Render SVGs with Markdown and restore alt text to an image * Give used-by user logos equal padding * Fix border radius on search inputs * Add meta links to all pages * Fix overflow issue from covering link's content box * Fix spacing issue on icon links in production
grpc · Dec 19, 2020 · c00e9fc · c00e9fc
1 parent 8e4f008
commit c00e9fc
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 22 deletions.
diff --git a/assets/scss/_grpc.scss b/assets/scss/_grpc.scss
@@ -36,6 +36,12 @@ sections site wide to the original site's background svg.
   display: none;
 }
 
+// This adds rounded corners to the search inputs, since a Docsy
+// flag affecting these and other elements has been disabled.
+.td-search-input {
+  border-radius: 1rem;
+}
+
 // DOCS
 
 // Extend the sidebar to the end of the visible page.
@@ -142,6 +148,7 @@ c - Component (Aware of its content/context...)
 .l-constrained-width-content {
   margin-left: auto;
   margin-right: auto;
+  padding-bottom: 1rem;
   max-width: 1140px;
 }
 
@@ -182,6 +189,10 @@ c - Component (Aware of its content/context...)
   }
 }
 
+.o-icon {
+  margin-right: 0.25rem;
+}
+
 .o-logo {
   width: 80%;
 }
@@ -279,6 +290,22 @@ c - Component (Aware of its content/context...)
   justify-content: center;
 }
 
+.c-global-meta-links {
+  margin-top: 1rem;
+  padding-top: 1rem;
+
+  .td-page-meta {
+    display: flex;
+    justify-content: space-between;
+    margin-left: 0 !important;
+    text-align: center;
+
+    & a i {
+      display: none;
+    }
+  }
+}
+
 .c-used-by__users {
   display: flex;
   flex-direction: column;
@@ -289,6 +316,7 @@ c - Component (Aware of its content/context...)
 .c-used-by__user {
   margin-left: auto;
   margin-right: auto;
+  padding-left: 1.5rem;
   padding-right: 1.5rem;
   padding-bottom: 3rem;
 }
@@ -326,6 +354,12 @@ c - Component (Aware of its content/context...)
     }
   }
 
+  .c-global-meta-links {
+    & .td-page-meta a i {
+      display: inline-block;
+    }
+  }
+
   .c-used-by__users {
     flex-direction: row;
     justify-content: between;
@@ -335,3 +369,15 @@ c - Component (Aware of its content/context...)
     padding-bottom: 1.5rem;
   }
 }
+
+@include media-breakpoint-up(lg) {
+  .c-global-meta-links {
+    max-width: 80%;
+  }
+}
+
+@include media-breakpoint-up(xl) {
+  .c-global-meta-links {
+    display: none;
+  }
+}
diff --git a/content/en/about/_index.md b/content/en/about/_index.md
@@ -8,10 +8,12 @@ description: Who is using gRPC and why
 {{< /blocks/cover >}}
 
 <div class="container l-container--padded">
-<div class="row">
 
+<div class="row">
 {{< page/toc collapsed=true placement="inline" >}}
+</div>
 
+<div class="row">
 <div class="col-12 col-lg-8">
 
 gRPC is a modern open source high performance RPC framework that can run in any
@@ -70,4 +72,7 @@ See [Official support](/docs/#official-support).
 {{< page/toc placement="sidebar" >}}
 
 </div>
+
+{{< page/page-meta-links >}}
+
 </div>
diff --git a/content/en/blog/grpc-on-dotnetcore.md b/content/en/blog/grpc-on-dotnetcore.md
@@ -41,19 +41,19 @@ The implementations coexist side-by-side and each has its own advantages in term
 
 Unlike the existing C-Core based implementation ([Grpc.Core](https://github.com/grpc/grpc/tree/master/src/csharp)), the new libraries ([grpc-dotnet](https://github.com/grpc/grpc-dotnet)) make use of the existing networking primitives in the .NET Core Base Class Libraries (BCL). The diagram below highlights the difference between the existing **Grpc.Core** library and the new **grpc-dotnet** libraries.
 
-<p><img src="/img/grpc-dotnet.svg" alt="gRPC .NET Stack" /></p>
+![gRPC .NET Stack](/img/grpc-dotnet.svg)
 
 On the server side, the `Grpc.AspNetCore.Server` package integrates into ASP.NET Core, allowing developers to benefit from ecosystem of common cross-cutting concerns of logging, configuration, dependency injection, authentication, authorization etc. which have already been solved by ASP.NET Core. Popular libraries in the ASP.NET ecosystem such as [Entity Framework Core (ORM)](https://github.com/aspnet/EntityFrameworkCore), [Serilog (Logging library)](https://github.com/serilog/serilog), and [Identity Server](https://github.com/IdentityServer/IdentityServer4) among others now work seamlessly with gRPC.
 
 On the client side, the `Grpc.Net.Client` package builds upon the familiar `HttpClient` API that ships as part of .NET Core. As with the server, gRPC clients greatly benefit from the ecosystem of packages that build upon `HttpClient`. It is now possible to use existing packages such as [**Polly**(Resilience and fault-handling library)](https://github.com/App-vNext/Polly) and [HttpClientFactory(manage HTTPClient lifetimes)](https://docs.microsoft.com/aspnet/core/fundamentals/http-requests) with gRPC clients.
 
 The diagram below captures the exhaustive list of all new .NET packages for gRPC and their relationship with the existing packages.
 
-<p><img src="/img/grpc-dotnet-packages.svg" alt="grpc-dotnet packages" /></p>
+![grpc-dotnet packages](/img/grpc-dotnet-packages.svg)
 
 In addition to the newly published packages that ship as part of **grpc-dotnet**, we've also made improvements that benefit both stacks. Visual Studio 2019 ships with language grammar support for protobuf files and automatic generation of gRPC server/client code upon saving a protobuf file without requiring full project rebuilds due to design-time builds.
 
-<p><img src="/img/grpc-visualstudio.png" alt="gRPC in Visual Studio 2019" /></p>
+![gRPC in Visual Studio 2019](/img/grpc-visualstudio.png)
 
 ## Feedback
 

diff --git a/content/en/blog/state-of-grpc-web.md b/content/en/blog/state-of-grpc-web.md
@@ -56,7 +56,7 @@ The basic idea is to have the browser send normal HTTP requests (with Fetch or
 XHR) and have a small proxy in front of the gRPC server to translate the
 requests and responses to something the browser can use.
 
-![](/img/grpc-web-proxy.png)
+![The role of the gRPC-Web proxy](/img/grpc-web-proxy.png)
 
 # The Two Implementations
 

diff --git a/content/en/community/_index.md b/content/en/community/_index.md
@@ -7,10 +7,12 @@ title: Community
 {{< /blocks/cover >}}
 
 <div class="container l-container--padded">
-<div class="row">
 
+<div class="row">
 {{< page/toc collapsed=true placement="inline" >}}
+</div>
 
+<div class="row">
 <div class="col-12 col-lg-8">
 <div>
 
@@ -61,4 +63,7 @@ We hold a community video conference every other week. It's a way to discuss the
 {{< page/toc placement="sidebar" >}}
 
 </div>
+
+{{< page/page-meta-links >}}
+
 </div>
diff --git a/content/en/docs/languages/go/_index.md b/content/en/docs/languages/go/_index.md
@@ -25,8 +25,8 @@ spelling: cSpell:ignore Isberner Klerk Malte youtube
 - **[Stubbing gRPC in Go](https://jadekler.github.io/2020/10/08/stubbing-grpc.html)**,
   by [Jean de Klerk](https://github.com/jadekler), Google. October 8, 2020.
 - **Talking to Go gRPC Services Via HTTP/1**
-  <a class="icon" href="https://youtu.be/Vbw8h0RCn2E"><i class="fab fa-youtube"></i></a>
-  <a class="icon" href="https://static.sched.com/hosted_files/grpcconf20/c9/TalkingToGoGRPCviaHTTP1-gRPCConf2020-MalteIsberner.pdf"><i class="far fa-file"></i></a><br>
+  <a class="o-icon" href="https://youtu.be/Vbw8h0RCn2E"><i class="fab fa-youtube"></i></a>
+  <a class="o-icon" href="https://static.sched.com/hosted_files/grpcconf20/c9/TalkingToGoGRPCviaHTTP1-gRPCConf2020-MalteIsberner.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfW)
   by Malte Isberner, StackRox.
 

diff --git a/content/en/docs/languages/java/_index.md b/content/en/docs/languages/java/_index.md
@@ -28,14 +28,14 @@ content:
   by Nikos Katirtzis, Software Engineer, [Hotels.com][],
   <span title="2020-03-05">March 2020</span>.
 - Service Interoperability With gRPC: gRPC in Action
-  <a class="icon" href="https://youtu.be/MLS7TFHrn_c"><i class="fab fa-youtube"></i>
-  </a><a class="icon" href="https://static.sched.com/hosted_files/grpcconf20/d3/Service%20Interoperability%20with%20gRPC.pdf"><i class="far fa-file"></i></a><br>
+  <a class="o-icon" href="https://youtu.be/MLS7TFHrn_c"><i class="fab fa-youtube"></i>
+  </a><a class="o-icon" href="https://static.sched.com/hosted_files/grpcconf20/d3/Service%20Interoperability%20with%20gRPC.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfl)
   by Varun Gupta & Tuhin Kanti Sharma, Salesforce.
 - gRPC and Java Diamond Dependency Conflicts
-  <a class="icon" href="https://youtu.be/4M5fC9XrtKs">
+  <a class="o-icon" href="https://youtu.be/4M5fC9XrtKs">
     <i class="fab fa-youtube"></i>
-  </a><a class="icon" href="https://static.sched.com/hosted_files/grpcconf20/7a/gRPC%20and%20Java%20Diamond%20Dependency%20Conflicts.pdf"><i class="far fa-file"></i></a><br>
+  </a><a class="o-icon" href="https://static.sched.com/hosted_files/grpcconf20/7a/gRPC%20and%20Java%20Diamond%20Dependency%20Conflicts.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfT)
   by Tomo Suzuki, Google.
 

diff --git a/content/en/docs/languages/kotlin/_index.md b/content/en/docs/languages/kotlin/_index.md
@@ -20,7 +20,7 @@ spelling: cSpell:ignore Ferrer youtube
 ### Developer stories and talks {#dev-stories}
 
 - **Next Level gRPC With Kotlin and Coroutines**
-  <a class="icon" href="https://youtu.be/SfmdAA2kwWI"><i class="fab fa-youtube"></i></a>
-  <a class="icon" href="https://static.sched.com/hosted_files/grpcconf20/e6/grpc-session.pdf"><i class="far fa-file"></i></a><br>
+  <a class="o-icon" href="https://youtu.be/SfmdAA2kwWI"><i class="fab fa-youtube"></i></a>
+  <a class="o-icon" href="https://static.sched.com/hosted_files/grpcconf20/e6/grpc-session.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfc)
   by Marco Ferrer, OfferUp.
diff --git a/content/en/showcase/_index.md b/content/en/showcase/_index.md
@@ -10,13 +10,18 @@ spelling: cSpell:ignore youtube Kubernetes Nulab Protop
 {{< /blocks/cover >}}
 
 <div class="container l-container--padded">
-<div class="row">
 
+<div class="row">
 {{< page/toc collapsed=true placement="inline" >}}
+</div>
 
+<div class="row">
 <div class="col-12 col-lg-8">
 
+<div class="row">
+
 ## Customer success stories
+</div>
 
 Here are a few of the customers who [successfully adopted **gRPC**][use-of-grpc]
 and other [CNCF technologies](https://www.cncf.io/projects/) in the past year
@@ -120,18 +125,18 @@ Other developer stories are provided next.
 - [**How GIPHY’s Public API Integrates with gRPC Services**](https://engineering.giphy.com/how-giphys-public-api-integrates-with-grpc-services/)<br>
   by Serhii Kushch. August 13, 2020.
 - **A Simplified Service Mesh With gRPC**
-  <a href="https://youtu.be/9alMEeTxsMA"><i class="fab fa-youtube"></i></a>
+  <a class="o-icon" href="https://youtu.be/9alMEeTxsMA"><i class="fab fa-youtube"></i></a>
   <a href="https://static.sched.com/hosted_files/grpcconf20/ae/A%20Simplified%20Service%20Mesh%20with%20gRPC.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfZ)
   by Srini Polavarapu, Engineering Manager, Google
 - **Protop: A Package Manager for gRPC and Protocol Buffers**
-  <a href="https://youtu.be/9alMEeTxsMA"><i class="fab fa-youtube"></i></a>
+  <a class="o-icon" href="https://youtu.be/9alMEeTxsMA"><i class="fab fa-youtube"></i></a>
   <a href="https://static.sched.com/hosted_files/grpcconf20/6b/protop%20-%20a%20package%20manager%20for%20protobufs.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfo)
   by Jeffery Shivers, Toast, Inc
 - **Service Interoperability With gRPC: gRPC in Action**
-  <a href="https://youtu.be/MLS7TFHrn_c"><i class="fab fa-youtube"></i></a>
-  <a href="https://static.sched.com/hosted_files/grpcconf20/d3/Service%20Interoperability%20with%20gRPC.pdf"><i class="fas fa-file"></i></a><br>
+  <a class="o-icon" href="https://youtu.be/MLS7TFHrn_c"><i class="fab fa-youtube"></i></a>
+  <a class="o-icon" href="https://static.sched.com/hosted_files/grpcconf20/d3/Service%20Interoperability%20with%20gRPC.pdf"><i class="fas fa-file"></i></a><br>
   A [gRPC Conf 2020 presentation](https://sched.co/cRfl)
   by Varun Gupta & Tuhin Kanti Sharma, Salesforce.
 
@@ -146,6 +151,9 @@ Other developer stories are provided next.
 {{< page/toc placement="sidebar" >}}
 
 </div>
+
+{{< page/page-meta-links >}}
+
 </div>
 
 [CNCF case studies]: https://www.cncf.io/case-studies/

diff --git a/layouts/404.html b/layouts/404.html
@@ -1,4 +1,4 @@
-{{/* This file is in place as an override to the Docsy theme */}}
+{{/* This file is in place as an override to Docsy */}}
 
 {{/* cSpell:ignore URL's */}}
 {{ define "title" -}}

diff --git a/layouts/blog/content.html b/layouts/blog/content.html
@@ -54,4 +54,7 @@ <h1>{{ .Title }}</h1>
 	{{ end }}
 
 	{{ partial "pager.html" . }}
+	<div class="c-global-meta-links">
+		{{ partial "page-meta-links" .}}
+	</div>
 </div>
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
@@ -23,5 +23,8 @@ <h1>{{ .Title }}</h1>
 			{{ partial "disqus-comment.html" . }}
 		{{ end }}
 		<div class="text-muted mt-5 pt-3 border-top">{{ partial "page-meta-lastmod.html" . }}</div>
+		<div class="c-global-meta-links">
+			{{ partial "page-meta-links" .}}
+		</div>
 	</div>
 {{ end }}
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
@@ -7,4 +7,7 @@ <h1 class="mb-4 font-weight-bold">{{ .Title }}</h1>
   {{ partial "docs/toc-inline.html" . }}
 </div>
 {{ .Render "content" }}
+<div class="c-global-meta-links">
+  {{ partial "page-meta-links" .}}
+</div>
 {{ end }}
diff --git a/layouts/shortcodes/page/page-meta-links.html b/layouts/shortcodes/page/page-meta-links.html
@@ -0,0 +1,3 @@
+<div class="c-global-meta-links d-lg-none">
+  {{ partial "page-meta-links" .Page }}
+</div>
diff --git a/layouts/shortcodes/page/toc.html b/layouts/shortcodes/page/toc.html
@@ -10,11 +10,11 @@
       <div class="td-toc td-toc--inline">
   {{ end }}
       {{ if $collapsed }}
-        <a id="td-content__toc-link" class="d-inline-flex collapsed" href="#toc--expand" data-toggle="collapse" aria-controls="td-page-toc" aria-expanded="false" aria-label="Toggle toc navigation">
+        <a id="td-content__toc-link" class="d-inline-flex collapsed" href="#toc-contents" data-toggle="collapse" aria-controls="td-page-toc" aria-expanded="false" aria-label="Toggle toc navigation">
             <h5 class="lead"><i class="fas fa-list mr-2"></i>Page Contents</h5>
             <span><i class="fas fa-chevron-up ml-2"></i></span>
         </a>
-        <div id="toc--expand" class="collapse">
+        <div id="toc-contents" class="collapse">
           {{ . }}
         </div>
       {{ else }}