Revise table of contents for docs layout and top navbar

- Add title to Table of Contents (add `on_this_page` i18n)
- Add back to top link in Table of Contents (add `back_to_top` i18n)
- Enable custom HTML in Table of Contents
  (create `layouts/partials/docs_toc_foot.html`)
- Revised alert shortcode style
- Enable icons as menu items in main navbar (use HTML in `Name` field)
- Enable `[[menu.main_right]]` options for having both left and right
  aligned main menu links

i18n/en.yaml

@@ -6,6 +6,12 @@
 - id: table_of_contents
   translation: Table of Contents
 
+- id: on_this_page
+  translation: On this page
+
+- id: back_to_top
+  translation: Back to top
+
 # General
 
 - id: related

layouts/partials/css/academic.css

@@ -1434,11 +1434,6 @@ table > tbody > tr:hover > th {
  *  Alerts
  **************************************************/
 
-div.alert {
-  border-radius: 10px;
-  margin-bottom: 1rem;
-}
-
 div.alert p {
   position: relative;
   display: block;
@@ -1453,7 +1448,7 @@ div.alert p:first-child::before {
   top: -0.5rem;
   left: -2rem;
   font-size: 1.5rem;
-  color: #fff;
+  color: #209cee;
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
   content: '\f05a';
@@ -1464,34 +1459,28 @@ div.alert p:first-child::before {
 div.alert-warning p:first-child::before {
   font-family: 'Font Awesome 5 Free';
   font-weight: 900;
+  color: #ff3860;
   content: '\f071';
 }
 
 div.alert a {
-  color: rgba(255,255,255,0.9);
+  color: currentColor;
   text-decoration: none;
-  border-bottom: solid 1px #e4e4e4;
-  transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out;
-}
-
-div.alert a:hover {
-  border-bottom-color: transparent;
-  color: rgba(255,255,255,0.5) !important;
+  border-bottom: solid 1px currentColor;
 }
 
 .alert-note {
-  color: #fff;
-  background-color: #03A9F4; /* Material LightBlue500 */
-  border-color: #bce8f1;
+  color: #12537e;
+  background-color: #f6fbfe;
+  border-color: #209cee;
 }
 
 .alert-warning {
-  color: #fff;
-  background-color: #f44336; /* Material Red500 */
-  border-color: #ebccd1;
+  color: #cd0930;
+  background-color: #fff5f7;
+  border-color: #ff3860;
 }
 
-
 /*************************************************
  *  Documentation layout
  **************************************************/
@@ -1673,13 +1662,22 @@ div.alert a:hover {
 
 /* Docs TOC nav. */
 
+.docs-toc-title {
+  color: #b5b5b5;
+  font-size: .875rem;
+  font-weight: 600;
+  padding-left: calc(1.5rem + 1px);
+  margin-bottom: .5rem;
+}
+
 #TableOfContents {
   padding-left: 0;
   border-left: 1px solid #eee;
 }
 
-#TableOfContents ul {
-  padding-left: 1rem;
+#TableOfContents ul,
+ul.toc-top {
+  padding-left: 0;
 }
 
 #TableOfContents ul ul {
@@ -1690,13 +1688,16 @@ div.alert a:hover {
   display: block;
 }
 
-#TableOfContents li a {
+#TableOfContents li a,
+.toc-top li a {
   display: block;
   padding: .125rem 1.5rem;
   color: #99979c;
+  font-size: 0.7rem;
 }
 
-#TableOfContents li a:hover {
+#TableOfContents li a:hover,
+.toc-top li a:hover {
   color: {{ .Get "primary" }};
   text-decoration: none;
 }

layouts/partials/docs_layout.html

@@ -10,7 +10,17 @@
 
     {{ if .Params.toc }}
     <div class="d-none d-xl-block col-xl-2 docs-toc">
+      {{ with (i18n "on_this_page") }}
+      <p class="docs-toc-title">{{.}}</p>
+      {{ end }}
+
       {{ .TableOfContents }}
+
+      <ul class="nav toc-top">
+        <li><a href="#">{{ i18n "back_to_top" | default "Back to top" }}</a></li>
+      </ul>
+
+      {{ partial "docs_toc_foot.html" . }}
     </div>
     {{ end }}
 

layouts/partials/header.html

@@ -142,4 +142,4 @@
   <title>{{ if not .IsHome }}{{ .Title }} | {{ end }}{{ .Site.Title }}</title>
 
 </head>
-<body id="top" data-spy="scroll" data-target="{{ if or .IsHome .Params.widgets }}#navbar-main{{ else }}#toc{{ end }}" data-offset="71" {{ if not ($scr.Get "light") }}class="dark"{{ end }}>
+<body id="top" data-spy="scroll" data-target="{{ if or .IsHome .Params.widgets }}#navbar-main{{ else }}#TableOfContents{{ end }}" data-offset="71" {{ if not ($scr.Get "light") }}class="dark"{{ end }}>

layouts/partials/navbar.html

@@ -28,7 +28,7 @@
         <li class="nav-item dropdown">
           <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
             {{ .Pre }}
-            <span>{{ .Name }}</span>
+            <span>{{ .Name | safeHTML }}</span>
             {{ .Post }}
             <span class="caret"></span>
           </a>
@@ -37,7 +37,7 @@
             <li class="dropdown-item my-0 py-0 mx-0 px-0">
               <a href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}>
                 {{ .Pre }}
-                <span>{{ .Name }}</span>
+                <span>{{ .Name | safeHTML }}</span>
                 {{ .Post }}
               </a>
             </li>
@@ -58,21 +58,40 @@
         <li class="nav-item">
           <a class="nav-link" href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
             {{ .Pre }}
-            <span>{{ .Name }}</span>
+            <span>{{ .Name | safeHTML }}</span>
             {{ .Post }}
           </a>
         </li>
 
         {{ end }}
         {{ end }}
-      {{ if and .IsTranslated (not $align_right) }}
-      </ul>
-      {{ end }}
 
-      {{ if .IsTranslated }}
-      {{ if not $align_right }}
+      {{ if and (not $align_right) (or .IsTranslated .Site.Menus.main_right) }}
+      </ul>
       <ul class="navbar-nav ml-auto">
       {{ end }}
+
+        {{ range .Site.Menus.main_right }}
+
+        {{/* Set target for link. */}}
+        {{ $.Scratch.Set "target" "" }}
+        {{ if gt (len .URL) 4 }}
+        {{ if eq "http" (slicestr .URL 0 4) }}
+        {{ $.Scratch.Set "target" " target=\"_blank\" rel=\"noopener\"" }}
+        {{ end }}
+        {{ end }}
+
+        <li class="nav-item">
+          <a class="nav-link" href="{{ .URL | relLangURL }}"{{ if $.IsHome }} data-target="{{ .URL }}"{{ end }}{{ ($.Scratch.Get "target") | safeHTMLAttr }}>
+          {{ .Pre }}
+          <span>{{ .Name | safeHTML }}</span>
+          {{ .Post }}
+          </a>
+        </li>
+
+        {{ end }}
+
+        {{ if .IsTranslated }}
         <li class="nav-item dropdown">
           <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true">
             <i class="fas fa-globe" aria-hidden="true"></i>