use mainSections, update Permalinks and asset URLS

assets/scss/components/_type.scss

@@ -0,0 +1,7 @@
+p {
+font-family: $font-family-base;
+font-size: 1rem;
+line-height: 1.4;
+color: lighten($black, 10%);
+font-weight: 400;
+}

assets/scss/style.scss

@@ -44,6 +44,7 @@
 
 // Components
 @import 'components/reset';
+@import 'components/type';
 @import 'components/page';
 @import 'components/header';
 @import 'components/footer';

exampleSite/config.toml

@@ -20,14 +20,15 @@ pygmentsUseClasses = true
 
 [params]
   google_analytics_id=""
+  mainSections = ["docs"]
 
   [params.homepage_meta_tags]
-    meta_description = "Hugo Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal."
+    meta_description = "Hugo Whisper is a documentation theme built with Hugo."
     meta_og_title = "Hugo Whisper Theme"
     meta_og_type = "website"
     meta_og_url = "https://hugo-whisper.netlify.com"
     meta_og_image = "https://raw.githubusercontent.com/JugglerX/hugo-whisper-theme/master/images/tn.png"
-    meta_og_description = "Hugo Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal."
+    meta_og_description = "Hugo Whisper is a documentation theme built with Hugo."
     meta_twitter_card = "summary"
     meta_twitter_site = "@zerostaticio"
     meta_twitter_creator = "@zerostaticio"

exampleSite/content/_index.md

@@ -1,6 +1,6 @@
 ---
-title: 'Hugo Whisper'
+title: 'Hugo Whisper Docs'
 date: 2018-11-28T15:14:39+10:00
 ---
 
-Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal.
+Whisper is a documentation theme built with Hugo. The design and functionality is intentionally minimal. 

exampleSite/resources/_gen/assets/scss/scss/style.scss_5ad6f408b0e3e473c748aac88af0ea18.content

@@ -5306,6 +5306,13 @@ ol {
   padding: 0;
   list-style: none; }
 
+p {
+  font-family: "Roboto", Arial, sans-serif, -apple-system;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #383f45;
+  font-weight: 400; }
+
 .page {
   display: flex;
   min-height: 100vh;

exampleSite/resources/_gen/assets/scss/scss/style.scss_fbbbc62c786286473d9c728ad0108593.json

@@ -1 +1 @@
-{"Target":"css/style.min.0a94318f10013a24a09d4896a82cc263e9f88fc84459c47f7da498e402bfeecb.css","MediaType":"text/css","Data":{"Integrity":"sha256-CpQxjxABOiSgnUiWqCzCY+n4j8hEWcR/faSY5AK/7ss="}}
+{"Target":"css/style.min.cd3f00e0e1037ac40eea440657f486c7db5c749c7a0c6b90a4213a8cee1360b8.css","MediaType":"text/css","Data":{"Integrity":"sha256-zT8A4OEDesQO6kQGV/SGx9tcdJx6DGuQpCE6jO4TYLg="}}

layouts/_default/baseof.html

@@ -25,12 +25,20 @@
   {{ partial "main-menu-mobile.html" . }}
   <div class="wrapper">
     {{ partial "header.html" . }}
-    {{ if eq .Section "docs" }}
+
+    {{ $displaySidebar := false }}
+    {{ range site.Params.mainSections }}
+    {{ if eq $.Section . }}
+    {{ $displaySidebar = true }}
+    {{ end }}
+    {{ end }}
+
+    {{ if $displaySidebar }}
     <div class="container pt-2 pt-md-6 pb-3 pb-md-6">
       <div class="row">
         <div class="col-12 col-md-3 mb-3">
           <div class="sidebar">
-            {{ partial "docs-menu.html" . }}
+            {{ partial "sidebar.html" . }}
           </div>
         </div>
         <div class="col-12 col-md-9">

layouts/_default/list.html

@@ -1,4 +1,5 @@
-{{ define "header_css" }}{{ end }} {{ define "body_classes" }}{{ end }}
+{{ define "header_css" }}{{ end }}
+{{ define "body_classes" }}page-default-list{{ end }}
 {{ define "header_classes" }}{{ end }}
 
 {{ define "main" }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "header_css" }}{{ end }}
-{{ define "body_classes" }}{{ end }}
+{{ define "body_classes" }}page-default-single{{ end }}
 {{ define "header_classes" }}{{ end }}
 
 {{ define "main" }}

layouts/index.html

@@ -20,11 +20,11 @@
   <div class="container pt-4 pb-16">
     <div class="row">
       <div class="col-12">
