feat: add the toc.position parameter (#547)

start: on the left of content end (default): on the right of content content: above the content
hbstack · Dec 14, 2023 · 68b9197 · 68b9197
1 parent 2639b86
commit 68b9197
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 15 deletions.
diff --git a/assets/hb/modules/blog/scss/post/_main.scss b/assets/hb/modules/blog/scss/post/_main.scss
@@ -8,13 +8,23 @@
     grid-template-rows: auto auto 1fr;
 
     @include media-breakpoint-up(lg) {
-        grid-template-areas:
-            "intro toc"
-            "main toc";
-        /* stylelint-disable declaration-block-no-redundant-longhand-properties */
-        grid-template-rows: auto 1fr;
-        grid-template-columns: 4fr 1fr;
-        /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+        @if $hb-blog-toc-position == 'start' {
+            grid-template-areas:
+                "toc intro"
+                "toc main";
+            /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+            grid-template-rows: 1fr auto;
+            grid-template-columns: 1fr 4fr;
+            /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+        } @else if $hb-blog-toc-position == 'end' {
+            grid-template-areas:
+                "intro toc"
+                "main toc";
+            /* stylelint-disable declaration-block-no-redundant-longhand-properties */
+            grid-template-rows: auto 1fr;
+            grid-template-columns: 4fr 1fr;
+            /* stylelint-enable declaration-block-no-redundant-longhand-properties */
+        }
     }
 }
 

diff --git a/assets/hb/modules/blog/scss/post/_toc.scss b/assets/hb/modules/blog/scss/post/_toc.scss
@@ -7,14 +7,15 @@
 
         /* stylelint-disable selector-id-pattern */
         #TableOfContents {
-            border-bottom: 1px solid var(--#{$prefix}border-color);
             font-size: 1rem !important;
         }
         /* stylelint-enable selector-id-pattern */
     }
 
     @include media-breakpoint-up(lg) {
-        height: calc(100vh - var(--#{$prefix}top-offset));
+        @if $hb-blog-toc-position != 'content' {
+            height: calc(100vh - var(--#{$prefix}top-offset));
+        }
 
         @include top-offset;
     }

diff --git a/assets/hb/modules/blog/scss/variables.tmpl.scss b/assets/hb/modules/blog/scss/variables.tmpl.scss
@@ -2,3 +2,6 @@
 $hb-blog-sidebar: {{ $hasSidebar }};
 $hb-blog-sidebar-position: {{ default "start" site.Params.hb.blog.sidebar.position }};
 $hb-blog-home-pinned-posts-pos: '{{ default "" site.Params.hb.blog.home.pinned_posts_position }}';
+
+// ToC
+$hb-blog-toc-position: {{ default "end" site.Params.hb.blog.toc.position }};
diff --git a/hugo.toml b/hugo.toml
@@ -42,3 +42,6 @@ pinned_posts_position = ""
 
 [params.hb.blog.sidebar]
 position = "start"
+
+[params.hb.blog.toc]
+position = "end" # start, end or content.
diff --git a/layouts/partials/hb/modules/blog/post/toc.html b/layouts/partials/hb/modules/blog/post/toc.html
@@ -1,3 +1,4 @@
+{{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }}
 {{- if partial "base/functions/has-toc" . }}
 <div class="hb-module pb-1">
   <div class="h6 d-none d-md-block">{{ i18n "on_this_page" }}</div>
@@ -19,3 +20,4 @@
   </div>
 </div>
 {{- end }}
+{{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-end" "Page" .) }}
diff --git a/layouts/partials/hb/modules/blog/single.html b/layouts/partials/hb/modules/blog/single.html
@@ -14,15 +14,20 @@ <h1 class="hb-blog-post-title">{{ .Title }}</h1>
           <div class="hb-blog-post-desc lead mt-1">{{ . }}</div>
         {{- end }}
       </div>
-      <div
-        class="hb-blog-post-toc text-body-secondary position-sticky overflow-y-auto">
-        {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-begin" "Page" .) }}
-        {{- partialCached "hb/modules/blog/post/toc" . . }}
-        {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-toc-end" "Page" .) }}
-      </div>
+      {{- $tocPos := default "start" site.Params.hb.blog.toc.position }}
+      {{- if ne $tocPos "content" }}
+        <div class="hb-blog-post-toc text-body-secondary position-sticky overflow-y-auto">
+          {{- partialCached "hb/modules/blog/post/toc" . . }}
+        </div>
+      {{- end }}
       <div class="hb-blog-post-main">
         {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-begin" "Page" .) }}
         {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-begin" "Page" .) }}
+        {{- if eq $tocPos "content" }}
+          <div class="hb-blog-post-toc">
+            {{- partialCached "hb/modules/blog/post/toc" . . }}
+          </div>
+        {{- end }}
         {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }}
         <div
           class="hb-blog-post-content hb-module"