Use render-heading to implement self links (#458)

Closes #443

assets/sass/style.sass

@@ -297,19 +297,14 @@ $colors: mergeColorMaps(("secondary": ($secondary, $white), "twitter-blue": ($tw
     & + li
       margin-top: 0.75rem
 
-.hashlink
+.heading-self-link
-  @extend .icon
+  @extend .is-hidden-desktop // On touch devices, always show self-link
-  height: 1rem
+  margin-left: .3rem
-  width: 1rem
-  margin-left: 0.25rem
-
-.headline-hash
-  display: none
 
 @for $i from 1 through 6
-  h#{$i}
+  h#{$i}[id]
-    &:hover > .headline-hash
+    &:hover > .heading-self-link
-      display: inline
+      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

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 }}>

layouts/partials/content.html

@@ -1,5 +1,5 @@
-{{ $size        := .size | default "normal" }}
+{{ $size        := .size | default "normal" -}}
-{{ $constrained := .constrained | default false }}
+{{ $constrained := .constrained | default false -}}
 <div class="content is-{{ $size }} has-bottom-padding{{ if $constrained }} is-constrained{{ end }}">
-  {{ partial "headline-hash.html" .content }}
+  {{ .content }}
 </div>

layouts/partials/docs/article.html

@@ -1,5 +1,5 @@
-{{ $desc   := .Params.description }}
+{{ $desc   := .Params.description -}}
-{{ $source := printf "https://github.com/grpc/grpc.io/tree/%s/content/%s" $.Site.Params.branch .File.Path }}
+{{ $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">

layouts/partials/headline-hash.html

@@ -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 }}

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 -}}