From b517159c0e584ac67546e40907a883d6af4ff32c Mon Sep 17 00:00:00 2001 From: Huy Tran Date: Sun, 30 Sep 2018 09:32:57 +1000 Subject: [PATCH] add table of contents --- CHANGELOG.md | 51 +++++++++++++---------- README.md | 4 +- exampleSite/config.toml | 4 ++ layouts/partials/header/styles.html | 7 ++++ layouts/partials/page-single/content.html | 14 ++++++- static-src/scss/hugo-toc.scss | 43 +++++++++++++++++++ static-src/scss/tocbot.scss | 31 ++++++++++++++ static/css/hugo-toc.css | 2 + static/css/hugo-toc.css.map | 1 + static/css/tocbot.css | 2 + static/css/tocbot.css.map | 1 + static/img/menu-close-dark.svg | 12 ++++++ static/img/menu-open-dark.svg | 12 ++++++ 13 files changed, 161 insertions(+), 23 deletions(-) create mode 100644 static-src/scss/hugo-toc.scss create mode 100644 static-src/scss/tocbot.scss create mode 100644 static/css/hugo-toc.css create mode 100644 static/css/hugo-toc.css.map create mode 100644 static/css/tocbot.css create mode 100644 static/css/tocbot.css.map create mode 100644 static/img/menu-close-dark.svg create mode 100644 static/img/menu-open-dark.svg diff --git a/CHANGELOG.md b/CHANGELOG.md index 9521886..c9eed5c 100644 --- a/CHANGELOG.md +++ b/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 -* 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 `` and `
` +* 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 `` and `
` * 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. diff --git a/README.md b/README.md index 2e48eff..fe2d03e 100644 --- a/README.md +++ b/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/" ``` diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 9c7cd44..eda1a79 100644 --- a/exampleSite/config.toml +++ b/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] diff --git a/layouts/partials/header/styles.html b/layouts/partials/header/styles.html index 60ba7b6..f7371a7 100644 --- a/layouts/partials/header/styles.html +++ b/layouts/partials/header/styles.html @@ -1,3 +1,10 @@ {{ partial "header/styles-highlight.html" . }} +{{ with .Site.Params.toc }} + {{ if eq . "hugo" }} + + {{ else if eq . "tocbot"}} + + {{ end }} +{{ end }} diff --git a/layouts/partials/page-single/content.html b/layouts/partials/page-single/content.html index 7e1e2d3..2c1924b 100644 --- a/layouts/partials/page-single/content.html +++ b/layouts/partials/page-single/content.html @@ -5,9 +5,21 @@ {{.}} - {{ end }} + {{ end }} {{ partial "page-single/post-meta.html" . }} + {{ $tableOfContents := .TableOfContents }} + {{ with .Site.Params.toc }} +
+ + + {{ if eq . "hugo" }} + {{ $tableOfContents }} + {{ else if eq . "tocbot"}} +
+ {{ end }} +
+ {{ end }}
{{ .Content }}
diff --git a/static-src/scss/hugo-toc.scss b/static-src/scss/hugo-toc.scss new file mode 100644 index 0000000..8b2c657 --- /dev/null +++ b/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; + } + } +} diff --git a/static-src/scss/tocbot.scss b/static-src/scss/tocbot.scss new file mode 100644 index 0000000..ae50082 --- /dev/null +++ b/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; +} diff --git a/static/css/hugo-toc.css b/static/css/hugo-toc.css new file mode 100644 index 0000000..0d1ca51 --- /dev/null +++ b/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 */ diff --git a/static/css/hugo-toc.css.map b/static/css/hugo-toc.css.map new file mode 100644 index 0000000..4485a32 --- /dev/null +++ b/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"]} \ No newline at end of file diff --git a/static/css/tocbot.css b/static/css/tocbot.css new file mode 100644 index 0000000..ca184f9 --- /dev/null +++ b/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 */ diff --git a/static/css/tocbot.css.map b/static/css/tocbot.css.map new file mode 100644 index 0000000..6f059e9 --- /dev/null +++ b/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"]} \ No newline at end of file diff --git a/static/img/menu-close-dark.svg b/static/img/menu-close-dark.svg new file mode 100644 index 0000000..5874fb4 --- /dev/null +++ b/static/img/menu-close-dark.svg @@ -0,0 +1,12 @@ + + + menu-close-dark + Close Icon + + + + + + + + diff --git a/static/img/menu-open-dark.svg b/static/img/menu-open-dark.svg new file mode 100644 index 0000000..f0340ff --- /dev/null +++ b/static/img/menu-open-dark.svg @@ -0,0 +1,12 @@ + + + menu-open-dark + Menu Icon + + + + + + + +