basecampjs 0.0.1 → 0.0.3

package/index.js

@@ -11,6 +11,8 @@ import matter from "gray-matter";
 import MarkdownIt from "markdown-it";
 import nunjucks from "nunjucks";
 import { Liquid } from "liquidjs";
+import { minify as minifyCss } from "csso";
+import { minify as minifyHtml } from "html-minifier-terser";
 
 const cwd = process.cwd();
 const md = new MarkdownIt({ html: true, linkify: true, typographer: true });
@@ -21,6 +23,8 @@ const defaultConfig = {
   outDir: "dist",
   templateEngine: "nunjucks",
   markdown: true,
+  minifyCSS: false,
+  minifyHTML: false,
   integrations: { nunjucks: true, liquid: false, vue: false, alpine: false }
 };
 
@@ -69,6 +73,45 @@ async function copyPublic(publicDir, outDir) {
   }
 }
 
+async function minifyCSSFiles(outDir) {
+  const files = await walkFiles(outDir);
+  const cssFiles = files.filter((file) => extname(file).toLowerCase() === ".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) {
+      console.error(kolor.red(`Failed to minify CSS ${relative(outDir, file)}: ${err.message}`));
+    }
+  }));
+}
+
+async function minifyHTMLFiles(outDir, config) {
+  const files = await walkFiles(outDir);
+  const htmlFiles = files.filter((file) => extname(file).toLowerCase() === ".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) {
+      console.error(kolor.red(`Failed to minify HTML ${relative(outDir, file)}: ${err.message}`));
+    }
+  }));
+}
+
 async function walkFiles(dir) {
   const results = [];
   if (!existsSync(dir)) return results;
@@ -102,10 +145,19 @@ function createLiquidEnv(layoutsDir, pagesDir, srcDir) {
   });
 }
 
-function pageContext(frontmatter, html, config, relPath, data) {
+function toUrlPath(outRel) {
+  const normalized = outRel.replace(/\\/g, "/");
+  if (normalized.endsWith("index.html")) {
+    const trimmed = normalized.slice(0, -"index.html".length);
+    return trimmed ? `/${trimmed}` : "/";
+  }
+  return `/${normalized}`;
+}
+
+function pageContext(frontmatter, html, config, relPath, data, url = "/") {
   return {
     site: { name: config.siteName, config },
-    page: { ...frontmatter, content: html, source: relPath },
+    page: { ...frontmatter, content: html, source: relPath, url },
     frontmatter,
     content: html,
     data,
@@ -145,13 +197,14 @@ async function renderPage(filePath, { pagesDir, layoutsDir, outDir, env, liquidE
   const ext = extname(filePath).toLowerCase();
   const outRel = rel.replace(/\.liquid(\.html)?$/i, ".html").replace(ext, ".html");
   const outPath = join(outDir, outRel);
+  const url = toUrlPath(outRel);
   await ensureDir(dirname(outPath));
 
   if (ext === ".md") {
     const raw = await readFile(filePath, "utf8");
     const parsed = matter(raw);
     const html = md.render(parsed.content);
-    const ctx = pageContext(parsed.data, html, config, rel, data);
+    const ctx = pageContext(parsed.data, html, config, rel, data, url);
     const rendered = await renderWithLayout(parsed.data.layout, html, ctx, env, liquidEnv);
     await writeFile(outPath, rendered, "utf8");
     return;
@@ -160,7 +213,7 @@ async function renderPage(filePath, { pagesDir, layoutsDir, outDir, env, liquidE
   if (ext === ".njk") {
     const raw = await readFile(filePath, "utf8");
     const parsed = matter(raw);
-    const ctx = pageContext(parsed.data, parsed.content, config, rel, data);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, url);
     const templateName = rel.replace(/\\/g, "/");
     let pageHtml = env.renderString(parsed.content, ctx, { path: templateName });
     if (shouldRenderMarkdown(parsed.data, config, false)) {
@@ -174,7 +227,7 @@ async function renderPage(filePath, { pagesDir, layoutsDir, outDir, env, liquidE
   if (ext === ".liquid" || filePath.toLowerCase().endsWith(".liquid.html")) {
     const raw = await readFile(filePath, "utf8");
     const parsed = matter(raw);
-    const ctx = pageContext(parsed.data, parsed.content, config, rel, data);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, url);
     let pageHtml = await liquidEnv.parseAndRender(parsed.content, ctx);
     if (shouldRenderMarkdown(parsed.data, config, false)) {
       pageHtml = md.render(pageHtml);
@@ -187,7 +240,7 @@ async function renderPage(filePath, { pagesDir, layoutsDir, outDir, env, liquidE
   if (ext === ".html") {
     const raw = await readFile(filePath, "utf8");
     const parsed = matter(raw);
-    const ctx = pageContext(parsed.data, parsed.content, config, rel, data);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, url);
     let pageHtml = parsed.content;
     if (shouldRenderMarkdown(parsed.data, config, false)) {
       pageHtml = md.render(pageHtml);
@@ -223,6 +276,16 @@ async function build(cwdArg = cwd) {
 
   await Promise.all(files.map((file) => renderPage(file, { pagesDir, layoutsDir, outDir, env, liquidEnv, config, data })));
 
+  if (config.minifyCSS) {
+    await minifyCSSFiles(outDir);
+    console.log(kolor.green("CSS minified"));
+  }
+
+  if (config.minifyHTML) {
+    await minifyHTMLFiles(outDir, config);
+    console.log(kolor.green("HTML minified"));
+  }
+
   console.log(kolor.green(`Built ${files.length} page(s) → ${relative(cwdArg, outDir)}`));
 }
 
@@ -244,7 +307,11 @@ function serve(outDir, port = 4173) {
   const server = createServer(async (req, res) => {
     const urlPath = decodeURI((req.url || "/").split("?")[0]);
     const safePath = urlPath.replace(/\.\.+/g, "");
-    let filePath = join(outDir, safePath);
+    const requestPath = safePath.replace(/^\/+/, "") || "index.html";
+    let filePath = join(outDir, requestPath);
+    const notFoundPath = join(outDir, "404.html");
+    const indexPath = join(outDir, "index.html");
+    let isNotFoundResponse = false;
     let stats;
 
     try {
@@ -254,13 +321,18 @@ function serve(outDir, port = 4173) {
         stats = await stat(filePath);
       }
     } catch {
-      filePath = join(outDir, "index.html");
+      if (existsSync(notFoundPath)) {
+        filePath = notFoundPath;
+        isNotFoundResponse = true;
+      } else {
+        filePath = indexPath;
+      }
     }
 
     try {
       const data = await readFile(filePath);
       const type = mime[extname(filePath).toLowerCase()] || "text/plain";
-      res.writeHead(200, { "Content-Type": type });
+      res.writeHead(isNotFoundResponse ? 404 : 200, { "Content-Type": type });
       res.end(data);
     } catch {
       res.writeHead(404, { "Content-Type": "text/plain" });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basecampjs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "BasecampJS engine for Campsite static site generator.",
   "bin": {
@@ -11,6 +11,8 @@
     ".": "./index.js"
   },
   "dependencies": {
+    "csso": "^5.0.5",
+    "html-minifier-terser": "^7.2.0",
     "chokidar": "^3.6.0",
     "gray-matter": "^4.0.3",
     "kolorist": "^1.8.0",