Feat: Social Media Inspired Home Layout

README.md

@@ -18,6 +18,7 @@ A clean, modern Jekyll theme optimized for technical blogs and documentation sit
 - **Clean & Modern Design** - Minimal, distraction-free reading experience
 - **Responsive Layout** - Optimized for all devices from mobile to desktop
 - **Dark Mode Support** - Built-in dark mode toggle option with logo treatment options
+- **Social Media Inspired Layout** - **New!** Modern home-v2 layout with Instagram-style stories and engaging post cards
 - **Comment System** - Support for Giscus (GitHub Discussions) comments
 - **Code Highlighting** - Beautiful syntax highlighting for technical content
 - **Table of Contents** - Automatically generated for longer articles

_config.yml

@@ -99,6 +99,11 @@ homepage:
     enabled: true
     title: "Latest Articles"
     excerpt_length: 30
+
+  # Site statistics widget
+  stats_widget:
+    enabled: true
+    title: "Site Statistics"
 
 # Favicon configuration
 favicon:
@@ -118,6 +123,9 @@ navigation:
   - title: Home
     url: /
     icon: home # Feather icon name
+  - title: V2
+    url: /v2
+    icon: code
   - title: Documentation
     url: /docs
     icon: book-open

_includes/giscus.html

@@ -1,5 +1,5 @@
 {% if site.giscus.enabled %}
-<div class="comments-wrapper">
+<div class="comments-wrapper" id="comments-wrapper">
   <h2 class="comments-heading">Comments</h2>
   <div class="giscus-container">
     <script src="https://giscus.app/client.js"

_includes/post-feed-v2.html

