add table of contents

CHANGELOG.md

@@ -1,13 +1,22 @@
 # Changelog
 
+__2018-09__
+
+* Add _Table of Contents_ 
+  * Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC
+  * Change [_layouts/partials/header/styles.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/header/styles.html) to check `.Site.Params.toc` and add the corresponding styles
+  * Change [_layouts/partials/page-single/content.html_](_layouts/partials/page-single/content.html_ )  to add TOC per `.Site.Params.toc`
+  * Add styles [_static-src/scss/hugo-toc.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hugo-toc.scss) and [_static-src/scss/tocbot.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/tocbot.scss) that generate `hugo-toc.css` and `tocbot.css`, respectively
+
 __2018-07__
-* Revises the shortcode ['fig.html'](https://github.com/htr3n/hyde-hyde/blob/master/layouts/shortcodes/fig.html)
+
-* Renames `header/font-awesome.html` to `header/font-awesome-css.html` and adds [_footer/font-awesome-js.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/footer/font-awesome-js.html), uses Font-Awesome 5 deferred JavaScript loading to reduce CSS rendering blocking
+* Revise the shortcode ['fig.html'](https://github.com/htr3n/hyde-hyde/blob/master/layouts/shortcodes/fig.html)
-* Refactors and consolidates all responsive breakpoints and creates a new style  [_\_responsive.scss_](static-src/scss/hyde-hyde/_responsive.scss)
+* Rename `header/font-awesome.html` to `header/font-awesome-css.html` and adds [_footer/font-awesome-js.html_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/partials/footer/font-awesome-js.html), uses Font-Awesome 5 deferred JavaScript loading to reduce CSS rendering blocking
-* Refactors portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.scss)
+* Refactor and consolidate all responsive breakpoints and creates a new style  [_\_responsive.scss_](static-src/scss/hyde-hyde/_responsive.scss)
-* Refactors styles for a list of posts into [_\_list.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_list.scss)
+* Refactor portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.scss)
-* Refactors misc. styles into [_\_misc.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_misc.scss)
+* Refactor styles for a list of posts into [_\_list.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_list.scss)
-* Removes  [_\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_customised.scss)
+* Refactor misc. styles into [_\_misc.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_misc.scss)
+* Remove  [_\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_customised.scss)
 
 __Version 2.0__
 
@@ -15,27 +24,27 @@ __Version 2.0__
   and we no longer need `poole.css` and `hyde.css` because `hyde-hyde.scss` already incorporates relevant elements
   * `Hyde-hyde` can be customised by changing SCSS styles in [_static-src/scss/hyde-hyde_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/static-src/scss/hyde-hyde) and layouts in [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts) 
   * To generate `hyde-hyde.css`, please use any SCSS compiler to compile the main file  `hyde-hyde.scss`
