Rework of main template, adds options for more fine customisation

nabehiro · Jan 23, 2020 · ba5d38a · ba5d38a
1 parent 2acd6ab
commit ba5d38a
Show file tree

Hide file tree

Showing 31 changed files with 161 additions and 110 deletions.
diff --git a/README.md b/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)

diff --git a/archetypes/docs.md b/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
 ---
diff --git a/assets/_defaults.scss b/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;
-$sm-breakpoint: $menu-width + $body-min-width !default;
+$mobile-breakpoint: $menu-width + $body-min-width + $toc-width !default;
 
 // Hint colors
 $hint-colors: (

diff --git a/assets/_main.scss b/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;
-    font-size: $font-size-base;
+    display: none;
   }
 
   .book-header {
-    display: flex;
+    display: block;
   }
 
-  #menu-control:checked ~ main {
-    .book-menu #BookMenu,
+  #menu-control:checked + main {
+    .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;
   }
 }
 

diff --git a/assets/_print.scss b/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 {
-    flex: none;
-
-    nav {
-      position: relative;
-      width: auto;
-    }
+  main {
+    // Fix for https://bugzilla.mozilla.org/show_bug.cgi?id=939897
+    display: block !important;
   }
 }
diff --git a/assets/_shortcodes.scss b/assets/_shortcodes.scss
@@ -77,8 +77,7 @@
 
   > div {
     margin: $padding-16 0;
-    // max-width: 50%;
-    min-width: $body-min-width * 0.66;
+    min-width: $body-min-width / 2;
     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;
     }
   };
 }
diff --git a/assets/_utils.scss b/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 {

diff --git a/exampleSite/config.toml b/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.
-  # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
-  # You can also specify this parameter per page in front matter
-  BookToC = 3
+  # (Optional, default true) Controls table of contents visibility on right side of pages.
+  # Start and end levels can be controlled with markup.tableOfContents setting.
+  # You can also specify this parameter per page in front matter.
+  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

diff --git a/exampleSite/config.yaml b/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.
-  # Use false to hide ToC, note that 0 will default to 6 (https://gohugo.io/functions/default/)
-  # You can also specify this parameter per page in front matter
-  BookToC: 3
+  # (Optional, default true) Controls table of contents visibility on right side of pages.
+  # Start and end levels can be controlled with markup.tableOfContents setting.
+  # You can also specify this parameter per page in front matter.
+  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

diff --git a/exampleSite/content/_index.md b/exampleSite/content/_index.md
@@ -3,6 +3,8 @@ title: Introduction
 type: docs
 ---
 
+# Acerbo datus maxime
+
 {{< columns >}}
 ## Astris ipse furtiva
 

diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content b/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.content
diff --git a/exampleSite/resources/_gen/assets/scss/book.scss_50fc8c04e12a2f59027287995557ceff.json b/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="}}
diff --git a/...leSite/resources/_gen/assets/scss/book/book.scss_50fc8c04e12a2f59027287995557ceff.content b/...leSite/resources/_gen/assets/scss/book/book.scss_50fc8c04e12a2f59027287995557ceff.content
diff --git a/exampleSite/resources/_gen/assets/scss/book/book.scss_50fc8c04e12a2f59027287995557ceff.json b/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="}}
diff --git a/i18n/cn.yaml b/i18n/cn.yaml
@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -7,5 +7,8 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: '{ cache: true }'
diff --git a/i18n/es.yaml b/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 }'
diff --git a/i18n/jp.yaml b/i18n/jp.yaml
@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

diff --git a/i18n/ko.yaml b/i18n/ko.yaml
@@ -7,6 +7,9 @@
 - id: Last modified by
   translation: Last modified by
 
+- id: Expand
+  translation: Expand
+
 - id: bookSearchConfig
   translation: |
     {

diff --git a/i18n/ru.yaml b/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 }'
diff --git a/layouts/_default/baseof.html b/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">
-    {{ template "toc" . }}
+  <main class="container flex">
+    <aside class="book-menu">
+      {{ template "menu" . }} <!-- Left menu Content -->
+    </aside>
 
     <div class="book-page">
-      {{ partial "docs/mobile-header" . }}
-      {{ template "main" . }}
-      {{ partial "docs/footer" . }}
+      <header class="book-header">
+        {{ template "header" . }} <!-- Mobile layout header -->
+      </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">
-      {{ partial "docs/menu" . }}
+    {{ if default true (default .Site.Params.BookToC .Params.BookToC) }}
+    <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 }}
Original file line number	Diff line number	Diff line change
		@@ -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="}}
Original file line number	Diff line number	Diff line change
		@@ -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="}}