feat: add the optional sidebar implementation

hbstack · Jun 19, 2023 · 8df5d79 · 8df5d79
1 parent 2e31509
commit 8df5d79
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 62 deletions.
diff --git a/assets/hb/modules/blog/scss/_sidebar.scss b/assets/hb/modules/blog/scss/_sidebar.scss
@@ -0,0 +1,30 @@
+@if $hb-blog-sidebar {
+    .hb-blog-main-container {
+        @include media-breakpoint-up(lg) {
+            display: grid;
+            grid-gap: 1rem;
+            grid-template-areas: "sidebar main";
+            grid-template-columns: 1fr 3fr;
+        }
+
+        @include media-breakpoint-up(xl) {
+            grid-template-columns: 1fr 4fr;
+        }
+    }
+
+    .hb-blog-sidebar {
+        grid-area: sidebar;
+
+        @include media-breakpoint-up(lg) {
+            height: calc(100vh - 80px);
+            overflow: auto;
+            position: sticky;
+            top: 80px;
+        }
+    }
+
+    .hb-blog-main {
+        grid-area: main;
+        overflow: hidden;
+    }
+}
diff --git a/assets/hb/modules/blog/scss/index.scss b/assets/hb/modules/blog/scss/index.scss
@@ -3,4 +3,5 @@ $hb-blog-toc-top: 86px !default;
 @import "archives";
 @import "home";
 @import "post";
+@import "sidebar";
 @import "terms";
