basecampjs 0.0.2 → 0.0.4

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;
@@ -111,15 +154,11 @@ function toUrlPath(outRel) {
   return `/${normalized}`;
 }
 
-function pageContext(frontmatter, html, config, relPath, data, url = "/") {
+function pageContext(frontmatter, html, config, relPath, data, path = "/") {
   return {
     site: { name: config.siteName, config },
-    page: { ...frontmatter, content: html, source: relPath, url },
-    frontmatter,
-    content: html,
-    data,
-    collections: data,
-    ...data
+    page: { ...frontmatter, content: html, source: relPath, path },
+    collections: data
   };
 }
 
@@ -133,8 +172,9 @@ async function renderWithLayout(layoutName, html, ctx, env, liquidEnv) {
   const ext = extname(layoutName).toLowerCase();
   const layoutCtx = {
     ...ctx,
+    frontmatter: ctx.page || {},
     content: html,
-    title: ctx.frontmatter?.title ?? ctx.page?.title ?? ctx.site?.name
+    title: ctx.page?.title ?? ctx.site?.name
   };
 
   if (ext === ".njk") {
@@ -154,14 +194,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);
+  const path = 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, url);
+    const ctx = pageContext(parsed.data, html, config, rel, data, path);
     const rendered = await renderWithLayout(parsed.data.layout, html, ctx, env, liquidEnv);
     await writeFile(outPath, rendered, "utf8");
     return;
@@ -170,7 +210,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, url);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, path);
     const templateName = rel.replace(/\\/g, "/");
     let pageHtml = env.renderString(parsed.content, ctx, { path: templateName });
     if (shouldRenderMarkdown(parsed.data, config, false)) {
@@ -184,7 +224,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, url);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, path);
     let pageHtml = await liquidEnv.parseAndRender(parsed.content, ctx);
     if (shouldRenderMarkdown(parsed.data, config, false)) {
       pageHtml = md.render(pageHtml);
@@ -197,7 +237,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, url);
+    const ctx = pageContext(parsed.data, parsed.content, config, rel, data, path);
     let pageHtml = parsed.content;
     if (shouldRenderMarkdown(parsed.data, config, false)) {
       pageHtml = md.render(pageHtml);
@@ -233,6 +273,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)}`));
 }
 

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "basecampjs",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
-  "description": "BasecampJS engine for Campsite static site generator.",
+  "description": "BasecampJS engine for CampsiteJS static site generator.",
   "bin": {
     "campsite": "./index.js"
   },
@@ -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",