[#9] Update table of contents function

Add opportunity to override default page title

Signed-off-by: Dmitriy Rychkov <d.rychkov@yadro.com>

assets/css/style.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: normal;
+  src: url(../fonts/WorkSans-Regular.eot);
+  src: url(../fonts/WorkSans-Regular.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Regular.woff) format("woff"), url(../fonts/WorkSans-Regular.ttf) format("truetype"), url(../fonts/WorkSans-Regular.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: bold;
+  src: url(../fonts/WorkSans-Bold.eot);
+  src: url(../fonts/WorkSans-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-Bold.woff) format("woff"), url(../fonts/WorkSans-Bold.ttf) format("truetype"), url(../fonts/WorkSans-Bold.svg) format("svg")
+}
+
+@font-face {
+  font-family: "WorkSans";
+  font-style: normal;
+  font-weight: 700;
+  src: url(../fonts/WorkSans-SemiBold.eot);
+  src: url(../fonts/WorkSans-SemiBold.eot?#iefix) format("embedded-opentype"), url(../fonts/WorkSans-SemiBold.woff) format("woff"), url(../fonts/WorkSans-SemiBold.ttf) format("truetype"), url(../fonts/WorkSans-SemiBold.svg) format("svg")
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
 body {
   line-height: 1.5;
   font-family: var(--font-family), sans-serif;
@@ -26,27 +54,27 @@ h6 {
 
 h1,
 .h1 {
-  font-size: 45px;
+  font-size: 32px;
 }
 
 h2,
 .h2 {
-  font-size: 32px;
+  font-size: 26px;
 }
 
 h3,
 .h3 {
-  font-size: 26px;
+  font-size: 20px;
 }
 
 h4,
 .h4 {
-  font-size: 20px;
+  font-size: 18px;
 }
 
 h5,
 .h5 {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 h6,
@@ -193,6 +221,7 @@ select:focus {
 .section-sm {
   padding-top: 60px;
   padding-bottom: 60px;
+  background: #fff;
 }
 
 @media (max-width: 768px) {
@@ -201,8 +230,17 @@ select:focus {
   }
 }
 
+.main-title {
+  font-size: 45px;
+}
+
 .section-title {
   margin-bottom: 40px;
+  font-size: 32px;
+}
+
+.section-item {
+  font-size: 26px;
 }
 
 .bg-cover {
@@ -244,11 +282,12 @@ pre {
 }
 
 .bg-primary {
-  background: var(--primary-color) !important;
+  background: var(--bg-color) !important;
 }
 
 .bg-white {
   background-color: var(--white-color) !important;
+  font-weight: 400;
 }
 
 .bg-light {
@@ -276,7 +315,11 @@ pre {
 }
 
 .navbar {
-  padding: 0;
+  background: #fff;
+}
+
+.navbar img {
+  height: 34px;
 }
 
 .navbar-dark .navbar-toggler-icon {
@@ -289,15 +332,17 @@ pre {
   }
 }
 
+.navbar-brand {
+  padding: 0;
+}
+
 .navbar-brand img {
-  max-width: 100px;
   margin-bottom: 0;
 }
 
 .navbar .nav-item .nav-link {
-  text-transform: uppercase;
-  padding: 10px 15px !important;
-  font-size: 15px;
+  padding: 0.5rem 1rem !important;
+  font-size: 16px;
 }
 
 .navbar .dropdown:hover .dropdown-menu {
@@ -395,19 +440,28 @@ pre {
 
 .banner p {
   font-size: 20px;
-  opacity: .8;
+}
+
+.ti-github,
+.ti-twitter-alt {
+  font-size: 20px;
 }
 
 .banner .nav-link.text-dark {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }
 
 .banner .nav-link.text-dark:hover {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
 }
 
 .banner .navbar-brand {
-  color: var(--white-color) !important;
+  color: var(--dark-color) !important;
+}
+
+.copyright-container {
+  color: #939b9f;
+  font-weight: 600;
 }
 
 /* search */
@@ -498,10 +552,12 @@ pre {
   border-radius: 25px;
   border: 0;
   padding: 0 20px;
+  border: 1px solid #ced4da;
+  border-radius: 0;
 }
 
 .form-control:focus {
-  border: 0;
+  border-color: #ced4da;
   box-shadow: none !important;
 }
 
@@ -558,27 +614,45 @@ textarea.form-control {
   height: 8px;
   width: 8px;
   border-radius: 50%;
-  background: var(--primary-color);
-  opacity: .3;
+  background: #003;
   left: 0;
   top: 8px;
 }
 
-.list-styled li {
-  padding-left: 20px;
-  position: relative;
+#TableOfContents ul li,
+#TableOfContents ul li ul {
+  margin-bottom: 0;
 }
 
-.list-styled li::before {
-  position: absolute;
-  content: '';
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  background: var(--primary-color);
-  opacity: .3;
-  left: 0;
-  top: 17px;
+#TableOfContents ul li a:hover,
+#TableOfContents ul li ul a:hover {
+  text-decoration: underline;
+}
+
+/* this is so that the header does not overlap the section title */
+.content h2:before,
+.content h3:before,
+.content h4:before {
+  display: block;
+  content: "";
+  height: 75px;
+  margin: -75px 0 0;
+}
+
+.content .title-link {
+  opacity: 0;
+  transition: 0.3s;
+  margin-left: 10px;
+}
+
+.content h2:hover .title-link,
+.content h3:hover .title-link,
+.content h4:hover .title-link {
+  opacity: 1;
+}
+
+.list-styled li {
+  position: relative;
 }
 
 .post-meta {
@@ -587,6 +661,10 @@ textarea.form-control {
   font-size: 14px;
 }
 
+.border-bottom {
+  border-bottom: 2px solid #003 !important;
+}
+
 blockquote {
   font-size: 20px !important;
   color: var(--text-color-dark);
@@ -607,6 +685,7 @@ blockquote p {
 
 .pagination a {
   color: var(--primary-color);
+  font-weight: 700;
 }
 
 .pagination i {
@@ -738,18 +817,38 @@ li.sidelist>a {
   margin-bottom: 10px;
   display: block;
   font-size: 20px;
+  font-weight: 700;
 }
 
 li.sidelist li a {
   margin: 0;
+  font-weight: 700;
+  font-size: 18px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem 1rem;
+}
+
+li.sidelist li a:hover {
+  color: var(--primary-color);
 }
 
 .sidelist li.sidelist {
   display: block;
 }
 
-.sidelist li.sidelist.active a {
-  color: var(--primary-color);
+.sidelist i {
+  display: none;
+}
+
+.sidelist li.sidelist.active>a {
+  border-left: 5px solid var(--primary-color);
+  background: #e9eeed;
+}
+
+.sidelist li.sidelist.active>a>i {
+  display: block;
 }
 
 .sidelist li.sidelist.active::before {
@@ -804,12 +903,11 @@ code {
   color: inherit;
   text-align: right;
   z-index: 1;
-  left: -5px;
+  left: -22px;
   top: -5px;
 }
 
 .ui-autocomplete-input {
-  border-bottom: 1px solid rgb(212, 212, 212) !important;
   padding-right: 50px;
 }
 
@@ -848,7 +946,7 @@ pre code::-webkit-scrollbar-thumb {
 
 /* content tabs */
 .code-tabs {
-  border: 1px solid #dee2e6;
+  border: 2px solid #003;
   overflow: hidden;
   margin: 20px 0px;
 }
@@ -866,9 +964,13 @@ pre code::-webkit-scrollbar-thumb {
   margin-bottom: 0;
 }
 
+.nav-tabs {
+  border-bottom: 2px solid #003;
+}
+
 .code-tabs .nav-tabs .nav-item {
   padding-left: 0;
-  border-right: 1px solid #dee2e6;
+  border-right: 2px solid #003;
 }
 
 .code-tabs .nav-tabs .nav-item .nav-link {
@@ -876,6 +978,16 @@ pre code::-webkit-scrollbar-thumb {
   font-weight: 500;
   border: 0;
   margin-bottom: 0;
+  font-weight: 700;
+}
+
+table td,
+table th {
+  font-weight: 500;
+}
+
+.nav-tabs .nav-item {
+  margin-bottom: -2px;
 }
 
 .code-tabs .nav-tabs .nav-item::before {
@@ -888,4 +1000,4 @@ pre code::-webkit-scrollbar-thumb {
 
 .code-tabs .nav-tabs .nav-item.active .nav-link {
   color: var(--white-color);
-}
+}

assets/js/script.js

@@ -128,6 +128,14 @@
   })
 
 
+  // table of contents
+  $('h2, h3, h4', '.content').each(function () {
+    if ($('#TableOfContents', '.content').length) {
+      $(this).append('<a class="title-link" href="#' + $(this).attr('id') + '">#</a>');
+    }
+  });
+
+
   // Download page to pdf format
   window.onload = function() {
       var generatePDF = document.getElementById('generatePDF');

exampleSite/config.toml

@@ -36,7 +36,7 @@ white_color = "#ffffff"
 light_color = "#f8f9fa"
 
 # font family
-font_family = "lato" # Choose font family from : https://fonts.google.com/
+font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
 
 # contact form action
 contact_form_action = "#" # contact form works with : https://formspree.io

exampleSite/content/installation/customization/_index.en.md

@@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
   # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
-```
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
+```

exampleSite/content/installation/customization/_index.fr.md

@@ -51,5 +51,5 @@ If you need to change this default behavior, create a new file in `layouts/parti
 ```toml
 [params]
   # font family
-  font_family = "lato" # Choose font family from : https://fonts.google.com/
-```
+  font_family = "WorkSans" # Choose font family from : https://fonts.google.com/
+```

layouts/index.html

@@ -22,7 +22,7 @@
               {{ with .Params.icon}}
                 <i class="{{.}} icon text-primary d-block mb-4"></i>
               {{end}}
-              <h3 class="mb-3 mt-0">{{ .Title }}</h3>
+              <h3 class="mb-3 mt-0 section-item">{{ .Title }}</h3>
               {{with .Params.description}}
                 <p class="mb-0">{{. | markdownify}}</p>
               {{end}}

layouts/partials/banner.html

@@ -2,7 +2,7 @@
 <div class="container section">
   <div class="row">
     <div class="col-lg-8 text-center mx-auto">
-      <h1 class="text-white mb-3">
+      <h1 class="text-white mb-3 main-title">
         {{ .Site.Params.banner.title | markdownify }}
       </h1>
       <p class="text-white mb-4">

layouts/partials/default.html

@@ -2,7 +2,7 @@
 <section class="single section-sm pb-0">
   <div class="container">
     <div class="row">
-      <div class="col-lg-3">
+      <div class="col-lg-4">
         <div class="sidebar">
           <a
             class="back-btn"
@@ -10,25 +10,57 @@
             aria-label="back"
           ></a>
           <ul class="list-styled">
-            {{ $currentNode := . }} {{range .Site.Home.Sections.ByWeight}} {{ if
-            eq .FirstSection $currentNode.FirstSection }} {{ template
-            "section-tree-nav" dict "sect" . "currentnode" $currentNode}} {{ end
-            }} {{ end }} {{ if .Content }} {{ if eq .Params.downloadBtn "true"
-            }}
-            <div>
-              <button class="btn btn-primary btn-block" id="generatePDF">
-                Get Pdf
-              </button>
-            </div>
-            {{ end }} {{ end }}
+            {{ $currentNode := . }}
+            {{range .Site.Home.Sections.ByWeight}}
+              {{ if eq .FirstSection $currentNode.FirstSection }}
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode}}
+              {{ end }}
+            {{ end }}
+            {{ if .Content }}
+              {{ if eq .Params.downloadBtn "true" }}
+              <div>
+                <button class="btn btn-primary btn-block" id="generatePDF">
+                  Get Pdf
+                </button>
+              </div>
+              {{ end }}
+            {{ end }}
           </ul>
         </div>
       </div>
-      <div class="col-lg-9">
+      <div class="col-lg-8">
         <div class="p-lg-5 p-4 bg-white" id="content">
-          <h2 class="mb-5" id="title">{{ .Title }}</h2>
+          <h1 class="mb-5" id="title">{{ partial "title.html" . }}</h1>
           {{ if .Content }}
-          <div class="content">{{.Content}}</div>
+            <div class="content">
+              {{ if isset .Params "status" }}
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Status</th>
+                      <th>Category</th>
+                      <th>Authors</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    <tr>
+                      <th>{{ .Params.status }}</th>
+                      <th>{{ .Params.category }}</th>
+                      <th>{{ .Params.author }}</th>
+                    </tr>
+                  </tbody>
+                </table>
+                {{ if .Params.toc }}
+                  <details>
+                    <summary>Table of Contents</summary>
+                    <aside>
+                      {{ .TableOfContents }}
+                    </aside>
+                  </details>
+                {{ end }}
+              {{ end }}
+              {{.Content}}
+            </div>
           {{ else }}
           <div class="bg-light p-4">
             <ul class="page-list">
@@ -85,28 +117,50 @@
 <!-- /details page -->
 
 <!-- templates -->
-{{ define "section-tree-nav" }} {{ $showvisitedlinks := .showvisitedlinks }} {{
-$currentNode := .currentnode }} {{with .sect}} {{safeHTML .Params.head}} {{
-$fileUniqueID := "" }} {{ with .File }}{{ $fileUniqueID = .UniqueID }}{{ end }}
-{{ $currentNodeFileUniqueID := "" }} {{ with $currentNode.File }}{{
-$currentNodeFileUniqueID = .UniqueID }}{{ end }}
-<li
-  data-nav-id="{{.Permalink}}"
-  title="{{.Title}}"
-  class="sidelist
-  {{if eq $fileUniqueID $currentNodeFileUniqueID}}active{{end}}"
->
-  <a href="{{.Permalink}}">
-    {{safeHTML .Params.Pre}}{{or .Params.menuTitle .LinkTitle .Title}}{{safeHTML
-    .Params.Post}}
-  </a>
-  {{ $numberOfPages := (add (len .Pages) (len .Sections)) }} {{ if ne
-  $numberOfPages 0 }}
-  <ul>
-    {{ range .Pages.ByWeight }} {{ if and .Params.hidden (not $.showhidden) }}
-    {{else}} {{ template "section-tree-nav" dict "sect" . "currentnode"
-    $currentNode }} {{end}} {{end}}
-  </ul>
+{{ define "section-tree-nav" }}
+  {{ $showvisitedlinks := .showvisitedlinks }}
+  {{ $currentNode := .currentnode }}
+  {{with .sect}}
+    {{safeHTML .Params.head}}
+    {{ $fileUniqueID := "" }}
+    {{ with .File }}
+      {{ $fileUniqueID = .UniqueID }}
+    {{ end }}
+    {{ $currentNodeFileUniqueID := "" }}
+    {{ with $currentNode.File }}
+      {{ $currentNodeFileUniqueID = .UniqueID }}
+    {{ end }}
+    <li
+      data-nav-id="{{.Permalink}}"
+      title="{{.Title}}"
+      class="sidelist
+      {{if (or (eq $fileUniqueID $currentNodeFileUniqueID) (eq $currentNode.Type .Page.Title))}}active{{end}}"
+    >
+      <a href="{{.Permalink}}">
+        {{ safeHTML .Params.Pre }}
+          {{ or .Params.menuTitle .LinkTitle .Title }}
+        {{ safeHTML .Params.Post }}
+        <i class="ti-angle-right"></i>
+      </a>
+      {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
+      {{ if ne $numberOfPages 0 }}
+        <ul>
+          {{ $currentNodePath := split $currentNode.File "/" }}
+          {{ $folderName := (index $currentNodePath 1) }}
+          {{ if gt (len (findRE ".md" $folderName)) 0 }}
+              {{ $folderName = "Others" }}
+          {{ end }}
+
+          {{ range .Pages.ByWeight }}
+            {{ if eq (isset .Page.Params "status") false }}
+              {{ if and .Params.hidden (not $.showhidden) }}
+              {{else}}
+                {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode }}
+              {{end}}
+            {{end}}
+          {{end}}
+        </ul>
+      {{ end }}
+    </li>
   {{ end }}
-</li>
-{{ end }} {{ end }}
+{{ end }}

layouts/partials/footer.html

@@ -3,7 +3,7 @@
   <div class="container">
     <div class="row align-items-center">
       <div class="col-md-8 text-md-left text-center">
-        <p class="mb-md-0 mb-4">{{ .Site.Params.copyright | markdownify }}</p>
+        <p class="mb-md-0 mb-4 copyright-container">{{ .Site.Params.copyright | markdownify }}</p>
       </div>
       <div class="col-md-4 text-md-right text-center">
         <ul class="list-inline">

layouts/partials/head.html

@@ -28,12 +28,6 @@
     type="image/x-icon"
   />
 
-  <!-- fonts -->
-  <link
-    href="https://fonts.googleapis.com/css?family={{replace .Site.Params.font_family ' ' '+' | title}}:300,400,700&display=swap"
-    rel="stylesheet"
-  />
-
   <!-- PDF.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.9.359/pdf.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.3/html2pdf.bundle.js"></script>
@@ -42,6 +36,7 @@
     :root{
       --primary-color:{{ .Site.Params.primary_color }};
       --body-color:{{ .Site.Params.body_color }};
+      --bg-color:{{ .Site.Params.bg_color }};
       --text-color:{{ .Site.Params.text_color }};
       --text-color-dark:{{ .Site.Params.text_color_dark }};
       --white-color:{{ .Site.Params.white_color }};

layouts/partials/navigation.html

@@ -1,6 +1,6 @@
 <nav class="navbar navbar-expand-md {{ if .IsHome }}navbar-dark{{ else }}navbar-light{{ end }}">
   <div class="container px-2 px-md-0">
-    <a class="navbar-brand px-2" href="{{ site.BaseURL | relLangURL }}">
+    <a class="navbar-brand" href="{{ site.BaseURL | relLangURL }}">
       {{ $logo:= site.Params.logo }}
       {{ $logoWhite:= site.Params.logo_white }}
       {{ if (or $logo $logoWhite) }}

layouts/partials/title.html

@@ -0,0 +1 @@
+{{ .Title }}