feat(tailwind): port blog TOC sidebar

modules/blox-tailwind/assets/css/components/all.css

@@ -1,3 +1,5 @@
 @import "page.css";
 @import "task-list.css";
 @import "copy.css";
+@import "sidebar.css";
+@import "charts.css";

modules/blox-tailwind/assets/css/components/charts.css

@@ -0,0 +1,21 @@
+/* Mermaid.js diagram div */
+div.mermaid {
+  width: 100%;
+  margin-bottom: 1rem;
+
+  svg {
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
+
+/* Plotly chart */
+div.chart {
+  max-width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 1rem;
+
+  /* Add horizontal scroll on mobile since Plotly */
+  overflow-x: auto;
+}

modules/blox-tailwind/assets/css/components/sidebar.css

@@ -0,0 +1,46 @@
+@media (max-width: 767px) {
+  .hb-sidebar-container {
+    @apply fixed top-0 w-full bottom-0 z-[15] pt-[calc(var(--navbar-height))] overscroll-contain bg-white dark:bg-slate-700;
+    contain: layout style;
+    backface-visibility: hidden;
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+    will-change: transform, opacity;
+  }
+}
+
+.hb-sidebar-container {
+  li > div {
+    @apply h-0;
+  }
+  li.open > div {
+    @apply h-auto pt-1;
+  }
+  li.open > a > span > svg > path {
+    @apply rotate-90;
+  }
+}
+
+.hb-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent;
+  scrollbar-gutter: stable;
+
+  &::-webkit-scrollbar {
+    @apply w-3 h-3;
+  }
+
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[10px];
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+  }
+}

modules/blox-tailwind/data/page_sharer.yaml

@@ -1,65 +1,55 @@
 # Hugo Blox
-# Social sharing buttons
+# Social sharing links
 # Docs: https://docs.hugoblox.com/reference/page-sharer/
 
-buttons:
-  - id: twitter
+links:
+  - id: x
     url: 'https://twitter.com/intent/tweet?url={url}&text={title}'
-    title: Twitter
-    icon_pack: fab
-    icon: twitter
+    title: X
+    icon: brands/x
     enable: true
   - id: facebook
     url: 'https://www.facebook.com/sharer.php?u={url}&t={title}'
     title: Facebook
-    icon_pack: fab
-    icon: facebook
+    icon: brands/facebook
     enable: true
   - id: email
     url: 'mailto:?subject={title}&body={url}'
     title: Email
-    icon_pack: fas
-    icon: envelope
+    icon: hero/at-symbol
     enable: true
   - id: linkedin
     url: 'https://www.linkedin.com/shareArticle?url={url}&title={title}'
     title: LinkedIn
-    icon_pack: fab
-    icon: linkedin-in
+    icon: brands/linkedin
     enable: true
   - id: whatsapp
     url: 'whatsapp://send?text={title}%20{url}'
     title: WhatsApp
-    icon_pack: fab
-    icon: whatsapp
+    icon: brands/whatsapp
     enable: true
-  - id: weibo
-    url: 'https://service.weibo.com/share/share.php?url={url}&title={title}'
-    title: Weibo
-    icon_pack: fab
-    icon: weibo
-    enable: true
-  - id: reddit
-    url: 'https://reddit.com/submit?url={url}&title={title}'
-    title: Reddit
-    icon_pack: fab
-    icon: reddit-alien
-    enable: false
-  - id: pinterest
-    url: 'https://pinterest.com/pin/create/link/?url={url}&description={title}'
-    title: Pinterest
-    icon_pack: fab
-    icon: pinterest
-    enable: false
-  - id: xing
-    url: 'https://www.xing.com/spi/shares/new?url={url}&title={title}'
-    title: Xing
-    icon_pack: fab
-    icon: xing
-    enable: false
-  - id: tumblr
-    url: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}&title={title}'
-    title: Tumblr
-    icon_pack: fab
-    icon: tumblr
-    enable: false
+#  - id: weibo
+#    url: 'https://service.weibo.com/share/share.php?url={url}&title={title}'
+#    title: Weibo
+#    icon: weibo
+#    enable: true
+#  - id: reddit
+#    url: 'https://reddit.com/submit?url={url}&title={title}'
+#    title: Reddit
+#    icon: reddit-alien
+#    enable: false
+#  - id: pinterest
+#    url: 'https://pinterest.com/pin/create/link/?url={url}&description={title}'
+#    title: Pinterest
+#    icon: pinterest
+#    enable: false
+#  - id: xing
+#    url: 'https://www.xing.com/spi/shares/new?url={url}&title={title}'
+#    title: Xing
+#    icon: xing
+#    enable: false
+#  - id: tumblr
+#    url: 'https://www.tumblr.com/widgets/share/tool?canonicalUrl={url}&title={title}'
+#    title: Tumblr
+#    icon: tumblr
+#    enable: false

