Performance Improvement (#856)

* perf: cache the sidebar taxonomies module

* perf(toc-scrollspy): cache attributes partial

* feat: add the `hb.terms.profile` parameter, hide the profile if `false`

* feat: add the `hb.terms.profile_metrics` parameter, hide the profile metrics if `false`

* feat: add the hb.blog.sidebar.max_width parameter, which default to 320px

* perf: cache hb/modules/blog/post/card-img partial

* style(related-posts): tweak vertical style

assets/hb/modules/blog/scss/_sidebar.scss

@@ -10,18 +10,18 @@
 
  @if $hb-blog-sidebar-position == end {
  grid-template-areas: "main sidebar";
- grid-template-columns: minmax(0, 5fr) hb-blog-sidebar-width-fr(5);
+ grid-template-columns: minmax(0, 5fr) auto;
  } @else {
  grid-template-areas: "sidebar main";
- grid-template-columns: hb-blog-sidebar-width-fr(5) minmax(0, 5fr);
+ grid-template-columns: auto minmax(0, 5fr);
  }
  }
 
  @include media-breakpoint-up(xl) {
  @if $hb-blog-sidebar-position == end {
- grid-template-columns: minmax(0, 7fr) hb-blog-sidebar-width-fr(7);
+ grid-template-columns: minmax(0, 7fr) auto;
  } @else {
- grid-template-columns: hb-blog-sidebar-width-fr(7) minmax(0, 7fr);
+ grid-template-columns: auto minmax(0, 7fr);
  }
  }
  }
@@ -31,6 +31,7 @@
 
  @include media-breakpoint-up(lg) {
  overflow: auto;
+ max-width: $hb-blog-sidebar-max-width;
 
  @if $hb-blog-sidebar-sticky {
  height: calc(100vh - var(--#{$prefix}top-offset));

assets/hb/modules/blog/scss/variables.tmpl.scss

@@ -2,6 +2,7 @@
 $hb-blog-sidebar: {{ $hasSidebar }};
 $hb-blog-sidebar-position: {{ default "start" site.Params.hb.blog.sidebar.position }};
 $hb-blog-sidebar-width: {{ default 0.35 site.Params.hb.blog.sidebar.width }};
+$hb-blog-sidebar-max-width: {{ default "320px" site.Params.hb.blog.sidebar.max_width }} !default;
 $hb-blog-sidebar-sticky: {{ default true site.Params.hb.blog.sidebar.sticky }};
 $hb-blog-home-pinned-posts-pos: '{{ default "" site.Params.hb.blog.home.pinned_posts_position }}';
 

hugo.toml

@@ -21,6 +21,8 @@ path = "github.com/hugomods/images"
 
 [params.hb.terms]
 paginate = 12
+profile = true
+profile_metrics = true
 
 [params.hb.blog]
 full_width = false
@@ -45,6 +47,7 @@ pinned_posts_position = ""
 [params.hb.blog.sidebar]
 position = "start"
 width = 0.35
+max_width = "320px"
 sticky = true
 
 [params.hb.blog.toc]

layouts/_default/term.html

@@ -7,7 +7,9 @@
  <div class="hb-blog-main-container">
  <div class="hb-blog-main">
  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
- {{ partialCached "hb/modules/blog/term/profile" . . }}
+ {{- if default true site.Params.hb.terms.profile }}
+ {{ partialCached "hb/modules/blog/term/profile" . . }}
+ {{- end }}
  {{- $cols := "row-cols-1 row-cols-md-2" }}
  {{- if not (partialCached "hb/modules/blog/functions/has-sidebar" .) }}
  {{- $cols = printf "%s row-cols-lg-3" $cols }}

layouts/partials/hb/modules/blog/post/card.html

@@ -22,7 +22,7 @@
  {{- if and $thumbnail (ne $thumbnailPos "top") }}
  {{ printf `<div class="d-flex flex-column flex-md-row">` | safeHTML }}
  <div class="hb-blog-post-card-wrapper me-md-2 mt-2 mt-md-0">
- {{ partial "hb/modules/blog/post/card-img" $page }}
+ {{ partialCached "hb/modules/blog/post/card-img" $page $page }}
  </div>
  {{ printf `<div class="hb-blog-post-card-body overflow-hidden">` | safeHTML }}
  {{- end }}
@@ -41,7 +41,7 @@
  </div>
  {{- end }}
  {{- if and $thumbnail (eq $thumbnailPos "top") }}
- {{ partial "hb/modules/blog/post/card-img" $page }}
+ {{ partialCached "hb/modules/blog/post/card-img" $page $page }}
  {{- end }}
  <div class="card-body px-0 py-2 d-flex flex-column">
  <div class="hb-blog-post-title card-title h5 py-1">

layouts/partials/hb/modules/blog/term/profile.html

@@ -14,5 +14,7 @@ <h1 class="text-center h4 mb-3 mt-2">
  {{- with .Params.socials }}
  {{ partial "hb/modules/blog/term/socials" . }}
  {{- end }}
- {{ partialCached "hb/modules/blog/term/metrics" . . }}
+ {{- if default true site.Params.terms.profile_metrics }}
+ {{ partialCached "hb/modules/blog/term/metrics" . . }}
+ {{- end }}
 </div>

modules/related-posts/layouts/partials/hb/modules/blog-related-posts/vertical.html

@@ -9,15 +9,15 @@
  </div>
  {{- end }}
  <a
- class="flex-grow-1 text-decoration-none d-flex flex-column"
+ class="flex-grow-1 text-decoration-none d-flex"
  title="{{ .Title }}"
  href="{{ .RelPermalink }}">
- <span class="hb-blog-post-meta mb-1">
- {{ .Date | time.Format site.Params.hb.blog.post_date_format }}
- </span>
- <span class="hb-blog-related-post-title text-truncate text-wrap">
+ <span class="hb-blog-related-post-title text-truncate text-wrap me-md-2">
  {{ .Title }}
  </span>
+ <span class="hb-blog-post-meta ms-auto text-nowrap d-none d-md-block">
+ {{ .Date | time.Format site.Params.hb.blog.post_date_format }}
+ </span>
  </a>
  </div>
  {{- end }}

modules/sidebar/taxonomies/hugo.toml

@@ -2,6 +2,7 @@
 path = "github.com/hbstack/blog"
 
 [params.hugopress.modules.hb-blog-sidebar-taxonomies.hooks.hb-blog-sidebar]
+cacheable = true
 
 [params.hb.blog.sidebar.taxonomies]
 count = true

modules/toc-scrollspy/hugo.toml

@@ -1,4 +1,5 @@
 [params.hugopress.modules.hb-blog-toc-scrollspy.attributes.hb-blog-post-content]
+cacheable = true
 
 [[module.imports]]
 path = "github.com/hbstack/toc-scrollspy"