feat: change Related Posts to Now Read This

1. Fewer items (only one), less distraction
2. Show summary
3. Encourage readers to read more with a imperative sentence

4 files changed, 36 insertions, 56 deletions

diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss
index 4c05841a..05e29e08 100644
--- a/assets/css/components/_post.scss
+++ b/assets/css/components/_post.scss
@@ -96,48 +96,27 @@
 
 /* related posts */
 
-.related-posts {
-    .related-posts-list {
-        padding-inline-start: 0;
-        .related-posts-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            .related-post-subtitle {
-                color: var(--secondary-text-color);
-            }
-            .related-post-reading-time {
-                font-family: var(--mono-font-family);
-                color: var(--secondary-text-color);
-                font-size: 0.9rem;
-            }
-        }
-    }
-}
-
-.post-bottom-navigation {
-    ul {
-        list-style: none;
-        padding: 0;
+.nrt {
+    margin-top: 5rem;
+    position: relative;
+    .nrt-title {
+        position: absolute;
+        z-index: -1;
+        bottom: 0;
+        right: 0;
+        font-size: 2rem;
         margin: 0;
+        opacity: .25;
+        font-style: italic;
+    }
+    .nrt-header {
         display: flex;
-        gap: 0.5rem;
         justify-content: space-between;
-        align-items: center;
-        li {
-            &:not(:nth-child(2)) {
-                width: 37.5%;
-            }
-            &:nth-child(3) {
-                text-align: right;
-            }
-            a {
-                color: var(--secondary-text-color);
-                text-decoration: none;
-                &:hover {
-                    color: var(--primary-color);
-                }
-            }
+        .nrt-link {
+            font-weight: 800;
+        }
+        .nrt-reading-time {
+            color: var(--secondary-text-color)
         }
     }
 }
diff --git a/i18n/en.yml b/i18n/en.yml
index 5e6a266e..34c7ec59 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -18,7 +18,7 @@ postNav:
 moreLinks:
   posts: 'All Posts'
   cards: 'All Cards'
-relatedContent: 'Related Content'
+nowReadThis: 'Now Read This'
 backToHome: 'Back To Home'
 termPage:
   cards: 'Cards about this topic'
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 8e3c7e72..c4cdc8fa 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -19,7 +19,7 @@ cards: 最近在学
 moreLinks:
   posts: '所有文章'
   cards: '所有卡片'
-relatedContent: '相关文章'
+nowReadThis: '接下来阅读'
 backToHome: '返回首页'
 termPage:
   cards: '相关卡片'
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index 3707a8ab..00517df4 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -48,23 +48,24 @@
       <!-- Comment -->
       {{ partial "components/comment.html" . }}
 
-      <!-- Related Posts -->
-      {{ with site.RegularPages.Related . | first 3 }}
-      <div class="related-posts post-content">
-        <h4>{{ T "relatedContent" }}</h4>
-        <ul class="related-posts-list">
+      <!-- Now Read This -->
+      {{ with site.RegularPages.Related . | first 1 }}
+      <div class="nrt post-content">
+        <h4 class="nrt-title">{{ T "nowReadThis" }}</h4>
         {{ range . }}
-            <li class="related-posts-item">
-                <a href="{{ .RelPermalink }}" data-umami-event="Click Related Post">
-                    {{ .LinkTitle }}
-                    {{ with .Params.subtitle }}
-                        <span class="related-post-subtitle">：{{ . }}</span>
-                    {{ end }}
-                </a>
-                <span class="related-post-reading-time">⏱️ {{ .ReadingTime }}min </span>
-            </li>
+        <div class="nrt-header">
+            <a class="nrt-link" href="{{ .RelPermalink }}" data-umami-event="Click Related Post">
+                {{ .LinkTitle }}
+                {{ with .Params.subtitle }}
+                    <span class="nrt-subtitle">：{{ . }}</span>
+                {{ end }}
+            </a>
+            <span class="nrt-reading-time">⏱️ {{ .ReadingTime }}min </span>
+        </div>
+        <div class="nrt-summary">
+            <p>{{ .Summary | plainify }}</p>
+        </div>
         {{ end }}
-        </ul>
       </div>
       {{ end }}
     </article>