basecampjs 0.0.12 → 0.0.14

package/src/build/assets.ts

@@ -0,0 +1,314 @@
+import { readFile, rename, rm, stat, writeFile } from "fs/promises";
+import { basename, dirname, extname, join, relative } from "path";
+import { createHash } from "crypto";
+import { minify as minifyCss } from "csso";
+import { minify as minifyHtml } from "html-minifier-terser";
+import sharp from "sharp";
+import { walkFiles, getExt, formatBytes } from "../utils/fs.js";
+import { kolor } from "../utils/logger.js";
+import type { CampsiteConfig, ProcessedImage, AssetMap, SitemapUrl } from "../types.js";
+
+interface ImageSettings {
+  quality: number;
+  formats: string[];
+  preserveOriginal: boolean;
+}
+
+/**
+ * Check if an image should be processed for compression
+ */
+export function shouldProcessImage(filePath: string, config: CampsiteConfig): boolean {
+  if (!config.compressPhotos) return false;
+  const ext = getExt(filePath);
+  const inputFormats = config.compressionSettings?.inputFormats || [".jpg", ".jpeg", ".png"];
+  return inputFormats.includes(ext);
+}
+
+/**
+ * Process a single image file (convert to specified formats)
+ */
+export async function processImage(inputPath: string, _outDir: string, settings: ImageSettings): Promise<ProcessedImage[]> {
+  const ext = extname(inputPath);
+  const baseName = basename(inputPath, ext);
+  const dir = dirname(inputPath);
+  
+  const results: ProcessedImage[] = [];
+  const quality = settings.quality || 80;
+  const formats = settings.formats || [".webp"];
+  
+  for (const format of formats) {
+    try {
+      const outputName = `${baseName}${format}`;
+      const outputPath = join(dir, outputName);
+      
+      const sharpInstance = sharp(inputPath);
+      
+      if (format === ".webp") {
+        await sharpInstance.webp({ quality }).toFile(outputPath);
+      } else if (format === ".avif") {
+        await sharpInstance.avif({ quality }).toFile(outputPath);
+      } else if (format === ".jpg" || format === ".jpeg") {
+        await sharpInstance.jpeg({ quality }).toFile(outputPath);
+      } else if (format === ".png") {
+        await sharpInstance.png({ quality }).toFile(outputPath);
+      } else {
+        continue;
+      }
+      
+      const stats = await stat(outputPath);
+      results.push({
+        path: outputPath,
+        format,
+        size: stats.size
+      });
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to convert ${basename(inputPath)} to ${format}: ${message}`));
+    }
+  }
+  
+  return results;
+}
+
+/**
+ * Process all images in output directory
+ */
+export async function processImages(outDir: string, config: CampsiteConfig): Promise<void> {
+  if (!config.compressPhotos) return;
+  
+  const settings: ImageSettings = {
+    quality: config.compressionSettings?.quality || 80,
+    formats: config.compressionSettings?.formats || [".webp"],
+    preserveOriginal: config.compressionSettings?.preserveOriginal !== false
+  };
+  
+  console.log(kolor.cyan("🖼️  Processing images..."));
+  
+  const files = await walkFiles(outDir);
+  const imageFiles = files.filter((file) => shouldProcessImage(file, config));
+  
+  if (imageFiles.length === 0) {
+    console.log(kolor.dim("No images found to process"));
+    return;
+  }
+  
+  let totalGenerated = 0;
+  let totalOriginalSize = 0;
+  let totalConvertedSize = 0;
+  
+  await Promise.all(imageFiles.map(async (file) => {
+    const originalStats = await stat(file);
+    totalOriginalSize += originalStats.size;
+    
+    const results = await processImage(file, outDir, settings);
+    
+    if (results.length > 0) {
+      const formats = results.map(r => r.format.slice(1)).join(", ");
+      const rel = relative(outDir, file);
+      console.log(kolor.dim(`  ${rel} → ${formats}`));
+      
+      results.forEach(r => {
+        totalConvertedSize += r.size;
+        totalGenerated++;
+      });
+    }
+    
+    // Remove original if preserveOriginal is false
+    if (!settings.preserveOriginal && results.length > 0) {
+      await rm(file, { force: true });
+    }
+  }));
+  
+  const savedBytes = totalOriginalSize - totalConvertedSize;
+  const savedPercent = totalOriginalSize > 0 ? ((savedBytes / totalOriginalSize) * 100).toFixed(1) : 0;
+  
+  console.log(kolor.green(`✓ Generated ${totalGenerated} image(s)`));
+  if (!settings.preserveOriginal) {
+    console.log(kolor.green(`  Saved ${formatBytes(savedBytes)} (${savedPercent}% reduction)`));
+  }
+}
+
+/**
+ * Minify all CSS files in output directory
+ */
+export async function minifyCSSFiles(outDir: string): Promise<void> {
+  const files = await walkFiles(outDir);
+  const cssFiles = files.filter((file) => getExt(file) === ".css");
+
+  await Promise.all(cssFiles.map(async (file) => {
+    try {
+      const css = await readFile(file, "utf8");
+      const { css: minified } = minifyCss(css);
+      await writeFile(file, minified, "utf8");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to minify CSS ${relative(outDir, file)}: ${message}`));
+    }
+  }));
+}
+
+/**
+ * Minify all HTML files in output directory
+ */
+export async function minifyHTMLFiles(outDir: string, config: CampsiteConfig): Promise<void> {
+  const files = await walkFiles(outDir);
+  const htmlFiles = files.filter((file) => getExt(file) === ".html");
+
+  await Promise.all(htmlFiles.map(async (file) => {
+    try {
+      const html = await readFile(file, "utf8");
+      const minified = await minifyHtml(html, {
+        collapseWhitespace: true,
+        removeComments: true,
+        minifyCSS: !!config.minifyCSS,
+        minifyJS: true,
+        keepClosingSlash: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true
+      });
+      await writeFile(file, minified, "utf8");
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to minify HTML ${relative(outDir, file)}: ${message}`));
+    }
+  }));
+}
+
+/**
+ * Add content hashes to CSS and JS filenames for cache busting
+ */
+export async function cacheBustAssets(outDir: string): Promise<AssetMap> {
+  const assetMap: AssetMap = {}; // original path -> hashed path
+  const files = await walkFiles(outDir);
+  const assetFiles = files.filter((file) => {
+    const ext = getExt(file);
+    return ext === ".css" || ext === ".js";
+  });
+
+  // Hash and rename each asset
+  for (const file of assetFiles) {
+    try {
+      const content = await readFile(file);
+      const hash = createHash("sha256").update(content).digest("hex").slice(0, 10);
+      const ext = extname(file);
+      const base = basename(file, ext);
+      const dir = dirname(file);
+      const hashedName = `${base}-${hash}${ext}`;
+      const hashedPath = join(dir, hashedName);
+      
+      await rename(file, hashedPath);
+      
+      // Store mapping of original relative path to hashed relative path
+      const originalRel = relative(outDir, file).replace(/\\/g, "/");
+      const hashedRel = relative(outDir, hashedPath).replace(/\\/g, "/");
+      assetMap[originalRel] = hashedRel;
+      
+      // Log the cache-busted file
+      console.log(kolor.dim(`  ${originalRel}`) + kolor.cyan(` → `) + kolor.green(hashedRel));
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to cache-bust ${relative(outDir, file)}: ${message}`));
+    }
+  }
+
+  // Update HTML files to reference hashed assets
+  const htmlFiles = files.filter((file) => getExt(file) === ".html");
+  
+  for (const htmlFile of htmlFiles) {
+    try {
+      let html = await readFile(htmlFile, "utf8");
+      let updated = false;
+
+      // Update <link> tags (CSS)
+      for (const [original, hashed] of Object.entries(assetMap)) {
+        if (original.endsWith(".css")) {
+          // Match href="/path" or href="path" but ensure we stay within the tag
+          const escaped = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          const pattern = new RegExp(`(<link[^>]*?\\shref=["'])/?${escaped}(["'])`, "gi");
+          
+          const newHtml = html.replace(pattern, `$1/${hashed}$2`);
+          if (newHtml !== html) {
+            html = newHtml;
+            updated = true;
+          }
+        }
+      }
+
+      // Update <script> tags (JS)
+      for (const [original, hashed] of Object.entries(assetMap)) {
+        if (original.endsWith(".js")) {
+          // Match src="/path" or src="path" but ensure we stay within the tag
+          const escaped = original.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+          const pattern = new RegExp(`(<script[^>]*?\\ssrc=["'])/?${escaped}(["'])`, "gi");
+          
+          const newHtml = html.replace(pattern, `$1/${hashed}$2`);
+          if (newHtml !== html) {
+            html = newHtml;
+            updated = true;
+          }
+        }
+      }
+
+      if (updated) {
+        await writeFile(htmlFile, html, "utf8");
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to update asset references in ${relative(outDir, htmlFile)}: ${message}`));
+    }
+  }
+
+  return assetMap;
+}
+
+/**
+ * Generate sitemap.xml for all HTML files
+ */
+export async function generateSitemap(outDir: string, siteUrl: string): Promise<string> {
+  const htmlFiles = await walkFiles(outDir);
+  const urls: SitemapUrl[] = [];
+  
+  for (const file of htmlFiles) {
+    if (getExt(file) !== ".html") continue;
+    
+    // Get relative path from output directory
+    const rel = relative(outDir, file);
+    
+    // Convert file path to URL path
+    let urlPath = rel.replace(/\\/g, "/");
+    
+    // Convert index.html to directory path
+    if (urlPath === "index.html") {
+      urlPath = "";
+    } else if (urlPath.endsWith("/index.html")) {
+      urlPath = urlPath.slice(0, -11); // Remove "/index.html"
+    } else if (urlPath.endsWith(".html")) {
+      urlPath = urlPath.slice(0, -5); // Remove ".html"
+    }
+    
+    // Get file modification time for lastmod
+    const stats = await stat(file);
+    const lastmod = stats.mtime.toISOString().split("T")[0];
+    
+    // Build full URL
+    const fullUrl = siteUrl.replace(/\/$/, "") + "/" + urlPath;
+    
+    urls.push({ loc: fullUrl, lastmod });
+  }
+  
+  // Generate XML sitemap
+  let xml = '<?xml version="1.0" encoding="UTF-8"?>\n';
+  xml += '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n';
+  
+  for (const url of urls) {
+    xml += "  <url>\n";
+    xml += `    <loc>${url.loc}</loc>\n`;
+    xml += `    <lastmod>${url.lastmod}</lastmod>\n`;
+    xml += "  </url>\n";
+  }
+  
+  xml += "</urlset>\n";
+  
+  return xml;
+}

package/src/build/data.ts

@@ -0,0 +1,32 @@
+import { existsSync } from "fs";
+import { readFile } from "fs/promises";
+import { basename, relative } from "path";
+import { walkFiles, getExt } from "../utils/fs.js";
+import { kolor } from "../utils/logger.js";
+import type { Collections } from "../types.js";
+
+/**
+ * Load JSON data/collections from one or more directories
+ */
+export async function loadData(dataDirs: string | string[]): Promise<Collections> {
+  const collections: Collections = {};
+  // Support both string and array input
+  const dirs = Array.isArray(dataDirs) ? dataDirs : [dataDirs];
+  
+  for (const dataDir of dirs) {
+    if (!existsSync(dataDir)) continue;
+    const files = await walkFiles(dataDir);
+    for (const file of files) {
+      if (getExt(file) !== ".json") continue;
+      const name = basename(file, ".json");
+      try {
+        const raw = await readFile(file, "utf8");
+        collections[name] = JSON.parse(raw);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        console.error(kolor.red(`Failed to load data ${relative(dataDir, file)}: ${message}`));
+      }
+    }
+  }
+  return collections;
+}

package/src/build/pages.ts

@@ -0,0 +1,143 @@
+import { existsSync } from "fs";
+import { cp, readFile, writeFile } from "fs/promises";
+import { dirname, join, relative } from "path";
+import matter from "gray-matter";
+import nunjucks from "nunjucks";
+import { Liquid } from "liquidjs";
+import { ensureDir, getExt } from "../utils/fs.js";
+import { toUrlPath, normalizeUrl } from "../utils/paths.js";
+import { md, loadMustachePartials, renderWithLayout, Mustache } from "../render/engines.js";
+import type { CampsiteConfig, PageFrontmatter, PageContext, Collections, RenderOptions } from "../types.js";
+
+/**
+ * Read and parse frontmatter from a file
+ */
+export async function readWithFrontmatter(filePath: string): Promise<matter.GrayMatterFile<string>> {
+  const raw = await readFile(filePath, "utf8");
+  return matter(raw);
+}
+
+/**
+ * Build page context object for template rendering
+ */
+export function pageContext(
+  frontmatter: PageFrontmatter,
+  html: string,
+  config: CampsiteConfig,
+  relPath: string,
+  data: Collections,
+  path: string = "/"
+): PageContext {
+  // Helper function to check if a URL is active/current
+  const isActive = (url: string): boolean => {
+    if (!url) return false;
+    return normalizeUrl(path) === normalizeUrl(url);
+  };
+  
+  return {
+    site: { name: config.siteName, config },
+    page: { ...frontmatter, content: html, source: relPath, path },
+    collections: data,
+    isActive,
+    ...data
+  };
+}
+
+/**
+ * Determine if markdown rendering should be applied
+ */
+export function shouldRenderMarkdown(
+  frontmatter: PageFrontmatter | undefined,
+  _config: CampsiteConfig,
+  defaultValue: boolean
+): boolean {
+  if (typeof frontmatter?.markdown === "boolean") return frontmatter.markdown;
+  return defaultValue;
+}
+
+/**
+ * Render a single page file
+ */
+export async function renderPage(filePath: string, options: RenderOptions): Promise<void> {
+  const { pagesDir, layoutsDir, outDir, env, liquidEnv, config, data, partialsDir } = options;
+  const rel = relative(pagesDir, filePath);
+  const ext = getExt(filePath);
+  const outRel = rel.replace(/\.liquid(\.html)?$/i, ".html").replace(ext, ".html");
+  const outPath = join(outDir, outRel);
+  const path = toUrlPath(outRel);
+  await ensureDir(dirname(outPath));
+  
+  // Load Mustache partials if needed
+  const fileContent = await readFile(filePath, "utf8");
+  const partials = (ext === ".mustache" || fileContent.match(/layout:.*\.mustache/)) 
+    ? await loadMustachePartials(partialsDir) 
+    : {};
+
+  // Helper function to finalize and write the rendered page
+  const finalizePage = async (pageHtml: string, frontmatter: PageFrontmatter): Promise<void> => {
+    const ctx = pageContext(frontmatter, pageHtml, config, rel, data, path);
+    const rendered = await renderWithLayout(
+      frontmatter.layout,
+      pageHtml,
+      ctx,
+      env as nunjucks.Environment,
+      liquidEnv as Liquid,
+      layoutsDir,
+      partials
+    );
+    await writeFile(outPath, rendered, "utf8");
+  };
+
+  if (ext === ".md") {
+    const parsed = await readWithFrontmatter(filePath);
+    const html = md.render(parsed.content);
+    await finalizePage(html, parsed.data as PageFrontmatter);
+    return;
+  }
+
+  if (ext === ".njk") {
+    const parsed = await readWithFrontmatter(filePath);
+    const ctx = pageContext(parsed.data as PageFrontmatter, parsed.content, config, rel, data, path);
+    // Note: path option not officially in types but supported by nunjucks
+    let pageHtml: string = (env as nunjucks.Environment).renderString(parsed.content, ctx);
+    if (shouldRenderMarkdown(parsed.data as PageFrontmatter, config, false)) {
+      pageHtml = md.render(pageHtml);
+    }
+    await finalizePage(pageHtml, parsed.data as PageFrontmatter);
+    return;
+  }
+
+  if (ext === ".liquid" || filePath.toLowerCase().endsWith(".liquid.html")) {
+    const parsed = await readWithFrontmatter(filePath);
+    const ctx = pageContext(parsed.data as PageFrontmatter, parsed.content, config, rel, data, path);
+    let pageHtml = await (liquidEnv as Liquid).parseAndRender(parsed.content, ctx) as string;
+    if (shouldRenderMarkdown(parsed.data as PageFrontmatter, config, false)) {
+      pageHtml = md.render(pageHtml);
+    }
+    await finalizePage(pageHtml, parsed.data as PageFrontmatter);
+    return;
+  }
+
+  if (ext === ".mustache") {
+    const parsed = await readWithFrontmatter(filePath);
+    const ctx = pageContext(parsed.data as PageFrontmatter, parsed.content, config, rel, data, path);
+    let pageHtml = Mustache.render(parsed.content, ctx, partials);
+    if (shouldRenderMarkdown(parsed.data as PageFrontmatter, config, false)) {
+      pageHtml = md.render(pageHtml);
+    }
+    await finalizePage(pageHtml, parsed.data as PageFrontmatter);
+    return;
+  }
+
+  if (ext === ".html") {
+    const parsed = await readWithFrontmatter(filePath);
+    let pageHtml = parsed.content;
+    if (shouldRenderMarkdown(parsed.data as PageFrontmatter, config, false)) {
+      pageHtml = md.render(pageHtml);
+    }
+    await finalizePage(pageHtml, parsed.data as PageFrontmatter);
+    return;
+  }
+
+  await cp(filePath, outPath);
+}

package/src/build/pipeline.ts

@@ -0,0 +1,111 @@
+import { existsSync } from "fs";
+import { writeFile } from "fs/promises";
+import { join, relative, resolve } from "path";
+import { loadConfig } from "../config.js";
+import { cleanDir, copyPublic, walkFiles } from "../utils/fs.js";
+import { kolor } from "../utils/logger.js";
+import { createNunjucksEnv, createLiquidEnv } from "../render/engines.js";
+import { loadData } from "./data.js";
+import { renderPage } from "./pages.js";
+import { processImages, minifyCSSFiles, minifyHTMLFiles, cacheBustAssets, generateSitemap } from "./assets.js";
+import type { BuildOptions } from "../types.js";
+
+/**
+ * Main build function - orchestrates the entire build pipeline
+ */
+export async function build(cwdArg: string = process.cwd(), options: BuildOptions = {}): Promise<void> {
+  const config = await loadConfig(cwdArg);
+  const srcDir = resolve(cwdArg, config.srcDir || "src");
+  const pagesDir = join(srcDir, "pages");
+  const layoutsDir = join(srcDir, "layouts");
+  const partialsDir = join(srcDir, "partials");
+  const dataDir = join(srcDir, "data");
+  const collectionsDir = join(srcDir, "collections");
+  const publicDir = resolve(cwdArg, "public");
+  const outDir = resolve(cwdArg, config.outDir || "dist");
+  const env = createNunjucksEnv(layoutsDir, pagesDir, srcDir, partialsDir);
+  
+  // Allow user config to extend the Nunjucks environment (e.g., custom filters)
+  if (config?.hooks?.nunjucksEnv && typeof config.hooks.nunjucksEnv === "function") {
+    try {
+      config.hooks.nunjucksEnv(env);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to apply nunjucksEnv hook: ${message}`));
+    }
+  }
+  
+  const liquidEnv = createLiquidEnv(layoutsDir, pagesDir, srcDir, partialsDir);
+  
+  // Allow user config to extend the Liquid environment (e.g., custom filters)
+  if (config?.hooks?.liquidEnv && typeof config.hooks.liquidEnv === "function") {
+    try {
+      config.hooks.liquidEnv(liquidEnv);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      console.error(kolor.red(`Failed to apply liquidEnv hook: ${message}`));
+    }
+  }
+  
+  const data = await loadData([dataDir, collectionsDir]);
+
+  await cleanDir(outDir);
+  await copyPublic(publicDir, outDir, config.excludeFiles);
+
+  // Only compress photos during production builds, not during dev mode
+  const shouldCompressPhotos = options.skipImageCompression !== true && config.compressPhotos;
+  if (shouldCompressPhotos) {
+    await processImages(outDir, config);
+  }
+
+  const files = await walkFiles(pagesDir);
+  if (files.length === 0) {
+    console.log(kolor.yellow("No pages found in src/pages."));
+    return;
+  }
+
+  await Promise.all(files.map((file) => renderPage(file, { pagesDir, layoutsDir, outDir, env, liquidEnv, config, data, partialsDir })));
+
+  // Skip minification and cache busting in dev mode for faster rebuilds
+  const isDevMode = options.devMode === true;
+
+  if (!isDevMode && config.minifyCSS) {
+    await minifyCSSFiles(outDir);
+    console.log(kolor.green("CSS minified"));
+  }
+
+  if (!isDevMode && config.minifyHTML) {
+    await minifyHTMLFiles(outDir, config);
+    console.log(kolor.green("HTML minified"));
+  }
+
+  if (!isDevMode && config.cacheBustAssets) {
+    console.log(kolor.cyan("Cache-busting assets..."));
+    const assetMap = await cacheBustAssets(outDir);
+    const assetCount = Object.keys(assetMap).length;
+    if (assetCount > 0) {
+      console.log(kolor.green(`✓ Cache-busted ${assetCount} asset(s)`));
+    } else {
+      console.log(kolor.yellow("No assets found to cache-bust"));
+    }
+  }
+
+  // Generate robots.txt dynamically if it doesn't exist in public directory
+  const publicRobotsTxt = join(publicDir, "robots.txt");
+  const distRobotsTxt = join(outDir, "robots.txt");
+  if (!existsSync(publicRobotsTxt) && !existsSync(distRobotsTxt)) {
+    const robotsTxt = `User-agent: *\nAllow: /\n\nSitemap: ${config.siteUrl}/sitemap.xml\n`;
+    await writeFile(distRobotsTxt, robotsTxt, "utf8");
+  }
+
+  // Generate sitemap.xml dynamically if it doesn't exist in public directory
+  const publicSitemap = join(publicDir, "sitemap.xml");
+  const distSitemap = join(outDir, "sitemap.xml");
+  if (!existsSync(publicSitemap) && !existsSync(distSitemap)) {
+    const sitemapXml = await generateSitemap(outDir, config.siteUrl);
+    await writeFile(distSitemap, sitemapXml, "utf8");
+    console.log(kolor.green("✓ Generated sitemap.xml"));
+  }
+
+  console.log(kolor.green(`Built ${files.length} page(s) → ${relative(cwdArg, outDir)}`));
+}