-* Restructuring/modularising further the layouts (see [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts))
+* Restructure/modularise further the layouts (see [_layouts_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts))
 * Add '[_Portfolio_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/portfolio)' page inspired by Xiaoying Riley ([@3rdwave_themes](https://twitter.com/3rdwave_themes)) [Developer-Theme](https://github.com/xriley/developer-theme)
-* Setting the main body font to use system fonts (see [_\_variables.scss_](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/static-src/scss/hyde-hyde/_variables.scss))
+* Change the main body font to use system fonts (see [_\_variables.scss_](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/static-src/scss/hyde-hyde/_variables.scss))
 	* In case you prefer Web fonts, just include the template "[web-fonts.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header/web-fonts.html)" to "[header.html](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/header.html)"
-* Switching to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)
+* Switch to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)
-* Adding OpenGraph and TwitterCard templates (for SEO)
+* Add OpenGraph and TwitterCard templates (for SEO)
-* Adding '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html))
+* Add '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html))
-* Adding page navigation _NEXT / PREVIOUS_
+* Add page navigation _NEXT / PREVIOUS_
-* Switching datetime format to `"Jan 02 '06"` in the list of posts (see [_layouts/partials/post-list.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-list.html)) to save some space
+* Switch datetime format to `"Jan 02 '06"` in the list of posts (see [_layouts/partials/post-list.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-list.html)) to save some space
-* Changing styles for links, tags, text
+* Change styles for links, tags, text
-* Adding some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>`
+* Add some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>`
 * The License under '_Some Rights Reversed_' in the sidebar is switched from [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/) to [Creative Commons Attribution-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-sa/4.0/).
 
 __Version 1.0__
 
 * Color tones and layouts are inspired by [Nate Finch's blog](https://npf.io)
-* Restructuring/modularising the layouts (see [`layouts/_default/baseof.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/baseof.html), [`layouts/_default/single.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/single.html), [`layouts/_default/list.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/list.html) and [`layouts/partials`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/partials/))
+* Restructure/modularise the layouts (see [`layouts/_default/baseof.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/baseof.html), [`layouts/_default/single.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/single.html), [`layouts/_default/list.html`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/_default/list.html) and [`layouts/partials`](https://github.com/htr3n/hyde-hyde/tree/v1.0.0/layouts/partials/))
-* Using [highlight.js](https://highlightjs.org) for code highlighting
+* Use [highlight.js](https://highlightjs.org) for code highlighting
-* Using [Font-Awesome 5](https://fontawesome.com)'s icons
+* Use [Font-Awesome 5](https://fontawesome.com)'s icons
-* Using main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
+* Use main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
-* Adding [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com)
+* Add [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com)
 * Fork from [Hyde](https://github.com/spf13/hyde) 
 * Refactor `basedof.html` and corresponding pages `index.html`, `single.html`, `list.html`
     - define blocks `content` and `footer` that will be fulfilled by each different type of layout.

README.md

@@ -11,6 +11,8 @@ Since version 2.0, __`hyde-hyde`__ has been overhauled and, therefore, might cau
 * Adding '[_Portfolio_](https://github.com/htr3n/hyde-hyde/blob/master/layouts/portfolio)' page inspired by Xiaoying Riley (@3rdwave_themes) [Developer-Theme](https://github.com/xriley/developer-theme)
 * Switching to use system fonts instead of Web fonts (e.g. privacy issues)
 * Experimenting a collapsible menu in mobile mode
+* Adding _Table of Contents_
+  * Configure using `.Site.Params.toc` with two possible value: "hugo" (using Hugo `{{ .TableOfContents }}`, and "tocbot" (using [Tocbot](https://tscanlin.github.io/tocbot/)), remove `.Site.Params.toc` to disable TOC
 
 For more details, please refer to [CHANGELOG](https://github.com/htr3n/hyde-hyde/blob/master/CHANGELOG.md).  A real site in action can be found [here](https://htr3n.github.io) and its [WIP source](https://github.com/htr3n/htr3n-blog) for reference.
 
@@ -86,7 +88,7 @@ Since version 2.0+, I added a portfolio page just in case. If you need it, simpl
 [[menu.main]]
     name = "Portfolio"
     identifier = "portfolio"
-    weight = xxx
+    weight = xyz
     url = "/portfolio/"
 ```
 

exampleSite/config.toml

@@ -24,6 +24,10 @@ theme = "hyde-hyde"
     highlightjs = true
     highlightjsstyle = "github"
     # please choose either GraphComment or Disqus
+    #GraphCommentId = "..."
+    
+    # Table of contents
+    #toc = none, "hugo", or "tocbot"
 
 ## Social Accounts
 [params.social]

layouts/partials/header/styles.html

@@ -1,3 +1,10 @@
 {{ partial "header/styles-highlight.html" . }}
 <link rel="stylesheet" href="{{ "css/hyde-hyde.css" | relURL }}">
 <link rel="stylesheet" href="{{ "css/print.css" | relURL }}" media="print">
+{{ with .Site.Params.toc }}
+  {{ if eq . "hugo" }}
+    <link rel="stylesheet" href="{{ "css/hugo-toc.css" | relURL }}">
+  {{ else if eq . "tocbot"}}
+    <link rel="stylesheet" href="{{ "css/tocbot.css" | relURL }}">
+  {{ end }}
+{{ end }}

layouts/partials/page-single/content.html

@@ -5,9 +5,21 @@
     <span class="post__subtitle">
       {{.}}
     </span>
-    {{ end }} 
+    {{ end }}
     {{ partial "page-single/post-meta.html" . }}
   </header>
+  {{ $tableOfContents := .TableOfContents }}
+  {{ with .Site.Params.toc }}
+  <div class="toc-wrapper">
+    <input type="checkbox" id="tocToggle">
+    <label for="tocToggle">Table of Content</label>
+    {{ if eq . "hugo" }}
+        {{ $tableOfContents }}
+    {{ else if eq . "tocbot"}}
+      <div class="toc" id="TableOfContents"></div>
+    {{ end }}
+  </div>
+  {{ end }}
   <div class="post">
     {{ .Content }}
   </div>

static-src/scss/hugo-toc.scss

@@ -0,0 +1,43 @@
+// Hugo {{ .TableOfContents }}
+$toc-background-color: #eee;
+$toc-font-size: .9rem;
+
+.toc-wrapper {
+  font-size: $toc-font-size;
+  padding: 0.5em 0.5em 0.5em 0em;
+  background: $toc-background-color;
+  label {
+    background: url(/img/menu-close-dark.svg) no-repeat right center;
+    display: block;
+    cursor: pointer;
+    padding-left: 1em;
+  }
+}
+#TableOfContents {
+  overflow: hidden;
+  margin-top: 0;
+  max-height: 100%;
+  > ul {
+    list-style-type: none;
+    padding-left: 0;
+    > li ul {
+      list-style-type: none;
+      padding-left: 1em;
+    }
+  }
+}
+
+input#tocToggle {
+  display: none;
+  + label {
+    font-weight: bold;
+  }
+  &:checked {
+    + label {
+      background-image: url(/img/menu-open-dark.svg);
+    }
+    ~ #TableOfContents {
+      max-height: 0;
+    }
+  }
+}

