create-berna-stencil 2.1.0 → 2.2.1

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.1.0-blue)
+![Version](https://img.shields.io/badge/version-2.2.1-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();
+});

package/bin/create.js

@@ -5,58 +5,87 @@ const path = require('path');
 const readline = require('readline');
 const { writeSync } = require('fs');
 
-const targetDir = process.argv[2] ? path.resolve(process.argv[2]) : process.cwd();
+// ── PATHS ────────────────────────────────────────────────────────────────────
+
+const targetDir  = process.argv[2] ? path.resolve(process.argv[2]) : process.cwd();
 const templateDir = path.join(__dirname, '..');
 
-const COPY_TARGETS = [
-    'src',
+// ── ENUMS ────────────────────────────────────────────────────────────────────
+
+const LANGUAGE = Object.freeze({
+    JAVASCRIPT: 'javascript',
+    TYPESCRIPT: 'typescript',
+});
+
+const FRAMEWORK = Object.freeze({
+    BOOTSTRAP:  'bootstrap',
+    BULMA:      'bulma',
+    FOUNDATION: 'foundation',
+    UIKIT:      'uikit',
+    NONE:       'none',
+});
+
+// ── CHOICES ──────────────────────────────────────────────────────────────────
+
+const LANGUAGE_CHOICES = [
+    { label: 'JavaScript (default)', value: LANGUAGE.JAVASCRIPT },
+    { label: 'TypeScript',           value: LANGUAGE.TYPESCRIPT },
+];
+
+const FRAMEWORK_CHOICES = [
+    { label: 'Bootstrap (default)', value: FRAMEWORK.BOOTSTRAP  },
+    { label: 'Bulma',               value: FRAMEWORK.BULMA      },
+    { label: 'Foundation',          value: FRAMEWORK.FOUNDATION },
+    { label: 'UIkit',               value: FRAMEWORK.UIKIT      },
+    { label: 'None',                value: FRAMEWORK.NONE       },
+];
+
+// ── COPY CONFIG ───────────────────────────────────────────────────────────────
+
+const MANDATORY_COPY = [
     'docs',
     '_tools',
     '.eleventy.js',
     '.eleventyignore',
+    'src/backend',
+    'src/frontend',
 ];
 
-const GITIGNORE_CONTENT = `
-node_modules/
-src/backend/_core/vendor/
-out/
-src/backend/config.php
-`;
+const FRONTEND_EXCLUDE = {
+    [LANGUAGE.JAVASCRIPT]: ['ts'],
+    [LANGUAGE.TYPESCRIPT]: ['js'],
+};
 
 const CREATE_DIRS = [
     'src/frontend/_routes',
 ];
 
-const ALL_FRAMEWORKS = ['bootstrap', 'bulma', 'foundation', 'uikit'];
+// ── FRAMEWORK CONFIG ──────────────────────────────────────────────────────────
+
+const ALL_FRAMEWORKS = Object.values(FRAMEWORK).filter(f => f !== FRAMEWORK.NONE);
 
 const FRAMEWORKS = {
-    bootstrap: {
-        label: 'Bootstrap',
-        scss: 'bootstrap',
-        njk: [
-            '<script src="/js/bootstrap.bundle.min.js" defer></script>',
-        ],
+    [FRAMEWORK.BOOTSTRAP]: {
+        scss:     'bootstrap',
+        njk:      ['<script src="/js/bootstrap.bundle.min.js" defer></script>'],
         eleventy: [
             '"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js": "js/bootstrap.bundle.min.js",',
             '"node_modules/bootstrap-icons/font/fonts": "css/fonts",',
         ],
     },
-    bulma: {
-        label: 'Bulma',
-        scss: 'bulma',
-        njk: [],
+    [FRAMEWORK.BULMA]: {
+        scss:     'bulma',
+        njk:      [],
         eleventy: [],
     },
-    foundation: {
-        label: 'Foundation',
-        scss: 'foundation',
-        njk: ['<script src="/js/foundation.min.js" defer></script>'],
+    [FRAMEWORK.FOUNDATION]: {
+        scss:     'foundation',
+        njk:      ['<script src="/js/foundation.min.js" defer></script>'],
         eleventy: ['"node_modules/foundation-sites/dist/js/foundation.min.js": "js/foundation.min.js",'],
     },
-    uikit: {
-        label: 'UIkit',
-        scss: 'uikit',
-        njk: [
+    [FRAMEWORK.UIKIT]: {
+        scss:     'uikit',
+        njk:      [
             '<script src="/js/uikit.min.js" defer></script>',
             '<script src="/js/uikit-icons.min.js" defer></script>',
         ],
@@ -65,25 +94,42 @@ const FRAMEWORKS = {
             '"node_modules/uikit/dist/js/uikit-icons.min.js": "js/uikit-icons.min.js",',
         ],
     },
-    none: {
-        label: 'None',
-        scss: null,
-        njk: [],
+    [FRAMEWORK.NONE]: {
+        scss:     null,
+        njk:      [],
         eleventy: [],
     },
 };
 
+// ── LANGUAGE CONFIG ───────────────────────────────────────────────────────────
+
+const LANGUAGE_ELEVENTY = Object.freeze({
+    jsEntry: 'const entryPoints = glob.sync("src/frontend/js/pages/*.js");',
+    tsEntry: 'const entryPoints = glob.sync("src/frontend/ts/pages/*.ts");',
+});
+
+// ── GENERATED FILE CONTENTS ───────────────────────────────────────────────────
+
+const GITIGNORE_CONTENT = `
+node_modules/
+src/backend/_core/vendor/
+out/
+src/backend/config.php
+`;
+
+
 const PROJECT_PACKAGE = {
-    name: path.basename(targetDir),
-    version: '2.1.0',
-    private: true,
-    scripts: {
+    name:      path.basename(targetDir),
+    version:   '2.2.1',
+    private:   true,
+    outputDir: 'out',
+    "scripts": {
         "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",
-        "build:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --minify",
+        "build:js": "node _tools/buildJs.js",
         "build:11ty": "eleventy",
         "build": "npm run clean && npm run build:css && npm run build:js && npm run build:11ty",
         "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet --load-path=node_modules",
-        "serve:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --watch",
+        "serve:js": "node _tools/buildJs.js --watch",
         "serve:11ty": "eleventy --serve --quiet",
         "clean": "node _tools/cleanOutput.js",
         "serve": "npm run clean && concurrently \"npm run serve:11ty\" \"npm run serve:css\" \"npm run serve:js\"",
@@ -91,23 +137,25 @@ const PROJECT_PACKAGE = {
         "postinstall": "cd src/backend/_core && composer install --quiet"
     },
     dependencies: {
-        '@11ty/eleventy': '^3.1.2',
+        '@11ty/eleventy':     '^3.1.2',
         '@11ty/eleventy-img': '^6.0.4',
-        'bootstrap': '^5.3.8',
-        'bootstrap-icons': '^1.13.1',
-        'bulma': '^1.0.4',
-        'foundation-sites': '^6.9.0',
+        'bootstrap':          '^5.3.8',
+        'bootstrap-icons':    '^1.13.1',
+        'bulma':              '^1.0.4',
+        'foundation-sites':   '^6.9.0',
         'github-markdown-css': '^5.9.0',
-        'glob': '^13.0.6',
-        'uikit': '^3.25.13',
+        'glob':               '^13.0.6',
+        'uikit':              '^3.25.13',
     },
     devDependencies: {
         'concurrently': '^9.2.1',
-        'esbuild': '^0.27.3',
-        'sass': '^1.77.0',
+        'esbuild':      '^0.27.3',
+        'sass':         '^1.77.0',
     },
 };
 
+// ── HELPERS ───────────────────────────────────────────────────────────────────
+
 function log(msg) {
     writeSync(1, msg + '\n');
 }
@@ -116,13 +164,14 @@ function escapeRegex(str) {
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-function copyRecursive(src, dest) {
+function copyRecursive(src, dest, exclude = []) {
     const stat = fs.statSync(src);
     if (stat.isDirectory()) {
         fs.mkdirSync(dest, { recursive: true });
         for (const child of fs.readdirSync(src)) {
             if (child === '.git') continue;
-            copyRecursive(path.join(src, child), path.join(dest, child));
+            if (exclude.includes(child)) continue;
+            copyRecursive(path.join(src, child), path.join(dest, child), exclude);
         }
     } else {
         fs.mkdirSync(path.dirname(dest), { recursive: true });
@@ -159,6 +208,8 @@ function njkUncomment(content, line) {
     return content.split(`{# ${line} #}`).join(line);
 }
 
+// ── APPLY ─────────────────────────────────────────────────────────────────────
+
 function applyFramework(framework) {
     const config = FRAMEWORKS[framework];
 
@@ -178,13 +229,9 @@ function applyFramework(framework) {
     if (fs.existsSync(baseNjkPath)) {
         let content = fs.readFileSync(baseNjkPath, 'utf8');
         ALL_FRAMEWORKS.forEach(fw => {
-            FRAMEWORKS[fw].njk.forEach(line => {
-                content = njkComment(content, line);
-            });
-        });
-        config.njk.forEach(line => {
-            content = njkUncomment(content, line);
+            FRAMEWORKS[fw].njk.forEach(line => { content = njkComment(content, line); });
         });
+        config.njk.forEach(line => { content = njkUncomment(content, line); });
         fs.writeFileSync(baseNjkPath, content);
     }
 
@@ -192,49 +239,50 @@ function applyFramework(framework) {
     if (fs.existsSync(eleventyPath)) {
         let content = fs.readFileSync(eleventyPath, 'utf8');
         ALL_FRAMEWORKS.forEach(fw => {
-            FRAMEWORKS[fw].eleventy.forEach(line => {
-                content = slashComment(content, line);
-            });
-        });
-        config.eleventy.forEach(line => {
-            content = slashUncomment(content, line);
+            FRAMEWORKS[fw].eleventy.forEach(line => { content = slashComment(content, line); });
         });
+        config.eleventy.forEach(line => { content = slashUncomment(content, line); });
         fs.writeFileSync(eleventyPath, content);
     }
 }
 
-function askFramework() {
+function applyLanguage(language) {
+    const eleventyPath = path.join(targetDir, '.eleventy.js');
+    if (!fs.existsSync(eleventyPath)) return;
+
+    let content = fs.readFileSync(eleventyPath, 'utf8');
+
+    if (language === LANGUAGE.TYPESCRIPT) {
+        content = slashComment(content,   LANGUAGE_ELEVENTY.jsEntry);
+        content = slashUncomment(content, LANGUAGE_ELEVENTY.tsEntry);
+    } else {
+        content = slashUncomment(content, LANGUAGE_ELEVENTY.jsEntry);
+        content = slashComment(content,   LANGUAGE_ELEVENTY.tsEntry);
+    }
+
+    fs.writeFileSync(eleventyPath, content);
+}
+
+// ── UI ────────────────────────────────────────────────────────────────────────
+
+function askChoice(question, choices) {
     return new Promise((resolve) => {
-        const choices = [
-            { label: 'Bootstrap (default)', value: 'bootstrap' },
-            { label: 'Bulma', value: 'bulma' },
-            { label: 'Foundation', value: 'foundation' },
-            { label: 'UIkit', value: 'uikit' },
-            { label: 'None', value: 'none' }
-        ];
         let selectedIndex = 0;
 
-        log('\n>> Select a CSS framework (Use arrow keys and press Enter):\n');
+        log(`\n>> ${question} (Use arrow keys and press Enter):\n`);
 
         const render = (firstTime = false) => {
-            if (!firstTime) {
-                process.stdout.write(`\x1B[${choices.length}A`);
-            }
-            let output = '';
-            choices.forEach((choice, index) => {
-                if (index === selectedIndex) {
-                    output += `  \x1b[36m◉ ${choice.label}\x1b[0m\x1B[K\n`;
-                } else {
-                    output += `  * ${choice.label}\x1B[K\n`;
-                }
-            });
+            if (!firstTime) process.stdout.write(`\x1B[${choices.length}A`);
+            const output = choices.map((choice, index) =>
+                index === selectedIndex
+                    ? `  \x1b[36m◉ ${choice.label}\x1b[0m\x1B[K\n`
+                    : `  * ${choice.label}\x1B[K\n`
+            ).join('');
             process.stdout.write(output);
         };
 
         readline.emitKeypressEvents(process.stdin);
-        if (process.stdin.isTTY) {
-            process.stdin.setRawMode(true);
-        }
+        if (process.stdin.isTTY) process.stdin.setRawMode(true);
         process.stdin.resume();
 
         const onKeyPress = (str, key) => {
@@ -248,9 +296,7 @@ function askFramework() {
                 render();
             } else if (key.name === 'return' || key.name === 'enter') {
                 process.stdin.removeListener('keypress', onKeyPress);
-                if (process.stdin.isTTY) {
-                    process.stdin.setRawMode(false);
-                }
+                if (process.stdin.isTTY) process.stdin.setRawMode(false);
                 process.stdin.pause();
                 resolve(choices[selectedIndex].value);
             }
@@ -261,23 +307,26 @@ function askFramework() {
     });
 }
 
+// ── INIT ──────────────────────────────────────────────────────────────────────
+
 async function init() {
-    if (!fs.existsSync(targetDir)) {
-        fs.mkdirSync(targetDir, { recursive: true });
-    }
+    if (!fs.existsSync(targetDir)) fs.mkdirSync(targetDir, { recursive: true });
 
     log(`\n>> Creating berna-stencil project in ${targetDir}\n`);
 
-    for (const target of COPY_TARGETS) {
-        const src = path.join(templateDir, target);
+    const language  = await askChoice('Select a language',      LANGUAGE_CHOICES);
+    const framework = await askChoice('Select a CSS framework', FRAMEWORK_CHOICES);
+
+    for (const target of MANDATORY_COPY) {
+        const src  = path.join(templateDir, target);
         const dest = path.join(targetDir, target);
-        if (fs.existsSync(src)) {
-            copyRecursive(src, dest);
-            log(`+ ${target}`);
-        }
+        if (!fs.existsSync(src)) continue;
+        const exclude = target === 'src/frontend' ? FRONTEND_EXCLUDE[language] : [];
+        copyRecursive(src, dest, exclude);
+        log(`+ ${target}`);
     }
 
-    const configDest = path.join(targetDir, 'src/backend/config.php');
+    const configDest    = path.join(targetDir, 'src/backend/config.php');
     const configExample = path.join(targetDir, 'src/backend/config.example.php');
     if (!fs.existsSync(configDest) && fs.existsSync(configExample)) {
         fs.copyFileSync(configExample, configDest);
@@ -285,30 +334,31 @@ async function init() {
     }
     deleteFileRecursive(targetDir, 'config.example.php');
 
-    fs.writeFileSync(
-        path.join(targetDir, 'package.json'),
-        JSON.stringify(PROJECT_PACKAGE, null, 2)
-    );
+    const pkg = { ...PROJECT_PACKAGE };
+
+    if (language === LANGUAGE.TYPESCRIPT) {
+        const tsSrc  = path.join(templateDir, 'tsconfig.json');
+        const tsDest = path.join(targetDir, 'tsconfig.json');
+        fs.copyFileSync(tsSrc, tsDest);
+        log('+ tsconfig.json');
+        pkg.devDependencies = { ...pkg.devDependencies, typescript: 'latest' };
+    }
+
+    fs.writeFileSync(path.join(targetDir, 'package.json'), JSON.stringify(pkg, null, 2));
     log('+ package.json');
 
-    fs.writeFileSync(
-        path.join(targetDir, '.gitignore'),
-        GITIGNORE_CONTENT
-    );
+    fs.writeFileSync(path.join(targetDir, '.gitignore'), GITIGNORE_CONTENT);
     log('+ .gitignore');
 
     for (const dir of CREATE_DIRS) {
-    const dest = path.join(targetDir, dir);
-    fs.mkdirSync(dest, { recursive: true });
+        fs.mkdirSync(path.join(targetDir, dir), { recursive: true });
     }
 
-    const framework = await askFramework();
     applyFramework(framework);
+    applyLanguage(language);
 
     log(`\n>> Done! Now run:\n`);
-    if (process.argv[2]) {
-        log(`cd ${process.argv[2]}`);
-    }
+    if (process.argv[2]) log(`cd ${process.argv[2]}`);
     log('npm install');
     log('npm run serve\n');
 }

package/docs/Assistant CLI.md

@@ -1,5 +1,7 @@
 # Assistant CLI
 
+> Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (`.ts` instead of `.js`), that imports do **not** include the extension, and that paths use `src/frontend/ts/` instead of `src/frontend/js/`.
+
 An interactive CLI to manage pages without touching files manually.
 
 ```

package/docs/Creating pages.md

@@ -1,5 +1,7 @@
 # Creating Pages
 
+> Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (`.ts` instead of `.js`), that imports do **not** include the extension, and that paths use `src/frontend/ts/` instead of `src/frontend/js/`.
+
 The recommended way is via the **Assistant CLI**
 
 ## What gets created

package/docs/Javascript.md

@@ -1,70 +1,63 @@
 # JavaScript
 
-## Page JS
+> Examples use JavaScript, but everything applies equally to TypeScript. The only difference is the file extension (`.ts` instead of `.js`), that imports do **not** include the extension, and that paths use `src/frontend/ts/` instead of `src/frontend/js/`.
 
-Each page has its own JS entry point in `src/frontend/js/pages/`
+## Page JS
 
-It is bundled and minified by esbuild and loaded automatically by `base.njk`
+Each page has its own JS entry point in `src/frontend/js/pages/`, bundled and minified by esbuild and loaded automatically by `base.njk`.
 
 Import only what the page needs.
 
 ### examplePage.js <small>(`src/frontend/js/pages/`)</small>
+
 ```js
-import { showNotification } from '../modules/notification.js';
+//===========================
+// JAVASCRIPT MODULES IMPORTS
+//===========================
+
+// import { initExampleModule } from '../modules/exampleModule.js';
 
-import { initNormalizePhoneNumber } from '../modules/forms/normalizePhoneNumber.js';
+//==========================
+// PAGE CUSTOM JAVASCRIPT
+//==========================
 
 document.addEventListener("DOMContentLoaded", () => {
-  initNormalizePhoneNumber();
+    // initExampleModule();
 });
-
-showNotification("Page loaded", "success", 3000);
 ```
 
 ## Modules
 
-Modules live in `src/frontend/js/modules/`. Some must be called inside `DOMContentLoaded` as they interact with the DOM; others create elements dynamically and can be called anywhere.
-
-### Call inside `DOMContentLoaded`
-
-| Module | Function |
-|---|---|
-| `modules/langSwitcher.js` | `initLangSwitcher()` |
-| `modules/forms/form.js` | `initFormListener()` |
-| `modules/forms/textAreaAutoExpand.js` | `initTextAreaAutoExpand()` |
-| `modules/forms/normalizePhoneNumber.js` | `initNormalizePhoneNumber()` |
-
-### Call anywhere
-
-| Module | Function |
-|---|---|
-| `modules/notification.js` | `showNotification(text, type, duration)` |
-
-### `showNotification` parameters
-
-| Parameter | Type | Default | Values |
-|---|---|---|---|
-| `text` | string | — | Any string |
-| `type` | string | `"info"` | `"success"`, `"info"`, `"error"` |
-| `duration` | number | `5000` | ms, or `-1` for persistent with spinner |
+Modules live in `src/frontend/js/modules/`. Modules that interact with the DOM must be called inside `DOMContentLoaded`; others can be called anywhere.
 
 ## Adding a module
 
-Create a new `.js` file in `src/frontend/js/modules/`. You can organize them into subfolders freely.
+Create a new `.js` file in `src/frontend/js/modules/`. Subfolders are allowed.
 
 Use ESM syntax — esbuild handles the bundling:
 
+### exampleModule.js <small>(`src/frontend/js/modules/`)</small>
+
 ```js
-// _yourModule.js
-export function yourFunction() {
-  // ...
+//==========================
+// EXAMPLE MODULE
+//==========================
+
+export function exampleModule() {
+    // Example module logic
 }
 ```
 
 Then import it in the pages that need it:
 
 ```js
-import { yourFunction } from '../modules/yourModule.js';
+import { exampleModule } from '../modules/exampleModule.js';
+```
+
+In TypeScript, omit the extension:
+
+```ts
+import { exampleModule } from '../modules/exampleModule';
 ```
 
 > ⚠️ Files inside `_tools/` run directly in Node.js without a bundler — use CommonJS (`require` / `module.exports`) there, not ESM.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-berna-stencil",
-  "version": "2.1.0",
+  "version": "2.2.1",
   "description": "Eleventy boilerplate with per-page SCSS/JS pipeline, esbuild bundling, multi-framework CSS support and a built-in page management CLI",
   "keywords": [],
   "author": "Michele Garofalo",
@@ -24,6 +24,7 @@
     ".eleventy.js",
     ".eleventyignore",
     ".gitignore",
+    "tsconfig.json",
     "LICENSE",
     "NOTICE"
   ],
@@ -47,17 +48,18 @@
     "esbuild": "^0.27.3",
     "sass": "^1.77.0"
   },
-  "scripts": {
-    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet",
-    "build:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --minify",
+"scripts": {
+    "build:css": "sass src/frontend/scss:out/css --no-source-map --style=compressed --quiet --load-path=node_modules",
+    "build:js": "node _tools/buildJs.js",
     "build:11ty": "eleventy",
     "build": "npm run clean && npm run build:css && npm run build:js && npm run build:11ty",
-    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet",
-    "serve:js": "esbuild \"src/frontend/js/pages/*.js\" --bundle --outdir=out/js/pages --watch",
+    "serve:css": "sass --watch src/frontend/scss:out/css --no-source-map --quiet --load-path=node_modules",
+    "serve:js": "node _tools/buildJs.js --watch",
     "serve:11ty": "eleventy --serve --quiet",
     "clean": "node _tools/cleanOutput.js",
     "serve": "npm run clean && concurrently \"npm run serve:11ty\" \"npm run serve:css\" \"npm run serve:js\"",
     "assistant": "node _tools/assistant.js",
     "postinstall": "cd src/backend/_core && composer install --quiet"
-  }
+  },
+  "outputDir": "out"
 }

package/src/frontend/js/modules/exampleModule.js

@@ -0,0 +1,7 @@
+//==========================
+// EXAMPLE MODULE
+//==========================
+
+export function initExampleModule() {
+    // Example module logic
+}

package/src/frontend/js/pages/404.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/src/frontend/js/pages/homepage.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/src/frontend/ts/modules/exampleModule.ts

@@ -0,0 +1,3 @@
+export function initExampleModule(): void {
+    // Example module logic
+}

package/src/frontend/ts/pages/404.ts

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

package/src/frontend/ts/pages/homepage.ts

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

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  // https://aka.ms/tsconfig
+  
+  // Add options by uncommenting or adding "<key>": <value> pairs inside compilerOptions
+
+  "include": ["src/frontend/ts/**/*.ts"], // DO NOT CHANGE
+  
+  "compilerOptions": {
+    "rootDir": "./src/frontend/ts", // DO NOT CHANGE
+    "outDir": "./out/ts", // DO NOT CHANGE
+    "module": "esnext", // DO NOT CHANGE
+    "target": "esnext", // DO NOT CHANGE
+    "types": [],
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true
+  }
+}

package/src/frontend/js/modules/forms/normalizePhoneNumber.js

@@ -1,42 +0,0 @@
-//==========================
-// PHONE NUMBER NORMALIZATION MODULE
-//==========================
-
-// Normalizes and attaches normalization to all existing and future tel inputs
-// Must be called inside DOMContentLoaded in the page's JS file
-export function initNormalizePhoneNumber() {
-
-  // Formats digits in groups of 3, 3 and 4 (e.g. 333 123 4567)
-  function formatDigits(digits) {
-    let formatted = "";
-    if (digits.length > 0) formatted += digits.slice(0, 3);
-    if (digits.length > 3) formatted += " " + digits.slice(3, 6);
-    if (digits.length > 6) formatted += " " + digits.slice(6, 10);
-    return formatted;
-  }
-
-  function normalize(input) {
-    if (!input) return;
-
-    let value = input.value.replace(/[^0-9+]/g, "");
-
-    if (value.startsWith("+")) {
-      value = "+" + value.slice(1).replace(/\+/g, "");
-      const prefix = value.slice(0, 3);
-      const digits = value.slice(3);
-
-      value = prefix + (digits ? " " + formatDigits(digits) : "");
-    } else {
-      value = value.replace(/\+/g, "");
-      value = formatDigits(value);
-    }
-
-    input.value = value;
-  }
-
-  document.querySelectorAll('input[type="tel"]').forEach(normalize);
-
-  document.addEventListener("input", ({ target }) => {
-    if (target.matches('input[type="tel"]')) normalize(target);
-  });
-}

package/src/frontend/js/modules/forms/textAreaAutoExpand.js

@@ -1,38 +0,0 @@
-//==========================
-// AUTO-EXPAND TEXTAREA MODULE
-//==========================
-
-export function initTextAreaAutoExpand() {
-  const MAX_ROWS = 10;
-
-  function setup(element) {
-    if (element.dataset.autoExpand) return;
-    element.dataset.autoExpand = "true";
-    element.style.resize = "none";
-    element.style.overflow = "hidden";
-    element.dataset.minRows = element.rows || 1;
-    element.addEventListener("input", () => expand(element));
-    if (element.value) expand(element);
-  }
-  
-  function expand(element) {
-    element.rows = element.dataset.minRows;
-    while (element.scrollHeight > element.clientHeight && element.rows < MAX_ROWS) {
-      element.rows += 1;
-    }
-  }
-  
-  document.querySelectorAll("textarea").forEach(setup);
-
-  const observer = new MutationObserver((mutations) => {
-    for (const mutation of mutations) {
-      for (const node of mutation.addedNodes) {
-        if (node.nodeType !== 1) continue;
-        if (node.matches("textarea")) setup(node);
-        node.querySelectorAll?.("textarea").forEach(setup);
-      }
-    }
-  });
-
-  observer.observe(document.body, { childList: true, subtree: true });
-}

package/src/frontend/js/modules/notification.js

@@ -1,39 +0,0 @@
-//==========================
-// NOTIFICATION MODULE
-//==========================
-
-let currentNotification = null;
-
-export function showNotification(text, type = "info", duration = 5000) {
-    if (currentNotification) {
-        currentNotification.remove();
-        currentNotification = null;
-    }
-    
-    const notificationBox = document.createElement("div");
-    notificationBox.classList.add("notificationBox", type);
-
-    const notificationText = document.createElement("span");
-    notificationText.textContent = text;
-    notificationBox.appendChild(notificationText);
-
-    if (duration === -1) {
-        const spinner = document.createElement("div");
-        spinner.classList.add("spinner");
-        notificationBox.appendChild(spinner);
-    }
-    
-    document.body.appendChild(notificationBox);
-    currentNotification = notificationBox;
-
-    if (duration !== -1) {
-        setTimeout(() => {
-            if (!notificationBox.parentElement) return;
-            notificationBox.classList.add("fade-out");
-            notificationBox.addEventListener("transitionend", () => {
-                notificationBox.remove();
-                if (currentNotification === notificationBox) currentNotification = null;
-            }, { once: true });
-        }, duration);
-    }
-}