@terrymooreii/sia 2.1.9 → 2.1.11

package/docs/README.md

@@ -121,8 +121,47 @@ pagination:
 server:
   port: 3000
   showDrafts: false
+
+assets:
+  css: []  # Custom CSS files (paths relative to root)
+  js: []   # Custom JavaScript files (paths relative to root)
+```
+
+## Custom CSS and JavaScript
+
+You can inject custom CSS and JavaScript files into your theme by defining them in `_config.yml`:
+
+```yaml
+assets:
+  css:
+    - custom/styles.css
+    - vendor/library.css
+  js:
+    - custom/script.js
+    - vendor/analytics.js
 ```
 
+Files are specified as paths relative to your project root. During build, CSS files are copied to `dist/styles/` and JavaScript files to `dist/scripts/`, preserving directory structure. Custom CSS is injected after theme styles (allowing overrides), and JavaScript is injected before the closing `</body>` tag.
+
+**Example:**
+```yaml
+assets:
+  css:
+    - assets/custom.css
+    - vendor/prism.css
+  js:
+    - assets/analytics.js
+    - vendor/prism.js
+```
+
+This will:
+- Copy `assets/custom.css` → `dist/styles/assets/custom.css`
+- Copy `vendor/prism.css` → `dist/styles/vendor/prism.css`
+- Copy `assets/analytics.js` → `dist/scripts/assets/analytics.js`
+- Copy `vendor/prism.js` → `dist/scripts/vendor/prism.js`
+
+And inject them into all pages automatically.
+
 ## Static Assets
 
 Sia automatically copies static assets during the build process. You can place static files in any of these locations:

package/docs/template-reference.md

@@ -107,6 +107,35 @@ Array of all tags sorted by count (most used first):
 </ul>
 ```
 
+### `customAssets`
+
+Custom CSS and JavaScript files defined in `_config.yml`:
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `customAssets.css` | array | Array of CSS file paths (relative to output root) |
+| `customAssets.js` | array | Array of JavaScript file paths (relative to output root) |
+
+**Note:** Custom assets are automatically injected into all theme base layouts via shared includes (`custom-assets-css.njk` and `custom-assets-js.njk`). You typically don't need to access this variable directly unless creating custom layouts.
+
+**Example:**
+
+```nunjucks
+{# Manually inject custom CSS #}
+{% if customAssets and customAssets.css %}
+  {% for css in customAssets.css %}
+    <link rel="stylesheet" href="{{ css | url }}">
+  {% endfor %}
+{% endif %}
+
+{# Manually inject custom JavaScript #}
+{% if customAssets and customAssets.js %}
+  {% for js in customAssets.js %}
+    <script src="{{ js | url }}"></script>
+  {% endfor %}
+{% endif %}
+```
+
 ---
 
 ## Page Context Variables

package/lib/assets.js

