basebrick-bricklayer 1.0.1 → 1.1.0

package/README.md

@@ -8,10 +8,22 @@ Bricklayer is the core static site generator (JamBrick) for BaseBrick. It is des
 - **Dynamic Content Fetching**: Automatically fetches content from a headless CMS based on configuration (`components/generic.json`) and generates individual pages for each content item with clean, SEO-friendly slugs.
 - **Production Optimization**: In production mode (`--prod`), it minifies HTML and CSS, and compresses image assets using `sharp`.
 - **Tailwind Integration**: Seamlessly builds Tailwind CSS using `@tailwindcss/cli`, supporting development and production (minified) builds.
+- **Environment Variables**: Natively loads `.env` and `.dev.vars` (Cloudflare) files, makes variables accessible globally in Nunjucks templates, and interpolates variables in `generic.json`.
+- **Automated Deployments**: Scaffolding optionally generates tailored GitHub Actions (`deploy.yml`) workflows for seamless CI/CD.
+- **Cloudflare Native**: Integrates native Cloudflare Workers support, automatically configuring `deploy:prod` and `deploy:preview` environments mapped to `wrangler.toml`.
+- **Centralized Management**: Includes a `bricklayer manage` command to securely register and sync your local `.basebrick.config` settings with a central Manager API.
 
 ## Installation
 
-Since Bricklayer is a local module within the BaseBrick ecosystem, you can link it directly:
+To create a new Bricklayer project with automatic scaffolding, run the `init` command:
+
+```bash
+npx bricklayer init
+```
+
+This interactive setup will create the default folder structure and ask if you'd like to scaffold a demo site with starter templates, as well as configure Sonic JS CMS integration automatically.
+
+Alternatively, if you are working within the BaseBrick ecosystem locally, you can link it:
 
 ```bash
 cd bricklayer
@@ -37,6 +49,12 @@ To run a production build (minifies HTML/CSS, compresses images):
 bricklayer --prod
 ```
 
+To sync your project settings with a central Bricklayer Manager instance:
+
+```bash
+bricklayer manage
+```
+
 ### Module
 
 ```javascript
@@ -74,11 +92,22 @@ To enable remote CMS fetching, place a `generic.json` configuration file in `src
 - `indexPage`: The template (e.g., `blog.njk`) where an array of posts will be injected under the `posts` variable.
 - `postPage`: The template (e.g., `post.njk`) that will be used to generate individual pages for each item fetched from the API. The generated HTML will be placed in a directory matching the `postPage` name (e.g., `public/post/my-slug.html`).
 
+## Environment Variables
+
+Bricklayer natively supports reading `.env` and `.dev.vars` (Cloudflare Pages) files from the project's root directory.
+
+- **Nunjucks Templates:** Variables are automatically passed to Nunjucks templates under the global `env` object. E.g., `{{ env.MY_API_KEY }}`.
+- **CMS Configuration:** Environment variables can be directly interpolated in `generic.json` strings using the `${VARIABLE_NAME}` syntax.
+
 ## Directory Structure
 
 Bricklayer expects the following default structure (overridable via options):
 
-```
+```text
+├── .github/
+│   └── workflows/
+│       └── deploy.yml  # Auto-generated GitHub Actions
+├── cms/                # (Optional) Cloned Sonic JS CMS
 ├── src/
 │   ├── _includes/      # Nunjucks layouts
 │   ├── assets/         # Static assets (images, fonts, tailwind)
@@ -86,5 +115,8 @@ Bricklayer expects the following default structure (overridable via options):
 │   ├── index.njk       # Pages
 │   └── post.njk
 ├── public/             # Build output
