From a98bf8ca122e88fc7d108a2360b02870a124b72c Mon Sep 17 00:00:00 2001
From: Thibaud Lepretre <thibaud.lepretre@gmail.com>
Date: Sat, 7 Aug 2021 13:49:57 +0200
Subject: Add new shortcode toc to support new markup

fixes #395
---
 docs/user.md                                         | 20 +++++++++++++++++---
 exampleSite/config.toml                              | 10 ++++++++++
 exampleSite/content/posts/Tags-plugins-showcase.md   |  2 +-
 .../content/posts/Welcome-to-the-new-Tranquilpeak.md |  3 ++-
 .../content/posts/highlighted-code-showcase.md       |  2 +-
 layouts/_default/single.html                         |  2 +-
 layouts/shortcodes/toc.html                          |  2 ++
 7 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 layouts/shortcodes/toc.html

diff --git a/docs/user.md b/docs/user.md
index 999dd35..af432df 100644
--- a/docs/user.md
+++ b/docs/user.md
@@ -668,10 +668,24 @@ Use:
 
 ### Display table of contents
 
-As post excerpt feature enable with `<!--more-->` comment, you can display the table of contents of a post with  `<!-- toc -->`.  Place this comment where you want to display the table of content.
+Hugo Tranquilpeak theme provides a shortcode for adding table of content inside your content.
 
-Here is what looks like the table of contents generated:
-![thumbnail-image-position-left](https://s3-ap-northeast-1.amazonaws.com/tranquilpeak-hexo-theme/docs/1.4.0/toc-400.png)
+syntgax:
+```
+{{< toc >}}
+```
+
+However you may have to update your hugo `config.toml` configuration to be sure that `startLevel` is matching your content. By default (see [official documentation](https://gohugo.io/getting-started/configuration-markup/#table-of-contents)) Hugo detects table of content starting level 2, that mean `<h2>my title</h2>` or `## my title`.
+
+If you used to write `# my title` and so transformed to `<h1>my title</h1>`, the table of content will be empty by default if you're not updating `startLevel` to `startLevel = 1`
+
+```toml
+[markup]
+  [markup.tableOfContents]
+    endLevel = 3
+    ordered = false
+    startLevel = 1
+```
 
 ### Tags
 
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index a55de40..13a98f9 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -30,6 +30,16 @@ canonifyurls = true
   category = "categories"
   archive = "archives"
 
+# ------
+# Markup
+# ------
+[markup]
+  # Set startLevel = 1 to support # title (<h1>title</h1>) otherwise table of content is blank/empty
+  [markup.tableOfContents]
+    endLevel = 3
+    ordered = false
+    startLevel = 1
+
 # ------
 # Author
 # ------
diff --git a/exampleSite/content/posts/Tags-plugins-showcase.md b/exampleSite/content/posts/Tags-plugins-showcase.md
index 5ded476..73ff957 100644
--- a/exampleSite/content/posts/Tags-plugins-showcase.md
+++ b/exampleSite/content/posts/Tags-plugins-showcase.md
@@ -11,7 +11,7 @@ thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/tag-plugins-showcase/car-6-140.j
 This post is used to show how tag plugins are displayed. See [docs](https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#tags) for more info.
 <!--more-->
 
-<!-- toc -->
+{{< toc >}}
 
 # Alert
 
diff --git a/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md b/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md
index 108d703..fe75f76 100644
--- a/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md
+++ b/exampleSite/content/posts/Welcome-to-the-new-Tranquilpeak.md
@@ -25,7 +25,8 @@ Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many
 
 ![Tranquilpeak](/img/showcase.png)
 Tranquilpeak is a gorgeous responsive theme for Hugo blog framework. It has many features and integrated services to improve user experience.
-<!-- toc -->
+
+{{< toc >}}
 
 # Tranquilpeak
 
diff --git a/exampleSite/content/posts/highlighted-code-showcase.md b/exampleSite/content/posts/highlighted-code-showcase.md
index 80665aa..1e8cb61 100644
--- a/exampleSite/content/posts/highlighted-code-showcase.md
+++ b/exampleSite/content/posts/highlighted-code-showcase.md
@@ -15,7 +15,7 @@ thumbnailImage: //d1u9biwaxjngwg.cloudfront.net/highlighted-code-showcase/peak-1
 Tranquilpeak Hugo theme have its own theme to highlight source code. It's based on GitHub theme: simple and elegant. Check out how it sublimate source codes.
 <!--more-->
 
-<!-- toc -->
+{{< toc >}}
 
 # Tabbed code block
 
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 19c55b8..d00724c 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -17,7 +17,7 @@
           {{ end }}
           <div class="post-content markdown">
             <div class="main-content-wrap">
-              {{ (replaceRE "<!--\\s*[t|T][o|O][c|C]\\s*-->" (printf "<h1 id=\"table-of-contents\">%s</h1>%s" (i18n "post.toc") .TableOfContents) .Content) | safeHTML }}
+              {{ .Content }}
               {{ partial "post/gallery.html" . }}
             </div>
           </div>
diff --git a/layouts/shortcodes/toc.html b/layouts/shortcodes/toc.html
new file mode 100644
index 0000000..669f274
--- /dev/null
+++ b/layouts/shortcodes/toc.html
@@ -0,0 +1,2 @@
+<h1 id="table-of-contents">{{ i18n "post.toc" }}</h1>
+{{ .Page.TableOfContents }}
-- 
cgit v1.2.3