jekyll-theme-zer0 0.10.6 → 0.15.0

data/_data/navigation/main.yml

@@ -1,30 +1,49 @@
+# Main Navigation Configuration
+# Used by: _includes/navigation/navbar.html
+# Purpose: Primary site navigation with dropdown sublinks
+
 - title: Quick Start
+  icon: bi-rocket-takeoff
   url: /quickstart/
   sublinks:
-    - title: zer0
-      url: /zer0/
     - title: Machine Setup
       url: /quickstart/machine-setup/
-    - title: "Jekyll Setup"
+    - title: Jekyll Setup
       url: /quickstart/jekyll-setup/
-    - title: "GitHub Setup"
+    - title: GitHub Setup
       url: /quickstart/github-setup/
+
 - title: Blog
+  icon: bi-journal-text
   url: /blog/
   sublinks:
     - title: All Posts
       url: /posts/
+    - title: Categories
+      url: /categories/
+    - title: Tags
+      url: /tags/
+
 - title: Docs
+  icon: bi-journal-bookmark
   url: /docs/
   sublinks:
-    - title: Jekyll
+    - title: Jekyll Guide
       url: /docs/jekyll/
+    - title: Features
+      url: /about/features/
+
 - title: About
+  icon: bi-info-circle
   url: /about/
   sublinks:
+    - title: Features
+      url: /about/features/
+    - title: Statistics
+      url: /about/stats/
     - title: Config
       url: /about/config/
-    - title: Theme
-      url: /about/theme/
     - title: Site Map
-      url: /sitemap/
+      url: /sitemap/
+    - title: Contact
+      url: /contact/

data/_data/navigation/posts.yml

@@ -1,18 +1,34 @@
+# Posts/Blog Category Navigation Configuration
+# Used by: Blog layout, category pages, and post navigation
+# Purpose: Category-based navigation for blog posts
+# Note: Categories match folders in pages/_posts/
+
 - title: Development
-  icon: code-slash
+  icon: bi-code-slash
   url: /posts/development/
+  description: "Software development, coding practices, and programming tutorials"
+
 - title: Technology
-  icon: cpu
+  icon: bi-cpu
   url: /posts/technology/
+  description: "Tech news, tools, and emerging technologies"
+
 - title: Tutorial
-  icon: journal-code
+  icon: bi-journal-code
   url: /posts/tutorial/
+  description: "Step-by-step guides and how-to articles"
+
 - title: World
-  icon: globe
+  icon: bi-globe
   url: /posts/world/
+  description: "Global trends, remote work, and industry insights"
+
 - title: Business
-  icon: briefcase
+  icon: bi-briefcase
   url: /posts/business/
+  description: "Business strategies, startups, and entrepreneurship"
+
 - title: Science
-  icon: mortarboard
+  icon: bi-mortarboard
   url: /posts/science/
+  description: "Scientific discoveries, research, and innovation"

data/_data/navigation/quickstart.yml

@@ -1,12 +1,17 @@
+# Quick Start Navigation Configuration
+# Used by: Quick Start sidebar and related pages
+# Purpose: Step-by-step guide navigation for new users
+
 - title: "Quick Start"
+  icon: bi-flag
   url: /quickstart/
   sublinks:
     - title: "Machine Setup"
       url: /quickstart/machine-setup/
-      description: "Platform-specific setup and Docker installation"
+      icon: bi-laptop
     - title: "Jekyll Setup"
       url: /quickstart/jekyll-setup/
-      description: "Jekyll theme configuration and development environment"
+      icon: bi-code-square
     - title: "GitHub Setup"
       url: /quickstart/github-setup/
-      description: "Version control, GitHub integration, and deployment"
+      icon: bi-github

data/_includes/README.md

@@ -46,6 +46,8 @@ Reusable UI components and widgets:
 - `zer0-env-var.html` - Environment variable configuration
 - `svg.html` - SVG icon definitions
 - `js-cdn.html` - CDN JavaScript libraries
