Site improvements. (#5932)

- The section names in the header (Docs, Blog, etc) used to not be clickable
if you were on any page in the section. Now, they are clickable so that you can
use them to go back to the top of the section.

- Remove unsightly jitter of the section names in the header whenever the
"new content" dots where drawn. The header text is now rock solid as it normally is.

- Have the "new content" pills and dots fade it. There's necessarily a delay before
they get displayed, so instead of just popping them in which looks a big ugly, they
now gently fade in, as if the delay was intentional :-)

- Fix misuse of the JavaScript object model which would lead to script crashes in
certain cases.

layouts/partials/header.html

@@ -1,8 +1,6 @@
 {{ $home := .Site.GetPage "home" }}
 {{ $section := .Section }}
-{{ $posts := (where .Site.Pages "Section" "blog").ByPublishDate.Reverse }}
-{{ $latest_post := index $posts 0 }}
-{{ $blog_home := .Site.GetPage "section" "blog" }}
+{{ $current := . }}
 
 <header>
     <nav >
@@ -27,42 +25,46 @@
         <div id="header-links">
             {{ if not .Site.Data.args.archive_landing }}
                 {{ with (.Site.GetPage "section" "docs") }}
-                    {{ if eq $section "docs" }}
-                        <span title="{{ .Description }}">{{ .LinkTitle }}</span>
+                    {{ if eq .Permalink $current.Permalink }}
+                        <span {{ if eq $section "docs" }}class="current" {{ end }}title="{{ .Description }}">{{ .LinkTitle }}</span>
                     {{ else }}
-                        <a title="{{ .Description }}" href="{{ .Permalink  }}">{{ .LinkTitle }}</a>
+                        <a {{ if eq $section "docs" }}class="current" {{ end }}title="{{ .Description }}" href="{{ .Permalink  }}">{{ .LinkTitle }}</a>
                     {{ end }}
                 {{ end }}
 
-                {{ with $latest_post }}
-                    {{ if eq $section "blog" }}
-                        <span title="{{ $blog_home.Description }}">{{ $blog_home.LinkTitle }}<i class="dot" data-prefix="/blog"></i></span>
+                {{ with (.Site.GetPage "section" "blog") }}
+                    {{ $posts := (where .Site.Pages "Section" "blog").ByPublishDate.Reverse }}
+                    {{ $latest_post := index $posts 0 }}
+                    {{ $link := printf "%v%v/" .Permalink $latest_post.PublishDate.Year }}
+
+                    {{ if eq $link $current.Permalink }}
+                        <span {{ if eq $section "blog" }}class="current" {{ end }}title="{{ .Description }}">{{ .LinkTitle }}<i class="dot" data-prefix="/blog"></i></span>
                     {{ else }}
-                        <a title="{{ $blog_home.Description }}" href="{{ $blog_home.Permalink }}/{{ $latest_post.PublishDate.Year }}">{{ $blog_home.LinkTitle }}<i class="dot" data-prefix="/blog"></i></a>
+                        <a {{ if eq $section "blog" }}class="current" {{ end }}title="{{ .Description }}" href="{{ $link }}">{{ .LinkTitle }}<i class="dot" data-prefix="/blog"></i></a>
                     {{ end }}
                 {{ end }}
 
                 {{ with (.Site.GetPage "section" "news")  }}
-                    {{ if eq $section "news" }}
-                        <span title="{{ .Description }}">{{ .LinkTitle }}<i class="dot" data-prefix="/news"></i></span>
+                    {{ if eq .Permalink $current.Permalink }}
+                        <span {{ if eq $section "news" }}class="current" {{ end }}title="{{ .Description }}">{{ .LinkTitle }}<i class="dot" data-prefix="/news"></i></span>
                     {{ else }}
