feat: Make TOC aside (#7)

Cerallin · Jun 30, 2023 · d4a3c74 · d4a3c74
1 parent bb1c497
commit d4a3c74
Show file tree

Hide file tree

Showing 12 changed files with 79 additions and 90 deletions.
diff --git a/languages/en.yml b/languages/en.yml
@@ -13,9 +13,6 @@ post:
   visit: Visit
   donate: donate
   comments: Comments
-  toc:
-    expand: Expand
-    collapse: Collapse
 
 search:
   search: search

diff --git a/languages/zh.yml b/languages/zh.yml
@@ -13,9 +13,6 @@ post:
   visit: 访问
   donate: 赞赏
   comments: 留言评论
-  toc:
-    expand: 展开
-    collapse: 收起
 
 search:
   search: 搜索

diff --git a/layout/_partial/after-footer.ejs b/layout/_partial/after-footer.ejs
@@ -19,12 +19,6 @@
 <%- js('js/index.js') %>
 
 <% if(theme.toc) { %>
-  <%- `
-  <script>
-      expend = "${__('post.toc.expand')}";
-      collapse = "${__('post.toc.collapse')}";
-  </script>
-  ` %>
   <%- js('js/toc.js') %>
 <% } %>
 

diff --git a/layout/_partial/article.ejs b/layout/_partial/article.ejs
@@ -35,8 +35,6 @@
     </div>
   <% } %>
 