+- `preview-image.html` - Consistent preview image rendering with lazy loading
+- `post-card.html` - Reusable post card component for listings
 
 ### `content/`
 

data/_includes/components/js-cdn.html

@@ -26,4 +26,7 @@
 <!-- Bootstrap 5.3.3 Bundle (includes Popper.js) -->
 <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" 
         integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" 
-        crossorigin="anonymous"></script>
+        crossorigin="anonymous"></script>
+
+<!-- Sidebar Navigation Enhancements - Deferred for performance -->
+<script defer src="{{ '/assets/js/sidebar.js' | relative_url }}"></script>

data/_includes/components/post-card.html

@@ -78,17 +78,8 @@
       
       <!-- Preview Image -->
       <a href="{{ include.post.url | relative_url }}" class="text-decoration-none">
-        {% if include.post.preview %}
-          <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ include.post.preview }}" 
-               class="card-img-top" 
-               alt="Preview image for {{ include.post.title }}"
-               loading="lazy">
-        {% else %}
-          <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ site.teaser }}" 
-               class="card-img-top" 
-               alt="Default preview image"
-               loading="lazy">
-        {% endif %}
+        {% assign card_img = include.post.preview | default: site.teaser %}
+        {% include components/preview-image.html src=card_img alt=include.post.title class="card-img-top" %}
       </a>
     </div>
     

data/_includes/components/preview-image.html

@@ -0,0 +1,32 @@
+{% comment %}
+  PREVIEW IMAGE - Simple, Consistent Image Rendering
+  
+  Usage:
+    {%- include components/preview-image.html 
+       src=post.preview 
+       alt=post.title 
+       class="card-img-top" 
+       style="height: 180px; object-fit: cover;" 
+    -%}
+  
+  Convention: All preview paths should be absolute (e.g., /assets/images/preview.png)
+  External URLs (https://...) are also supported.
+{% endcomment %}
+{% assign img = include.src | default: site.teaser %}
+{% assign alt = include.alt | default: "Preview image" %}
+{% assign class = include.class | default: "card-img-top" %}
+{% assign style = include.style %}
+{% assign loading = include.loading | default: "lazy" %}
+
+{% comment %} External URL or internal path {% endcomment %}
+{% if img contains '://' %}
+  {% assign final_src = img %}
+{% else %}
+  {% assign final_src = img | relative_url %}
+{% endif %}
+
+<img src="{{ final_src }}" 
+     class="{{ class }}" 
+     alt="{{ alt | escape }}"
+     {% if style %}style="{{ style }}"{% endif %}
+     loading="{{ loading }}">

data/_includes/content/intro.html

@@ -16,19 +16,18 @@
 <!-- Intro Section -->
 
 {% comment %}
-  Determine the preview image path. If page.preview starts with '/' or 'http', 
-  use it directly. Otherwise, prepend the public folder path.
+  Determine the preview image path. All preview paths should be absolute
+  starting with /assets/ or external URLs starting with ://
 {% endcomment %}
 {% assign preview_image = page.preview | default: site.info_banner %}
-{% assign preview_first_char = preview_image | slice: 0 %}
-{% if preview_image contains '://' or preview_first_char == '/' %}
+{% if preview_image contains '://' %}
   {% assign preview_path = preview_image %}
 {% else %}
-  {% assign preview_path = '/' | append: site.public_folder | append: '/' | append: preview_image %}
+  {% assign preview_path = preview_image | relative_url %}
 {% endif %}
 
 <div class="bd-intro pt-5 ps-lg-2 position-relative" style="
-  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ site.baseurl }}{{ preview_path }}') no-repeat center center / cover;
+  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('{{ preview_path | relative_url }}') no-repeat center center / cover;
   color: #fff;">
 
   <br>

data/_includes/core/header.html

@@ -13,6 +13,7 @@
   - Offcanvas sidebars for mobile navigation
   - Brand logo and home navigation integration
   - Settings modal and navigation toggles