modules/blox-tailwind/i18n/en.yaml

@@ -7,7 +7,7 @@
   translation: Table of Contents
 
 - id: on_this_page
-  translation: Contents
+  translation: On this page
 
 - id: back_to_top
   translation: Back to top

modules/blox-tailwind/layouts/_default/single.html

@@ -1,52 +1,94 @@
 {{ define "main" }}
-<div class="flex flex-col justify-center">
-  <article class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert">
-    {{/* Check whether to show breadcrumb navigation. */}}
-    {{ $show_breadcrumb := .Params.show_breadcrumb }}
-    {{ if $show_breadcrumb }}
-    <div class="mb-3">
-      {{ partial "components/breadcrumb" . }}
-    </div>
-    {{ end }}
-
-    <h1 class="lg:text-6xl">{{ .Title }}</h1>
-
-    {{ $featured := partial "functions/get_featured_image.html" . }}
-    {{/* Featured image layout */}}
-    {{ if and $featured (not .Params.image.preview_only) }}
-    {{/* Fit image within max size. */}}
-    {{ $image := $featured }}
-
-    {{/* Determine image placement. */}}
-    {{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
-    {{/* Fit image to container's max width */}}
-    {{ $image_container := "" }}
-    {{ if eq $placement 2}}
-    {{ $image_container = "container" }}
-    {{ $image = $featured.Fit "1200x2500" }}
-    {{else if eq $placement 3}}
-    {{ $image_container = "container-fluid" }}
-    {{ $image := $featured.Fit "2560x2560" }}
-    {{else}}
-    {{ $image_container = "article-container" }}
-    {{ $image = $featured.Fit "720x2500" }}
-    {{end}}
-    {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
-    {{/* Featured image */}}
-    <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-4" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
-      <div style="position: relative">
-        <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
-        {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+<div class="mx-auto flex max-w-screen-xl">
+  {{ partial "components/sidebar.html" (dict "context" . "disable" true "empty" true) }}
+  {{ partial "components/toc.html" . }}
+  <article class="w-full break-words flex min-h-[calc(100vh-var(--navbar-height))] min-w-0 justify-center pb-8 pr-[calc(env(safe-area-inset-right)-1.5rem)]">
+    <main class="w-full min-w-0 max-w-6xl px-6 pt-4 md:px-12">
+
+      {{ if .Params.show_breadcrumb }}
+      <div class="mb-4">
+        {{ partial "components/breadcrumb.html" . }}
       </div>
-    </div>
-    {{end}}
+      {{ end }}
 
-    {{ .Content }}
-  </article>
+      <h1 class="mt-2 text-4xl font-bold tracking-tight text-slate-900 dark:text-slate-100">
+        {{- .Title -}}
+      </h1>
 
-<div class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert mt-5">
-  {{ partial "page_footer" . }}
-</div>
+      <div class="mt-4 mb-16 text-gray-500 dark:text-gray-300 text-sm flex items-center flex-wrap gap-y-2">
+        {{- if .Date | and (not .Params.hide_date) }}<span class="mr-1">{{- .Date | time.Format (site.Params.locale.date_format | default ":date_long") -}}</span>{{ end -}}
+        {{ if and .Date .Params.authors }}<span class="mx-1">·</span>{{ end -}}
+
+        {{ $taxonomy := "authors" }}
+        {{ range $i, $author_obj := (.GetTerms $taxonomy) }}
+          {{ $author_page := $author_obj.Page }}
+          {{ $avatar := ($author_page.Resources.ByType "image").GetMatch "*avatar*" }}
+          {{- if and $i (not $avatar) }}<span class="mr-1">,</span>{{ end -}}
+          {{ with $author_page.Params.website }}
+          <a href="{{.}}" target="_blank" rel="noreferrer">
+          {{ end }}
+          <div class="group inline-flex items-center text-current gap-x-1.5 mx-1">
+            {{ with $avatar }}
+            {{ $avatar = $avatar.Process "Fill 50x50 Center webp" }}
+            <img src="{{ $avatar.RelPermalink }}" alt="{{ $author_page.Title }}" class="inline-block h-4 w-4 rounded-full border border-current" loading="lazy" />
+            {{ end }}
+            <div {{if $author_page.Params.website}}class="group-hover:underline"{{end}}>{{ $author_page.Title }}</div>
+          </div>
+          {{ with $author_page.Params.website }}
+          </a>
+          {{ end }}
+        {{ end }}
 
+        {{ if ne .Params.reading_time false }}
+        <span class="mx-1">·</span>
+        <span class="mx-1">
+          {{ .ReadingTime }} {{ i18n "minute_read" }}
+        </span>
+        {{ end }}
+      </div>
+
+      {{ $featured := partial "functions/get_featured_image.html" . }}
+      {{/* Featured image layout */}}
+      {{ if and $featured (not .Params.image.preview_only) }}
+      {{/* Fit image within max size. */}}
+      {{ $image := $featured }}
+
+      {{/* Determine image placement. */}}
+      {{ $placement := .Params.image.placement | default 1 }}{{/* Default to full column width. */}}
+      {{/* Fit image to container's max width */}}
+      {{ $image_container := "" }}
+      {{ if eq $placement 2}}
+      {{ $image_container = "container" }}
+      {{ $image = $featured.Fit "1200x2500" }}
+      {{else if eq $placement 3}}
+      {{ $image_container = "container-fluid" }}
+      {{ $image := $featured.Fit "2560x2560" }}
+      {{else}}
+      {{ $image_container = "article-container" }}
+      {{ $image = $featured.Fit "720x2500" }}
+      {{end}}
+      {{ if ne $image.MediaType.SubType "gif" }}{{ $image = $image.Process "webp" }}{{ end }}
+      {{/* Featured image */}}
+      <div class="article-header {{$image_container}} featured-image-wrapper mt-4 mb-16" style="max-width: {{$image.Width}}px; max-height: {{$image.Height}}px;">
+        <div style="position: relative">
+          <img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}" alt="{{ with $.Params.image.alt_text }}{{.}}{{ end }}" class="featured-image">
+          {{ with $.Params.image.caption }}<span class="article-header-caption">{{ . | markdownify | emojify }}</span>{{ end }}
+        </div>
+      </div>
+      {{end}}
+
+      <div class="prose prose-slate lg:prose-xl dark:prose-invert">
+        {{ .Content }}
+      </div>
+
+      {{ partial "components/last-edited.html" . }}
+
+      <div class="container mx-auto prose prose-slate lg:prose-xl dark:prose-invert mt-5">
+        {{ .Scratch.Set "invert_pager" true }}
+        {{ partial "page_footer" . }}
+      </div>
+
+    </main>
+  </article>
 </div>
 {{ end }}

modules/blox-tailwind/layouts/partials/components/last-edited.html

@@ -0,0 +1,11 @@
+{{- $last_updated := T "last_updated" -}}
+
+{{- if .Params.show_date_updated | and .Lastmod -}}
+  {{ $datetime := (time.Format "2006-01-02T15:04:05.000Z" .Lastmod) }}
+  <time class="mt-12 mb-8 block text-xs text-gray-500 ltr:text-right rtl:text-left dark:text-gray-400" datetime="{{ $datetime }}">
+    <span>{{ $last_updated }}</span>
+    {{ .Lastmod | time.Format (site.Params.locale.date_format | default ":date_long") -}}
+  </time>
+{{- else -}}
+  <div class="mt-16"></div>
+{{- end -}}

modules/blox-tailwind/layouts/partials/components/next-in-series.html

@@ -2,14 +2,14 @@
   {{ if or .NextInSection .PrevInSection }}
     {{ $next := .NextInSection }}
     {{ $prev := .PrevInSection }}
-    {{ if .Params.invert_pager | default false }}
+    {{ if (eq (.Scratch.Get "invert_pager") true) | default .Params.invert_pager | default false }}
       {{ $next = .PrevInSection }}
       {{ $prev = .NextInSection }}
     {{ end }}
-<div class="pt-1">
+<div class="pt-1 no-prose">
   <hr class="border-dotted border-neutral-300 dark:border-neutral-600" />
-  <div class="flex justify-between pt-2">
-    <span>
+  <div class="flex flex-col md:flex-row flex-nowrap justify-between gap-5 pt-2">
+    <div class="flex-1 flex-grow">
       {{ if $prev }}
         <a class="group flex no-underline" href="{{ $prev.RelPermalink }}">
           <span
@@ -27,8 +27,8 @@
           </span>
         </a>
       {{ end }}
-    </span>
-    <span>
+    </div>
+    <span class="flex-1 flex-grow">
       {{ if $next }}
         <a class="group flex text-right no-underline" href="{{ $next.RelPermalink }}">
           <span class="flex flex-col">