+├── .basebrick.config   # Bricklayer project settings
+├── .gitignore          # Version control exclusions
+├── wrangler.toml       # (Optional) Cloudflare configuration
 └── package.json
 ```

package/bin/bricklayer.js

@@ -1,6 +1,49 @@
 #!/usr/bin/env node
 
 import { buildSite } from '../index.js';
+import { initProject } from './init.js';
 
-const isProd = process.argv.includes('--prod');
-buildSite({ isProd, cwd: process.cwd() }).catch(console.error);
+const args = process.argv.slice(2);
+
+if (args.includes('help') || args.includes('--help') || args.includes('-h')) {
+    console.log(`
+🧱 Bricklayer CLI 🧱
+
+Usage: bricklayer [command] [options]
+
+Commands:
+  (empty)     Run a standard development build
+  init        Scaffold a new project (Demo, CMS, Cloudflare API)
+  manage      Register this project with a Bricklayer Manager
+  help        Show this help message
+
+Options:
+  --prod      Run a production build (minifies HTML/CSS, compresses images)
+
+Examples:
+  bricklayer init        Initialize a project with a demo site, CMS, & Cloudflare Workers API
+  bricklayer manage      Send project configuration to your central Bricklayer Manager
+  bricklayer             Builds the site in development mode
+  bricklayer --prod      Builds the site with production optimizations
+
+Generated NPM Scripts (after init):
+  npm run start           Test your Cloudflare Worker locally
+  npm run deploy:preview  Deploy to a Cloudflare preview environment
+  npm run deploy:prod     Deploy to Cloudflare production
+`);
+    process.exit(0);
+}
+
+if (args.includes('init')) {
+    initProject(process.cwd()).catch(console.error);
+} else if (args.includes('manage')) {
+    import('./manage.js').then(m => m.manageProject(process.cwd())).catch(console.error);
+} else {
+    const isProd = args.includes('--prod');
+    buildSite({ isProd, cwd: process.cwd() })
+        .then(() => process.exit(0))
+        .catch(err => {
+            console.error(err);
+            process.exit(1);
+        });
+}

package/bin/init.js

@@ -0,0 +1,393 @@
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import { execSync } from 'child_process';
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+export async function initProject(cwd) {
+    console.log('\n🧱 Welcome to Bricklayer Initialization 🧱\n');
+
+    const confirm = await question('Initialize a new Bricklayer project in the current directory? (Y/n) ');
+    if (confirm.toLowerCase() === 'n') {
+        console.log('Initialization cancelled.');
+        rl.close();
+        return;
+    }
+
+    const existingFiles = fs.readdirSync(cwd).filter(f => f !== '.git' && f !== '.DS_Store');
+    if (existingFiles.length > 0) {
+        const wipe = await question('Warning: This directory is not empty. Would you like to wipe existing files before scaffolding? (y/N) ');
+        if (wipe.toLowerCase() === 'y') {
+            console.log('Wiping directory...');
+            for (const file of existingFiles) {
+                fs.rmSync(path.join(cwd, file), { recursive: true, force: true });
+            }
+            console.log('Directory wiped.\n');
+        }
+    }
+
+    const projectNameRaw = await question('What is the name of your project? (bricklayer-site) ');
+    const projectName = projectNameRaw.trim() || 'bricklayer-site';
+
+    const githubRepoRaw = await question('What is the GitHub repository URL? (leave blank for none) ');
+    const githubRepo = githubRepoRaw.trim();
+
+    const demoSite = await question('Would you like to scaffold a demo site with starter templates? (Y/n) ');
+    const includeDemo = demoSite.toLowerCase() !== 'n';
+
+    const sonicJs = await question('Would you like to configure Sonic JS CMS integration? (Y/n) ');
+    const includeSonic = sonicJs.toLowerCase() !== 'n';
+
+    let pullSonic = false;
+    if (includeSonic) {
+        const pull = await question('Do you want to pull Sonic.js into the cms/ folder? (y/N) ');
+        pullSonic = pull.toLowerCase() === 'y';
+    }
+
+    const cloudflare = await question('Would you like to start with Cloudflare? (Y/n) ');
+    const includeCloudflare = cloudflare.toLowerCase() !== 'n';
+    let cfFramework = '';
+    if (includeCloudflare) {
+        const fw = await question('Which API framework? (1)hono or (2)vanilla? (1/2) ');
+        cfFramework = fw.trim() === '1' ? 'hono' : 'vanilla';
+    }
+
+    const deployYml = await question('Would you like to generate a GitHub Actions deploy.yml? (Y/n) ');
+    const createDeploy = deployYml.toLowerCase() !== 'n';
+
+    console.log('\nScaffolding project...');
+
+    // 1. Create directory structure
+    const dirs = [
+        'src',
+        'src/_includes',
+        'src/assets',
+        'src/assets/images',
+        'src/assets/tailwind',
+        'src/components',
+        'public'
+    ];
+
+    dirs.forEach(dir => {
+        const dirPath = path.join(cwd, dir);
+        if (!fs.existsSync(dirPath)) {
+            fs.mkdirSync(dirPath, { recursive: true });
+            console.log(` Created ${dir}/`);
+        }
+    });
+
+    // Download dancing ninja
+    const ninjaPath = path.join(cwd, 'src/assets/images/ninja-dance.gif');
+    if (!fs.existsSync(ninjaPath)) {
+        try {
+            console.log(' Downloading dancing ninja asset...');
+            const response = await fetch('https://www.rfgeneration.com/images/collections/gamepopper101/bitdance.gif', {
+                headers: { 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7)' }
+            });
+            const buffer = await response.arrayBuffer();
+            fs.writeFileSync(ninjaPath, Buffer.from(buffer));
+        } catch (e) {
+            console.log(' Failed to download ninja gif.');
+        }
+    }
+
+    // 2. Create base CSS
+    const cssPath = path.join(cwd, 'src/assets/tailwind/input.css');
+    if (!fs.existsSync(cssPath)) {
+        fs.writeFileSync(cssPath, `@tailwind base;\n@tailwind components;\n@tailwind utilities;\n`);
+        console.log(' Created src/assets/tailwind/input.css');
+    }
+
+    if (includeDemo) {
+        // Base layout
+        const layoutPath = path.join(cwd, 'src/_includes/base.njk');
+        if (!fs.existsSync(layoutPath)) {
+            fs.writeFileSync(layoutPath, `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title | default("Bricklayer Site") }}</title>
+    <link rel="stylesheet" href="/assets/css/style.css">
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans p-8">
+    <main class="max-w-4xl mx-auto">
+        {{ content | safe }}
+    </main>
+</body>
+</html>`);
+            console.log(' Created src/_includes/base.njk');
+        }
+
+        const indexPath = path.join(cwd, 'src/index.njk');
+        if (!fs.existsSync(indexPath)) {
+            fs.writeFileSync(indexPath, `---
+title: Welcome to Bricklayer
+layout: base
+---
+<h1 class="text-4xl font-bold text-blue-600 mb-4">Welcome to Bricklayer</h1>
+<p class="text-lg">Your statically generated JamBrick site is ready.</p>
+${includeSonic ? '<p class="mt-4 mb-4"><a href="/blog.html" class="text-blue-500 underline">View the CMS Blog</a></p>' : ''}
+<div class="mt-8">
+    <img src="/assets/images/ninja-dance.gif" alt="Dancing Ninja" class="rounded-lg shadow-md max-w-xs" />
+</div>
+`);
+            console.log(' Created src/index.njk');
+        }
+    }
+
+    if (includeSonic) {
+        // generic.json
+        const genericPath = path.join(cwd, 'src/components/generic.json');
+        if (!fs.existsSync(genericPath)) {
+            fs.writeFileSync(genericPath, JSON.stringify({
+                name: "sonic.js",
+                apiUrl: "/v1/posts",
+                productionUrl: "${PROD_CMS_URL}",
+                locaLUrl: "http://localhost:3018",
+                indexPage: "blog",
+                postPage: "post"
+            }, null, 2));
+            console.log(' Created src/components/generic.json');
+        }
+
+        // Environment files
+        const envPath = path.join(cwd, '.env');
+        if (!fs.existsSync(envPath)) {
+            fs.writeFileSync(envPath, `PROD_CMS_URL=https://cms.basebrick.xyz\n`);
+            console.log(' Created .env file');
+        }
+
+        if (includeDemo) {
+            // Blog Listing
+            const blogPath = path.join(cwd, 'src/blog.njk');
+            if (!fs.existsSync(blogPath)) {
+                fs.writeFileSync(blogPath, `---
+title: Blog
+layout: base
+---
+<h1 class="text-3xl font-bold mb-6">Blog Posts</h1>
+<div class="grid gap-4">
+  {% for post in posts %}
+    <div class="p-4 bg-white shadow rounded">
+      <h2 class="text-xl font-semibold"><a href="/post/{{ post.slug }}.html" class="text-blue-600 hover:underline">{{ post.title }}</a></h2>
+    </div>
+  {% else %}
+    <p>No posts found. Ensure your CMS is running and the API URL is correct.</p>
+  {% endfor %}
+</div>
+<p class="mt-6"><a href="/index.html" class="text-blue-500 underline">&larr; Back home</a></p>`);
+                console.log(' Created src/blog.njk');
+            }
+
+            // Post detail
+            const postPath = path.join(cwd, 'src/post.njk');
+            if (!fs.existsSync(postPath)) {
+                fs.writeFileSync(postPath, `---
+layout: base
+url: post.title
+---
+<article>
+  <h1 class="text-4xl font-bold mb-4">{{ post.title }}</h1>
+  <div class="prose">
+    {{ post.body | safe }}
+  </div>
+  <p class="mt-8"><a href="/blog.html" class="text-blue-500 underline">&larr; Back to blog</a></p>
+</article>`);
+                console.log(' Created src/post.njk');
+            }
+        }
+    }
+
+    console.log('\nConfiguring project dependencies...');
+    const pkgPath = path.join(cwd, 'package.json');
+    let pkg = {
+        name: projectName,
+        version: "1.0.0",
+        type: "module",
+        scripts: {
+            build: "bricklayer",
+            "build:prod": "bricklayer --prod"
+        },
+        dependencies: {},
+        devDependencies: {
+            "basebrick-bricklayer": "^1.0.0",
+            "@tailwindcss/cli": "^4.0.0",
+            "tailwindcss": "^4.0.0"
+        }
+    };
+    if (githubRepo) {
+        pkg.repository = { type: "git", url: githubRepo };
+    }
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const existing = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            pkg = { ...pkg, ...existing };
+            pkg.dependencies = { ...pkg.dependencies, ...existing.dependencies };
+            pkg.devDependencies = { ...pkg.devDependencies, ...existing.devDependencies };
+        } catch(e) {}
+    }
+
+    if (includeCloudflare) {
+        console.log('\nConfiguring Cloudflare...');
+        pkg.scripts.start = "wrangler dev";
+        pkg.scripts["deploy:preview"] = "npm run build:prod && wrangler deploy --env preview";
+        pkg.scripts["deploy:prod"] = "npm run build:prod && wrangler deploy";
+        pkg.devDependencies.wrangler = "^3.0.0";
+        
+        const wranglerPath = path.join(cwd, 'wrangler.toml');
+        if (!fs.existsSync(wranglerPath)) {
+            fs.writeFileSync(wranglerPath, `name = "${projectName}"\ncompatibility_date = "2024-05-12"\nmain = "api/worker.js"\n\n[assets]\ndirectory = "./public"\n\n[env.preview]\nname = "${projectName}-preview"\n`);
+            console.log(' Created wrangler.toml');
+        }
+
+        const apiDir = path.join(cwd, 'api');
+        if (!fs.existsSync(apiDir)) {
+            fs.mkdirSync(apiDir, { recursive: true });
+            console.log(' Created api/');
+        }
+
+        if (cfFramework === 'hono') {
+            pkg.dependencies.hono = "^4.3.0";
+            const workerPath = path.join(cwd, 'api/worker.js');
+            if (!fs.existsSync(workerPath)) {
+                fs.writeFileSync(workerPath, `import { Hono } from 'hono';\n\nconst app = new Hono();\n\napp.get('/api', (c) => {\n  return c.json({ message: 'Hello from Hono API!' });\n});\n\nexport default app;\n`);
+                console.log(' Created api/worker.js (Hono API)');
+            }
+        } else {
+            const workerPath = path.join(cwd, 'api/worker.js');
+            if (!fs.existsSync(workerPath)) {
+                fs.writeFileSync(workerPath, `export default {\n  async fetch(request, env, ctx) {\n    const url = new URL(request.url);\n    if (url.pathname.startsWith('/api')) {\n      return new Response(JSON.stringify({ message: 'Hello from Vanilla API!' }), { headers: { 'Content-Type': 'application/json' } });\n    }\n    return new Response('Not found', { status: 404 });\n  }\n};\n`);
+                console.log(' Created api/worker.js (Vanilla API)');
+            }
+        }
+    }
+    
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    console.log(' Created/Updated package.json');
+
+    if (pullSonic) {
+        console.log('\nPulling Sonic JS CMS into cms/ directory...');
+        try {
+            if (fs.existsSync(path.join(cwd, 'cms'))) {
+                console.log(' Directory cms/ already exists, skipping clone.');
+            } else {
+                execSync('git clone https://github.com/lane711/sonicjs.git cms', { stdio: 'inherit', cwd });
+                fs.rmSync(path.join(cwd, 'cms', '.git'), { recursive: true, force: true });
+                console.log(' Successfully cloned Sonic JS CMS.');
+            }
+        } catch (e) {
+            console.error(' Failed to pull Sonic JS:', e.message);
+        }
+    }
+
+    const gitignorePath = path.join(cwd, '.gitignore');
+    if (!fs.existsSync(gitignorePath)) {
+        fs.writeFileSync(gitignorePath, `node_modules/\n.DS_Store\n.env\n.dev.vars\n.wrangler/\n`);
+        console.log(' Created .gitignore');
+    }
+
+    if (createDeploy) {
+        console.log('\nConfiguring GitHub Actions deploy.yml...');
+        const githubDir = path.join(cwd, '.github', 'workflows');
+        if (!fs.existsSync(githubDir)) {
+            fs.mkdirSync(githubDir, { recursive: true });
+            console.log(' Created .github/workflows/');
+        }
+
+        let deploySteps = `      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        run: npm install
+`;
+
+        if (includeCloudflare) {
+            deploySteps += `
+      - name: Build and Deploy Site
+        run: npm run deploy:prod
+        env:
+          CLOUDFLARE_API_TOKEN: \${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: \${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+`;
+        } else {
+            deploySteps += `
+      - name: Build Site
+        run: npm run build:prod
+`;
+        }
+
+        if (includeSonic && pullSonic) {
+            deploySteps += `
+      - name: Install CMS dependencies
+        run: npm install
+        working-directory: ./cms
+
+      - name: Deploy Sonic CMS
+        run: npm run deploy
+        working-directory: ./cms
+        env:
+          CLOUDFLARE_API_TOKEN: \${{ secrets.CLOUDFLARE_API_TOKEN }}
+          CLOUDFLARE_ACCOUNT_ID: \${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+`;
+        }
+        const deployYmlContent = `name: Deploy
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+${deploySteps}`;
+
+        const deployYmlPath = path.join(githubDir, 'deploy.yml');
+        fs.writeFileSync(deployYmlPath, deployYmlContent);
+        console.log(' Created .github/workflows/deploy.yml');
+        if (includeCloudflare || (includeSonic && pullSonic)) {
+            console.log(' NOTE: Make sure to add CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID to your GitHub repository secrets.');
+        }
+    }
+
+    const basebrickConfigPath = path.join(cwd, '.basebrick.config');
+    const basebrickConfig = {
+        projectName,
+        githubRepo,
+        includeDemo,
+        includeSonic,
+        pullSonic,
+        includeCloudflare,
+        cfFramework,
+        createDeploy
+    };
+    fs.writeFileSync(basebrickConfigPath, JSON.stringify(basebrickConfig, null, 2));
+    console.log(' Created .basebrick.config');
+
+    console.log('\n✅ Initialization complete!');
+    console.log('\nNext steps:');
+    console.log('  1. Run `npm install` to install dependencies');
+    console.log('  2. Run `npm run build` to build the static site (or `npm run build:prod` for production)');
+    if (includeCloudflare) {
+        console.log('  3. Run `npm run start` to test your Cloudflare Worker locally');
+        console.log('  4. Run `npm run deploy:preview` to deploy to a Cloudflare preview environment');
+        console.log('  5. Run `npm run deploy:prod` to deploy to Cloudflare production\n');
+    } else {
+        console.log('');
+    }
+
+    rl.close();
+}