+  - Skip-to-content link for accessibility
   
   Dependencies:
   - branding.html: Site title and logo display
@@ -24,10 +25,23 @@
   - Mobile: Collapsed navigation with hamburger menu
   - Offcanvas panels for sidebar and navigation
   
+  Accessibility:
+  - Skip-to-content link for keyboard navigation
+  - ARIA labels for screen readers
+  - Focus management for offcanvas
+  
   TODO: Fix Nanobar progress bar positioning and animation
   ===================================================================
 -->
 
+<!-- ================================ -->
+<!-- SKIP TO CONTENT LINK            -->
+<!-- ================================ -->
+<!-- Accessibility: allows keyboard users to skip navigation -->
+<a href="#main-content" class="visually-hidden-focusable position-absolute top-0 start-0 z-3 m-3 btn btn-primary">
+  Skip to main content
+</a>
+
 <header id="navbar" class="container-fluid text-center fixed-top" role="navigation">
 
     <!-- ================================ -->

data/_includes/navigation/sidebar-categories.html

@@ -1,18 +1,29 @@
 <!-- sidebar-categories.html -->
-<div class="d-flex flex-column flex-shrink-0" style="width: 280px;">
-    <a href="/" class="d-flex align-items-center text-decoration-none">
+<div class="d-flex flex-column flex-shrink-0 w-100">
+    <a href="/" class="d-flex align-items-center text-decoration-none mb-3">
+        <i class="bi bi-folder2-open me-2 fs-4"></i>
         <span class="fs-4">Categories</span>
     </a>
-    <hr>
+    <hr class="my-2">
     {% for category in site.categories %}
-        <div class="">
-            <button class="btn btn-toggle align-items-center rounded collapsed" data-bs-toggle="collapse" data-bs-target="#{{category[0]}}-list" aria-expanded="false">
-                {{ category[0] }}
+        <div class="mb-1">
+            <button class="btn btn-toggle d-flex align-items-center w-100 rounded collapsed" 
+                    data-bs-toggle="collapse" 
+                    data-bs-target="#{{category[0] | slugify}}-list" 
+                    aria-expanded="false"
+                    aria-controls="{{category[0] | slugify}}-list">
+                <i class="bi bi-folder me-2"></i>
+                <span>{{ category[0] }}</span>
             </button>
-            <div class="collapse" id="{{category[0]}}-list">
-                <ul class="btn-toggle-nav list-unstyled fw-normal small">
+            <div class="collapse" id="{{category[0] | slugify}}-list">
+                <ul class="btn-toggle-nav list-unstyled fw-normal small ps-4">
                     {% for post in category[1] %}
-                        <li class="link-light"><a href="{{ post.url }}" class=" rounded">{{ post.title }}</a></li>
+                        <li class="py-1">
+                            <a href="{{ post.url | relative_url }}" class="text-decoration-none rounded d-block py-1 px-2{% if page.url == post.url %} active{% endif %}">
+                                <i class="bi bi-file-earmark-text me-1"></i>
+                                {{ post.title }}
+                            </a>
+                        </li>
                     {% endfor %}
                 </ul>
             </div>

data/_includes/navigation/sidebar-folders.html

@@ -11,12 +11,13 @@
   - Gets the current page's collection
   - Sorts documents by path to maintain folder hierarchy
   - Displays folder names and document links
-  - Uses Bootstrap list-group for styling
+  - Uses Bootstrap list-group for styling with Bootstrap Icons
   
   Dependencies:
   - page.collection: Current collection name from page front matter
   - site.collections: Jekyll collections configuration
   - Bootstrap 5 list-group component
+  - Bootstrap Icons for folder/file indicators
   
   Usage:
   - Include in sidebar when page.sidebar.nav == "dynamic"
@@ -27,8 +28,8 @@
 {% assign root_folder = site.collections | where: "label", page.collection | first %}
 
 {% if root_folder %}
