Rework of main template, adds options for more fine customisation

README.md

@@ -200,7 +200,7 @@ bookCollapseSection = true
 bookHidden = true
 
 # (Optional) Set how many levels of ToC to show. use 'false' to hide ToC completely
-bookToC = 3
+bookToC = true
 
 # (Optional) If you have enabled BookComments for the site, you can disable it for specific pages.
 bookComments = true
@@ -329,6 +329,12 @@ x = \begin{cases}
 {{< /katex >}}
 ```
 
+## Versioning
+
+Theme follows simple incremental versioning. e.g. `v1`, `v2` and so on. There might be breaking changes between versions.
+
+If you want lower maintenance use one of released versions. If you want to live on the edge of changes you can use `master` branch and update your website when needed.
+
 ## Contributing
 
 ### [Extra credits to contributors](https://github.com/alex-shpak/hugo-book/graphs/contributors)

archetypes/docs.md

@@ -2,6 +2,8 @@
 title: "{{ .Name | humanize | title }}"
 weight: 1
 # bookFlatSection: false
-# bookToc: 6
+# bookToc: true
 # bookHidden: false
+# bookCollapseSection: false
+# bookComments: true
 ---

assets/_defaults.scss

@@ -31,15 +31,14 @@ $body-background: white !default;
 $body-font-color: $gray-800 !default;
 $body-font-weight: normal !default;
 
-$body-min-width: 20rem !default;
+$body-min-width: 25rem !default;
 $container-max-width: 80rem !default;
 
 $header-height: 3.5rem !default;
 $menu-width: 16rem !default;
 $toc-width: 16rem !default;
 
-$md-breakpoint: $menu-width + $body-min-width * 1.25 + $toc-width !default;
+$mobile-breakpoint: $menu-width + $body-min-width + $toc-width !default;
-$sm-breakpoint: $menu-width + $body-min-width !default;
 
 // Hint colors
 $hint-colors: (

assets/_main.scss

@@ -47,11 +47,6 @@ img {
   vertical-align: baseline;
 }
 
-main {
-  display: flex;
-  flex-direction: row-reverse;
-}
-
 aside nav ul {
   padding: 0;
   margin: 0;
@@ -162,8 +157,12 @@ ul.pagination {
 }
 
 .book-header {
-  margin-bottom: $padding-16;
   display: none;
+  margin-bottom: $padding-16;
+
+  label {
+    line-height: 0;
+  }
 }
 
 .book-search {
@@ -230,7 +229,6 @@ ul.pagination {
 }
 
 .book-footer {
-  display: flex;
   padding-top: $padding-16;
   font-size: $font-size-14;
 
@@ -272,7 +270,7 @@ ul.pagination {
     }
 
     img {
-      opacity: .1;
+      opacity: 0.1;
     }
 
     li.active img {
@@ -298,46 +296,41 @@ ul.pagination {
 // Responsive styles
 aside nav,
 .book-page,
+.book-header aside,
 .markdown {
   transition: 0.2s ease-in-out;
   transition-property: transform, margin, opacity;
   will-change: transform, margin;
 }
 
-@media screen and (max-width: $md-breakpoint) {
+@media screen and (max-width: $mobile-breakpoint) {
   .book-menu {
     margin-left: -$menu-width;
     font-size: $font-size-base;
   }
+
   .book-toc {
-    margin-right: -$toc-width;
+    display: none;
-    font-size: $font-size-base;
   }
 
   .book-header {
-    display: flex;
+    display: block;
   }
 
-  #menu-control:checked ~ main {
+  #menu-control:checked + main {
-    .book-menu #BookMenu,
+    .book-menu nav,
     .book-page {
       transform: translateX($menu-width);
     }
+
+    .book-header aside,
     .markdown {
       opacity: 0.25;
     }
-    .book-header #menu-control {
-      transform: rotate(90deg);
-    }
-  }
-  #toc-control:checked ~ main {
-    aside #TableOfContents,
-    .book-page {
-      transform: translateX(-$menu-width);
-    }
-    .markdown {
-      opacity: 0.25;
   }
+
+  #toc-control:checked + aside {
+    display: block;
   }
 }
 

assets/_print.scss

@@ -1,19 +1,17 @@
 @media print {
   .book-menu,
-  .book-footer {
+  .book-footer,
+  .book-toc {
     display: none;
   }
 
-  main {
+  .book-header,
+  .book-header aside {
     display: block;
   }
 
-  .book-toc {
+  main {
-    flex: none;
+    // Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897
-
+    display: block !important;
-    nav {
-      position: relative;
-      width: auto;
-    }
   }
 }

assets/_shortcodes.scss

@@ -77,8 +77,7 @@
 
   > div {
     margin: $padding-16 0;
-    // max-width: 50%;
+    min-width: $body-min-width / 2;
-    min-width: $body-min-width * 0.66;
     padding: 0 $padding-16;
   }
 }
@@ -102,7 +101,6 @@ a.book-btn {
     &.#{$name} {
       border-left-color: $color;
       background-color: rgba($color, 0.1);
-      // background-color: $gray-100;
     }
   };
 }

assets/_utils.scss

@@ -46,6 +46,12 @@
   display: none;
 }
 
+.clearfix::after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
 @mixin spin($duration) {
   animation: spin $duration ease infinite;
   @keyframes spin {

exampleSite/config.toml

@@ -37,10 +37,10 @@ enableGitInfo = true
   weight = 3
 
 [params]
-  # (Optional, default 6) Set how many table of contents levels to be showed on page.
+  # (Optional, default true) Controls table of contents visibility on right side of pages.
-  # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
+  # Start and end levels can be controlled with markup.tableOfContents setting.
-  # You can also specify this parameter per page in front matter
+  # You can also specify this parameter per page in front matter.
-  BookToC = 3
+  BookToC = true
 
   # (Optional, default none) Set the path to a logo for the book. If the logo is
   # /static/logo.png then the path would be logo.png

exampleSite/config.yaml

@@ -35,10 +35,10 @@ languages:
     weight: 3
 
 params:
-  # (Optional, default 6) Set how many table of contents levels to be showed on page.
+  # (Optional, default true) Controls table of contents visibility on right side of pages.
-  # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
+  # Start and end levels can be controlled with markup.tableOfContents setting.
-  # You can also specify this parameter per page in front matter
+  # You can also specify this parameter per page in front matter.
-  BookToC: 3
+  BookToC: true
 
   # (Optional, default none) Set the path to a logo for the book. If the logo is
   # /static/logo.png then the path would be logo.png

exampleSite/content/_index.md

@@ -3,6 +3,8 @@ title: Introduction
 type: docs
 ---
 
+# Acerbo datus maxime
+
 {{< columns >}}
 ## Astris ipse furtiva
 

exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.327a7346ed65bd45e7889adff447f01f212a1b54dbf3c12139d26b63b077108f.css","MediaType":"text/css","Data":{"Integrity":"sha256-MnpzRu1lvUXniJrf9EfwHyEqG1Tb88EhOdJrY7B3EI8="}}
+{"Target":"book.min.232a19b11d60be2ef65e25692295b4ba14eb16031dc765d576d62c9a1f4312e6.css","MediaType":"text/css","Data":{"Integrity":"sha256-IyoZsR1gvi72XiVpIpW0uhTrFgMdx2XVdtYsmh9DEuY="}}

exampleSite/resources/_gen/assets/scss/book/book.scss_50fc8c04e12a2f59027287995557ceff.json

@@ -1 +1 @@
-{"Target":"book.min.2f0632dc31655f852f191d7c354e584af6f6ca239af70afdd117bbe5950815b2.css","MediaType":"text/css","Data":{"Integrity":"sha256-LwYy3DFlX4UvGR18NU5YSvb2yiOa9wr90Re75ZUIFbI="}}
+{"Target":"book.min.651109bd6f1663cae20024e8b68d60fd4127eade8c26dfdc236a797a99163647.css","MediaType":"text/css","Data":{"Integrity":"sha256-ZREJvW8WY8riACToto1g/UEn6t6MJt/cI2p5epkWNkc="}}

i18n/cn.yaml

@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

i18n/en.yaml

@@ -7,5 +7,8 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: '{ cache: true }'

i18n/es.yaml

@@ -7,5 +7,8 @@
 - id: Last modified by
   translation: Última modificación por
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: '{ cache: true }'

i18n/jp.yaml

@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

i18n/ko.yaml

@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

i18n/ru.yaml

@@ -2,10 +2,13 @@
   translation: Поиск
 
 - id: Edit this page
-  translation: Редактировать эту сраницу
+  translation: Редактировать
 
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Развернуть
+
 - id: bookSearchConfig
   translation: '{ split: /[^a-zа-яё0-9\w]/gi }'

layouts/_default/baseof.html

@@ -7,24 +7,69 @@
 </head>
 
 <body>
-  <input type="checkbox" class="hidden" id="toc-control" />
   <input type="checkbox" class="hidden" id="menu-control" />
-  <main class="container">
+  <main class="container flex">
-    {{ template "toc" . }}
+    <aside class="book-menu">
+      {{ template "menu" . }} <!-- Left menu Content -->
+    </aside>
 
     <div class="book-page">
-      {{ partial "docs/mobile-header" . }}
+      <header class="book-header">
-      {{ template "main" . }}
+        {{ template "header" . }} <!-- Mobile layout header -->
-      {{ partial "docs/footer" . }}
+      </header>
+
+      {{ template "main" . }} <!-- Page Content -->
+
+      <footer class="book-footer">
+        {{ template "footer" . }} <!-- Footer under page content -->
+        {{ template "comments" . }} <!-- Comments block -->
+      </footer>
       {{ partial "docs/inject/footer" . }}
     </div>
 
-    <aside class="book-menu fixed">
+    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
-      {{ partial "docs/menu" . }}
+    <aside class="book-toc">
+      {{ template "toc" . }} <!-- Table of Contents -->
     </aside>
+    {{ end }}
   </main>
 
   {{ partial "docs/inject/body" . }}
 </body>
 
 </html>
+
+{{ define "menu" }}
+  {{ partial "docs/menu" . }}
+{{ end }}
+
+{{ define "header" }}
+  {{ partial "docs/header" . }}
+
+  {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
+    <input type="checkbox" class="hidden" id="toc-control" />
+    <aside class="hidden clearfix">
+      {{ template "toc" . }}
+    </aside>
+  {{ end }}
+{{ end }}
+
+{{ define "footer" }}
+  {{ partial "docs/footer" . }}
+{{ end }}
+
+{{ define "comments" }}
+  {{ if and .Content (default true (default .Site.Params.BookComments .Params.BookComments)) }}
+  <div class="book-comments">
+    {{- partial "docs/comments" . -}}
+  </div>
+  {{ end }}
+{{ end }}
+
+{{ define "main" }}
+  {{ .Content }}
+{{ end }}
+
+{{ define "toc" }}
+  {{ .TableOfContents }}
+{{ end }}

layouts/partials/docs/brand.html

@@ -1,5 +1,5 @@
 <h2 class="book-brand">
-  <a href="{{ .Site.BaseURL }}">
+  <a href="{{ .Site.BaseURL | relLangURL }}">
     {{- with .Site.Params.BookLogo -}}
     <img src="{{ . | relURL }}" alt="Logo" />
     {{- end -}}

layouts/partials/docs/footer.html

@@ -1,33 +1,24 @@
-<div class="book-footer justify-between">
+<div class="flex justify-between">
 {{ if .Site.IsMultiLingual }}
   {{ partial "docs/languages" . }}
 {{ end }}
 
 {{ if and .GitInfo .Site.Params.BookRepo }}
-  {{ with .GitInfo }}
   <div>
-    {{ $date := .AuthorDate.Local.Format (default "January 2, 2006" $.Site.Params.BookDateFormat) }}
+    {{ $date := .GitInfo.AuthorDate.Local.Format (default "January 2, 2006" .Site.Params.BookDateFormat) }}
-    <a class="flex align-center" href="{{ $.Site.Params.BookRepo }}/commit/{{ .Hash }}" title='{{ i18n "Last modified by" }} {{ .AuthorName }} | {{ $date }}' target="_blank">
+    <a class="flex align-center" href="{{ .Site.Params.BookRepo }}/commit/{{ .GitInfo.Hash }}" title='{{ i18n "Last modified by" }} {{ .GitInfo.AuthorName }} | {{ $date }}' target="_blank" rel="noopener">
       <img src="{{ "svg/calendar.svg" | relURL }}" class="book-icon" alt="Calendar" />
       <span>{{ $date }}</span>
     </a>
   </div>
 {{ end }}
-  {{ end }}
 
 {{ if and .File .Site.Params.BookRepo .Site.Params.BookEditPath }}
   <div>
-    <a class="flex align-center" href="{{ .Site.Params.BookRepo }}/{{ .Site.Params.BookEditPath }}/{{ replace .File.Path "\\" "/" }}" target="_blank">
+    <a class="flex align-center" href="{{ .Site.Params.BookRepo }}/{{ .Site.Params.BookEditPath }}/{{ replace .File.Path "\\" "/" }}" target="_blank" rel="noopener">
       <img src="{{ "svg/edit.svg" | relURL }}" class="book-icon" alt="Edit" />
       <span>{{ i18n "Edit this page" }}</span>
     </a>
   </div>
 {{ end }}
-
 </div>
-
-{{ if (default true (default .Site.Params.BookComments .Params.bookComments)) }}
-<div class="book-comments">
-  {{ partial "docs/comments" . }}
-</div>
-{{ end }}

layouts/partials/docs/header.html

@@ -0,0 +1,11 @@
+<div class="flex align-center justify-between">
+  <label for="menu-control">
+    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
+  </label>
+
+  <strong>{{ partial "docs/title" . }}</strong>
+
+  <label for="toc-control">
+    <img src="{{ "svg/toc.svg" | relURL }}" class="book-icon" alt="Table of Contents" />
+  </label>
+</div>

layouts/partials/docs/menu.html

@@ -1,4 +1,4 @@
-<nav id="BookMenu">
+<nav>
 {{ partial "docs/brand" . }}
 {{ partial "docs/search" . }}
 {{ partial "docs/inject/menu-before" . }}

layouts/partials/docs/mobile-header.html

@@ -1,8 +0,0 @@
-<header class="flex align-center justify-between book-header">
-  <label id="menu-control" for="menu-control">
-    <img src="{{ "svg/menu.svg" | relURL }}" class="book-icon" alt="Menu" />
-  </label>
-  <label id="toc-control" for="toc-control">
-  <strong>{{ partial "docs/title" . }}</strong>
-  </label>
-</header>

layouts/partials/docs/post-meta.html

@@ -1,4 +1,4 @@
-{{ $dateFormat := default "January 2, 2006" .Site.Params.BookDateFormat }}
+{{ $dateFormat := (default "January 2, 2006" .Site.Params.BookDateFormat) }}
 {{ if or .Date .Params.tags }}
 <div>
 {{ with .Date}}
@@ -6,10 +6,10 @@
 {{ end }}
 
 {{ range $term, $_ := .Site.Taxonomies }}
-  {{ with $list := index $.Params $term }}
+  {{ with $list := $.Param $term }}
   <div>
     {{ range $n, $single := $list }}{{ if $n }}, {{ end }}
-      {{ with $.Site.GetPage (printf "/%s/%s" $term $single | urlize) }}
+      {{- with $.Site.GetPage (printf "/%s/%s" $term $single | urlize) }}
         <a href="{{ .RelPermalink }}">{{ .Title }}</a>
       {{- end }}
     {{- end }}

layouts/partials/docs/taxonomy.html

@@ -1,4 +1,3 @@
-<aside class="book-toc fixed">
 <nav>
   <ul>
   {{ range $term, $_ := .Site.Taxonomies }}
@@ -17,4 +16,3 @@
   {{ end }}
   </ul>
 </nav>
-</aside>

layouts/partials/docs/toc.html

@@ -1,10 +1 @@
-{{ $tocLevels := default (default 6 .Site.Params.BookToC) .Params.BookToC }}
+{{ .TableOfContents }}
-{{ if and $tocLevels .Page.TableOfContents }}
-  <aside class="book-toc levels-{{$tocLevels}} fixed">
-    {{ with .Page.TableOfContents }}
-    <label id="toc-control" for="toc-control">
-    {{ . }}
-    </label>
-    {{ end }}
-  </aside>
-{{ end }}

layouts/shortcodes/expand.html

@@ -1,7 +1,7 @@
 <div class="book-expand">
   <label>
     <div class="book-expand-head flex justify-between">
-      <span>{{ default "Expand" (.Get 0) }}</span>
+      <span>{{ default (i18n "Expand") (.Get 0) }}</span>
       <span>{{ default "↕" (.Get 1) }}</span>
     </div>
     <input type="checkbox" class="hidden" />

static/svg/toc.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M3 9h14V7H3v2zm0 4h14v-2H3v2zm0 4h14v-2H3v2zm16 0h2v-2h-2v2zm0-10v2h2V7h-2zm0 6h2v-2h-2v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>