static-src/scss/tocbot.scss

@@ -0,0 +1,31 @@
+@import 'hugo-toc';
+
+.toc {
+  font-size: $toc-font-size;
+  overflow-y: auto;
+  background: $toc-background-color;
+  padding-left: 0rem;
+  padding-top: 1em;
+  > .toc-list {
+    overflow: hidden;
+    position: relative;
+    li {
+      list-style: none;
+    }
+  }
+}
+.toc-list {
+  margin: 0;
+  padding-left: 1rem;
+}
+.is-collapsible {
+  max-height: 1000px;
+  overflow: hidden;
+}
+.is-collapsed {
+  max-height: 0;
+}
+.is-position-fixed {
+  position: fixed;
+  top: 0;
+}

static/css/hugo-toc.css

@@ -0,0 +1,2 @@
+.toc-wrapper{background:#eee;font-size:.9rem;padding:.5em .5em .5em 0}.toc-wrapper label{background:url(/img/menu-close-dark.svg) no-repeat 100%;cursor:pointer;display:block;padding-left:1em}#TableOfContents{margin-top:0;max-height:100%;overflow:hidden}#TableOfContents>ul{list-style-type:none;padding-left:0}#TableOfContents>ul>li ul{list-style-type:none;padding-left:1em}input#tocToggle{display:none}input#tocToggle+label{font-weight:700}input#tocToggle:checked+label{background-image:url(/img/menu-open-dark.svg)}input#tocToggle:checked~#TableOfContents{max-height:0}
+/*# sourceMappingURL=hugo-toc.css.map */

static/css/hugo-toc.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hugo-toc.scss"],"names":[],"mappings":"AAIA,aAGE,gBAFA,AAJyB,gBACN,AAInB,wBAA8B,CAQ/B,AAVD,mBAKI,wDAAgE,AAEhE,eADA,AACe,cADD,AAEd,gBAAiB,CAClB,AAEH,iBAEE,aAAa,AACb,gBAFA,AAEgB,eAFA,CAWjB,AAZD,oBAKI,qBAAqB,AACrB,cAAe,CAKhB,AAXH,0BAQM,qBAAqB,AACrB,gBAAiB,CAClB,AAIL,gBACE,YAAa,CAYd,AAbD,sBAGI,eAAiB,CAClB,AAJH,8BAOM,6CAA8C,CAC/C,AARL,yCAUM,YAAa,CACd","file":"hugo-toc.css","sourcesContent":["// Hugo {{ .TableOfContents }}\n$toc-background-color: #eee;\n$toc-font-size: .9rem;\n\n.toc-wrapper {\n  font-size: $toc-font-size;\n  padding: 0.5em 0.5em 0.5em 0em;\n  background: $toc-background-color;\n  label {\n    background: url(/img/menu-close-dark.svg) no-repeat right center;\n    display: block;\n    cursor: pointer;\n    padding-left: 1em;\n  }\n}\n#TableOfContents {\n  overflow: hidden;\n  margin-top: 0;\n  max-height: 100%;\n  > ul {\n    list-style-type: none;\n    padding-left: 0;\n    > li ul {\n      list-style-type: none;\n      padding-left: 1em;\n    }\n  }\n}\n\ninput#tocToggle {\n  display: none;\n  + label {\n    font-weight: bold;\n  }\n  &:checked {\n    + label {\n      background-image: url(/img/menu-open-dark.svg);\n    }\n    ~ #TableOfContents {\n      max-height: 0;\n    }\n  }\n}\n"]}

static/css/tocbot.css

@@ -0,0 +1,2 @@
+.toc-wrapper{background:#eee;font-size:.9rem;padding:.5em .5em .5em 0}.toc-wrapper label{background:url(/img/menu-close-dark.svg) no-repeat 100%;cursor:pointer;display:block;padding-left:1em}#TableOfContents{margin-top:0;max-height:100%;overflow:hidden}#TableOfContents>ul{list-style-type:none;padding-left:0}#TableOfContents>ul>li ul{list-style-type:none;padding-left:1em}input#tocToggle{display:none}input#tocToggle+label{font-weight:700}input#tocToggle:checked+label{background-image:url(/img/menu-open-dark.svg)}input#tocToggle:checked~#TableOfContents{max-height:0}.toc{background:#eee;font-size:.9rem;overflow-y:auto;padding-left:0;padding-top:1em}.toc>.toc-list{overflow:hidden;position:relative}.toc>.toc-list li{list-style:none}.toc-list{margin:0;padding-left:1rem}.is-collapsible{max-height:1000px;overflow:hidden}.is-collapsed{max-height:0}.is-position-fixed{position:fixed;top:0}
+/*# sourceMappingURL=tocbot.css.map */

static/css/tocbot.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["hugo-toc.scss","tocbot.scss"],"names":[],"mappings":"AAIA,aAGE,gBAFA,AAJyB,gBACN,AAInB,wBAA8B,CAQ/B,AAVD,mBAKI,wDAAgE,AAEhE,eADA,AACe,cADD,AAEd,gBAAiB,CAClB,AAEH,iBAEE,aAAa,AACb,gBAFA,AAEgB,eAFA,CAWjB,AAZD,oBAKI,qBAAqB,AACrB,cAAe,CAKhB,AAXH,0BAQM,qBAAqB,AACrB,gBAAiB,CAClB,AAIL,gBACE,YAAa,CAYd,AAbD,sBAGI,eAAiB,CAClB,AAJH,8BAOM,6CAA8C,CAC/C,AARL,yCAUM,YAAa,CACd,ACtCL,KAGE,gBAFA,ADFyB,gBACN,ACEnB,gBAAgB,AAEhB,eAAkB,AAClB,eAAgB,CAQjB,AAbD,eAOI,gBAAgB,AAChB,iBAAkB,CAInB,AAZH,kBAUM,eAAgB,CACjB,AAGL,UACE,SAAS,AACT,iBAAkB,CACnB,AACD,gBACE,kBAAkB,AAClB,eAAgB,CACjB,AACD,cACE,YAAa,CACd,AACD,mBACE,eAAe,AACf,KAAM,CACP","file":"tocbot.css","sourcesContent":["// Hugo {{ .TableOfContents }}\n$toc-background-color: #eee;\n$toc-font-size: .9rem;\n\n.toc-wrapper {\n  font-size: $toc-font-size;\n  padding: 0.5em 0.5em 0.5em 0em;\n  background: $toc-background-color;\n  label {\n    background: url(/img/menu-close-dark.svg) no-repeat right center;\n    display: block;\n    cursor: pointer;\n    padding-left: 1em;\n  }\n}\n#TableOfContents {\n  overflow: hidden;\n  margin-top: 0;\n  max-height: 100%;\n  > ul {\n    list-style-type: none;\n    padding-left: 0;\n    > li ul {\n      list-style-type: none;\n      padding-left: 1em;\n    }\n  }\n}\n\ninput#tocToggle {\n  display: none;\n  + label {\n    font-weight: bold;\n  }\n  &:checked {\n    + label {\n      background-image: url(/img/menu-open-dark.svg);\n    }\n    ~ #TableOfContents {\n      max-height: 0;\n    }\n  }\n}\n","@import 'hugo-toc';\n\n.toc {\n  font-size: $toc-font-size;\n  overflow-y: auto;\n  background: $toc-background-color;\n  padding-left: 0rem;\n  padding-top: 1em;\n  > .toc-list {\n    overflow: hidden;\n    position: relative;\n    li {\n      list-style: none;\n    }\n  }\n}\n.toc-list {\n  margin: 0;\n  padding-left: 1rem;\n}\n.is-collapsible {\n  max-height: 1000px;\n  overflow: hidden;\n}\n.is-collapsed {\n  max-height: 0;\n}\n.is-position-fixed {\n  position: fixed;\n  top: 0;\n}\n"]}

static/img/menu-close-dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>menu-close-dark</title>
+    <desc>Close Icon</desc>
+    <defs></defs>
+    <g id="Container" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-close" stroke="#000000" stroke-linecap="square">
+            <path d="M5,5 L16.3137085,16.3137085" id="Line-Copy-8"></path>
+            <path d="M5,16.3137086 L16.3137084,5" id="Line-Copy-7"></path>
+        </g>
+    </g>
+</svg>

static/img/menu-open-dark.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="21px" height="21px" viewBox="0 0 21 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>menu-open-dark</title>
+    <desc>Menu Icon</desc>
+    <defs></defs>
+    <g id="Container" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-menu" stroke="#000000" stroke-linecap="square">
+            <path d="M2.5,7.5 L18.5,7.5" id="Line-Copy-8"></path>
+            <path d="M2.5,13.5 L18.5,13.5" id="Line-Copy-7"></path>
+        </g>
+    </g>
+</svg>