From f31fedf425dfe04dc4edcc7173976a86864b60da Mon Sep 17 00:00:00 2001
From: Patrice Chalin <chalin@users.noreply.github.com>
Date: Tue, 13 Oct 2020 17:41:07 -0400
Subject: [PATCH] Use render-heading to implement self links (#458)

Closes #443
---
 assets/sass/style.sass                       | 17 ++++++-----------
 layouts/_default/_markup/render-heading.html |  3 +++
 layouts/partials/content.html                |  6 +++---
 layouts/partials/docs/article.html           |  4 ++--
 layouts/partials/headline-hash.html          |  2 --
 layouts/partials/navbar-menu.html            |  9 ++++-----
 6 files changed, 18 insertions(+), 23 deletions(-)
 create mode 100644 layouts/_default/_markup/render-heading.html
 delete mode 100644 layouts/partials/headline-hash.html

diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index c97294a..bd5f573 100644
--- a/assets/sass/style.sass
+++ b/assets/sass/style.sass
@@ -297,19 +297,14 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white), "twitter-blue": ($tw
     & + li
       margin-top: 0.75rem
 
-.hashlink
-  @extend .icon
-  height: 1rem
-  width: 1rem
-  margin-left: 0.25rem
-
-.headline-hash
-  display: none
+.heading-self-link
+  @extend .is-hidden-desktop // On touch devices, always show self-link
+  margin-left: .3rem
 
 @for $i from 1 through 6
-  h#{$i}
-    &:hover > .headline-hash
-      display: inline
+  h#{$i}[id]
+    &:hover > .heading-self-link
+      display: initial !important
 
 // Currently (2020-05-29), the external-link character is used as an icon in the
 // top navbar. The "a >" prefix is used in the next rule only as a simple means
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..4cf404a
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,3 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+{{- .Text | safeHTML -}}
+<a aria-hidden="true" class="heading-self-link is-size-5-touch" href="#{{ .Anchor | safeURL }}"><i class="fas fa-hashtag"></i></a></h{{ .Level }}>
diff --git a/layouts/partials/content.html b/layouts/partials/content.html
index 600daed..bf067c6 100644
--- a/layouts/partials/content.html
+++ b/layouts/partials/content.html
@@ -1,5 +1,5 @@
-{{ $size        := .size | default "normal" }}
-{{ $constrained := .constrained | default false }}
+{{ $size        := .size | default "normal" -}}
+{{ $constrained := .constrained | default false -}}
 <div class="content is-{{ $size }} has-bottom-padding{{ if $constrained }} is-constrained{{ end }}">
-  {{ partial "headline-hash.html" .content }}
+  {{ .content }}
 </div>
\ No newline at end of file
diff --git a/layouts/partials/docs/article.html b/layouts/partials/docs/article.html
index 0200ca9..dc524ed 100644
--- a/layouts/partials/docs/article.html
+++ b/layouts/partials/docs/article.html
@@ -1,5 +1,5 @@
-{{ $desc   := .Params.description }}
-{{ $source := printf "https://github.com/grpc/grpc.io/tree/%s/content/%s" $.Site.Params.branch .File.Path }}
+{{ $desc   := .Params.description -}}
+{{ $source := printf "https://github.com/grpc/grpc.io/tree/%s/content/%s" $.Site.Params.branch .File.Path -}}
 <section class="section">
   <div class="container">
     <div class="columns is-variable is-8">
diff --git a/layouts/partials/headline-hash.html b/layouts/partials/headline-hash.html
deleted file mode 100644
index cad0639..0000000
--- a/layouts/partials/headline-hash.html
+++ /dev/null
@@ -1,2 +0,0 @@
-{{ . | replaceRE "(<h[2-9] id=\"([^\"]+)\".+)(</h[2-9]+>)" `${1} <a class="headline-hash" href="#${2}">
-  <span class="icon hashlink"><i class="fas fa-hashtag"></i></span></a>${3}` | safeHTML }}
\ No newline at end of file
diff --git a/layouts/partials/navbar-menu.html b/layouts/partials/navbar-menu.html
index df31f47..5f9d018 100644
--- a/layouts/partials/navbar-menu.html
+++ b/layouts/partials/navbar-menu.html
@@ -1,6 +1,6 @@
 {{ $menu  := site.Menus.main -}}
 
-{{ range $menu -}}
+{{ range $menu }}
 {{ $name := .Name -}}
 {{ if .HasChildren -}}
 {{ $url := .URL | relLangURL -}}
@@ -11,9 +11,8 @@
       <i class="fas fa-caret-down"></i>
     </span>
   </a>
-
   <div class="navbar-dropdown">
-    {{ range .Children -}}
+    {{- range .Children }}
     {{ $name       := .Name -}}
     {{ $url        := .URL -}}
     {{ $isExternal := hasPrefix .URL "http" -}}
@@ -25,7 +24,7 @@
       <span class="icon has-text-secondary">
         <i class="fas fa-sm fa-external-link-alt"></i>
       </span>
-      {{- end }}
+      {{- end -}}
     </a>
     {{- end }}
   </div>
@@ -42,7 +41,7 @@
   <span class="icon has-text-secondary">
     <i class="fas fa-xs fa-external-link-alt"></i>
   </span>
-  {{- end }}
+  {{- end -}}
 </a>
 {{- end }}
 {{- end -}}