add table of contents

This commit is contained in:
Huy Tran 2018-09-30 09:32:57 +10:00
parent 1b974ce9d3
commit b517159c0e
13 changed files with 161 additions and 23 deletions

View File

@ -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
* Refactors and consolidates all responsive breakpoints and creates a new style [_\_responsive.scss_](static-src/scss/hyde-hyde/_responsive.scss)
* Refactors portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.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)
* Refactors misc. styles into [_\_misc.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_misc.scss)
* Removes [_\_customised.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_customised.scss)
* Revise the shortcode ['fig.html'](https://github.com/htr3n/hyde-hyde/blob/master/layouts/shortcodes/fig.html)
* 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
* Refactor and consolidate all responsive breakpoints and creates a new style [_\_responsive.scss_](static-src/scss/hyde-hyde/_responsive.scss)
* Refactor portfolio's projects into [_\_project.scss_](https://github.com/htr3n/hyde-hyde/blob/master/static-src/scss/hyde-hyde/_project.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)
* 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)
* Adding 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))
* Adding 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
* Changing styles for links, tags, text
* Adding some handy shortcodes for `<kbd></kbd>` and `<blockquote></blockquote>`
* Switch to main fixed width font [Source Code Pro](https://fonts.google.com/specimen/Source+Code+Pro)
* Add OpenGraph and TwitterCard templates (for SEO)
* Add '_Related Articles_' (see [_layouts/partials/post-related.html_](https://github.com/htr3n/hyde-hyde/tree/v2.0.0/layouts/partials/post-related.html))
* Add page navigation _NEXT / PREVIOUS_
* 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
* Change styles for links, tags, text
* 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/))
* Using [highlight.js](https://highlightjs.org) for code highlighting
* Using [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)
* Adding [GraphComment](https://graphcomment.com) for replacing the built-in [Disqus](https://disqus.com)
* 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/))
* Use [highlight.js](https://highlightjs.org) for code highlighting
* Use [Font-Awesome 5](https://fontawesome.com)'s icons
* Use main font [Fira-Sans](https://fonts.google.com/specimen/Fira+Sans) + fixed width font [Roboto Mono](https://fonts.google.com/specimen/Roboto+Mono)
* 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.

View File

@ -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/"
```

View File

@ -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]

View File

@ -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 }}

View File

@ -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>

View File

@ -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;
}
}
}

View File

@ -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;
}

2
static/css/hugo-toc.css Normal file
View File

@ -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 */

View File

@ -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"]}

2
static/css/tocbot.css Normal file
View File

@ -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 */

View File

@ -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"]}

View File

@ -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>

After

Width:  |  Height:  |  Size: 615 B

View File

@ -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>

After

Width:  |  Height:  |  Size: 596 B