Place blogroll and related-posts in separate sidebar-inner elements (#593)

_config.yml

@@ -286,7 +286,7 @@ follow_me:
 # Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
 related_posts:
   enable: false
-  display_in_home: false
+  icon: fa fa-signs-post
 
 # Post edit
 # Easily browse and edit blog source code online.

layout/_macro/post.njk

@@ -98,10 +98,6 @@
     {### END POST BODY ###}
     {#####################}
 
-    {%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
-      {{ partial('_partials/post/post-related.njk') }}
-    {%- endif %}
-
     <footer class="post-footer">
       {%- if is_index %}
         <div class="post-eof"></div>

layout/_macro/sidebar.njk

@@ -38,5 +38,40 @@
         </div>
       {%- endif %}
     </div>
+
+    {# Blogroll #}
+    {%- if theme.links %}
+    <div class="sidebar-inner sidebar-blogroll">
+      <div class="links-of-blogroll animated">
+        <div class="links-of-blogroll-title">
+          {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
+          {{ __('sidebar.links') }}
+        </div>
+        <ul class="links-of-blogroll-list">
+          {%- for blogrollText, blogrollURL in theme.links %}
+            <li class="links-of-blogroll-item">
+              {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
+            </li>
+          {%- endfor %}
+        </ul>
+      </div>
+    </div>
+    {%- endif %}
+
+    {%- if theme.related_posts.enable %}
+      {%- if theme.pjax %}
+        <div class="pjax">
+      {%- endif %}
+      {%- if page.related_posts and page.related_posts.length > 0 %}
+        <div class="sidebar-inner sidebar-post-related">
+          <div class="animated">
+            {{ partial('_partials/post/post-related.njk') }}
+          </div>
+        </div>
+      {%- endif %}
+      {%- if theme.pjax %}
+        </div>
+      {%- endif %}
+    {%- endif %}
   </aside>
 {% endmacro %}

layout/_partials/post/post-related.njk

@@ -1,20 +1,18 @@
-{%- if page.related_posts and page.related_posts.length > 0 %}
-  <div class="popular-posts-header">{{ __('post.related_posts') }}</div>
+  <div class="links-of-blogroll-title">
+    {%- if theme.related_posts.icon %}<i class="{{ theme.related_posts.icon }} fa-fw"></i>{% endif %}
+    {{ __('post.related_posts') }}
+  </div>
   <ul class="popular-posts">
   {%- for path in page.related_posts %}
     {%- set popular_post = site.posts.findOne({ path: path }) %}
     <li class="popular-posts-item">
+      <a class="popular-posts-link" href="{{ url_for(popular_post.path) }}" rel="bookmark">
       {%- if popular_post.date %}
-        <div class="popular-posts-date">{{ date(popular_post.date) }}</div>
-      {%- endif %}
-      {%- if popular_post.img %}
-        <div class="popular-posts-img"><img src="{{ popular_post.img }}" alt="{{ popular_post.title }}"></div>
-      {%- endif %}
-      <div class="popular-posts-title"><a href="{{ url_for(popular_post.path) }}" rel="bookmark">{{ popular_post.title }}</a></div>
-      {%- if popular_post.excerpt and popular_post.excerpt != '' %}
-        <div class="popular-posts-excerpt"><p>{{ popular_post.excerpt }}</p></div>
+        <time class="popular-posts-time">{{ date(popular_post.date) }}</time>
+        <br>
       {%- endif %}
+      {{ popular_post.title }}
+      </a>
     </li>
   {%- endfor %}
   </ul>
-{%- endif %}

layout/_partials/sidebar/site-overview.njk

@@ -1,4 +1,4 @@
-<div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
+<div class="site-author animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
   {%- if theme.avatar.url %}
     <img class="site-author-image" itemprop="image" alt="{{ author }}"
       src="{{ url_for(theme.avatar.url) }}">
@@ -8,7 +8,7 @@
 </div>
 
 {%- if theme.site_state %}
-<div class="site-state-wrap site-overview-item animated">
+<div class="site-state-wrap animated">
   <nav class="site-state">
     {%- if config.archive_dir != '/' and site.posts.length > 0 %}
       <div class="site-state-item site-state-posts">
@@ -52,7 +52,7 @@
 {%- endif %}
 
 {%- if theme.chat.enable and (theme.chatra.enable or theme.tidio.enable or theme.gitter.enable) %}
-  <div class="sidebar-button site-overview-item animated">
+  <div class="sidebar-button animated">
     <button{% if theme.gitter.enable %} class="js-gitter-toggle-chat-button"{% endif %}>
       {%- if theme.chat.icon %}<i class="{{ theme.chat.icon }}"></i>{% endif %}
       {{ __('widget.chat') }}
@@ -61,7 +61,7 @@
 {%- endif %}
 
 {%- if theme.social %}
-  <div class="links-of-author site-overview-item animated">
+  <div class="links-of-author animated">
     {%- for name, link in theme.social %}
       <span class="links-of-author-item">
         {%- set sidebarURL = link.split('||')[0] | trim %}
@@ -74,25 +74,8 @@
 {%- endif %}
 
 {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
-  <div class="cc-license site-overview-item animated" itemprop="license">
+  <div class="cc-license animated" itemprop="license">
     {%- set ccImage = '<img src="' + theme.vendors.creative_commons.url + '" alt="Creative Commons">' %}
     {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
   </div>
 {%- endif %}
-
-{# Blogroll #}
-{%- if theme.links %}
-  <div class="links-of-blogroll site-overview-item animated">
-    <div class="links-of-blogroll-title">
-      {%- if theme.links_settings.icon %}<i class="{{ theme.links_settings.icon }} fa-fw"></i>{% endif %}
-      {{ __('sidebar.links') }}
-    </div>
-    <ul class="links-of-blogroll-list">
-      {%- for blogrollText, blogrollURL in theme.links %}
-        <li class="links-of-blogroll-item">
-          {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
-        </li>
-      {%- endfor %}
-    </ul>
-  </div>
-{%- endif %}

source/css/_common/components/third-party/index.styl

@@ -2,7 +2,6 @@
 @import 'gitalk';
 @import 'utterances';
 @import 'search';
-@import 'related-posts';
 @import 'math';
 @import 'gitter';
 

source/css/_common/components/third-party/related-posts.styl

@@ -1,23 +0,0 @@
-if (hexo-config('related_posts.enable')) {
-  .popular-posts-header {
-    border-bottom: 1px solid $gainsboro;
-    font-size: $font-size-large;
-    margin-bottom: 10px;
-    margin-top: $post-eof-margin-bottom;
-  }
-
-  .popular-posts {
-    padding: 0;
-
-    .popular-posts-item {
-      margin-left: 2em;
-
-      .popular-posts-title {
-        font-size: $font-size-small;
-        font-weight: normal;
-        line-height: $line-height-base * 1.2;
-        margin: 0;
-      }
-    }
-  }
-}

source/css/_common/outline/sidebar/index.styl

@@ -1,17 +1,10 @@
 .sidebar-inner {
   color: $grey-dark;
-  // Init Sidebar & TOC inner dimensions on all pages and for all schemes.
-  $offset = (($scheme == 'Pisces') or ($scheme == 'Gemini')) ? $sidebar-offset : $sidebar-padding;
-  max-height: 'calc(100vh - %s)' % unit($offset * 2, 'px');
   padding: $sidebar-padding 10px;
   text-align: center;
   flex-column();
 }
 
-.site-overview-item:not(:first-child) {
-  margin-top: 10px;
-}
-
 .cc-license {
   .cc-opacity {
     border-bottom: 0;
@@ -35,3 +28,4 @@
 @import 'sidebar-toggle';
 @import 'sidebar-toc';
 @import 'site-state';
+@import 'related-posts';

source/css/_common/outline/sidebar/related-posts.styl

@@ -0,0 +1,31 @@
+if (hexo-config('related_posts.enable')) {
+  .sidebar-post-related {
+    font-size: $font-size-smaller;
+    padding: $sidebar-padding 0 0 0;
+  }
+
+  .popular-posts {
+    margin: 0;
+    padding: 1em 0;
+    text-align: left;
+
+    .popular-posts-item {
+      display: block;
+
+      .popular-posts-link {
+        border-bottom: 0;
+        display: block;
+        padding: 5px 20px;
+        transition: background .2s ease-in-out;
+
+        &:hover {
+          background: var(--menu-item-bg-color);
+        }
+      }
+
+      .popular-posts-time {
+        color: $site-state-item-name-color;
+      }
+    }
+  }
+}

source/css/_common/outline/sidebar/sidebar-blogroll.styl

@@ -5,7 +5,6 @@
 .links-of-blogroll-title {
   font-size: $font-size-small;
   font-weight: 600;
-  margin-top: 0;
 }
 
 .links-of-blogroll-list {

source/css/_common/outline/sidebar/sidebar-nav.styl

@@ -48,8 +48,9 @@
 
 .sidebar-overview-active .site-overview-wrap {
   // Flexbox layout makes it possible to reorder the child
-  // elements of .site-overview-item through the `order` CSS property
+  // elements of .site-overview-wrap through the `order` CSS property
   flex-column();
+  gap: 10px;
 }
 
 .sidebar-toc-active .post-toc-wrap {

source/css/_schemes/Muse/_sidebar.styl

@@ -36,6 +36,8 @@ if (hexo-config('sidebar.position') == 'right') {
   if (not hexo-config('back2top.sidebar')) {
     box-shadow: inset 0 2px 6px black;
   }
+  max-height: 100vh;
+  overflow-y: auto;
   position: fixed;
   top: 0;
   transition: all $transition-ease-out;
@@ -95,6 +97,10 @@ if (hexo-config('sidebar.position') == 'right') {
   }
 }
 
+.popular-posts .popular-posts-item .popular-posts-link:hover {
+  background: none;
+}
+
 .sidebar-dimmer {
   background: black;
   height: 100%;

source/css/_schemes/Pisces/_sidebar.styl

@@ -7,10 +7,6 @@
   +tablet-mobile() {
     display: none;
   }
-
-  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
-    visibility: hidden;
-  }
 }
 
 .sidebar-inner {
@@ -20,6 +16,11 @@
   box-sizing: border-box;
   color: var(--text-color);
   margin-top: $sidebar-offset;
+  max-height: 'calc(100vh - %s)' % unit($sidebar-offset * 2, 'px');
+
+  if (hexo-config('motion.enable') and hexo-config('motion.transition.sidebar')) {
+    visibility: hidden;
+  }
 }
 
 .site-state-item {

source/css/noscript.styl

@@ -4,6 +4,7 @@ body { margin-top: 2rem; }
 
 .use-motion .menu-item,
 .use-motion .sidebar,
+.use-motion .sidebar-inner,
 .use-motion .post-block,
 .use-motion .pagination,
 .use-motion .comments,

source/js/motion.js

@@ -107,16 +107,20 @@ NexT.motion.middleWares = {
   },
 
   sidebar: function() {
-    const sidebar = document.querySelector('.sidebar');
+    const sequence = [];
+    const sidebar = document.querySelectorAll('.sidebar-inner');
     const sidebarTransition = CONFIG.motion.transition.sidebar;
     // Only for Pisces | Gemini.
     if (sidebarTransition && (CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini')) {
-      return [{
-        targets : sidebar,
-        complete: () => sidebar.classList.add('animated', sidebarTransition)
-      }];
+      sidebar.forEach(targets => {
+        sequence.push({
+          targets,
+          complete: () => targets.classList.add('animated', sidebarTransition),
+          deltaT  : '-=100'
+        });
+      });
     }
-    return [];
+    return sequence;
   },
 
   footer: function() {

source/js/pjax.js

@@ -23,6 +23,8 @@ document.addEventListener('pjax:success', () => {
       .init()
       .add(NexT.motion.middleWares.subMenu)
       .add(NexT.motion.middleWares.postList)
+      // Add sidebar-post-related transition.
+      .add(NexT.motion.middleWares.sidebar)
       .bootstrap();
   }
   if (CONFIG.sidebar.display !== 'remove') {

source/js/utils.js

@@ -275,8 +275,8 @@ NexT.utils = {
       parent = parent.parentNode;
     }
     // Scrolling to center active TOC element if TOC content is taller then viewport.
-    const tocElement = document.querySelector('.sidebar-panel-container');
-    if (!tocElement.parentNode.classList.contains('sidebar-toc-active')) return;
+    const tocElement = document.querySelector(CONFIG.scheme === 'Pisces' || CONFIG.scheme === 'Gemini' ? '.sidebar-panel-container' : '.sidebar');
+    if (!document.querySelector('.sidebar-toc-active')) return;
     window.anime({
       targets  : tocElement,
       duration : 200,