Copied changes from hmpl/blog

Author: aanthonymax

Gemfile

@@ -1,14 +1,21 @@
 source "https://rubygems.org"
 gem "jekyll", "~> 4.3.3"
 gem "minima", "~> 2.5.2"
+gem "csv"
+gem "logger"
+gem "base64"
 group :jekyll_plugins do
   gem "jekyll-feed", "~> 0.12"
   gem "jekyll-seo-tag"
   gem "jekyll-sitemap"
+  gem "jekyll-paginate"
 end
 platforms :mingw, :x64_mingw, :mswin, :jruby do
   gem "tzinfo", ">= 1", "< 3"
   gem "tzinfo-data"
 end
-gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
+# Windows Directory Monitor - commented out due to Ruby 3.4 compatibility issues
+# gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin]
+
 gem "http_parser.rb", "~> 0.6.0", :platforms => [:jruby]

_config.yml

@@ -42,6 +42,11 @@ plugins:
   - jekyll-feed
   - jekyll-seo-tag
   - jekyll-sitemap
+  - jekyll-paginate
+
+# Pagination Configuration
+paginate: 5
+paginate_path: "/page:num/"
 
 # Feed Configuration
 feed:

_layouts/home.html

@@ -80,17 +80,32 @@ <h3>
       <div class="pager">
         <ul class="pagination">
         {%- if paginator.previous_page %}
-          <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">{{ paginator.previous_page }}</a></li>
+          <li><a href="{{ paginator.previous_page_path | relative_url }}" class="previous-page">← Previous</a></li>
         {%- else %}
-          <li><div class="pager-edge">•</div></li>
+          <li><span class="pager-edge disabled">← Previous</span></li>
         {%- endif %}
-          <li><div class="current-page">{{ paginator.page }}</div></li>
+        
+        {%- for page in (1..paginator.total_pages) %}
+          {%- if page == paginator.page %}
+            <li><span class="current-page">{{ page }}</span></li>
+          {%- elsif page == 1 %}
+            <li><a href="{{ '/' | relative_url }}" class="page-link">{{ page }}</a></li>
+          {%- else %}
+            <li><a href="{{ site.paginate_path | replace: ':num', page | relative_url }}" class="page-link">{{ page }}</a></li>
+          {%- endif %}
+        {%- endfor %}
+        
         {%- if paginator.next_page %}
-          <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">{{ paginator.next_page }}</a></li>
+          <li><a href="{{ paginator.next_page_path | relative_url }}" class="next-page">Next →</a></li>
         {%- else %}
-          <li><div class="pager-edge">•</div></li>
+          <li><span class="pager-edge disabled">Next →</span></li>
         {%- endif %}
         </ul>
+        
+        <div class="pagination-info">
+          <p>Page {{ paginator.page }} of {{ paginator.total_pages }} 
+          ({{ paginator.posts.size }} of {{ paginator.total_posts }} posts)</p>
+        </div>
       </div>
     {%- endif %}
 

assets/main.scss

@@ -510,6 +510,62 @@ body {
   content: " ✓";
 }
 
+/* Pagination Styles */
+.pager {
+  margin: 2rem 0;
+  text-align: center;
+}
+
+.pagination {
+  list-style: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+.pagination li {
+  margin: 0;
+}
+
+.pagination a,
+.pagination span {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  text-decoration: none;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.pagination a:hover {
+  background-color: #f5f5f5;
+}
+
+.pagination .current-page {
+  background-color: #0366d6;
+  color: white;
+  border-color: #0366d6;
+}
+
+.pagination .disabled {
+  color: #999;
+  cursor: not-allowed;
+  background-color: #f8f9fa;
+}
+
+.pagination-info {
+  margin-top: 1rem;
+  color: #666;
+  font-size: 0.9rem;
+}
+
+.pagination-info p {
+  margin: 0;
+}
+
 // Mobile responsive
 @media (max-width: 600px) {
   .wrapper {
@@ -573,4 +629,16 @@ body {
   .social-media-list .username {
     display: inline;
   }
+  
+  /* Responsive pagination */
+  .pagination {
+    flex-wrap: wrap;
+    gap: 0.25rem;
+  }
+  
+  .pagination a,
+  .pagination span {
+    padding: 0.4rem 0.8rem;
+    font-size: 0.9rem;
+  }
 }

index.html

@@ -0,0 +1,14 @@
+---
+layout: home
+title: "HMPL Blog - JavaScript Templating Tutorials & Guides"
+description: "Learn HMPL, a server-oriented customizable templating solution for JavaScript. Tutorials, guides, examples, and best practices for modern web development."
+keywords: "HMPL, JavaScript, templating, tutorials, guides, web development, server-side rendering, SSR, frontend, backend"
+seo:
+  type: "Blog"
+---
+
+# Welcome to HMPL Blog
+
+Discover the power of server-oriented customizable templating for JavaScript applications. Our blog features comprehensive tutorials, practical guides, and real-world examples to help you master HMPL.
+
+## Latest Posts