@@ -134,39 +134,41 @@ function hasCssFiles(dir) {
 export function copyDefaultStyles(config, resolvedTheme = null) {
   const outputStylesDir = join(config.outputDir, 'styles');
   
-  // Check if user has custom styles (must actually have CSS files)
-  const userStylesDir = join(config.rootDir, 'styles');
-  
-  if (hasCssFiles(userStylesDir)) {
-    // Copy user styles
-    const copied = copyAssets(userStylesDir, outputStylesDir);
-    console.log(`🎨 Copied ${copied.length} custom style files`);
-    return copied;
-  }
-  
-  // Resolve theme if not already resolved
+  // Always copy theme styles first
   const themeName = config.theme?.name || 'main';
   const theme = resolvedTheme || resolveTheme(themeName, config.rootDir);
   const themeStylesDir = join(theme.themeDir, 'styles');
   
+  let themeCopied = [];
   if (existsSync(themeStylesDir)) {
-    const copied = copyAssets(themeStylesDir, outputStylesDir);
+    themeCopied = copyAssets(themeStylesDir, outputStylesDir);
     if (!theme.isExternal) {
       console.log(`🎨 Using "${theme.themeName}" theme`);
     }
-    return copied;
+  } else {
+    // Fallback to main theme if theme styles not found
+    const fallbackStylesDir = join(getBuiltInThemesDir(), 'main', 'styles');
+    if (existsSync(fallbackStylesDir)) {
+      console.log(`⚠️  Theme "${themeName}" styles not found, using "main" theme styles`);
+      themeCopied = copyAssets(fallbackStylesDir, outputStylesDir);
+    }
   }
   
-  // Fallback to main theme if theme styles not found
-  const fallbackStylesDir = join(getBuiltInThemesDir(), 'main', 'styles');
-  if (existsSync(fallbackStylesDir)) {
-    console.log(`⚠️  Theme "${themeName}" styles not found, using "main" theme styles`);
-    const copied = copyAssets(fallbackStylesDir, outputStylesDir);
-    return copied;
+  // Then copy user custom styles (can override theme styles)
+  const userStylesDir = join(config.rootDir, 'styles');
+  let userCopied = [];
+  
+  if (hasCssFiles(userStylesDir)) {
+    userCopied = copyAssets(userStylesDir, outputStylesDir);
+    console.log(`🎨 Copied ${userCopied.length} custom style file(s)`);
   }
   
-  console.log('⚠️  No styles found');
-  return [];
+  const totalCopied = themeCopied.length + userCopied.length;
+  if (totalCopied === 0) {
+    console.log('⚠️  No styles found');
+  }
+  
+  return [...themeCopied, ...userCopied];
 }
 
 /**
@@ -200,6 +202,82 @@ export function copyStaticAssets(config) {
   return totalCopied;
 }
 
+/**
+ * Copy custom CSS and JavaScript files defined in config
+ * 
+ * @param {object} config - Site configuration
+ * @returns {object} Object with css and js arrays of output paths
+ */
+export function copyCustomAssets(config) {
+  const customAssets = {
+    css: [],
+    js: []
+  };
+  
+  if (!config.assets) {
+    return customAssets;
+  }
+  
+  const outputStylesDir = join(config.outputDir, 'styles');
+  const outputScriptsDir = join(config.outputDir, 'scripts');
+  
+  // Copy CSS files
+  if (Array.isArray(config.assets.css) && config.assets.css.length > 0) {
+    for (const cssPath of config.assets.css) {
+      const srcPath = join(config.rootDir, cssPath);
+      
+      if (!existsSync(srcPath)) {
+        console.warn(`⚠️  Custom CSS file not found: ${cssPath}`);
+        continue;
+      }
+      
+      // Preserve directory structure in output
+      // e.g., custom/styles.css -> dist/styles/custom/styles.css
+      const relativePath = cssPath.startsWith('/') ? cssPath.slice(1) : cssPath;
+      const destPath = join(outputStylesDir, relativePath);
+      
+      copyFile(srcPath, destPath);
+      
+      // Store output path for template injection (relative to output root)
+      const outputPath = `/styles/${relativePath}`;
+      customAssets.css.push(outputPath);
+    }
+    
+    if (customAssets.css.length > 0) {
+      console.log(`📝 Copied ${customAssets.css.length} custom CSS file(s)`);
+    }
+  }
+  
+  // Copy JavaScript files
+  if (Array.isArray(config.assets.js) && config.assets.js.length > 0) {
+    for (const jsPath of config.assets.js) {
+      const srcPath = join(config.rootDir, jsPath);
+      
+      if (!existsSync(srcPath)) {
+        console.warn(`⚠️  Custom JavaScript file not found: ${jsPath}`);
+        continue;
+      }
+      
+      // Preserve directory structure in output
+      // e.g., custom/script.js -> dist/scripts/custom/script.js
+      const relativePath = jsPath.startsWith('/') ? jsPath.slice(1) : jsPath;
+      const destPath = join(outputScriptsDir, relativePath);
+      
+      copyFile(srcPath, destPath);
+      
+      // Store output path for template injection (relative to output root)
+      const outputPath = `/scripts/${relativePath}`;
+      customAssets.js.push(outputPath);
+    }
+    
+    if (customAssets.js.length > 0) {
+      console.log(`📜 Copied ${customAssets.js.length} custom JavaScript file(s)`);
+    }
+  }
+  
+  return customAssets;
+}
+
 /**
  * Write a file with directory creation
  */
@@ -245,6 +323,7 @@ export default {
   copyImages,
   copyDefaultStyles,
   copyStaticAssets,
+  copyCustomAssets,
   writeFile,
   cleanDir
 };

package/lib/build.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'url';
 import { loadConfig } from './config.js';
 import { buildSiteData, paginate, getPaginationUrls } from './collections.js';
 import { createTemplateEngine, renderTemplate } from './templates.js';
-import { copyImages, copyDefaultStyles, copyStaticAssets, writeFile, ensureDir } from './assets.js';
+import { copyImages, copyDefaultStyles, copyStaticAssets, copyCustomAssets, writeFile, ensureDir } from './assets.js';
 import { resolveTheme } from './theme-resolver.js';
 
 const __filename = fileURLToPath(import.meta.url);
@@ -222,6 +222,10 @@ export async function build(options = {}) {
   // Build site data (collections, tags, etc.)
   const siteData = buildSiteData(config);
   
+  // Copy custom assets and add to siteData
+  const customAssets = copyCustomAssets(config);
+  siteData.customAssets = customAssets;
+  
   // Create template engine with resolved theme
   const env = createTemplateEngine(config, resolvedTheme);
   
@@ -249,6 +253,7 @@ export async function build(options = {}) {
   // Copy assets
   copyImages(config);
   copyDefaultStyles(config, resolvedTheme);
+  // Custom assets already copied above and added to siteData
   copyStaticAssets(config);
   
   const duration = ((Date.now() - startTime) / 1000).toFixed(2);

package/lib/config.js

@@ -44,6 +44,10 @@ const defaultConfig = {
   server: {
     port: 3000,
     showDrafts: false  // Show draft posts when using dev server
+  },
+  assets: {
+    css: [],  // Array of custom CSS file paths (relative to root)
+    js: []    // Array of custom JavaScript file paths (relative to root)
   }
 };
 

package/lib/content.js

@@ -351,7 +351,9 @@ export function getDateFromFilename(filename) {
   const match = name.match(datePattern);
   
   if (match) {
-    return new Date(match[1]);
+    // Parse as local date, not UTC
+    const [year, month, day] = match[1].split('-').map(Number);
+    return new Date(year, month - 1, day);
   }
   
   return null;
@@ -377,7 +379,13 @@ export function parseContent(filePath) {
   // Get date from front matter or filename
   let date = frontMatter.date;
   if (date) {
-    date = new Date(date);
+    // If it's a date-only string (YYYY-MM-DD), parse as local date
+    if (typeof date === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
+      const [year, month, day] = date.split('-').map(Number);
+      date = new Date(year, month - 1, day);
+    } else {
+      date = new Date(date);
+    }
   } else {
     date = getDateFromFilename(filePath) || new Date();
   }

package/package.json

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

package/themes/_shared/includes/custom-assets-css.njk

@@ -0,0 +1,7 @@
+{# Custom CSS files - include in <head> after theme styles #}
+{% if customAssets and customAssets.css %}
+{% for css in customAssets.css %}
+<link rel="stylesheet" href="{{ css | url }}">
+{% endfor %}
+{% endif %}
+

package/themes/_shared/includes/custom-assets-js.njk

@@ -0,0 +1,7 @@
+{# Custom JavaScript files - include before </body> #}
+{% if customAssets and customAssets.js %}
+{% for js in customAssets.js %}
+<script src="{{ js | url }}"></script>
+{% endfor %}
+{% endif %}
+

package/themes/developer/layouts/base.njk

@@ -8,6 +8,7 @@
   <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">
+  {% include "custom-assets-css.njk" %}
   
   {% block head %}{% endblock %}
 </head>
@@ -25,5 +26,6 @@
       {% include "footer.njk" %}
     </div>
   </div>
+  {% include "custom-assets-js.njk" %}
 </body>
 </html>

package/themes/developer/pages/index.njk

@@ -26,7 +26,7 @@
             <a href="{{ post.url }}">{{ post.title }}</a>
           </h3>
           
-          <p class="card-excerpt">{{ post.excerpt | excerpt(120) }}</p>
+          <p class="card-excerpt">{{ post.excerptHtml | safe }}</p>
           
           <div class="card-meta">
             <span class="card-date">{{ post.date | date('short') }}</span>

package/themes/developer/pages/tag.njk

@@ -23,7 +23,7 @@
           <a href="{{ post.url }}">{{ post.title }}</a>
         </h2>
         
-        <p class="card-excerpt">{{ post.excerpt | excerpt(150) }}</p>
+        <p class="card-excerpt">{{ post.excerptHtml | safe }}</p>
         
         <div class="card-meta">
           <span class="card-date">{{ post.date | date('short') }}</span>

package/themes/magazine/layouts/base.njk

@@ -8,6 +8,7 @@
   <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=Playfair+Display:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500&display=swap" rel="stylesheet">
+  {% include "custom-assets-css.njk" %}
   
   {% block head %}{% endblock %}
 </head>
@@ -19,5 +20,6 @@
   </main>
   
   {% include "footer.njk" %}
+  {% include "custom-assets-js.njk" %}
 </body>
 </html>

package/themes/magazine/pages/tag.njk

@@ -14,7 +14,7 @@
       <h2 class="row-title">
         <a href="{{ post.url }}">{{ post.title }}</a>
       </h2>
-      <p class="row-excerpt">{{ post.excerpt | excerpt(180) }}</p>
+      <p class="row-excerpt">{{ post.excerptHtml | safe }}</p>
       <div class="row-meta">
         <span class="row-author">{{ post.author or site.author }}</span>
         <span class="meta-separator">·</span>

package/themes/main/layouts/base.njk

@@ -5,6 +5,7 @@
   {% include "theme-script.njk" %}
   
   <link rel="stylesheet" href="{{ '/styles/main.css' | url }}">
+  {% include "custom-assets-css.njk" %}
   
   {% block head %}{% endblock %}
 </head>
@@ -16,6 +17,7 @@
   </main>
   
   {% include "footer.njk" %}
+  {% include "custom-assets-js.njk" %}
 </body>
 </html>
 

package/themes/main/pages/tags.njk

@@ -20,7 +20,7 @@
       <ul class="tag-posts">
         {% for item in tag.items | limit(5) %}
         <li>
-          <a href="{{ item.url }}">{{ item.title or item.excerpt }}</a>
+          <a href="{{ item.url }}">{{ item.title or item.excerptHtml | safe }}</a>
           <time datetime="{{ item.date | date('iso') }}">{{ item.date | date('short') }}</time>
         </li>
         {% endfor %}

package/themes/minimal/layouts/base.njk

@@ -5,6 +5,7 @@
   {% include "theme-script.njk" %}
   
   <link rel="stylesheet" href="{{ '/styles/main.css' | url }}">
+  {% include "custom-assets-css.njk" %}
   
   {% block head %}{% endblock %}
 </head>
@@ -16,6 +17,7 @@
   </main>
   
   {% include "footer.njk" %}
+  {% include "custom-assets-js.njk" %}
 </body>
 </html>