diff --git a/assets/hb/modules/blog/scss/post/_main.scss b/assets/hb/modules/blog/scss/post/_main.scss
@@ -1,5 +1,6 @@
 .hb-blog-post {
     display: grid;
+    grid-gap: .5rem;
     grid-template-areas:
         "intro"
         "toc"

diff --git a/assets/hb/modules/blog/scss/variables.tmpl.scss b/assets/hb/modules/blog/scss/variables.tmpl.scss
@@ -0,0 +1,2 @@
+{{- $hasSidebar := partialCached "hb/modules/blog/functions/has-sidebar" . }}
+$hb-blog-sidebar: {{ $hasSidebar }};
diff --git a/layouts/_default/term.html b/layouts/_default/term.html
@@ -4,15 +4,22 @@
 {{- end -}}
 
 {{- define "main" }}
-  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
-  {{ partialCached "hb/modules/blog/term/profile" . . }}
-  <div class="hb-terms-posts row">
-    {{- range .Paginator.Pages }}
-      <div class="col-12 col-md-6 col-lg-4 mb-3 mb-lg-4">
-        {{ partial "hb/modules/blog/post/card" (dict "Page" .) }}
+  <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" . . }}
+      <div class="hb-terms-posts row">
+        {{- range .Paginator.Pages }}
+          <div class="col-12 col-md-6 mb-3 mb-lg-4">
+            {{ partial "hb/modules/blog/post/card" (dict "Page" .) }}
+          </div>
+        {{- end }}
       </div>
-    {{- end }}
+      {{ partial "hb/modules/pagination/index" .Paginator }}
+      {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
+    </div>
+    <div class="hb-blog-sidebar">
+      {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-sidebar" "Page" .) }}
+    </div>
   </div>
-  {{ partial "hb/modules/pagination/index" .Paginator }}
-  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
 {{- end -}}
diff --git a/layouts/partials/hb/modules/blog/functions/has-sidebar.html b/layouts/partials/hb/modules/blog/functions/has-sidebar.html
@@ -0,0 +1,2 @@
+{{/* Check whether the sidebar is enabled. */}}
+{{- return partialCached "hugopress/functions/has-modules" "hb-blog-sidebar" }}
diff --git a/layouts/partials/hb/modules/blog/index.html b/layouts/partials/hb/modules/blog/index.html
@@ -4,7 +4,7 @@
 {{- end }}
 <div class="row">
   {{- $pinnedPages := first 1 (where $pages ".Params.pinned" true) }}
-  <div class="col-12{{ if $pinnedPages }} col-lg-6{{ end }}">
+  <div class="col-12{{ cond (not $pinnedPages) `` ` col-lg-6` }}">
     {{- $featuredCount := default 10 site.Params.hb.blog.home.featured_posts }}
     {{- $featuredPages := first $featuredCount (where $pages ".Params.featured" true) }}
     {{- partial "hb/modules/carousel/carousel" (dict "Pages" $featuredPages) -}}
@@ -15,10 +15,19 @@
     </div>
   {{- end }}
 </div>
-{{- if default true site.Params.hb.blog.home.taxonomies }}
-  {{ partialCached "hb/modules/blog/home/taxonomies" . }}
-{{- end }}
-{{- with .Paginator }}
-  {{ partial "hb/modules/blog/posts" (dict "Pages" .Pages "Cols" "row-cols-1 row-cols-md-2 row-cols-lg-3") }}
-  {{ partial "hb/modules/pagination/index" . }}
-{{- end }}
+<div class="hb-blog-main-container">
+  <div class="hb-blog-main">
+    {{- if default true site.Params.hb.blog.home.taxonomies }}
+      {{ partialCached "hb/modules/blog/home/taxonomies" . }}
+    {{- end }}
+    {{- with .Paginator }}
+      {{- $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 }}
+      {{- end }}
+      {{ partial "hb/modules/blog/posts" (dict "Pages" .Pages "Cols" $cols) }}
+      {{ partial "hb/modules/pagination/index" . }}
+    {{- end }}
+  </div>
+  {{ partial "hb/modules/blog/sidebar" . }}
+</div>
diff --git a/layouts/partials/hb/modules/blog/list.html b/layouts/partials/hb/modules/blog/list.html
@@ -1,4 +1,13 @@
-{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
-{{ partial "hb/modules/blog/posts" (dict "Pages" .Paginator.Pages) }}
-{{ partial "hb/modules/pagination/index" .Paginator }}
-{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
+<div class="hb-blog-main-container">
+  <div class="hb-blog-main">
+    {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
+    {{- $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 }}
+    {{- end }}
+    {{ partial "hb/modules/blog/posts" (dict "Pages" .Paginator.Pages "Cols" $cols) }}
+    {{ partial "hb/modules/pagination/index" .Paginator }}
+    {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
+  </div>
+  {{ partial "hb/modules/blog/sidebar" . }}
+</div>
diff --git a/layouts/partials/hb/modules/blog/post/card.html b/layouts/partials/hb/modules/blog/post/card.html
@@ -1,27 +1,35 @@
 {{- $page := .Page }}
 {{- $summary := default true .Summary }}
 {{- $readingTime := default true .ReadingTime }}
+{{- $meta := default true .Meta }}
 <div class="hb-blog-post-card card border-0 overflow-hidden">
-  <div class="hb-blog-post-meta d-flex align-items-center">
-    {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }}
-    {{ partialCached "hb/modules/blog/post/meta/date" $page $page }}
-    {{- if $readingTime }}
-      {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }}
-    {{- end }}
-    {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }}
-  </div>
+  {{- if $meta }}
+    <div class="hb-blog-post-meta d-flex align-items-center">
+      {{ partialCached "hb/modules/blog/post/meta/authors" $page $page }}
+      {{ partialCached "hb/modules/blog/post/meta/date" $page $page }}
+      {{- if $readingTime }}
+        {{ partialCached "hb/modules/blog/post/meta/reading-time" $page $page }}
+      {{- end }}
+      {{ partialCached "hb/modules/blog/post/meta/first-section" $page $page }}
+    </div>
+  {{- end }}
   {{- if default true site.Params.hb.blog.post_thumbnail }}
     {{ partial "hb/modules/blog/post/card-img" $page }}
   {{- end }}
   <div class="card-body px-0 pt-2">
     <div class="hb-blog-post-title card-title h5 py-1">
-      <a class="hb-blog-post-title-link d-block" href="{{ $page.RelPermalink }}">
+      <a
+        class="hb-blog-post-title-link d-block"
+        title="{{ $page.Title }}"
+        href="{{ $page.RelPermalink }}">
         {{- $page.Title -}}
       </a>
     </div>
-    <div class="hb-blog-post-meta d-block text-nowrap text-truncate mb-2">
-      {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }}
-    </div>
+    {{- if $meta }}
+      <div class="hb-blog-post-meta d-block text-nowrap text-truncate mb-2">
+        {{ partialCached "hb/modules/blog/post/meta/taxonomies" $page $page }}
+      </div>
+    {{- end }}
     {{- if $summary }}
       <div class="hb-blog-post-summary card-text text-secondary">
         {{- $page.Summary -}}

diff --git a/layouts/partials/hb/modules/blog/posts.html b/layouts/partials/hb/modules/blog/posts.html
@@ -2,7 +2,8 @@
 <div class="hb-blog-posts hb-module row {{ $cols }}">
   {{ range .Pages }}
     <div class="col mb-3">
-      {{ partialCached "hb/modules/blog/post/card" . . }}
+      {{- $ctx := dict "Page" . }}
+      {{ partial "hb/modules/blog/post/card" $ctx }}
     </div>
   {{ end }}
 </div>
diff --git a/layouts/partials/hb/modules/blog/sidebar.html b/layouts/partials/hb/modules/blog/sidebar.html
@@ -0,0 +1,3 @@
+<div class="hb-blog-sidebar pe-lg-1">
+  {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-sidebar" "Page" .) }}
+</div>
diff --git a/layouts/partials/hb/modules/blog/single.html b/layouts/partials/hb/modules/blog/single.html
@@ -1,30 +1,37 @@
-{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
-<div class="hb-blog-post hb-module position-relative">
-  <div class="hb-blog-post-intro">
-    <h1 class="hb-blog-post-title mb-2">{{ .Title }}</h1>
-    <div class="hb-blog-post-meta mb-2">
-      {{ partialCached "hb/modules/blog/post/meta/authors" . . }}
-      {{ partialCached "hb/modules/blog/post/meta/date" . . }}
-      {{ partialCached "hb/modules/blog/post/meta/reading-time" . . }}
-      {{ partialCached "hb/modules/blog/post/meta/taxonomies" . . }}
+<div class="hb-blog-main-container">
+  <div class="hb-blog-main">
+    {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-begin" "Page" .) }}
+    <div class="hb-blog-post hb-module position-relative">
+      <div class="hb-blog-post-intro">
+        <h1 class="hb-blog-post-title mb-2">{{ .Title }}</h1>
+        <div class="hb-blog-post-meta mb-2">
+          {{ partialCached "hb/modules/blog/post/meta/authors" . . }}
+          {{ partialCached "hb/modules/blog/post/meta/date" . . }}
+          {{ partialCached "hb/modules/blog/post/meta/reading-time" . . }}
+          {{ partialCached "hb/modules/blog/post/meta/taxonomies" . . }}
+        </div>
+      </div>
+      <div
+        class="hb-blog-post-toc mt-2 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>
+      <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" .) }}
+        {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }}
+        <div
+          class="hb-blog-post-content mb-5"
+          {{ with $attributes }}{{ . | safeHTMLAttr }}{{ end }}>
+          {{ .Content }}
+        </div>
+        {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-end" "Page" .) }}
+        {{- partial "hb/modules/blog/post/comments" . }}
+        {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-end" "Page" .) }}
+      </div>
     </div>
+    {{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
   </div>
-  <div
-    class="hb-blog-post-toc mt-2 ps-lg-3 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>
-  <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" .) }}
-    {{- $attributes := partial "hugopress/functions/render-attributes" (dict "Page" . "Name" "hb-blog-post-content") }}
-    <div class="hb-blog-post-content mb-5"{{ with $attributes }} {{ . | safeHTMLAttr }}{{ end }}>
-      {{ .Content }}
-    </div>
-    {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-content-end" "Page" .) }}
-    {{- partial "hb/modules/blog/post/comments" . }}
-    {{- partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-post-end" "Page" .) }}
-  </div>
+  {{ partial "hb/modules/blog/sidebar" . }}
 </div>
-{{ partial "hugopress/functions/render-hooks" (dict "Name" "hb-blog-main-end" "Page" .) }}
diff --git a/layouts/partials/hb/modules/blog/taxonomies/toggle.html b/layouts/partials/hb/modules/blog/taxonomies/toggle.html
@@ -42,7 +42,7 @@
           {{- break }}
         {{- end }}
         <a
-          class="btn btn-sm btn-outline-secondary my-2 me-2"
+          class="btn btn-sm btn-outline-secondary p-1 me-1 mb-1"
           href="{{ $term.Page.RelPermalink }}">
           {{- $term.Page.Title -}}
           {{- if $count }}