create-berna-stencil 2.0.15 → 2.2.0

package/.eleventy.js

@@ -24,9 +24,6 @@ module.exports = function (eleventyConfig) {
     }
   }
 
-  // =====================================================
-  // SHORTCODE — Markdown file renderer
-  // =====================================================
   const md = markdownIt({ html: true });
 
   eleventyConfig.addShortcode('mdFile', function(filePath) {
@@ -34,38 +31,21 @@ module.exports = function (eleventyConfig) {
     return md.render(content);
   });
 
-  // =====================================================
-  // SHORTCODE — Markdown css
-  // =====================================================
   eleventyConfig.addPassthroughCopy({
     "node_modules/github-markdown-css/github-markdown-dark.css": "css/github-markdown-dark.css",
     "node_modules/github-markdown-css/github-markdown-light.css": "css/github-markdown-light.css",
   });
 
-  // =====================================================
-  // ESBUILD — Bundles and minifies JS files before build
-  // =====================================================
-  eleventyConfig.on("eleventy.before", async () => {
-    const entryPoints = glob.sync("src/frontend/js/pages/*.js");
-    await esbuild.build({
-      entryPoints,
-      bundle: true,
-      outdir: `${OUTPUT_DIR}/js/pages`,
-      minify: true,
-    });
+  eleventyConfig.on("eleventy.before", () => {
     copyRecursiveSync("src/backend", `${OUTPUT_DIR}/backend`);
   });
 
-  // =====================================================
-  // PASSTHROUGH — Static files
-  // =====================================================
   eleventyConfig.addPassthroughCopy("src/frontend/.htaccess");
   eleventyConfig.addPassthroughCopy("src/frontend/web.config");
   eleventyConfig.addPassthroughCopy("src/frontend/assets");
   eleventyConfig.addPassthroughCopy("src/frontend/robots.txt");
 
   eleventyConfig.addPassthroughCopy({
-    // Bootstrap
     "node_modules/bootstrap/dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",
     "node_modules/bootstrap-icons/font/fonts": "css/fonts",
 
@@ -79,9 +59,6 @@ module.exports = function (eleventyConfig) {
     // Bulma — CSS only, no JS passthrough needed
   });
 
-  // =====================================================
-  // ELEVENTY IMAGE — Responsive images
-  // =====================================================
   eleventyConfig.addShortcode("image", async function (src, alt) {
     let metadata = await Image(src, {
       widths: [320, 480, 720, 1280, 1920, 2048, 2560, 3840, 4096, 7680],
@@ -98,11 +75,12 @@ module.exports = function (eleventyConfig) {
     });
   });
 
-  // =====================================================
-  // WATCH & DIRECTORY CONFIG
-  // =====================================================
   eleventyConfig.addWatchTarget("./src/frontend/scss");
 
+  eleventyConfig.setServerOptions({
+  watch: [`${OUTPUT_DIR}/js/**/*.js`]
+  });
+
   return {
     dir: {
       input: "src/frontend",

package/README.md

@@ -12,7 +12,7 @@ Building a website from scratch involves a lot of moving parts: templating engin
 - 📁 **Scalable structure** — a clean, opinionated project layout that grows with your needs
 - 🌍 **Open source** — free to use, free to modify, free to share
 
-![Version](https://img.shields.io/badge/version-2.0.15-blue)
+![Version](https://img.shields.io/badge/version-2.2.0-blue)
 ![License](https://img.shields.io/badge/license-Apache--2.0-blue)
 ![Eleventy](https://img.shields.io/badge/11ty-v3.1.2-black)
 

package/_tools/buildJs.js

@@ -0,0 +1,28 @@
+const esbuild = require("esbuild");
+const glob = require("glob");
+const path = require("path");
+const pkg = require("../package.json");
+
+const isWatch = process.argv.includes("--watch");
+const outputDir = pkg.outputDir || "out";
+
+const jsFiles = glob.sync("src/frontend/js/pages/*.js");
+const tsFiles = glob.sync("src/frontend/ts/pages/*.ts");
+const entryPoints = [...jsFiles, ...tsFiles];
+
+if (entryPoints.length === 0) {
+  process.exit(0);
+}
+
+const options = {
+  entryPoints,
+  bundle: true,
+  outdir: path.join(outputDir, "js/pages"),
+  minify: !isWatch,
+};
+
+if (isWatch) {
+  esbuild.context(options).then(ctx => ctx.watch()).catch(() => process.exit(1));
+} else {
+  esbuild.build(options).catch(() => process.exit(1));
+}

package/_tools/cleanOutput.js

@@ -1,24 +1,20 @@
 const fs = require('fs');
 const path = require('path');
 
-const ELEVENTY_CONFIG = path.resolve(__dirname, '../.eleventy.js');
+const PACKAGE_JSON = path.resolve(__dirname, '../package.json');
 
-const content = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
-const match = content.match(/const OUTPUT_DIR\s*=\s*['"`]([^'"`]*)['"`]/);
+const pkg = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf-8'));
 
-if (!match) {
-    console.log('(!) OUTPUT_DIR not found in .eleventy.js');
+if (!pkg.outputDir) {
+    console.log('(!) outputDir not found in package.json');
     process.exit(1);
 }
 
-const outputDir = match[1];
-const absPath = path.isAbsolute(outputDir)
-    ? outputDir
-    : path.resolve(__dirname, '..', outputDir);
+const outputDir = path.resolve(__dirname, '..', pkg.outputDir);
 
-if (fs.existsSync(absPath)) {
-    fs.rmSync(absPath, { recursive: true, force: true });
-    console.log(`(✓) cleaned → ${absPath}`);
+if (fs.existsSync(outputDir)) {
+    fs.rmSync(outputDir, { recursive: true, force: true });
+    console.log(`(✓) cleaned → ${outputDir}`);
 } else {
-    console.log(`(i) nothing to clean → ${absPath}`);
+    console.log(`(i) nothing to clean → ${outputDir}`);
 }

package/_tools/modules/updateOutputPath.js

@@ -2,20 +2,22 @@ const fs = require('fs');
 const path = require('path');
 
 const ELEVENTY_CONFIG = path.resolve(__dirname, '../../.eleventy.js');
-const PACKAGE_JSON = path.resolve(__dirname, '../../package.json');
+const PACKAGE_JSON    = path.resolve(__dirname, '../../package.json');
+const TSCONFIG        = path.resolve(__dirname, '../../tsconfig.json');
 
-// Regex to locate the OUTPUT_DIR declaration in .eleventy.js.
-// Extracted as a constant to avoid writing it by hand in multiple places.
 const OUTPUT_DIR_REGEX = /const OUTPUT_DIR\s*=\s*['"`]([^'"`]*)['"`]/;
 
 // --- Helpers ---
 
-// Reads OUTPUT_DIR value from a given file content string, or returns null
 function parseOutputDir(content) {
     const match = content.match(OUTPUT_DIR_REGEX);
     return match ? match[1] : null;
 }
 
+function isTypeScriptProject() {
+    return fs.existsSync(TSCONFIG);
+}
+
 // --- Updaters ---
 
 function updateEleventyConfig(newPath) {
@@ -39,35 +41,55 @@ function updateEleventyConfig(newPath) {
 function updatePackageJson(newPath) {
     const pkg = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf-8'));
 
-    // Reconstruct all output-dependent scripts from scratch to avoid
-    // partial string replacement bugs on the outdir flag
+    pkg.outputDir = newPath;
+
+    const usesTs = isTypeScriptProject();
+
     pkg.scripts['build:css'] = `sass src/frontend/scss:${newPath}/css --no-source-map --style=compressed --quiet`;
-    pkg.scripts['build:js']  = `esbuild "src/frontend/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --minify`;
     pkg.scripts['serve:css'] = `sass --watch src/frontend/scss:${newPath}/css --no-source-map --quiet`;
-    pkg.scripts['serve:js']  = `esbuild "src/frontend/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --watch`;
+
+    if (usesTs) {
+        pkg.scripts['build:js']  = `esbuild "src/frontend/ts/pages/*.ts" --bundle --outdir=${newPath}/js/pages --minify`;
+        pkg.scripts['serve:js']  = `esbuild "src/frontend/ts/pages/*.ts" --bundle --outdir=${newPath}/js/pages --watch`;
+    } else {
+        pkg.scripts['build:js']  = `esbuild "src/frontend/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --minify`;
+        pkg.scripts['serve:js']  = `esbuild "src/frontend/js/pages/*.js" --bundle --outdir=${newPath}/js/pages --watch`;
+    }
 
     fs.writeFileSync(PACKAGE_JSON, JSON.stringify(pkg, null, 2), 'utf-8');
     console.log(`(✓) package.json updated → ${newPath}`);
     return true;
 }
 
+const TSCONFIG_OUTDIR_REGEX = /"outDir"\s*:\s*"[^"]*"/;
+
+function updateTsConfig(newPath) {
+    if (!isTypeScriptProject()) return;
+
+    const content = fs.readFileSync(TSCONFIG, 'utf-8');
+    const updated = content.replace(TSCONFIG_OUTDIR_REGEX, `"outDir": "./${newPath}/ts"`);
+
+    if (content === updated) {
+        console.log('(!) outDir not found in tsconfig.json');
+        return;
+    }
+
+    fs.writeFileSync(TSCONFIG, updated, 'utf-8');
+    console.log(`(✓) tsconfig.json updated → ${newPath}/ts`);
+}
+
 // --- Public API ---
 
 function updateOutputPath(newPath) {
     const trimmed = newPath.trim().replace(/\\/g, '/');
 
-    // Normalize the path: bare "." becomes "out", everything else gets a
-    // project-scoped suffix to avoid collisions
     const normalizedPath = trimmed === '.'
         ? 'out'
         : `${trimmed.replace(/\/$/, '')}/${path.basename(process.cwd())}-out`;
 
-    // Read the config once and reuse it to get the old path —
-    // avoids a second disk read inside updateEleventyConfig
     const eleventyContent = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');
     const oldPath = parseOutputDir(eleventyContent);
 
-    // Delete the old output folder if it exists
     if (oldPath) {
         const oldAbsPath = path.resolve(__dirname, '../../', oldPath);
         if (fs.existsSync(oldAbsPath)) {
@@ -82,9 +104,9 @@ function updateOutputPath(newPath) {
 
     updatePackageJson(normalizedPath);
     updateEleventyConfig(normalizedPath);
+    updateTsConfig(normalizedPath);
 }
 
-// Returns the current OUTPUT_DIR value from .eleventy.js, or null on failure
 function getCurrentOutputPath() {
     try {
         const content = fs.readFileSync(ELEVENTY_CONFIG, 'utf-8');

package/_tools/modules/updatePage.js

@@ -7,16 +7,35 @@ const { getCurrentOutputPath } = require('./updateOutputPath');
 const { toCamelCase } = require('./utils');
 
 const TEMPLATES_DIR = path.join(__dirname, '..', 'res', 'templates');
+const TSCONFIG      = path.resolve(__dirname, '../../tsconfig.json');
 
 // --- Helpers ---
 
-// Returns the three file targets (scss, js, njk) for a given page name
+function isTypeScriptProject() {
+    return fileSystem.existsSync(TSCONFIG);
+}
+
+// Returns the three file targets (scss, js/ts, njk) for a given page name
 function getPageTargets(pageName) {
     const camelName = toCamelCase(pageName);
+    const usesTs    = isTypeScriptProject();
+
     return [
-        { folder: 'src/frontend/scss/pages', templateFile: 'template.scss', fileName: `${camelName}.scss` },
-        { folder: 'src/frontend/js/pages',   templateFile: 'template.js',   fileName: `${camelName}.js`   },
-        { folder: 'src/frontend/_routes',    templateFile: 'template.njk',  fileName: `${pageName}.njk`   },
+        {
+            folder:       'src/frontend/scss/pages',
+            templateFile: 'template.scss',
+            fileName:     `${camelName}.scss`,
+        },
+        {
+            folder:       usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages',
+            templateFile: usesTs ? 'template.ts'           : 'template.js',
+            fileName:     usesTs ? `${camelName}.ts`       : `${camelName}.js`,
+        },
+        {
+            folder:       'src/frontend/_routes',
+            templateFile: 'template.njk',
+            fileName:     `${pageName}.njk`,
+        },
     ];
 }
 
@@ -34,7 +53,6 @@ function addPage(pageName) {
         const srcPath = path.join(TEMPLATES_DIR, templateFile);
 
         if (templateFile === 'template.njk') {
-            // Patch the frontmatter placeholders with the actual page values
             const content = fileSystem.readFileSync(srcPath, 'utf8')
                 .replace(/^title:.*$/m,     `title: "${camelName}"`)
                 .replace(/^permalink:.*$/m, `permalink: "/${pageName}/"`);
@@ -53,11 +71,13 @@ function addPage(pageName) {
 function renamePage(oldName, newName) {
     const oldCamel = toCamelCase(oldName);
     const newCamel = toCamelCase(newName);
+    const usesTs   = isTypeScriptProject();
+    const ext      = usesTs ? 'ts' : 'js';
+    const jsFolder = usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages';
 
-    // Use consistent src/frontend/ paths (matching addPage)
     const filesToRename = [
         { src: `src/frontend/scss/pages/${oldCamel}.scss`, dest: `src/frontend/scss/pages/${newCamel}.scss` },
-        { src: `src/frontend/js/pages/${oldCamel}.js`,     dest: `src/frontend/js/pages/${newCamel}.js`     },
+        { src: `${jsFolder}/${oldCamel}.${ext}`,           dest: `${jsFolder}/${newCamel}.${ext}`           },
         { src: `src/frontend/_routes/${oldName}.njk`,      dest: `src/frontend/_routes/${newName}.njk`      },
     ];
 
@@ -70,20 +90,20 @@ function renamePage(oldName, newName) {
         console.log(`[renamed] ${src} → ${dest}`);
     });
 
-    // Use atomic rename helpers instead of remove + add separately
     renameLayout(oldName, newName);
     renameSiteData(oldName, newName);
 }
 
 function removePage(pageName) {
     const camelName = toCamelCase(pageName);
-
-    // Read the actual current output dir instead of hardcoding "out"
+    const usesTs    = isTypeScriptProject();
+    const ext       = usesTs ? 'ts' : 'js';
+    const jsFolder  = usesTs ? 'src/frontend/ts/pages' : 'src/frontend/js/pages';
     const OUTPUT_DIR = getCurrentOutputPath() || 'out';
 
     const filesToDelete = [
         `src/frontend/scss/pages/${camelName}.scss`,
-        `src/frontend/js/pages/${camelName}.js`,
+        `${jsFolder}/${camelName}.${ext}`,
         `src/frontend/_routes/${pageName}.njk`,
         path.join(OUTPUT_DIR, 'js/pages',  `${camelName}.js`),
         path.join(OUTPUT_DIR, 'css/pages', `${camelName}.css`),

package/_tools/res/templates/template.js

@@ -2,20 +2,12 @@
 // JAVASCRIPT MODULES IMPORTS
 //===========================
 
-// Call anywhere
-import { showNotification } from '../modules/notification.js';
-
-// Uncomment of pre-existing modules
-// import { initTextAreaAutoExpand } from '../modules/forms/textAreaAutoExpand.js';
-// import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
+// import { initExampleModule } from '../modules/exampleModule.js';
 
 //==========================
 // PAGE CUSTOM JAVASCRIPT
 //==========================
 
 document.addEventListener("DOMContentLoaded", () => {
-    // initTextAreaAutoExpand();
-    // initNormalizePhoneNumber();
-});
-
-showNotification("Example notification", "success", 3000);
+    // initExampleModule();
+});

package/_tools/res/templates/template.ts

@@ -0,0 +1,13 @@
+//===========================
+// TYPESCRIPT MODULES IMPORTS
+//===========================
+
+// import { initExampleModule } from '../modules/exampleModule';
+
+//==========================
+// PAGE CUSTOM TYPESCRIPT
+//==========================
+
+document.addEventListener("DOMContentLoaded", (): void => {
+    // initExampleModule();
+});