feat: add the slide component and use it on related posts

assets/js/slide/index.ts

@@ -0,0 +1,26 @@
+(() => {
+    'use strict'
+
+    const scroll = (element) => {
+        const inner = element.parentElement.querySelector('.slide-inner')
+        const step = inner.offsetWidth
+        if (element.classList.contains('slide-control-left')) {
+            inner.scrollLeft -= step
+        } else {
+            inner.scrollLeft += step
+        }
+
+    }
+    document.addEventListener('DOMContentLoaded', () => {
+        document.querySelectorAll('.slide-control-left').forEach(element => {
+            element.addEventListener('click', () => {
+                scroll(element)
+            })
+        })
+        document.querySelectorAll('.slide-control-right').forEach(element => {
+            element.addEventListener('click', () => {
+                scroll(element)
+            })
+        })
+    })
+})()

assets/main/js/index.ts

@@ -13,6 +13,7 @@ import SidebarToggle from 'js/sidebar-toggle';
 import TableWrapper from 'js/table-wrapper';
 import TOC from 'js/toc';
 import components from './components';
+import 'js/slide';
 
 (new ActionsPanel()).run();
 (new Scroller()).run();

assets/main/scss/_slide.scss

@@ -0,0 +1,35 @@
+.slide {
+    position: relative;
+    display: flex;
+}
+
+.slide-inner {
+    flex-wrap: nowrap;
+    overflow: hidden;
+    width: 100%;
+    margin: 0;
+}
+
+.slide-control-left,
+.slide-control-right {
+    border: none;
+    background: transparent;
+    color: var(--#{$prefix}secondary);
+    height: 100%;
+    position: absolute;
+    width: 80px;
+
+    &:hover {
+        color: var(--#{$prefix}primary);
+    }
+}
+
+.slide-control-left {
+    left: 0;
+    top: 0;
+}
+
+.slide-control-right {
+    right: 0;
+    top: 0;
+}

assets/main/scss/index.scss

@@ -30,6 +30,7 @@
 @import 'scroll-to-top';
 @import 'search';
 @import 'sidebar';
+@import 'slide';
 @import 'social-share';
 @import 'surface';
 @import 'table';

assets/main/scss/post/_card.scss

@@ -0,0 +1,15 @@
+.post-card {
+  img {
+    @extend .card-img-top;
+
+    height: 120px;
+    margin-bottom: 0.5rem;
+    object-fit: cover;
+  }
+}
+
+.post-card-default-img {
+  filter: blur(1px);
+  height: 120px;
+  width: 100%;
+}

assets/main/scss/post/index.scss

@@ -1,3 +1,4 @@
+@import 'card';
 @import 'panel';
 @import 'toc';
 @import 'taxonomy';

layouts/partials/post/card-img.html

@@ -0,0 +1,9 @@
+{{- $img := partialCached "post/thumbnail" . . }}
+{{- with $img }}
+  {{ . }}
+{{- else }}
+  <div
+    class="post-card-default-img card-img-top d-flex align-items-center justify-content-center bg-body-secondary mb-1">
+    NO IMAGE
+  </div>
+{{- end }}

layouts/partials/post/card.html

@@ -0,0 +1,9 @@
+<div class="post-card card card-body p-0 border-0 surface">
+  {{ partial "post/card-img" . }}
+  <a class="post-title" href="{{ .RelPermalink }}">
+    {{ partial "helpers/title" . }}
+  </a>
+  <div class="post-meta mb-0">
+    {{ partial "helpers/post-date" . }}
+  </div>
+</div>

layouts/partials/post/related-posts.html

@@ -8,22 +8,22 @@ <h2 class="card-title fs-4 my-2 text-surface">
           {{ i18n "related_posts" }}
         </h2>
       </div>
-      <div class="card-body">
-        <ul class="post-list list-unstyled">
+      <div class="card-body slide px-1">
+        <div class="slide-inner row gx-0">
           {{- range . -}}
-            <li class="mb-3 border-bottom">
-              <a class="post-title" href="{{ .RelPermalink }}">
-                {{ partial "helpers/title" . }}
-              </a>
-              <span class="post-meta post-date float-end">
-                {{ partial "helpers/post-date" . }}
-              </span>
-              <div class="post-summary my-3">
-                {{ partial "post/excerpt" . }}
-              </div>
-            </li>
-          {{- end -}}
-        </ul>
+          <div class="col-12 col-md-6 col-lg-4 me-2">
+            {{ partial "post/card" . }}
+          </div>
+        {{- end -}}
+        </div>
+        <button class="slide-control-left">
+          <i class="fas fa-2x fa-chevron-circle-down" data-fa-transform="rotate-90"></i>
+          <span class="visually-hidden">Left</span>
+        </button>
+        <button class="slide-control-right">
+          <i class="fas fa-2x fa-chevron-circle-down" data-fa-transform="rotate-270"></i>
+          <span class="visually-hidden">Right</span>
+        </button>
       </div>
     </section>
   {{- end -}}