add the toc shortcode and revamp the readme

2 files changed, 215 insertions, 53 deletions

diff --git a/README.md b/README.md
index ae9316b..778bad6 100755
--- a/README.md
+++ b/README.md
@@ -1,5 +1,6 @@
 # Hugo-Octopress <!-- omit in toc -->
-Hugo-Octopress is a port of the classic [Octopress][octopress-link] theme to [Hugo][hugo-link].
+Hugo-Octopress is a port of the classic [Octopress][octopress-link] theme to
+[Hugo][hugo-link].
 
 Live demo using the unmodified theme:
 
@@ -14,7 +15,7 @@ My personal website uses the compact index (see below):
 ## Contents <!-- omit in toc -->
 - [Configuration](#configuration)
 - [Code highlight](#code-highlight)
-- [Markdown options](#markdown-options)
+- [Blackfriday options](#blackfriday-options)
 - [CSS override](#css-override)
 - [Navigation menu](#navigation-menu)
 - [Sidebar](#sidebar)
@@ -25,12 +26,16 @@ My personal website uses the compact index (see below):
 - [Shortcodes](#shortcodes)
   - [Code caption](#code-caption)
   - [Image caption](#image-caption)
+  - [Table of Contents](#table-of-contents)
 - [Pages](#pages)
   - [License page](#license-page)
   - [Not Found or 404.html](#not-found-or-404html)
   - [Taxonomy pages](#taxonomy-pages)
   - [Individual pages](#individual-pages)
-- [Table of contents](#table-of-contents)
+- [Table of contents](#table-of-contents-1)
+  - [Use toc in Frontmatter](#use-toc-in-frontmatter)
+  - [Use the toc Shortcode](#use-the-toc-shortcode)
+  - [Editor Plugins](#editor-plugins)
 - [Disqus](#disqus)
 - [Twitter Card](#twitter-card)
 - [Compact Index](#compact-index)
@@ -46,7 +51,10 @@ My personal website uses the compact index (see below):
 ![screenshot](https://raw.githubusercontent.com/parsiya/Hugo-Octopress/master/images/screenshot.png)
 
 ## Configuration
-Hugo-Octopress can be configured by modifying the parameters in the [configuration file](https://gohugo.io/overview/configuration/). A working config file `sample-config.toml` is provided. Some miscellaneous parameters are explained below:
+Hugo-Octopress can be configured by modifying the parameters in the
+[configuration file](https://gohugo.io/overview/configuration/). A working
+config file `sample-config.toml` is provided. Some miscellaneous parameters are
+explained below:
 
 ``` toml
 baseurl = "http://example.com"
@@ -119,7 +127,11 @@ post = "/blog/:year-:month-:day-:title/"
 ```
 
 ## Code highlight
-This theme uses the built-in [Chroma](https://github.com/alecthomas/chroma) highlighter with the `solarized-dark` theme. See all supported styles at [https://xyproto.github.io/splash/docs/all.html](https://xyproto.github.io/splash/docs/all.html).
+This theme uses the built-in [Chroma][chroma-link] highlighter with the
+`solarized-dark` theme. See all supported styles at
+[https://xyproto.github.io/splash/docs/all.html](https://xyproto.github.io/splash/docs/all.html).
+
+[chroma-link]: https://github.com/alecthomas/chroma
 
 Some options to control code highlighting:
 
@@ -136,10 +148,15 @@ pygmentsStyle = "solarized-dark"
 # For example: pygmentsoptions = "linenos=true"
 ```
 
-For more information see [Syntax Highlighting](https://gohugo.io/extras/highlighting/) in Hugo's documentation.
+For more information see [Syntax Highlighting][hugo-syntax-highlighting] in
+Hugo's documentation.
+
+[hugo-syntax-highlighting]: https://gohugo.io/extras/highlighting/
 
-## Markdown options
-Blackfriday is Hugo's markdown engine. For a complete list of options see [Configure Blackfriday rendering](https://gohugo.io/getting-started/configuration/#configure-blackfriday-rendering). Blackfriday options can be set as follows:
+## Blackfriday options
+Blackfriday was Hugo's markdown engine. For a complete list of options see
+[Configure Blackfriday rendering][blackfriday-config]. Blackfriday options can
+be set as follows:
 
 ``` toml
 [blackfriday]
@@ -147,10 +164,19 @@ Blackfriday is Hugo's markdown engine. For a complete list of options see [Confi
   fractions = false
 ```
 
+[blackfriday-config]: https://gohugo.io/getting-started/configuration-markup#blackfriday
+
 ## CSS override
-You can override the built-in CSS and add your own. Put your CSS files in the `static` directory of your website. While storing them inside the `themes/Hugo-Octopress/static` directory works, it's not recommended (keep your website and theme as separated as possible to be able to switch themes easily). Then modify the `customCSS` parameter. The path should be relative to the `static` folder. These CSS files will be added through the `header` partial after the built-in CSS file.
+You can override the built-in CSS and add your own. Put your CSS files in the
+`static` directory of your website. While storing them inside the
+`themes/Hugo-Octopress/static` directory works, it's not recommended (keep your
+website and theme as separated as possible to be able to switch themes easily).
+Then modify the `customCSS` parameter. The path should be relative to the
+`static` folder. These CSS files will be added through the `header` partial
+after the built-in CSS file.
 
-For example, if custom CSS files are `static/css/custom.css` and `static/css/custom2.css` then `customCSS` will look like this:
+For example, if custom CSS files are `static/css/custom.css` and
+`static/css/custom2.css` then `customCSS` will look like this:
 
 ``` toml
 [params]
@@ -158,11 +184,18 @@ For example, if custom CSS files are `static/css/custom.css` and `static/css/cus
 ```
 
 ## Navigation menu
-Links in the navigation menu (everything other than Google search and RSS icon) can be customized. The navigation menu is generated using the `layouts/partials/navigation.html` partial.
+Links in the navigation menu (everything other than Google search and RSS icon)
+can be customized. The navigation menu is generated using the
+`layouts/partials/navigation.html` partial.
 
-By default, navigation menu links will open in the same window. You can change this behavior by setting the `navigationNewWindow` parameter to true. Links to root ("/") will always open in the same window. Currently, Hugo does not support adding custom attributes to menus.
+By default, navigation menu links will open in the same window. You can change
+this behavior by setting the `navigationNewWindow` parameter to true. Links to
+root ("/") will always open in the same window. Currently, Hugo does not support
+adding custom attributes to menus.
 
-Links are sorted according to weight from left to right. For example, a link with weight of `-10` will appear to the left of links with weights `0` or `10`. Links can be added to the config file:
+Links are sorted according to weight from left to right. For example, a link
+with weight of `-10` will appear to the left of links with weights `0` or `10`.
+Links can be added to the config file:
 
 ``` toml
 [[menu.main]]
@@ -203,12 +236,17 @@ The sidebar has four sections, from top to bottom:
 The sidebar is generated using the partial at `layouts/partials/sidebar.html`.
 
 ### Sidebar text
-The sidebar text has two parts and both can be configured. Both are passed to `markdownify` so you can use markdown (e.g. add links or new lines).
+The sidebar text has two parts and both can be configured. Both are passed to
+`markdownify` so you can use markdown (e.g. add links or new lines).
 
-* Sidebar header appears first in an `<h1>` tag. It can be configured with `sidebarHeader`.
+* Sidebar header appears first in an `<h1>` tag. It can be configured with
+  `sidebarHeader`.
 * Sidebar text appears under the header and is in `sidebarText`.
 
-Add new lines with `</br>` or using markdown (two spaces at the end of a line or one empty line in between two paragraphs). When adding two spaces, remember to remove the indentation at the start of the new line otherwise the it will be treated as a codeblock.
+Add new lines with `</br>` or using markdown (two spaces at the end of a line or
+one empty line in between two paragraphs). When adding two spaces, remember to
+remove the indentation at the start of the new line otherwise the it will be
+treated as a codeblock.
 
 ``` toml
 sidebarHeader = "Sidebar Header"
@@ -242,17 +280,33 @@ Sidebar social network icons are configured as follows:
   bitcoin = ""
 ```
 
-Icon sequence is unfortunately hardcoded. To modify, copy `your-website/themes/Hugo-Octopress/layouts/partials/sidebar.html` to `your-website/layouts/partials/sidebar.html` and modify the sequence. Look for `<li class="sidebar-nav-item">` tags. Add a `</br>` tag to create a new line.
+Icon sequence is unfortunately hardcoded. To modify, copy
+`your-website/themes/Hugo-Octopress/layouts/partials/sidebar.html` to
+`your-website/layouts/partials/sidebar.html` and modify the sequence. Look for
+`<li class="sidebar-nav-item">` tags. Add a `</br>` tag to create a new line.
+
+Code to display links (and the idea to use these icons) is from
+[Hyde-x][hyde-x-theme].
+
+[hyde-x-theme]: https://github.com/zyro/hyde-x/
 
-Code to display links (and the idea to use these icons) is from [Hyde-x](https://github.com/zyro/hyde-x/).
+Icons are from [Font Awesome][font-awesome] and [Fork Awesome][fork-awesome]. To
+use icons with square dark backgrounds add `-square`. For example,
+`<i class="fa fa-twitter-square fa-3x"></i>`. Size can be from 1 to 5 use
+`fa-lg` to make them adaptive.
 
-Icons are from [Font Awesome](https://fontawesome.com/) and [Fork Awesome](https://github.com/ForkAwesome/Fork-Awesome). To use icons with square dark backgrounds add `-square`. For example `<i class="fa fa-twitter-square fa-3x"></i>`. Size can be from 1 to 5 use `fa-lg` to make them adaptive.
+[font-awesome]: https://fontawesome.com/
+[fork-awesome]: https://github.com/ForkAwesome/Fork-Awesome
 
 ### Sidebar menu
-This menu can be enabled by setting `sidebarMenuEnabled` to `true`. It has two parts:
+This menu can be enabled by setting `sidebarMenuEnabled` to `true`. It has two
+sections:
 
-* A header that appears inside the `<h1>` tag on top. It can be set by `sidebarMenuHeader`. This part only supports text.
-* A series of links. They can be configured similar to navigation menu items by using the `[[menu.sidebar]]` tag. Set `sidebarNewWindow` to `true` to open these links in a new window
+* A header that appears inside the `<h1>` tag on top. It can be set by
+  `sidebarMenuHeader`. This part only supports text.
+* A series of links. They can be configured similar to navigation menu items by
+  using the `[[menu.sidebar]]` tag. Set `sidebarNewWindow` to `true` to open
+  these links in a new window
 
 ``` toml
 [[menu.sidebar]]
@@ -267,15 +321,28 @@ This menu can be enabled by setting `sidebarMenuEnabled` to `true`. It has two p
 ```
 
 ### Recent posts
-Last x posts can be displayed in the sidebar. This number is controlled by `sidebarRecentLimit`. To hide this section you can remove `sidebarRecentLimit` from the config file or set it to zero.
+Last x posts can be displayed in the sidebar. This number is controlled by
+`sidebarRecentLimit`. To hide this section you can remove `sidebarRecentLimit`
+from the config file or set it to zero.
 
 ## Shortcodes
-Creating [shortcodes](https://gohugo.io/extras/shortcodes/) in Hugo was surprisingly easy (and one of the reasons I switched to it). I recreated two plugins from Octopress. They add captions to code blocks and images. These shortcodes are in `layouts/shortcodes/`.
+Creating [shortcodes][hugo-shortcodes] in Hugo is very easy and one of the
+reasons I switched to it. I recreated a few plugins from Octopress. They add
+captions to code blocks and images. These shortcodes are in
+`layouts/shortcodes/`.
 
-For all my Hugo shortcodes see [https://github.com/parsiya/Hugo-Shortcodes](https://github.com/parsiya/Hugo-Shortcodes).
+For all my Hugo shortcodes see
+[https://github.com/parsiya/Hugo-Shortcodes][my-shortcodes].
+
+[hugo-shortcodes]: https://gohugo.io/extras/shortcodes
+[my-shortcodes]: https://github.com/parsiya/Hugo-Shortcode
 
 ### Code caption
-This shortcode adds a caption to codeblocks. The codeblock is wrapped in a `<figure>` tag and caption is added using `<figcaption>`. It has two parameters, `title` which is the caption of the code block and `lang` which is the language that is passed to the Hugo's `highlight` function along with `linenos=true` to enable line numbers.
+This shortcode adds a caption to codeblocks. The codeblock is wrapped in a
+`<figure>` tag and caption is added using `<figcaption>`. It has two parameters,
+`title` which is the caption of the code block and `lang` which is the language
+that is passed to the Hugo's `highlight` function along with `linenos=true` to
+enable line numbers.
 
 Usage and source (parameters are named and not positional):
 
@@ -296,7 +363,12 @@ And will look like:
 
 ![picture](https://raw.githubusercontent.com/parsiya/Hugo-Octopress/master/images/codecaption1.png).
 
-If the code inside the tag overflows, a horizontal sidebar will be added to the table. It took me a while to achieve this as the `highlight` function created tables that were out of my control. The output from `highlight` is wrapped in `<div class="codewrapper">` and the scroll bar will be added for the whole `div`. The following in the CSS file (starting from line 2225) enables this behavior:
+If the code inside the tag overflows, a horizontal sidebar will be added to the
+table. It took me a while to achieve this as the `highlight` function created
+tables that were out of my control. The output from `highlight` is wrapped in
+`<div class="codewrapper">` and the scroll bar will be added for the whole
+`div`. The following in the CSS file (starting from line 2225) enables this
+behavior:
 
 ``` css
 div.codewrapper {
@@ -307,7 +379,9 @@ div.codewrapper {
 ```
 
 ### Image caption
-This shortcode adds captions to pictures. Due to the way the original CSS file was organized, this shortcode does not use `<figure>` and `<figcaption>`. `Alt` tag is also set to `title`.
+This shortcode adds captions to pictures. Due to the way the original CSS file
+was organized, this shortcode does not use `<figure>` and `<figcaption>`. `Alt`
+tag is also set to `title`.
 
 Usage (parameters are named and not positional):
 
@@ -324,11 +398,18 @@ Results in:
 </span>
 ```
 
+### Table of Contents
+This shortcode adds table of contents to the theme. You can use it to add the
+toc to anywhere inthe page with `{{< toc >}}`.
+
 ## Pages
-This section discusses the different kind of pages that are supported by the theme.
+This section discusses the different kind of pages that are supported by the
+theme.
 
 ### License page
-License page address is `baseurl/license/`. Create a markdown file containing the text for the license page under `content` and set its type to `license` in frontmatter:
+License page address is `baseurl/license/`. Create a markdown file containing
+the text for the license page under `content` and set its type to `license` in
+frontmatter:
 
 ``` yaml
 ---
@@ -347,10 +428,14 @@ The `404.html` page has two optional parameters and both support markdown:
 * `notFoundHeader`: 404 page title
 * `notFoundText`: 404 page text
 
-If they are not set in the config file, theme's default page is used (`layouts/404.html`).
+If they are not set in the config file, theme's default page is used
+(`layouts/404.html`).
 
 ### Taxonomy pages
-You can create taxonomy lists (e.g. categories and tags). Set `generateTaxonomyList = true` to get generate them at `baseURL/tags/` and `baseURL/categories`. By default items are sorted by count. `sortTaxonomyAlphabetical = true` changes the sort to alphabetical.
+You can create taxonomy lists (e.g. categories and tags). Set
+`generateTaxonomyList = true` to get generate them at `baseURL/tags/` and
+`baseURL/categories`. By default items are sorted by count.
+`sortTaxonomyAlphabetical = true` changes the sort to alphabetical.
 
 ``` toml
 [Params]
@@ -362,7 +447,8 @@ You can create taxonomy lists (e.g. categories and tags). Set `generateTaxonomyL
 
 To revert, remove `sortTaxonomyAlphabetical` or set it to false.
 
-Note: As of Hugo 0.33, `indexes` has been removed. If your taxonomy pages are not rendered, please update to the latest version of Hugo. Templates are now at:
+Note: As of Hugo 0.33, `indexes` has been removed. If your taxonomy pages are
+not rendered, please update to the latest version of Hugo. Templates are now at:
 
 * `/layouts/category/category.html`
 * `/layouts/tag/tag.html`
@@ -373,12 +459,19 @@ Individual pages can be created in two ways:
 * Create a new content file in `content/page`.
 * Create a page anywhere inside `content` and set the type `page` in frontmatter. E.g. `type: page`.
 
-The template for individual pages is at `Hugo-Octopress/layouts/page/single.html`. It can be overridden by a file in the website's `layouts/page/single.html`. For more information see [Single Page Templates in Hugodocs](https://gohugo.io/templates/single-page-templates/).
+The template for individual pages is at
+`Hugo-Octopress/layouts/page/single.html`. It can be overridden by a file in the
+website's `layouts/page/single.html`. For more information see
+[Single Page Templates in Hugodocs][hugo-single-page-templates].
+
+[hugo-single-page-templates]: https://gohugo.io/templates/single-page-templates/
 
 ## Table of contents
-You can add `Table of Contents (ToC)` to pages. The ToC is on top of the actual page and does not appear in the summary. You can also use various editor plugins to manually create them inside your markdown files.
+There are three ways to add `Table of Contents (ToC)` to pages.
 
-Customize ToC either globally or for each page:
+### Use toc in Frontmatter
+This ToC is on top of the page and does not appear in the summary. You customize
+the ToC for each page or globally:
 
 1. Add a variable named  `toc` to the frontmatter of the post/page and set it to `true`.
 
@@ -396,16 +489,44 @@ Customize ToC either globally or for each page:
       tableOfContents = true
     ```
 
-The `toc` variable in the frontmatter has priority. If it is set to `false` the global setting is ignored.
+The `toc` variable in the frontmatter has priority. If it is set to `false` the
+global setting is ignored.
+
+### Use the toc Shortcode
+If you want the table to appear in a different location use the shortcode. For
+example, in [the cheatsheet on my website][website-cheatsheet] it appears after
+the summary.
+
+```
+---
+frontmatter
+---
+
+summary or whatever.
+
+{{< toc >}}
+```
+
+[website-cheatsheet]: https://raw.githubusercontent.com/parsiya/parsiya.net/master/content/page/CheatSheet.markdown
+
+### Editor Plugins
+There are various editor plugins that create a table in markdown in the files.
+This self-contained and not reliant on the theme or the shortcode. I use the VS
+Code plugin [Markdown All in One][markdown-vscode-toc].
+
+[markdown-vscode-toc]: https://github.com/yzhang-gh/vscode-markdown#table-of-contents
 
 ## Disqus
-Hugo supports Disqus. Note Disqus shortname is directly in the config file (and not under `params`):
+Hugo supports Disqus. Note Disqus shortname is directly in the config file (and
+not under `params`):
 
 ``` toml
 disqusShortname = "whatever"
 ```
 
-By default, Disqus is not enabled on localhost using `hugo serve`. This can be disabled (e.g. if you want to test Disqus locally) by commenting the `if and return` lines in the Disqus partial in `layouts/partials/disqus.html`.
+By default, Disqus is not enabled on localhost using `hugo serve`. This can be
+disabled (e.g. if you want to test Disqus locally) by commenting the
+`if and return` lines in the Disqus partial in `layouts/partials/disqus.html`.
 
 ## Twitter Card
 Twitter card support can be enabled in the config file under `Params`:
@@ -422,13 +543,17 @@ Twitter card support can be enabled in the config file under `Params`:
   twitterCardAuthor = "CryptoGangsta"
 ```
 
-After Twitter card is enabled, you can add summary images to your posts in front matter with `twitterImage`:
+After Twitter card is enabled, you can add summary images to your posts in front
+matter with `twitterImage`:
 
 ``` yaml
 twitterImage: 02-fuzzer-crash.png
 ```
 
-**Note:** Image URL should be relative to the page, otherwise the final URL will not be correct. In short, image URL should be part of the page bundle. In this case, both `index.md` and `02-fuzzer-crash.png` are in the same root directory. If the image is in a subdirectory of page bundle, it can be added like this:
+**Note:** Image URL should be relative to the page, otherwise the final URL will
+not be correct. In short, image URL should be part of the page bundle. In this
+case, both `index.md` and `02-fuzzer-crash.png` are in the same root directory.
+If the image is in a subdirectory of page bundle, it can be added like this:
 
 ``` yaml
 twitterImage: images/02-fuzzer-crash.png
@@ -437,7 +562,9 @@ twitterImage: images/02-fuzzer-crash.png
 The template can be modified at `Hugo-Octopress/partials/custom_twitter_card.html`.
 
 ## Compact Index
-The original theme renders each post's summary in the main page. I prefer a more compact index and have been using it for my own website for quite a while. You can enable it by adding the following to the config file:
+The original theme renders each post's summary in the main page. I prefer a more
+compact index and have been using it for my own website for quite a while. You
+can enable it by adding the following to the config file:
 
 ``` toml
 [params]
@@ -450,13 +577,19 @@ Compare the views (classic - compact) - click for full-size image:
 [![classic index](images/classicindex_tn.png)](https://raw.githubusercontent.com/parsiya/Hugo-Octopress/master/images/classicindex.png) [![compact index](images/compactindex_tn.png)](https://raw.githubusercontent.com/parsiya/Hugo-Octopress/master/images/compactindex.png)
 
 ## mainSections
-Hugo-Octopress supports using the [mainSections](https://gohugo.io/functions/where/#mainsections) property in the config file to display different kinds of posts on the main page. If not defined, `mainSection` will default to the section with the most number of pages. In a vanilla Hugo-Octopress setup, it will be under `post`. However, you can add your own in the config file as follows:
+Hugo-Octopress supports using the [mainSections][hugo-mainsections] property in
+the config file to display different kinds of posts on the main page. If not
+defined, `mainSection` will default to the section with the most number of
+pages. In a vanilla Hugo-Octopress setup, it will be under `post`. However, you
+can add your own in the config file as follows:
 
 ```toml
 [params]
   mainSections = ["posts", "blogs"]
 ```
 
+[hugo-mainsections]: https://gohugo.io/functions/where/#mainsections
+
 See the code in `layouts/partials/classic_index.html`:
 
 ```html
@@ -471,9 +604,14 @@ See the code in `layouts/partials/classic_index.html`:
 Common issues when dealing with the theme.
 
 ### Hugo page summary bug
-Without a summary divider `<!--more-->`, Hugo uses the first 70 words of the post. The result is usually not pretty and contains raw HTML. Always use the summary divider `<!--more-->` in your posts.
+Without a summary divider `<!--more-->`, Hugo uses the first 70 words of the
+post. The result is usually not pretty and contains raw HTML. Always use the
+summary divider `<!--more-->` in your posts. This does not matter if you
+use the compact index because it does not use the summary.
 
-Hugo does not display render style links in the page summary if the link is also not before the summary divider. You can read more it [here](https://discuss.gohugo.io/t/markdown-content-renders-as-regular-text-in-summary/1396/12).
+Hugo does not display render style links in the page summary if the link is also
+not before the summary divider. You can read more it
+[here](https://discuss.gohugo.io/t/markdown-content-renders-as-regular-text-in-summary/1396/12).
 
 Reference style links look like this:
 
@@ -492,25 +630,43 @@ There are two workarounds:
 2. Put the reference links before the summary divider.
 
 ### Empty Posts Link on Homepage
-After rebuilding the blog with Hugo v0.57+, you may see an single `Posts` link in the classic index. Update to Hugo `0.57.2+` (there is an issue with `0.57.1`) and it should work.
+After rebuilding the blog with Hugo v0.57+, you may see an single `Posts` link
+in the classic index. Update to Hugo `0.57.2+` (there is an issue with `0.57.1`)
+and it should work.
 
 For more information please see:
 
 * https://github.com/gohugoio/hugoThemes/issues/682
 
 ## Issues/TODO
-If you discover any issues/bugs or want new features please use the Github issue tracker. Please keep in my mind that development has not been my day job for quite a while and I may be slow in fixing things (don't be surprised if I ask you about details).
+If you discover any issues/bugs or want new features please use the Github issue
+tracker. Please keep in my mind that development has not been my day job for
+quite a while and I may be slow in fixing things (don't be surprised if I ask
+you about details).
 
-**The css is a mess.** The CSS file is taken directly from the classic Octopress theme. I found it easier to just modify the templates to generate HTML code similar to Octopress' output and use the existing CSS file. It's bulky (around 53KBs and 2300 lines) and it probably has code for elements that are never used (also duplicates).
+**The css is a mess.** The CSS file is taken directly from the classic Octopress
+theme. I found it easier to just modify the templates to generate HTML code
+similar to Octopress' output and use the existing CSS file. It's bulky (around
+53KBs and 2300 lines) and it probably has code for elements that are never used
+(also duplicates).
 
 ## Attribution
-* [Octopress](octopress-link) is created by [Brandon Mathis](https://github.com/imathis). Octopress source can be found on [https://github.com/imathis/octopress](https://github.com/imathis/octopress).
-* Some code was taken from the [Hyde-x](https://github.com/zyro/hyde-x) Hugo theme by [Andrei Mihu](http://andreimihu.com/).
-* Sidebar icons are from [Font Awesome](https://github.com/FortAwesome/Font-Awesome) by Dave Gandy and [Fork Awesome](https://github.com/ForkAwesome/Fork-Awesome).
-* Special thanks to [contributors](https://github.com/parsiya/Hugo-Octopress/graphs/contributors) and everyone who has helped with issues.
+* [Octopress][octopress-link] is created by [Brandon Mathis][mathis-link].
+  Octopress source can be found on
+  [https://github.com/imathis/octopress][octopress-github].
+* Some code was taken from the [Hyde-x][hyde-x-theme] Hugo theme by [Andrei
+  Mihu][andrei-mihu-link].
+* Sidebar icons are from [Font Awesome][font-awesome] by Dave Gandy and [Fork Awesome][fork-awesome].
+* Special thanks to [contributors][theme-contributors] and everyone who has
+  helped with issues.
+
+[octopress-github]: https://github.com/octopress/octopress
+[mathis-link]: https://github.com/imathis
+[theme-contributors]: https://github.com/parsiya/Hugo-Octopress/graphs/contributors
+[andrei-mihu-link]: http://andreimihu.com/
 
 ## Ported by
-Ported by Parsia Hakimian:
+Ported by Parsia:
 
 * Website: [parsiya.net](https://parsiya.net)
 * Twitter: [@CryptoGangsta](https://twitter.com/cryptogangsta)
diff --git a/layouts/shortcodes/toc.html b/layouts/shortcodes/toc.html
new file mode 100644
index 0000000..3a6f3ae
--- /dev/null
+++ b/layouts/shortcodes/toc.html
@@ -0,0 +1,6 @@
+
+<!-- Author: Parsia Hakimian https://github.com/parsiya/Hugo-Shortcodes -->
+
+<!-- Creates a table of content -->
+
+{{ .Page.TableOfContents }}