-  <h2 class="h5 mb-3">
-    <i class="bi bi-folder me-2"></i>
+  <h2 class="h5 mb-3 d-flex align-items-center">
+    <i class="bi bi-folder2-open me-2"></i>
     {{ root_folder.label | capitalize }}
   </h2>
   
@@ -42,8 +43,8 @@
       {% if current_path != prev_path %}
         {% for folder in current_path %}
           {% if forloop.index != 1 %}
-            <li class="folder list-group-item bg-body-tertiary fw-semibold">
-              <i class="bi bi-folder2 me-1"></i>
+            <li class="folder list-group-item bg-body-tertiary fw-semibold d-flex align-items-center">
+              <i class="bi bi-folder2 me-2"></i>
               {{ folder }}
             </li>
           {% endif %}
@@ -52,8 +53,8 @@
       {% endif %}
       
       <li class="file list-group-item list-group-item-action{% if page.url == doc.url %} active{% endif %}">
-        <a href="{{ doc.url | relative_url }}" class="text-decoration-none">
-          <i class="bi bi-file-text me-1"></i>
+        <a href="{{ doc.url | relative_url }}" class="text-decoration-none d-flex align-items-center">
+          <i class="bi bi-file-earmark-text me-2"></i>
           {{ doc.title }}
         </a>
       </li>

data/_includes/navigation/sidebar-right.html

@@ -4,11 +4,17 @@
   includes: nav_list.html, content/toc.html
 -->
 
-<!-- TOC button in mobile view  -->
-<div class="d-flex justify-content-end position-fixed top-50 end-0 translate-middle-y me-3">
-
-  <button class="btn bg-opacity-2 bd-toc-toggle d-lg-none border z-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#tocContents" aria-controls="tocContents">
-    <i class="bi bi-list-ul"></i>
+<!-- TOC button in mobile view - Floating Action Button pattern -->
+<!-- Positioned above back-to-top button to prevent overlap -->
+<div class="d-lg-none position-fixed bd-toc-fab" style="bottom: 90px; right: 20px; z-index: 1030;">
+  <button class="btn btn-primary rounded-circle shadow-lg bd-toc-toggle" 
+          type="button" 
+          data-bs-toggle="offcanvas" 
+          data-bs-target="#tocContents" 
+          aria-controls="tocContents"
+          aria-label="Toggle Table of Contents"
+          style="width: 56px; height: 56px;">
+    <i class="bi bi-list-ul fs-5"></i>
   </button>
 </div>
 
@@ -20,11 +26,11 @@
   </div>
   <div class="offcanvas-body">
     <!-- Table of contents -->
-    <nav id="TableOfContents">
-      <!-- TOC tile -->
-      <div>
-        <strong>
-          <i class="fas fa-file-alt"></i>
+    <nav id="TableOfContents" role="navigation" aria-label="Table of Contents">
+      <!-- TOC title -->
+      <div class="mb-3">
+        <strong class="d-flex align-items-center">
+          <i class="bi bi-file-text me-2"></i>
           On this page
         </strong>
       </div>

data/_layouts/blog.html

@@ -105,15 +105,13 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
         </a>
       </div>
       <div class="col-lg-6">
-        {% if hero_post.preview %}
-          <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ hero_post.preview }}" 
-               class="w-100 h-100" style="object-fit: cover; min-height: 400px;" 
-               alt="{{ hero_post.title }}" loading="lazy">
-        {% else %}
-          <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.og_image }}" 
-               class="w-100 h-100" style="object-fit: cover; min-height: 400px;" 
-               alt="Featured image" loading="lazy">
-        {% endif %}
+        {% assign hero_img = hero_post.preview | default: site.og_image %}
+        {% include components/preview-image.html 
+           src=hero_img 
+           alt=hero_post.title 
+           class="w-100 h-100" 
+           style="object-fit: cover; min-height: 400px;" 
+        %}
       </div>
     </div>
   </section>