package/bin/manage.js

@@ -0,0 +1,88 @@
+import fs from 'fs';
+import path from 'path';
+import readline from 'readline';
+import os from 'os';
+
+const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout
+});
+
+const question = (query) => new Promise((resolve) => rl.question(query, resolve));
+
+export async function manageProject(cwd) {
+    const localConfigPath = path.join(cwd, '.basebrick.config');
+    
+    if (!fs.existsSync(localConfigPath)) {
+        console.error('❌ No .basebrick.config found in this directory. Run `bricklayer init` first.');
+        rl.close();
+        return;
+    }
+
+    const globalConfigPath = path.join(os.homedir(), '.bricklayer-manager.json');
+    let managerConfig = {};
+
+    if (fs.existsSync(globalConfigPath)) {
+        try {
+            managerConfig = JSON.parse(fs.readFileSync(globalConfigPath, 'utf8'));
+        } catch (e) {
+            console.error('Warning: Could not parse global manager config.');
+        }
+    }
+
+    if (!managerConfig.url) {
+        const urlRaw = await question('What is your Bricklayer Manager URL? ');
+        managerConfig.url = urlRaw.trim();
+    }
+
+    if (!managerConfig.token) {
+        const tokenRaw = await question('What is your transfer token? ');
+        managerConfig.token = tokenRaw.trim();
+    }
+
+    if (!managerConfig.url || !managerConfig.token) {
+        console.error('❌ URL and token are required.');
+        rl.close();
+        return;
+    }
+
+    // Save for next time
+    fs.writeFileSync(globalConfigPath, JSON.stringify(managerConfig, null, 2));
+
+    let projectConfig;
+    try {
+        projectConfig = JSON.parse(fs.readFileSync(localConfigPath, 'utf8'));
+    } catch(e) {
+        console.error('❌ Could not parse .basebrick.config');
+        rl.close();
+        return;
+    }
+
+    console.log(`\nSending project configuration to ${managerConfig.url}...`);
+
+    let endpoint = managerConfig.url;
+    if (!endpoint.startsWith('http')) {
+        endpoint = `https://${endpoint}`;
+    }
+
+    try {
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Authorization': `Bearer ${managerConfig.token}`
+            },
+            body: JSON.stringify(projectConfig)
+        });
+
+        if (response.ok) {
+            console.log('✅ Successfully registered with Bricklayer Manager!');
+        } else {
+            console.error(`❌ Manager returned error: ${response.status} ${response.statusText}`);
+        }
+    } catch(e) {
+        console.error(`❌ Failed to connect to manager: ${e.message}`);
+    }
+
+    rl.close();
+}

