feat: post sidebar support table of content

Signed-off-by: Ryan Wang <[email protected]>
halo-dev · Oct 15, 2022 · bf574b7 · bf574b7
1 parent e415357
commit bf574b7
Show file tree

Hide file tree

Showing 14 changed files with 68 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -57,6 +57,7 @@
   },
   "dependencies": {
     "@iconify/iconify": "^3.0.0",
-    "alpinejs": "^3.10.3"
+    "alpinejs": "^3.10.3",
+    "tocbot": "^4.18.2"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/main.ts b/src/main.ts
@@ -1,8 +1,8 @@
 import "./styles/tailwind.css";
 import "./styles/main.css";
 import "@purge-icons/generated";
-
 import Alpine from "alpinejs";
+import * as tocbot from "tocbot";
 
 window.Alpine = Alpine;
 
@@ -18,3 +18,18 @@ const onScroll = () => {
 };
 
 window.addEventListener("scroll", onScroll);
+
+export function generateToc() {
+  tocbot.init({
+    tocSelector: ".toc",
+    contentSelector: "#content",
+    headingSelector: "h1, h2, h3, h4",
+    extraListClasses: "space-y-1",
+    extraLinkClasses: 'group flex items-center justify-between rounded py-1 px-1.5 transition-all hover:bg-gray-100 text-sm opacity-80',
+    activeLinkClass: "is-active-link bg-gray-100",
+    collapseDepth: 6,
+    headingsOffset: 100,
+    scrollSmooth: true,
+    scrollSmoothOffset: -100,
+  });
+}
diff --git a/src/styles/main.css b/src/styles/main.css
@@ -38,3 +38,7 @@ body {
 .menu-sticky .menu-dropdown li a {
   @apply text-gray-600 hover:text-blue-600;
 }
+
+.toc-list-item > .toc-list {
+  @apply my-3 ml-3 space-y-1 border-l pl-2;
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["./templates/**/*.html"],
+  content: ["./templates/**/*.html","./src/main.ts"],
   theme: {
     extend: {},
     container: {

diff --git a/templates/assets/dist/main.iife.js b/templates/assets/dist/main.iife.js
diff --git a/templates/assets/dist/style.css b/templates/assets/dist/style.css
diff --git a/templates/category.html b/templates/category.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
   <th:block th:fragment="content">
     <th:block th:replace="modules/category-filter" />

diff --git a/templates/index.html b/templates/index.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
   <th:block th:fragment="content">
     <th:block th:replace="modules/category-filter" />

diff --git a/templates/modules/layout.html b/templates/modules/layout.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" th:fragment="html (header,content,head,footer,contentClass)">
+<html lang="en" th:fragment="html (header,content,head,footer,sidebar,contentClass)">
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
@@ -24,7 +24,12 @@
       <div class="col-span-4 sm:col-span-3">
         <th:block th:replace="${content}" />
       </div>
-      <th:block th:replace="modules/sidebar" />
+      <th:block th:if="${sidebar != null}">
+        <th:block th:replace="${sidebar}" />
+      </th:block>
+      <th:block th:if="${sidebar == null}">
+        <th:block th:replace="modules/sidebar :: sidebar(prepend = null)" />
+      </th:block>
     </section>
     <th:block th:replace="modules/footer" />
     <th:block th:if="${footer != null}">

diff --git a/templates/modules/sidebar.html b/templates/modules/sidebar.html
@@ -1,5 +1,8 @@
-<aside class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
+<aside th:fragment="sidebar (prepend)" class="col-span-1 hidden h-full flex-col gap-6 sm:flex">
   <th:block th:with="widgets = ${#strings.listSplit(theme.config.sidebar.widgets,',')} ">
+    <th:block th:if="${prepend != null}">
+      <th:block th:replace="${prepend}" />
+    </th:block>
     <th:block th:each="widget : ${widgets}">
       <th:block th:replace="'modules/widgets/'+${widget}" />
     </th:block>

diff --git a/templates/page.html b/templates/page.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : '')"
+  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = null, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(singlePage.spec.cover)} ? '!-mt-20' : '')"
 >
   <th:block th:fragment="header">
     <th:block

diff --git a/templates/post.html b/templates/post.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')"
+  th:replace="modules/layout :: html(header = ~{::header}, content = ~{::content}, head = null, footer = ~{::footer}, sidebar = ~{::sidebar}, contentClass = ${theme.config.layout.content_header} and ${not #strings.isEmpty(post.spec.cover)} ? '!-mt-20' : '')"
 >
   <th:block th:fragment="header">
     <th:block
@@ -18,6 +18,25 @@
       <th:block th:include="modules/libs/lightgallery :: import"></th:block>
       <th:block th:include="modules/libs/lightgallery :: script"></th:block>
     </th:block>
+
+    <script>
+      console.log(main.generateToc());
+      main.generateToc();
+    </script>
+  </th:block>
+  <th:block th:fragment="sidebar_prepend">
+    <div
+      class="w-full cursor-pointer overflow-hidden rounded-xl bg-white p-3 shadow transition-all duration-500 hover:shadow-md"
+    >
+      <h2 class="inline-flex items-center gap-2 text-base">
+        <span data-icon="tabler:list" class="iconify text-lg"></span>
+        目录
+      </h2>
+      <div class="toc mt-2"></div>
+    </div>
+  </th:block>
+  <th:block th:fragment="sidebar">
+    <th:block th:replace="modules/sidebar :: sidebar(prepend = ~{::sidebar_prepend})"></th:block>
   </th:block>
   <th:block th:fragment="content">
     <div class="rounded-xl bg-white p-4">

diff --git a/templates/tag.html b/templates/tag.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html
   xmlns:th="https://www.thymeleaf.org"
-  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, contentClass = null)"
+  th:replace="modules/layout :: html(header = null, content = ~{::content}, head = null, footer = null, sidebar = null, contentClass = null)"
 >
   <th:block th:fragment="content">
     <div class="flex text-gray-900">