-        <h1 class="title">{{.Title}}</h1>
+        <h1 class="title">{{ .Title }}</h1>
         <div class="content">
-          {{.Content}}
+          {{ .Content }}
         </div>
-        <a class="button button-primary mb-2" href="{{ .Site.BaseURL }}docs">Read The Docs</a>
+        <a class="button button-primary mb-2" href="{{ "docs" | absURL }}">Read The Docs</a>
       </div>
     </div>
   </div>
@@ -32,16 +32,16 @@
 
 <div class="strip">
   <div class="container pt-4 pb-4">
-      <div class="row justify-content-center">
-        <div class="col-12 col-md-10">
-          <div class="terminal">
-            <img src="{{ .Site.BaseURL }}images/terminal.gif" />
-          </div>
+    <div class="row justify-content-center">
+      <div class="col-12 col-md-10">
+        <div class="terminal">
+          <img src="{{ "images/terminal.gif" | absURL}}" />
         </div>
       </div>
     </div>
   </div>
 </div>
+</div>
 {{ end }}
 
 {{ define "footer_js" }}

layouts/partials/docs-menu.html

@@ -1,11 +0,0 @@
-{{$currentNode := .}}
-<div class="docs-menu">
-  <h4>Docs</h4>
-  <ul>
-    {{ range (where .Site.Pages "Section" "docs") sort .Site.Pages ".Weight" }}
-    <li class="{{ if eq .UniqueID $currentNode.UniqueID }}active {{ end }}">
-      <a href="{{ .URL }}">{{ .Title }}</a>
-    </li>
-    {{ end }}
-  </ul>
-</div>

layouts/partials/footer.html

@@ -1,14 +0,0 @@
-<div class="footer">
-  <div class="container">
-    <div class="row">
-      <div class="col-12">
-        <div class="footer-inner">
-          <ul class="footer-menu">
-            <li><a href="{{ .Site.BaseURL }}">Home</a></li>
-            <li><a href="{{ .Site.BaseURL }}contact">Contact</a></li>
-            <li class="copyright">© {{ now.Format "2006" }} {{.Site.Title}}</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-</div>

layouts/partials/header.html

@@ -1,10 +1,10 @@
 <div class='header'>
   <div class="container">
     <div class="logo">
-      <a href="{{ .Site.BaseURL }}"><img alt="Figurit Homepage" src="{{ .Site.BaseURL }}images/logo.svg" /></a>
+      <a href="{{ .Site.BaseURL }}"><img alt="Logo" src="{{ "images/logo.svg" | absURL }}" /></a>
     </div>
     <div class="logo-mobile">
-      <a href="{{ .Site.BaseURL }}"><img alt="Figurit Homepage" src="{{ .Site.BaseURL }}images/logo-mobile.svg" /></a>
+      <a href="{{ .Site.BaseURL }}"><img alt="Logo" src="{{ "images/logo-mobile.svg" | absURL }}" /></a>
     </div>
     {{ partial "main-menu.html" . }}
     {{ partial "hamburger.html" . }}

layouts/partials/main-menu-mobile.html

@@ -3,8 +3,7 @@
     {{ $currentPage := . }}
     {{ range .Site.Menus.main }}
     <li class="menu-item-{{ .Name | lower }}{{ if $currentPage.IsMenuCurrent "main" . }} active{{ end }}">
-      <a href="{{.URL}}">
-        {{ .Pre }}
+      <a href="{{ .URL }}">
         <span>{{ .Name }}</span>
       </a>
     </li>

layouts/partials/main-menu.html

@@ -3,8 +3,7 @@
     {{ $currentPage := . }}
     {{ range .Site.Menus.main }}
     <li class="menu-item-{{ .Name | lower }}{{ if $currentPage.IsMenuCurrent "main" . }} active{{ end }}">
-      <a href="{{.URL}}">
-        {{ .Pre }}
+      <a href="{{ .URL }}">
         <span>{{ .Name }}</span>
       </a>
     </li>

layouts/partials/sidebar.html

@@ -0,0 +1,11 @@
+{{$currentNode := .}}
+<div class="docs-menu">
+  <h4>{{ .Section | humanize }}</h4>
+  <ul>
+    {{ range (where .Site.RegularPages "Section" .Section) sort .Site.RegularPages ".Weight" }}
+    <li class="{{ if eq .UniqueID $currentNode.UniqueID }}active {{ end }}">
+      <a href="{{ .Permalink }}">{{ .Title }}</a>
+    </li>
+    {{ end }}
+  </ul>
+</div>