@@ -0,0 +1,169 @@
+{% assign display = include.display | default: 'flex' %}
+<div class="posts-feed" id="{{ include.id | default: 'posts-feed' }}" style="display: {{ display }};">
+  {% for post in include.posts %}
+  <article class="post-card" data-categories="{% for cat in post.categories %}{{ cat | slugify }} {% endfor %}"
+    data-featured="{% if post.featured %}true{% else %}false{% endif %}" data-post-id="{{ forloop.index }}">
+
+    <!-- Post Header -->
+    <div class="post-header">
+      <div class="author-info">
+        <div class="author-avatar">
+          <img src="{{ post.author_avatar | relative_url }}" alt="{{ post.author | default: site.author }}"
+            onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
+          <div class="avatar-placeholder" style="display: none;">
+            {{ post.author | default: site.author | slice: 0 | upcase }}
+          </div>
+        </div>
+        <div class="author-details">
+          <span class="author-name">{{ post.author | default: site.author }}</span>
+          <div class="post-meta">
+            <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%b %d, %Y" }}</time>
+            {% if post.categories.size > 0 %}
+            <span class="category">{{ post.categories.first }}</span>
+            {% endif %}
+          </div>
+        </div>
+      </div>
+      {% if post.featured %}
+      <div class="featured-badge" title="Featured Post">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.46,13.97L5.82,21L12,17.27Z" />
+        </svg>
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Post Content -->
+    <div class="post-content">
+      <h2 class="post-title">
+        <a href="{{ post.url | relative_url }}">{{ post.title | escape }}</a>
+      </h2>
+
+      {% if post.image %}
+      <div class="post-image">
+        <a href="{{ post.url | relative_url }}">
+          <img src="{{ '/assets/images/' | append: post.image | relative_url }}" alt="{{ post.title }}"
+            loading="{% if forloop.index <= 2 %}eager{% else %}lazy{% endif %}" />
+        </a>
+      </div>
+      {% endif %}
+
+      <div class="post-excerpt">
+        {{ post.excerpt | strip_html | truncatewords: 25 }}
+      </div>
+
+      {% if post.tags.size > 0 %}
+      <div class="post-tags">
+        {% for tag in post.tags limit:3 %}
+        <a href="{{ '/tags/#' | append: tag | slugify | relative_url }}" class="tag">#{{ tag }}</a>
+        {% endfor %}
+      </div>
+      {% endif %}
+    </div>
+
+    <!-- Post Actions -->
+    <div class="post-actions">
+      <div class="action-buttons">
+        <a href="{{ post.url | relative_url }}" class="action-btn read-btn" aria-label="Read post">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+            <circle cx="12" cy="12" r="3" />
+          </svg>
+          <span>Read Article</span>
+        </a>
+
+        <a href="{{ post.url | relative_url }}#comments-wrapper" class="action-btn comment-btn"
+          aria-label="View comments">
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+          </svg>
+          <span>Comments</span>
+        </a>
+
+        <div class="share-dropdown">
+          <button class="action-btn share-btn" aria-label="Share post" aria-haspopup="true" aria-expanded="false"
+            aria-controls="share-menu-options" tabindex="0">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+              aria-hidden="true">
+              <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+              <polyline points="16,6 12,2 8,6" />
+              <line x1="12" y1="2" x2="12" y2="15" />
+            </svg>
+            <span>Share</span>
+          </button>
+          <div id="share-menu-options" class="share-menu" role="menu" aria-orientation="horizontal"
+            aria-label="Share options">
+            <a href="https://twitter.com/intent/tweet?url={{ site.url }}{{ post.url }}&text={{ post.title | uri_escape }}"
+              target="_blank" rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path
+                  d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z">
+                </path>
+              </svg>
+              Twitter
+            </a>
+            <a href="https://www.facebook.com/sharer/sharer.php?u={{ site.url }}{{ post.url }}" target="_blank"
+              rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path>
+              </svg>
+              Facebook
+            </a>
+            <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ site.url }}{{ post.url }}" target="_blank"
+              rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
+                <rect x="2" y="9" width="4" height="12"></rect>
+                <circle cx="4" cy="4" r="2"></circle>
+              </svg>
+              LinkedIn
+            </a>
+            <a href="https://www.reddit.com/submit?url={{ site.url }}{{ post.url }}&title={{ post.title | uri_escape }}"
+              target="_blank" rel="noopener" class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="8" r="7" />
+                <path d="M10.2 14c-.5 0-.8.3-.8.8s.3.8.8.8.8-.3.8-.8-.3-.8-.8-.8z" />
+                <path d="M13.8 14c-.5 0-.8.3-.8.8s.3.8.8.8.8-.3.8-.8-.3-.8-.8-.8z" />
+                <path d="M14.5 11.5c-.5 0-.8-.3-.8-.7s.3-.8.8-.8.8.3.8.8-.3.7-.8.7z" />
+                <path d="M9.5 11.5c-.5 0-.8-.3-.8-.7s.3-.8.8-.8.8.3.8.8-.3.7-.8.7z" />
+                <path d="M12 18c3.5 0 6.5-2 6.5-4.5S15.5 9 12 9s-6.5 2-6.5 4.5S8.5 18 12 18z" />
+                <path d="M19 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+                <path d="M5 11.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z" />
+              </svg>
+              Reddit
+            </a>
+            <a href="mailto:?subject={{ post.title | uri_escape }}&body={{ site.url }}{{ post.url }}"
+              class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+                <polyline points="22,6 12,13 2,6"></polyline>
+              </svg>
+              Email
+            </a>
+            <button
+              onclick="navigator.clipboard.writeText('{{ site.url }}{{ post.url }}'); this.querySelector('span').textContent='Copied!'; setTimeout(() => this.querySelector('span').textContent='Copy Link', 1500);"
+              class="share-option">
+              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+              <span>Copy Link</span>
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="post-meta-info">
+        <span class="reading-time">
+          {% if post.reading_time %}
+          {{ post.reading_time }} min read
+          {% else %}
+          {{ post.content | number_of_words | divided_by: 200 | plus: 1 }} min read
+          {% endif %}
+        </span>
+      </div>
+    </div>
+  </article>
+  {% endfor %}
+</div>

_layouts/default.html

@@ -112,5 +112,8 @@
 
   <script src="{{ "/assets/js/main.js" | relative_url }}" defer></script>
   <script src="{{ "/assets/js/search.js" | relative_url }}" defer></script>
+  {% if page.layout == 'home-v2' or layout.name == 'home-v2' %}
+    <script src="{{ "/assets/js/home-v2.js" | relative_url }}" defer></script>
+  {% endif %}
 </body>
 </html>