package/history.md

@@ -1,5 +1,20 @@
 # Version History
 
+## 1.1.0 (May 2026)
+
+- **Interactive Scaffolding**: Added `bricklayer init` command to scaffold new projects via an interactive wizard, generating `.gitignore` and `.basebrick.config` automatically.
+- **Automated Deployments**: Scaffolding now optionally generates a tailored GitHub Actions `deploy.yml` workflow that orchestrates the site (and an isolated Sonic JS worker, if configured).
+- **Cloudflare Native**: Integrated native Cloudflare Workers support (Vanilla or Hono) and static asset routing into the scaffolding workflow, automatically generating `deploy:prod` and `deploy:preview` environments in `wrangler.toml` and `package.json`.
+- **Automated Sonic JS CMS**: Scaffolding now supports automatically cloning the Sonic JS repository into a local `/cms` folder and binding the frontend.
+- **Centralized Management**: Added `bricklayer manage` command to securely register and sync local `.basebrick.config` data with a central Manager API.
+- **Asset Enhancements**: The init command now automatically generates `src/assets/images` and downloads starter media directly.
+- **Enhanced Logging**: Replaced intimidating Node.js fetch stack traces with clean, user-friendly warnings when remote CMS connections fail.
+- **CLI Helpers**: The CLI help menu and post-init success output now clearly document the generated `npm run` workflow commands.
+
+## 1.0.1 (May 2026)
+
+- **Environment Variables**: Added native support for loading `.env` and `.dev.vars` (Cloudflare Pages) files. Environment variables are now globally accessible in Nunjucks templates via the `env` object and can be interpolated directly within `generic.json` configurations.
+
 ## 1.0.0 (May 2026)
 
 - **Initial Extraction**: Extracted the build pipeline from the BaseBrick frontend into a standalone, reusable Node module (`bricklayer`).