@@ -162,15 +160,8 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
               <i class="bi bi-star-fill me-1"></i>Featured
             </span>
             <a href="{{ main_featured.url | relative_url }}">
-              {% if main_featured.preview %}
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ main_featured.preview }}" 
-                     class="card-img-top" style="height: 300px; object-fit: cover;" 
-                     alt="{{ main_featured.title }}" loading="lazy">
-              {% else %}
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                     class="card-img-top" style="height: 300px; object-fit: cover;" 
-                     alt="Preview" loading="lazy">
-              {% endif %}
+              {% assign main_img = main_featured.preview | default: site.teaser %}
+              {% include components/preview-image.html src=main_img alt=main_featured.title class="card-img-top" style="height: 300px; object-fit: cover;" %}
             </a>
           </div>
           <div class="card-body">
@@ -206,15 +197,8 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
             <div class="col">
               <div class="card h-100 border-0 shadow-sm hover-lift">
                 <a href="{{ fpost.url | relative_url }}">
-                  {% if fpost.preview %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ fpost.preview }}" 
-                         class="card-img-top" style="height: 120px; object-fit: cover;" 
-                         alt="{{ fpost.title }}" loading="lazy">
-                  {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                         class="card-img-top" style="height: 120px; object-fit: cover;" 
-                         alt="Preview" loading="lazy">
-                  {% endif %}
+                  {% assign fpost_img = fpost.preview | default: site.teaser %}
+                  {% include components/preview-image.html src=fpost_img alt=fpost.title class="card-img-top" style="height: 120px; object-fit: cover;" %}
                 </a>
                 <div class="card-body py-3">
                   <h6 class="card-title mb-1">
@@ -254,15 +238,8 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
           <div class="col-md-6 col-lg-3">
             <div class="card h-100 border-0 shadow-sm hover-lift">
               <a href="{{ cpost.url | relative_url }}">
-                {% if cpost.preview %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ cpost.preview }}" 
-                       class="card-img-top" style="height: 140px; object-fit: cover;" 
-                       alt="{{ cpost.title }}" loading="lazy">
-                {% else %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                       class="card-img-top" style="height: 140px; object-fit: cover;" 
-                       alt="Preview" loading="lazy">
-                {% endif %}
+                {% assign cpost_img = cpost.preview | default: site.teaser %}
+                {% include components/preview-image.html src=cpost_img alt=cpost.title class="card-img-top" style="height: 140px; object-fit: cover;" %}
               </a>
               <div class="card-body">
                 <h6 class="card-title">
@@ -305,15 +282,8 @@ source: "https://getbootstrap.com/docs/5.3/examples/blog/#"
             <div class="row g-0">
               <div class="col-4">
                 <a href="{{ lpost.url | relative_url }}">
-                  {% if lpost.preview %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ lpost.preview }}" 
-                         class="rounded-start h-100 w-100" style="object-fit: cover; min-height: 120px;" 
-                         alt="{{ lpost.title }}" loading="lazy">
-                  {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                         class="rounded-start h-100 w-100" style="object-fit: cover; min-height: 120px;" 
-                         alt="Preview" loading="lazy">
-                  {% endif %}
+                  {% assign lpost_img = lpost.preview | default: site.teaser %}
+                  {% include components/preview-image.html src=lpost_img alt=lpost.title class="rounded-start h-100 w-100" style="object-fit: cover; min-height: 120px;" %}
                 </a>
               </div>
               <div class="col-8">

data/_layouts/category.html

@@ -111,18 +111,8 @@ layout: default
               </span>
             {% endif %}
             <a href="{{ fpost.url | relative_url }}" class="text-decoration-none">
-              {% if fpost.preview %}
-                {% if fpost.preview contains '/assets' %}
-                  <img src="{{ site.baseurl }}{{ fpost.preview }}" 
-                       class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
-                {% else %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ fpost.preview }}" 
-                       class="card-img-top" alt="{{ fpost.title }}" loading="lazy">
-                {% endif %}
-              {% else %}
-                <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                     class="card-img-top" alt="Preview" loading="lazy">
-              {% endif %}
+              {% assign fpost_img = fpost.preview | default: site.teaser %}
+              {% include components/preview-image.html src=fpost_img alt=fpost.title class="card-img-top" %}
             </a>
           </div>
           <div class="card-body">