-  <%- partial('_partial/post/toc', {post: page}) %>
-
   <div class="article-entry" itemprop="articleBody">
     <%- post.content %>
     <% if (theme.comment.enable) { %>

diff --git a/layout/_partial/post/toc.ejs b/layout/_partial/post/toc.ejs
@@ -1,21 +1,13 @@
-<% if(theme.toc){
-    var topic = toc(post.content, {
-            class: 'post-toc',
-            list_number: theme.toc.list_number
-        })
-    if(topic) {
-    %>
-    <div class="post-widget">
-        <nav class="post-toc-wrap" id="post-toc" data-expand="true">
-            <h4>TOC</h4>
-            <%- toc(post.content, {
-                class: 'post-toc',
-                list_number: theme.toc.list_number
-            }) %>
-        </nav>
-        <a class="post-toc-toggle" onclick="toggleToc(this, expend, collapse);" href="javascript:;">
-            <%= __('post.toc.expand') %>
-        </a>
-    </div>
-   <% }
-} %>
+<% const tocHtml = toc(post.content, {
+    class: 'post-toc',
+    list_number: theme.toc.list_number
+}) %>
+
+<% if (tocHtml) { %>
+  <aside class="post-widget">
+    <nav class="post-toc-wrap" id="post-toc">
+      <h4>TOC</h4>
+      <%- tocHtml %>
+    </nav>
+  </aside>
+<% } %>
diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -13,9 +13,9 @@
   <div class="page" data-filter="true">
     <div class="head" data-show="true">
       <%- partial('_partial/header', null, {cache: false}) %>
+      <%- partial('_partial/head-bar') %>
     </div>
     <div class="main">
-      <%- partial('_partial/head-bar') %>
       <%- body %>
     </div>
     <footer class="footer-nav">

diff --git a/layout/post.ejs b/layout/post.ejs
@@ -1 +1,4 @@
-<%- partial('_partial/article', {post: page, toc: true}) %>
+<%- partial('_partial/article', {post: page}) %>
+<% if (theme.toc) { %>
+    <%- partial('_partial/post/toc', {post: page}) %>
+<% } %>
diff --git a/source/css/_partial/article.styl b/source/css/_partial/article.styl
@@ -1,5 +1,5 @@
 .post
-  padding: 40px 0
+  max-width: 1080px
   margin: auto
   font-family: 'Noto Serif', 'Noto Serif SC', sans-serif
 

diff --git a/source/css/_partial/header.styl b/source/css/_partial/header.styl
@@ -1,7 +1,7 @@
 .head-header
   height: 65px
   line-height: 65px
-  max-width: 1000px
+  max-width: 1080px
   margin: 0 auto
   width: 90%
   display: flex

diff --git a/source/css/_partial/post/toc.styl b/source/css/_partial/post/toc.styl
@@ -1,19 +1,22 @@
-$toc-height = 2.25em + 1.75em * 4
-
 .post-widget
+  @media (max-width: 768px)
+    display: none
+
   info-text()
-  padding-top: 1em
-  padding-bottom: 3em
-  width: 60%
+  max-width: 150px
+  position: sticky
+  align-self: flex-start
+  justify-self: flex-end
+  margin-top: 16px
+  top: 65px
+  right: 0
 
   .post-toc-toggle
     primary-link-text()
     font-size: info-font-size
 
   .post-toc-wrap
-    max-height: $toc-height
     margin-bottom: 1em
-    overflow: hidden
 
     h4
       padding-bottom: 0.25em
@@ -23,29 +26,24 @@ $toc-height = 2.25em + 1.75em * 4
       text-color(secondary-gray, secondary-gray-light, secondary-gray-dark)
 
     .post-toc
-      .post-toc-item
-        line-height: 1.75em
-        margin-left: 1em
-        text-indent: -1em
-        width: 100%
-        white-space: normal
+      margin-left: -0.5em
 
-@keyframes showToc
-  0%
-    max-height: 2000px
+      .post-toc-child
+        padding-top: 0.5em
 
-  100%
-    max-height: $toc-height
 
-@keyframes hideToc
-  0%
-    max-height: $toc-height
+      .post-toc-item
+        line-height: 1.25em
+        padding: 0 0 0.5em 0.5em
+        white-space: normal
 
-  100%
-    max-height: 2000px
+        &:last-child
+          padding-bottom: 0
 
-#post-toc
-  animation: showToc 1s forwards
+        &[data-active] > .post-toc-link
+          text-color(primary-color, primary-color-light, primary-color-dark)
 
-  &[data-expand=false]
-    animation: hideToc 1s forwards
+        .post-toc-link
+          display: grid
+          grid-template-columns: auto 1fr
+          grid-gap: 3px
diff --git a/source/css/layout.styl b/source/css/layout.styl
@@ -61,7 +61,7 @@ del, s
   border-color($border-color, border-color-light, border-color-dark)
   background-color($background-color, background-color-light, background-color-dark)
 
-@media screen and (max-width: 768px)
+@media (max-width: 768px)
   animation-time = 0.4s
 
   @keyframes showHead
@@ -127,15 +127,20 @@ del, s
   margin-left: auto
   margin-right: auto
   width: 90%
-  max-width: 1000px
+  max-width: 1080px
 
-.main > .post
-  width: 85%
-  float: left
+.main
+  padding: 40px 0
+
+  &:has(.post-widget)
+    display: grid
+    grid-template-columns: @css{minmax(75%, 800px)} auto
+    grid-column-gap: 20px
 
-  .article-entry
-    p
-      line-height: 1.5em
+  .post
+    .article-entry
+      p
+        line-height: 1.5em
 
 .article-tag-list-item
   display: inline
@@ -180,7 +185,7 @@ del, s
     padding: 20px 0
     border-top: 1px solid
     border-color(border-color, border-color-light, border-color-dark)
-    max-width: 1000px
+    max-width: 1080px
     width: 90%
     overflow: hidden
 

diff --git a/source/js/toc.js b/source/js/toc.js
@@ -1,16 +1,21 @@
-const tocWrap = document.getElementById('post-toc');
-
-function toggleToc(button, expend, collapse) {
-  let expaned = tocWrap.getAttribute('data-expand') == "true";
-  tocWrap.setAttribute('data-expand', !expaned);
-
-  if (expaned) {
-    button.innerText = collapse;
-  } else {
-    window.scroll({
-      top: tocWrap.offsetTop - 65,
-      behavior: "smooth"
+window.addEventListener('DOMContentLoaded', () => {
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      const id = entry.target.getAttribute('id');
+      if (entry.intersectionRatio > 0) {
+        document.
+          querySelector(`.post-toc-item a[href="#${encodeURIComponent(id)}"]`).parentNode.
+          setAttribute('data-active', '');
+      } else {
+        document.
+          querySelector(`.post-toc-item a[href="#${encodeURIComponent(id)}"]`).parentNode.
+          removeAttribute('data-active');
+      }
     });
-    button.innerText = expend;
-  }
-}
+  });
+
+  // Track all sections that have an `id` applied
+  document.querySelectorAll('article h3[id], article h4[id]').forEach((section) => {
+    observer.observe(section);
+  });
+});