-                        <a title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle }}<i class="dot" data-prefix="/news"></i></a>
+                        <a {{ if eq $section "news" }}class="current" {{ end }}title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle }}<i class="dot" data-prefix="/news"></i></a>
                     {{ end }}
                 {{ end }}
 
                 {{ with (.Site.GetPage "section" "faq") }}
-                    {{ if eq $section "faq" }}
-                        <span title="{{ .Description }}">{{ .LinkTitle }}</span>
+                    {{ if eq .Permalink $current.Permalink }}
+                        <span {{ if eq $section "faq" }}class="current" {{ end }}title="{{ .Description }}">{{ .LinkTitle }}</span>
                     {{ else }}
-                        <a title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
+                        <a {{ if eq $section "faq" }}class="current" {{ end }}title="{{ .Description }}" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
                     {{ end }}
                 {{ end }}
 
                 {{ with (.Site.GetPage "section" "about") }}
-                    {{ if eq $section "about" }}
-                        <span title="{{ .Description }}">{{ .LinkTitle }}</span>
+                    {{ if eq .Permalink $current.Permalink }}
+                        <span {{ if eq $section "about" }}class="current" {{ end }}title="{{ .Description }}">{{ .LinkTitle }}</span>
                     {{ else }}
-                        <a title="{{ .Description }}" href="{{ .Permalink  }}">{{ .LinkTitle }}</a>
+                        <a {{ if eq $section "about" }}class="current" {{ end }}title="{{ .Description }}" href="{{ .Permalink  }}">{{ .LinkTitle }}</a>
                     {{ end }}
                 {{ end }}
             {{ end }}

src/sass/misc/_header.scss

@@ -181,11 +181,9 @@ header {
             transition: right .5s;
         }
 
-        span {
+        .current {
             border-bottom: solid 3px $textBrandColor;
             border-radius: 2px;
-            color: $textBrandColor;
-            cursor: default;
             font-weight: $linkWeight;
             font-family: "Chivo", sans-serif;
             font-size: 1.1em;
@@ -198,6 +196,11 @@ header {
                 margin-right: .58rem;
             }
         }
+
+        span.current {
+            cursor: default;
+            color: $textBrandColor;
+        }
     }
 
     #search-show {

src/sass/misc/_read-tracking.scss

@@ -1,8 +1,4 @@
 .dot {
-    display: none;
-}
-
-.dot.visible {
     @media screen {
         display: inline-block;
         width: 6px;
@@ -11,14 +7,20 @@
         border-radius: 50%;
         background: $pillBackgroundColor;
         color: $pillTextColor;
+        visibility: hidden;
+        opacity: 0;
+    }
+}
+
+.dot.visible {
+    @media screen {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity .4s ease-in-out;
     }
 }
 
 .pill {
-    display: none;
-}
-
-.pill.visible {
     @media screen {
         display: inline-block;
         position: relative;
@@ -30,6 +32,16 @@
         border-radius: 50%;
         background: $pillBackgroundColor;
         color: $pillTextColor;
+        visibility: hidden;
+        opacity: 0;
+    }
+}
+
+.pill.visible {
+    @media screen {
+        visibility: visible;
+        opacity: 1;
+        transition: opacity .4s ease-in-out;
     }
 }
 

src/ts/readTracking.ts

@@ -137,7 +137,7 @@ function handleReadTracking(): void {
                 let dirty = false;
                 if (visitedPages === null) {
                     // if we didn't find any list of visited pages, initialize it to the set of tracked pages
-                    visitedPages = new Map();
+                    visitedPages = {};
 
                     for (const trackedPage in trackedPages) {
                         if (trackedPages.hasOwnProperty(trackedPage)) {
@@ -150,7 +150,7 @@ function handleReadTracking(): void {
                     for (const visitedPage in visitedPages) {
                         if (visitedPages.hasOwnProperty(visitedPage)) {
                             if (trackedPages[visitedPage] === undefined) {
-                                visitedPages.delete(visitedPage);
+                                delete visitedPages[visitedPage];
                                 dirty = true;
                             }
                         }