@@ -171,18 +161,8 @@ layout: default
                 </span>
               {% endif %}
               <a href="{{ cpost.url | relative_url }}" class="text-decoration-none">
-                {% if cpost.preview %}
-                  {% if cpost.preview contains '/assets' %}
-                    <img src="{{ site.baseurl }}{{ cpost.preview }}" 
-                         class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
-                  {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ cpost.preview }}" 
-                         class="card-img-top" alt="{{ cpost.title }}" loading="lazy">
-                  {% endif %}
-                {% else %}
-                  <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                       class="card-img-top" alt="Preview" loading="lazy">
-                {% endif %}
+                {% assign cpost_img = cpost.preview | default: site.teaser %}
+                {% include components/preview-image.html src=cpost_img alt=cpost.title class="card-img-top" %}
               </a>
             </div>
             <div class="card-body d-flex flex-column">

data/_layouts/collection.html

@@ -83,18 +83,8 @@ layout: default
                 <!-- CARD IMAGE SECTION     -->
                 <!-- ====================== -->
                 <!-- Display preview image with fallback to site teaser -->
-                {% if post.preview %}
-                    {% if post.preview contains '/assets' %}
-                        <img src="{{ site.baseurl }}{{ post.preview }}" 
-                             class="card-img-top" alt="Preview image for {{ post.title }}">
-                    {% else %}
-                        <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ post.preview }}" 
-                             class="card-img-top" alt="Preview image for {{ post.title }}">
-                    {% endif %}
-                {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                         class="card-img-top" alt="Default preview image">
-                {% endif %}
+                {% assign coll_img = post.preview | default: site.teaser %}
+                {% include components/preview-image.html src=coll_img alt=post.title class="card-img-top" %}
                 
                 <!-- ====================== -->
                 <!-- CARD CONTENT SECTION   -->

data/_layouts/default.html

@@ -61,7 +61,7 @@ layout: root
     <!-- MAIN CONTENT AREA               -->
     <!-- ================================ -->
     <!-- Primary content section with scroll spy for table of contents navigation -->
-    <main class="bd-main order-1" data-spy="scroll" data-bs-target="toc-content" data-offset="0">
+    <main class="bd-main order-1" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="100" data-bs-smooth-scroll="true">
 
         <!-- Page introduction: title, breadcrumbs, metadata -->
         {% include content/intro.html %}

data/_layouts/journals.html

@@ -188,18 +188,8 @@ layout: default
             <div class="col">
               <div class="card h-100 border-0 shadow-sm">
                 <a href="{{ rpost.url | relative_url }}" class="text-decoration-none">
-                  {% if rpost.preview %}
-                    {% if rpost.preview contains '/assets' %}
-                      <img src="{{ site.baseurl }}{{ rpost.preview }}" 
-                           class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
-                    {% else %}
-                      <img src="{{ site.baseurl }}/{{ site.public_folder }}/{{ rpost.preview }}" 
-                           class="card-img-top" alt="{{ rpost.title }}" loading="lazy">
-                    {% endif %}
-                  {% else %}
-                    <img src="{{ site.baseurl }}/{{ site.public_folder }}{{ site.teaser }}" 
-                         class="card-img-top" alt="Preview" loading="lazy">
-                  {% endif %}
+                  {% assign rpost_img = rpost.preview | default: site.teaser %}
+                  {% include components/preview-image.html src=rpost_img alt=rpost.title class="card-img-top" %}
                 </a>
                 <div class="card-body">
                   <h6 class="card-title mb-1">