package/index.js

@@ -5,9 +5,34 @@ import nunjucks from 'nunjucks';
 import matter from 'gray-matter';
 import { execSync } from 'child_process';
 
+// Simple environment variable loader (.env and .dev.vars)
+function loadEnv(cwd) {
+    const envFiles = ['.env', '.dev.vars'];
+    for (const file of envFiles) {
+        const envPath = path.join(cwd, file);
+        if (fs.existsSync(envPath)) {
+            const lines = fs.readFileSync(envPath, 'utf8').split('\n');
+            for (const line of lines) {
+                const match = line.match(/^\s*([\w.-]+)\s*=\s*(.*)?\s*$/);
+                if (match) {
+                    const key = match[1];
+                    let value = match[2] || '';
+                    value = value.replace(/(^['"]|['"]$)/g, '').trim();
+                    if (process.env[key] === undefined) {
+                        process.env[key] = value;
+                    }
+                }
+            }
+        }
+    }
+}
+
 export async function buildSite(options = {}) {
     const cwd = options.cwd || process.cwd();
     const isProd = options.isProd || false;
+    
+    // Load environment variables from .env file
+    loadEnv(cwd);
 
     // Conditionally import minifiers so build doesn't fail if they aren't installed yet
     let minifyHtml;
@@ -102,6 +127,9 @@ export async function buildSite(options = {}) {
         autoescape: false,
         noCache: true
     });
+    
+    // Support environment variables in Nunjucks templates
+    env.addGlobal('env', process.env);
 
     // Fetch remote content based on generic.json
     const genericJsonPath = path.join(config.srcDir, 'components', 'generic.json');
@@ -110,7 +138,12 @@ export async function buildSite(options = {}) {
 
     if (fs.existsSync(genericJsonPath)) {
         try {
-            cmsConfig = JSON.parse(fs.readFileSync(genericJsonPath, 'utf-8'));
+            let jsonString = fs.readFileSync(genericJsonPath, 'utf-8');
+            
+            // Substitute environment variables in the format ${VAR_NAME}
+            jsonString = jsonString.replace(/\$\{([^}]+)\}/g, (_, varName) => process.env[varName] || '');
+            
+            cmsConfig = JSON.parse(jsonString);
             const baseUrl = isProd ? cmsConfig.productionUrl : cmsConfig.locaLUrl;
             const apiUrl = `${baseUrl.replace(/\/$/, '')}/${cmsConfig.apiUrl.replace(/^\//, '')}`;
             
@@ -157,7 +190,11 @@ export async function buildSite(options = {}) {
             
             console.log(`Successfully fetched ${remoteData.length} items from remote source.`);
         } catch (e) {
-            console.error('Error fetching remote content:', e);
+            if ((e.cause && e.cause.code === 'ECONNREFUSED') || e.message.includes('fetch failed')) {
+                console.warn(`\n⚠️  CMS Not Found: Could not connect to remote API. Make sure your CMS is running.\n`);
+            } else {
+                console.error('Error fetching remote content:', e.message || e);
+            }
         }
     }
 
@@ -244,7 +281,7 @@ export async function buildSite(options = {}) {
     console.log('Building Tailwind CSS...');
     try {
         const tailwindArgs = isProd ? '--minify' : '';
-        execSync(`npx tailwindcss -i "${config.css.input}" -o "${config.css.output}" ${tailwindArgs}`, { stdio: 'inherit' });
+        execSync(`npx @tailwindcss/cli -i "${config.css.input}" -o "${config.css.output}" ${tailwindArgs}`, { stdio: 'inherit' });
         console.log('Tailwind CSS built successfully!');
     } catch (error) {
         console.error('Failed to build Tailwind CSS:', error);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "basebrick-bricklayer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "BaseBrick static site generator (JamBrick)",
   "main": "index.js",

package/todo.md

@@ -0,0 +1,3 @@
+add preview instances for cloudflare
+add the ability to add to the manager, it will ask you manager code and token
+    the manager is an idea i have had to manage sites he will send a payload to it with git url, sitemap, settings and this will let you manage the distrubation so everytime we build a new site it can be managed in the