@terrymooreii/sia 2.1.2 → 2.1.4

package/lib/assets.js

@@ -127,8 +127,7 @@ function hasCssFiles(dir) {
 /**
  * Copy default styles to output
  */
-export function copyDefaultStyles(config, defaultsDir) {
-  const defaultStylesDir = join(defaultsDir, 'styles');
+export function copyDefaultStyles(config, themesDir) {
   const outputStylesDir = join(config.outputDir, 'styles');
   
   // Check if user has custom styles (must actually have CSS files)
@@ -141,24 +140,22 @@ export function copyDefaultStyles(config, defaultsDir) {
     return copied;
   }
   
-  // Copy selected theme from the package
-  if (existsSync(defaultStylesDir)) {
-    const themeName = config.theme || 'main';
-    const themeFile = join(defaultStylesDir, `${themeName}.css`);
-    
-    if (existsSync(themeFile)) {
-      // Copy the selected theme as main.css so templates don't need to change
-      ensureDir(outputStylesDir);
-      copyFileSync(themeFile, join(outputStylesDir, 'main.css'));
-      console.log(`🎨 Using "${themeName}" theme`);
-      return ['main.css'];
-    } else {
-      // Fallback to copying all styles if theme not found
-      console.log(`⚠️  Theme "${themeName}" not found, using default`);
-      const copied = copyAssets(defaultStylesDir, outputStylesDir);
-      console.log(`🎨 Copied ${copied.length} default style files`);
-      return copied;
-    }
+  // Copy styles from the selected theme
+  const themeName = config.theme || 'main';
+  const themeStylesDir = join(themesDir, themeName, 'styles');
+  
+  if (existsSync(themeStylesDir)) {
+    const copied = copyAssets(themeStylesDir, outputStylesDir);
+    console.log(`🎨 Using "${themeName}" theme`);
+    return copied;
+  }
+  
+  // Fallback to main theme if selected theme not found
+  const fallbackStylesDir = join(themesDir, 'main', 'styles');
+  if (existsSync(fallbackStylesDir)) {
+    console.log(`⚠️  Theme "${themeName}" not found, using "main" theme`);
+    const copied = copyAssets(fallbackStylesDir, outputStylesDir);
+    return copied;
   }
   
   console.log('⚠️  No styles found');

package/lib/build.js

@@ -8,7 +8,7 @@ import { copyImages, copyDefaultStyles, copyStaticAssets, writeFile, ensureDir }
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
-const defaultsDir = join(__dirname, '..', 'defaults');
+const themesDir = join(__dirname, '..', 'themes');
 
 /**
  * Clean the output directory
@@ -244,7 +244,7 @@ export async function build(options = {}) {
   
   // Copy assets
   copyImages(config);
-  copyDefaultStyles(config, defaultsDir);
+  copyDefaultStyles(config, themesDir);
   copyStaticAssets(config);
   
   const duration = ((Date.now() - startTime) / 1000).toFixed(2);

package/lib/config.js

@@ -10,7 +10,7 @@ const defaultConfig = {
     url: 'http://localhost:3000',
     author: 'Anonymous'
   },
-  theme: 'main', // Theme CSS file to use: 'main' or 'minimal'
+  theme: 'main', // Theme to use: 'main' or 'minimal'
   input: 'src',
   output: 'dist',
   layouts: '_layouts',

package/lib/content.js

@@ -221,28 +221,31 @@ function embedGiphyGifs(html) {
   });
 }
 
-// Override the link renderer to handle YouTube URLs
-const renderer = marked.getRenderer();
-const originalLink = renderer.link.bind(renderer);
-
-renderer.link = (token) => {
-  const videoId = extractYouTubeId(token.href);
-  
-  if (videoId) {
-    // Return responsive YouTube embed instead of a link
-    return `<div class="youtube-embed"><iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
-  }
-  
-  const gifId = extractGiphyId(token.href);
-  
-  if (gifId) {
-    // Return responsive Giphy embed instead of a link
-    return `<div class="giphy-embed"><iframe src="https://giphy.com/embed/${gifId}" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>`;
+// Override the link renderer to handle YouTube and Giphy URLs
+marked.use({
+  renderer: {
+    link(href, s, text) {
+      const videoId = extractYouTubeId(href);
+      
+      if (videoId) {
+        // Return responsive YouTube embed instead of a link
+        return `<div class="youtube-embed"><iframe src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
+      }
+      
+      const gifId = extractGiphyId(href);
+      
+      if (gifId) {
+        // Return responsive Giphy embed instead of a link
+        return `<div class="giphy-embed"><iframe src="https://giphy.com/embed/${gifId}" frameBorder="0" class="giphy-embed" allowFullScreen></iframe></div>`;
+      }
+      
+      // Use default link rendering for non-YouTube/Giphy links
+      text = text || href;
+      const title = text ? ` title="${text}"` : '';
+      return `<a href="${href}"${title}>${text}</a>`;
+    }
   }
-  
-  // Use default link rendering for non-YouTube/Giphy links
-  return originalLink(token);
-};
+});
 
 /**
  * Generate a URL-friendly slug from a string

package/lib/templates.js

@@ -204,11 +204,16 @@ export function createTemplateEngine(config) {
     templatePaths.push(config.includesDir);
   }
   
-  // Default templates from the package
-  const defaultTemplatesDir = join(__dirname, '..', 'defaults');
-  templatePaths.push(join(defaultTemplatesDir, 'layouts'));
-  templatePaths.push(join(defaultTemplatesDir, 'includes'));
-  templatePaths.push(join(defaultTemplatesDir, 'pages'));
+  // Default templates from the selected theme
+  const themeName = config.theme || 'main';
+  const themeDir = join(__dirname, '..', 'themes', themeName);
+  templatePaths.push(join(themeDir, 'layouts'));
+  templatePaths.push(join(themeDir, 'includes'));
+  templatePaths.push(join(themeDir, 'pages'));
+  
+  // Shared includes available to all themes
+  const sharedIncludesDir = join(__dirname, '..', 'themes', '_shared', 'includes');
+  templatePaths.push(sharedIncludesDir);
   
   // Create the environment
   const env = nunjucks.configure(templatePaths, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@terrymooreii/sia",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "A simple, powerful static site generator with markdown, front matter, and Nunjucks templates",
   "main": "lib/index.js",
   "bin": {

package/themes/_shared/includes/meta.njk

@@ -0,0 +1,41 @@
+{# Core meta tags - include this in your theme's <head> #}
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="description" content="{{ page.excerpt or page.description or site.description }}">
+<meta name="author" content="{{ page.author or site.author }}">
+<title>{% if title %}{{ title }} | {% endif %}{{ site.title }}</title>
+
+{# Open Graph #}
+<meta property="og:title" content="{{ title or site.title }}">
+<meta property="og:description" content="{{ page.excerpt or page.description or site.description }}">
+<meta property="og:type" content="{% if page.collection == 'posts' %}article{% else %}website{% endif %}">
+<meta property="og:url" content="{{ site.url }}{{ page.url or ('/' | url) }}">
+<meta property="og:site_name" content="{{ site.title }}">
+{% if page.image %}
+<meta property="og:image" content="{{ site.url }}{{ page.image | url }}">
+{% endif %}
+
+{# Twitter Card #}
+<meta name="twitter:card" content="{% if page.image %}summary_large_image{% else %}summary{% endif %}">
+<meta name="twitter:title" content="{{ title or site.title }}">
+<meta name="twitter:description" content="{{ page.excerpt or page.description or site.description }}">
+{% if page.image %}
+<meta name="twitter:image" content="{{ site.url }}{{ page.image | url }}">
+{% endif %}
+
+{# Article specific meta (for blog posts) #}
+{% if page.collection == 'posts' %}
+<meta property="article:published_time" content="{{ page.date | date('iso') }}">
+<meta property="article:author" content="{{ page.author or site.author }}">
+{% if page.tags %}
+{% for tag in page.tags %}
+<meta property="article:tag" content="{{ tag }}">
+{% endfor %}
+{% endif %}
+{% endif %}
+
+{# RSS Feed #}
+<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | url }}">
+
+{# Canonical URL #}
+<link rel="canonical" href="{{ site.url }}{{ page.url or ('/' | url) }}">

package/themes/_shared/includes/theme-script.njk

@@ -0,0 +1,8 @@
+{# Prevent flash of incorrect theme - include in <head> before stylesheets #}
+<script>
+  (function() {
+    var saved = localStorage.getItem('theme');
+    var theme = saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+    document.documentElement.setAttribute('data-theme', theme);
+  })();
+</script>

package/themes/developer/includes/footer.njk

@@ -0,0 +1,5 @@
+<footer class="site-footer">
+  <div class="footer-content">
+    <p>&copy; {{ "now" | date("year") }} {{ site.title }}. Built with <a href="https://github.com/terrymooreii/sia">Sia</a>.</p>
+  </div>
+</footer>

package/themes/developer/includes/header.njk

@@ -0,0 +1,46 @@
+<header class="top-header">
+  <button class="mobile-menu-btn" aria-label="Toggle menu">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+      <line x1="3" y1="12" x2="21" y2="12"></line>
+      <line x1="3" y1="6" x2="21" y2="6"></line>
+      <line x1="3" y1="18" x2="21" y2="18"></line>
+    </svg>
+  </button>
+  
+  <div class="header-spacer"></div>
+  
+  <div class="header-actions">
+    <button class="theme-toggle" aria-label="Toggle dark mode">
+      <svg class="sun-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="5"></circle>
+        <line x1="12" y1="1" x2="12" y2="3"></line>
+        <line x1="12" y1="21" x2="12" y2="23"></line>
+        <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+        <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+        <line x1="1" y1="12" x2="3" y2="12"></line>
+        <line x1="21" y1="12" x2="23" y2="12"></line>
+        <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+        <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+      </svg>
+      <svg class="moon-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+      </svg>
+    </button>
+  </div>
+</header>
+
+<script>
+  // Theme toggle
+  document.querySelector('.theme-toggle').addEventListener('click', function() {
+    const html = document.documentElement;
+    const current = html.getAttribute('data-theme');
+    const next = current === 'dark' ? 'light' : 'dark';
+    html.setAttribute('data-theme', next);
+    localStorage.setItem('theme', next);
+  });
+  
+  // Mobile menu
+  document.querySelector('.mobile-menu-btn').addEventListener('click', function() {
+    document.querySelector('.sidebar').classList.toggle('open');
+  });
+</script>

package/themes/developer/includes/pagination.njk

@@ -0,0 +1,39 @@
+{% if pagination.totalPages > 1 %}
+<nav class="pagination" aria-label="Pagination">
+  {% if pagination.previousUrl %}
+    <a href="{{ pagination.previousUrl }}" class="pagination-btn pagination-prev">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="15 18 9 12 15 6"></polyline>
+      </svg>
+      <span>Previous</span>
+    </a>
+  {% else %}
+    <span class="pagination-btn pagination-prev disabled">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="15 18 9 12 15 6"></polyline>
+      </svg>
+      <span>Previous</span>
+    </span>
+  {% endif %}
+  
+  <span class="pagination-info">
+    Page {{ pagination.currentPage }} of {{ pagination.totalPages }}
+  </span>
+  
+  {% if pagination.nextUrl %}
+    <a href="{{ pagination.nextUrl }}" class="pagination-btn pagination-next">
+      <span>Next</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    </a>
+  {% else %}
+    <span class="pagination-btn pagination-next disabled">
+      <span>Next</span>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <polyline points="9 18 15 12 9 6"></polyline>
+      </svg>
+    </span>
+  {% endif %}
+</nav>
+{% endif %}

package/themes/developer/includes/sidebar.njk

@@ -0,0 +1,60 @@
+<aside class="sidebar">
+  <div class="sidebar-header">
+    <a href="{{ '/' | url }}" class="sidebar-logo">
+      <span class="logo-icon">{{ site.title[0] }}</span>
+      <span class="logo-text">{{ site.title }}</span>
+    </a>
+  </div>
+  
+  <nav class="sidebar-nav">
+    <a href="{{ '/' | url }}" class="nav-item {% if page.url == '/' %}active{% endif %}">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
+        <polyline points="9 22 9 12 15 12 15 22"></polyline>
+      </svg>
+      <span>Home</span>
+    </a>
+    <a href="{{ '/blog/' | url }}" class="nav-item {% if page.url and '/blog' in page.url %}active{% endif %}">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+        <polyline points="14 2 14 8 20 8"></polyline>
+        <line x1="16" y1="13" x2="8" y2="13"></line>
+        <line x1="16" y1="17" x2="8" y2="17"></line>
+      </svg>
+      <span>Posts</span>
+    </a>
+    <a href="{{ '/notes/' | url }}" class="nav-item {% if page.url and '/notes' in page.url %}active{% endif %}">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="2" x2="22" y2="6"></line>
+        <path d="M7.5 20.5L19 9l-4-4L3.5 16.5 2 22z"></path>
+      </svg>
+      <span>Notes</span>
+    </a>
+    <a href="{{ '/tags/' | url }}" class="nav-item {% if page.url and '/tags' in page.url %}active{% endif %}">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+        <line x1="7" y1="7" x2="7.01" y2="7"></line>
+      </svg>
+      <span>Tags</span>
+    </a>
+    <a href="{{ '/about/' | url }}" class="nav-item {% if page.url and '/about' in page.url %}active{% endif %}">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10"></circle>
+        <line x1="12" y1="16" x2="12" y2="12"></line>
+        <line x1="12" y1="8" x2="12.01" y2="8"></line>
+      </svg>
+      <span>About</span>
+    </a>
+  </nav>
+  
+  <div class="sidebar-footer">
+    <a href="{{ '/feed.xml' | url }}" class="nav-item">
+      <svg class="nav-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M4 11a9 9 0 0 1 9 9"></path>
+        <path d="M4 4a16 16 0 0 1 16 16"></path>
+        <circle cx="5" cy="19" r="1"></circle>
+      </svg>
+      <span>RSS Feed</span>
+    </a>
+  </div>
+</aside>

package/themes/developer/includes/tag-list.njk

@@ -0,0 +1,7 @@
+{% if tags and tags.length %}
+<div class="tag-list">
+  {% for tag in tags %}
+    <a href="{{ ('/tags/' + (tag | slug) + '/') | url }}" class="tag">#{{ tag }}</a>
+  {% endfor %}
+</div>
+{% endif %}

package/themes/developer/layouts/base.njk

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  {% include "meta.njk" %}
+  {% include "theme-script.njk" %}
+  
+  <link rel="stylesheet" href="{{ '/styles/main.css' | url }}">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  
+  {% block head %}{% endblock %}
+</head>
+<body>
+  <div class="app-layout">
+    {% include "sidebar.njk" %}
+    
+    <div class="main-wrapper">
+      {% include "header.njk" %}
+      
+      <main class="main-content">
+        {% block content %}{% endblock %}
+      </main>
+      
+      {% include "footer.njk" %}
+    </div>
+  </div>
+</body>
+</html>

package/themes/developer/layouts/note.njk

@@ -0,0 +1,21 @@
+{% extends "base.njk" %}
+
+{% block content %}
+<article class="note-article">
+  <header class="note-header">
+    <time class="note-date" datetime="{{ page.date | date('iso') }}">
+      {{ page.date | date('full') }}
+    </time>
+  </header>
+  
+  <div class="note-content prose">
+    {{ content | safe }}
+  </div>
+  
+  {% if page.tags %}
+  <footer class="note-footer">
+    {% include "tag-list.njk" %}
+  </footer>
+  {% endif %}
+</article>
+{% endblock %}

package/themes/developer/layouts/page.njk

@@ -0,0 +1,13 @@
+{% extends "base.njk" %}
+
+{% block content %}
+<article class="page-article">
+  <header class="page-header">
+    <h1 class="page-title">{{ page.title }}</h1>
+  </header>
+  
+  <div class="page-content prose">
+    {{ content | safe }}
+  </div>
+</article>
+{% endblock %}

package/themes/developer/layouts/post.njk

@@ -0,0 +1,47 @@
+{% extends "base.njk" %}
+
+{% block content %}
+<article class="post-article">
+  <header class="post-header">
+    {% if page.tags %}
+    <div class="post-tags-top">
+      {% for tag in page.tags | limit(2) %}
+        <a href="{{ ('/tags/' + (tag | slug) + '/') | url }}" class="tag-badge">{{ tag }}</a>
+      {% endfor %}
+    </div>
+    {% endif %}
+    
+    <h1 class="post-title">{{ page.title }}</h1>
+    
+    <div class="post-meta">
+      <div class="author-info">
+        <div class="author-avatar">{{ site.author[0] }}</div>
+        <div class="author-details">
+          <span class="author-name">{{ page.author or site.author }}</span>
+          <span class="post-date">{{ page.date | date('long') }} · {{ content | readingTime }}</span>
+        </div>
+      </div>
+    </div>
+  </header>
+  
+  {% if page.image %}
+  <figure class="post-hero">
+    <img src="{{ page.image | url }}" alt="{{ page.title }}">
+  </figure>
+  {% endif %}
+  
+  <div class="post-content prose">
+    {{ content | safe }}
+  </div>
+  
+  {% if page.tags %}
+  <footer class="post-footer">
+    <div class="post-tags">
+      {% for tag in page.tags %}
+        <a href="{{ ('/tags/' + (tag | slug) + '/') | url }}" class="tag">#{{ tag }}</a>
+      {% endfor %}
+    </div>
+  </footer>
+  {% endif %}
+</article>
+{% endblock %}

package/themes/developer/pages/blog.njk

@@ -0,0 +1,41 @@
+{% extends "base.njk" %}
+
+{% block content %}
+<div class="blog-page">
+  <header class="page-header">
+    <h1 class="page-title">Blog</h1>
+    <p class="page-description">Thoughts, tutorials, and insights</p>
+  </header>
+  
+  <div class="post-cards">
+    {% for post in posts %}
+    <article class="post-card">
+      <div class="card-content">
+        {% if post.tags %}
+        <div class="card-tags">
+          {% for tag in post.tags | limit(2) %}
+            <span class="tag-small">#{{ tag }}</span>
+          {% endfor %}
+        </div>
+        {% endif %}
+        
+        <h2 class="card-title">
+          <a href="{{ post.url | url }}">{{ post.title }}</a>
+        </h2>
+        
+        <p class="card-excerpt">{{ post.excerpt | excerpt(150) }}</p>
+        
+        <div class="card-meta">
+          <span class="card-date">{{ post.date | date('short') }}</span>
+          <span class="card-reading-time">{{ post.content | readingTime }}</span>
+        </div>
+      </div>
+    </article>
+    {% else %}
+    <p class="no-posts">No posts yet.</p>
+    {% endfor %}
+  </div>
+  
+  {% include "pagination.njk" %}
+</div>
+{% endblock %}

package/themes/developer/pages/feed.njk

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title>{{ site.title }}</title>
+    <description>{{ site.description }}</description>
+    <link>{{ site.url }}</link>
+    <atom:link href="{{ site.url }}/feed.xml" rel="self" type="application/rss+xml"/>
+    <lastBuildDate>{{ buildDate }}</lastBuildDate>
+    {% for post in posts | limit(20) %}
+    <item>
+      <title>{{ post.title }}</title>
+      <link>{{ site.url }}{{ post.url }}</link>
+      <guid isPermaLink="true">{{ site.url }}{{ post.url }}</guid>
+      <pubDate>{{ post.date | date('rss') }}</pubDate>
+      <description><![CDATA[{{ post.excerpt | excerpt(300) }}]]></description>
+      {% for tag in post.tags %}
+      <category>{{ tag }}</category>
+      {% endfor %}
+    </item>
+    {% endfor %}
+  </channel>
+</rss>

package/themes/developer/pages/index.njk

@@ -0,0 +1,65 @@
+{% extends "base.njk" %}
+
+{% block content %}
+<div class="home-page">
+  <section class="hero-section">
+    <h1 class="hero-title">{{ site.title }}</h1>
+    <p class="hero-description">{{ site.description }}</p>
+  </section>
+  
+  <section class="posts-section">
+    <div class="section-header">
+      <h2 class="section-title">Latest Posts</h2>
+      <a href="{{ '/blog/' | url }}" class="view-all-link">View all posts →</a>
+    </div>
+    
+    <div class="post-cards">
+      {% for post in collections.posts | limit(6) %}
+      <article class="post-card">
+        <div class="card-content">
+          {% if post.tags %}
+          <div class="card-tags">
+            {% for tag in post.tags | limit(2) %}
+              <span class="tag-small">#{{ tag }}</span>
+            {% endfor %}
+          </div>
+          {% endif %}
+          
+          <h3 class="card-title">
+            <a href="{{ post.url | url }}">{{ post.title }}</a>
+          </h3>
+          
+          <p class="card-excerpt">{{ post.excerpt | excerpt(120) }}</p>
+          
+          <div class="card-meta">
+            <span class="card-date">{{ post.date | date('short') }}</span>
+            <span class="card-reading-time">{{ post.content | readingTime }}</span>
+          </div>
+        </div>
+      </article>
+      {% else %}
+      <p class="no-posts">No posts yet. Create your first post!</p>
+      {% endfor %}
+    </div>
+  </section>
+  
+  {% if collections.notes.length %}
+  <section class="notes-section">
+    <div class="section-header">
+      <h2 class="section-title">Recent Notes</h2>
+      <a href="{{ '/notes/' | url }}" class="view-all-link">View all notes →</a>
+    </div>
+    
+    <div class="notes-list">
+      {% for note in collections.notes | limit(3) %}
+      <article class="note-card">
+        <time class="note-time">{{ note.date | date('short') }}</time>
+        <div class="note-preview">{{ note.excerpt | excerpt(150) }}</div>
+        <a href="{{ note.url | url }}" class="note-link">Read more →</a>
+      </article>
+      {% endfor %}
+    </div>
+  </section>
+  {% endif %}
+</div>
+{% endblock %}