vending-mocha 0.1.0

package/bin/cli.js

@@ -0,0 +1,441 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+import path from 'path';
+import { execSync } from 'child_process';
+import { fileURLToPath } from 'url';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import figlet from 'figlet';
+import { Command } from 'commander';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const IGNORE_FILES = [
+    'node_modules',
+    '.git',
+    '.github',
+    'dist',
+    'docs',
+    'bin',
+    'package-lock.json',
+    '.DS_Store'
+];
+
+function getAsciiArt() {
+    const cup = `
+  ( (
+   ) )
+.______.
+|      |]
+\\      /
+ \`----'
+    `;
+
+    // 1. Generate Plain Text
+    const vending = figlet.textSync('Vending', { horizontalLayout: 'full' });
+    const mocha = figlet.textSync('Mocha', { horizontalLayout: 'full' });
+
+    // 2. Prepare Lines
+    const vendingLines = vending.split('\n');
+    const mochaLines = mocha.split('\n');
+    const cupLines = cup.split('\n').filter(line => line.trim().length > 0);
+
+    // 3. Calculate Layout Dimensions
+    const mochaWidth = Math.max(...mochaLines.map(line => line.length));
+
+    // Combine Mocha + Cup logic to find total max width
+    // We need to see how wide the bottom section (Mocha + Cup) is vs the top section (Vending)
+
+    // Bottom Section Width
+    let maxBottomWidth = 0;
+    const bottomHeight = Math.max(mochaLines.length, cupLines.length);
+    for (let i = 0; i < bottomHeight; i++) {
+        const mLen = (mochaLines[i] || '').length;
+        const cLen = (cupLines[i] || '').length;
+        // Mocha + 3 spaces + Cup
+        const lineLen = Math.max(mLen, mochaWidth) + 3 + cLen;
+        if (lineLen > maxBottomWidth) maxBottomWidth = lineLen;
+    }
+
+    // Top Section Width
+    const maxTopWidth = Math.max(...vendingLines.map(line => line.length));
+
+    // Overall Max Width
+    const contentWidth = Math.max(maxTopWidth, maxBottomWidth);
+
+    // 4. Construct Art with Border
+    const lines = [];
+
+    // Top Border
+    // Width = contentWidth + 2 spaces padding on each side = contentWidth + 4 ?
+    // Let's stick to the design: │  Content  │ (2 spaces padding)
+    // So inner width = contentWidth + 4.
+    // Border line length = contentWidth + 4.
+
+    const borderLine = '─'.repeat(contentWidth + 4);
+    lines.push(chalk.cyan('╭' + borderLine + '╮'));
+
+    // Helper to push a bordered line
+    const pushLine = (str, strLength) => {
+        const padding = ' '.repeat(contentWidth - strLength);
+        // We manually construct the line: │  <str> <padding>  │
+        // But <str> might contain ANSI codes, so we need to be careful not to count them in length, 
+        // which is why we pass strLength explicitly.
+        lines.push(chalk.cyan('│  ') + str + padding + chalk.cyan('  │'));
+    };
+
+    // Render Vending (Top)
+    for (const line of vendingLines) {
+        pushLine(chalk.cyan(line), line.length);
+    }
+
+    // Gap? The user art in previous turn didn't have a gap, but it looks better with one maybe? 
+    // The previous output didn't have a huge gap. Let's not add extra vertical gap to keep it compact unless needed.
+    // Actually, let's add one empty line for separation if it looks cramped. 
+    // Figlet art usually has some whitespace. Let's mimic the test_border.js which didn't verify vertical spacing explicitly but looked okay.
+    // I'll skip explicit vertical gap to match previous compactness, unless I see reason to add it.
+
+    // Render Mocha + Cup (Bottom)
+    for (let i = 0; i < bottomHeight; i++) {
+        const mLine = mochaLines[i] || '';
+        const cLine = cupLines[i] || '';
+
+        // Pad mocha part to mochaWidth
+        const mPad = ' '.repeat(mochaWidth - mLine.length);
+
+        const combinedStr = chalk.cyan(mLine) + mPad + '   ' + chalk.yellow(cLine);
+        const combinedLen = mochaWidth + 3 + cLine.length;
+
+        pushLine(combinedStr, combinedLen);
+    }
+
+    // Bottom Border
+    lines.push(chalk.cyan('╰' + borderLine + '╯'));
+    lines.push(''); // Final newline
+
+    return lines.join('\n');
+}
+
+function copyRecursiveSync(src, dest, destRoot) {
+    const exists = fs.existsSync(src);
+    const stats = exists && fs.statSync(src);
+    const isDirectory = exists && stats.isDirectory();
+    const basename = path.basename(src);
+
+    if (IGNORE_FILES.includes(basename)) {
+        return;
+    }
+
+    // Prevent infinite recursion if destination is inside source
+    if (destRoot && path.resolve(src) === path.resolve(destRoot)) {
+        return;
+    }
+
+    if (isDirectory) {
+        if (!fs.existsSync(dest)) {
+            fs.mkdirSync(dest);
+        }
+
+        fs.readdirSync(src).forEach((childItemName) => {
+            copyRecursiveSync(
+                path.join(src, childItemName),
+                path.join(dest, childItemName),
+                destRoot
+            );
+        });
+    } else {
+        fs.copyFileSync(src, dest);
+    }
+}
+
+function updateSiteConfig(projectDir, config) {
+    const configPath = path.join(projectDir, 'src', 'site.config.ts');
+    if (fs.existsSync(configPath)) {
+        let content = fs.readFileSync(configPath, 'utf8');
+
+        // Update title
+        if (config.title) {
+            content = content.replace(/title:\s*".*?"/, `title: "${config.title}"`);
+        }
+
+        // Update URL
+        if (config.url) {
+            content = content.replace(/url:\s*".*?"/, `url: "${config.url}"`);
+        }
+
+        fs.writeFileSync(configPath, content, 'utf8');
+    }
+}
+
+function updatePackageJson(projectDir, config) {
+    const pkgPath = path.join(projectDir, 'package.json');
+    if (fs.existsSync(pkgPath)) {
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            pkg.name = config.projectName;
+            pkg.version = '0.0.0';
+            pkg.description = config.description || `My new blog built with vending-mocha`;
+
+            // Remove the bin entry so the new project doesn't try to be a CLI itself
+            if (pkg.bin) {
+                delete pkg.bin;
+            }
+
+            // Remove CLI-specific dependencies from the new project
+            if (pkg.dependencies) {
+                delete pkg.dependencies['figlet'];
+                delete pkg.dependencies['inquirer'];
+                delete pkg.dependencies['chalk'];
+                delete pkg.dependencies['commander'];
+            }
+
+            fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+        } catch (e) {
+            console.warn(chalk.yellow('Failed to update package.json:', e.message));
+        }
+    }
+}
+
+async function handleNew(projectName, options) {
+    console.clear();
+    console.log(getAsciiArt());
+
+    // Interactive Prompts
+    const questions = [];
+
+    if (!projectName) {
+        questions.push({
+            type: 'input',
+            name: 'projectName',
+            message: 'What is the name of your new project?',
+            default: 'my-vending-mocha-blog',
+            validate: (input) => {
+                if (/^([a-z0-9\-\_\.]+)$/.test(input)) return true;
+                return 'Project name may only include letters, numbers, underscores and hashes.';
+            }
+        });
+    }
+
+    questions.push({
+        type: 'input',
+        name: 'title',
+        message: 'What is the title of your blog?',
+        default: (answers) => answers.projectName || projectName
+    });
+
+    questions.push({
+        type: 'input',
+        name: 'url',
+        message: 'What is the production URL of your blog?',
+        default: (answers) => `https://example.com/${answers.projectName || projectName}`
+    });
+
+    questions.push({
+        type: 'input',
+        name: 'description',
+        message: 'Write a short description for your blog:',
+        default: 'A personal blogging framework for developers.'
+    });
+
+    const answers = await inquirer.prompt(questions);
+
+    // Merge args and answers
+    const config = {
+        projectName: projectName || answers.projectName,
+        title: answers.title,
+        url: answers.url,
+        description: answers.description
+    };
+
+    const currentDir = process.cwd();
+    const projectDir = path.join(currentDir, config.projectName);
+    const templateDir = path.join(__dirname, '..');
+
+    if (fs.existsSync(projectDir)) {
+        console.error(chalk.red(`Directory ${config.projectName} already exists.`));
+        process.exit(1);
+    }
+
+    console.log(chalk.blue(`\nCreating new project in ${projectDir}...\n`));
+
+    try {
+        // 1. Copy files
+        const spinner = { start: () => console.log(chalk.gray('Copying template files...')), succeed: () => console.log(chalk.green('✔ Files copied')) }; // Simple mock spinner
+        spinner.start();
+        copyRecursiveSync(templateDir, projectDir, projectDir);
+        spinner.succeed();
+
+        // 2. Update config
+        console.log(chalk.gray('Updating configuration...'));
+        updateSiteConfig(projectDir, config);
+        console.log(chalk.green('✔ Configuration updated'));
+
+        // 3. Update package.json
+        console.log(chalk.gray('Updating package.json...'));
+        updatePackageJson(projectDir, config);
+        console.log(chalk.green('✔ package.json updated'));
+
+        // 4. Initialize Git
+        console.log(chalk.gray('Initializing git repository...'));
+        try {
+            execSync('git init', { cwd: projectDir, stdio: 'ignore' });
+            execSync('git add .', { cwd: projectDir, stdio: 'ignore' });
+            execSync('git commit -m "Initial commit from vending-mocha"', { cwd: projectDir, stdio: 'ignore' });
+            console.log(chalk.green('✔ Git initialized'));
+        } catch (e) {
+            console.warn(chalk.yellow('⚠ Failed to initialize git repository (git might not be installed).'));
+        }
+
+        console.log(chalk.green(`\nSuccess! Created ${config.projectName} at ${projectDir}`));
+        console.log('\nInside that directory, you can run:');
+        console.log(chalk.cyan(`  cd ${config.projectName}`));
+        console.log(chalk.cyan('  npm install'));
+        console.log(chalk.cyan('  npm run dev'));
+        console.log('\nHappy blogging!');
+
+    } catch (error) {
+        console.error(chalk.red('Failed to create project:', error));
+        process.exit(1);
+    }
+}
+
+async function handleUpgrade() {
+    console.clear();
+    console.log(getAsciiArt());
+
+    const currentDir = process.cwd();
+    const templateDir = path.join(__dirname, '..');
+
+    // 1. Verify it is a vending-mocha project
+    const siteConfigPath = path.join(currentDir, 'src', 'site.config.ts');
+    const localPkgPath = path.join(currentDir, 'package.json');
+
+    if (!fs.existsSync(siteConfigPath) || !fs.existsSync(localPkgPath)) {
+        console.error(chalk.red('Error: Current directory does not appear to be a vending-mocha project.'));
+        console.error(chalk.yellow('Ensure you are in the root of your project (containing package.json and src/site.config.ts).'));
+        process.exit(1);
+    }
+
+    console.log(chalk.yellow('WARNING: This will overwrite project files to the latest version of vending-mocha.'));
+    console.log(chalk.yellow('Your content (posts/, projects/) and configuration (src/site.config.ts) will be preserved.'));
+    console.log(chalk.yellow('Please ensure you have committed your changes before proceeding.'));
+
+    const { proceed } = await inquirer.prompt([
+        {
+            type: 'confirm',
+            name: 'proceed',
+            message: 'Are you sure you want to upgrade?',
+            default: false
+        }
+    ]);
+
+    if (!proceed) {
+        console.log(chalk.blue('Upgrade cancelled.'));
+        process.exit(0);
+    }
+
+    console.log(chalk.blue('\nUpgrading project...\n'));
+
+    try {
+        // 2. Copy files with exclusions
+        const upgradeIgnore = [
+            ...IGNORE_FILES,
+            'posts',
+            'projects',
+            'src/site.config.ts', // Important: Preserve config
+            'package.json'        // We handle this separately
+        ];
+
+        function copyUpgradeSync(src, dest) {
+            const basename = path.basename(src);
+            const relPath = path.relative(templateDir, src);
+
+            if (upgradeIgnore.includes(basename) || upgradeIgnore.includes(relPath)) {
+                return;
+            }
+
+            // Also ignore if it is exactly the file we want to skip (normalized)
+            if (relPath === 'src/site.config.ts') return;
+
+            // Prevent infinite recursion: if src is the current directory (destination), skip it
+            if (path.resolve(src) === path.resolve(currentDir)) {
+                return;
+            }
+
+            const exists = fs.existsSync(src);
+            const stats = exists && fs.statSync(src);
+            const isDirectory = exists && stats.isDirectory();
+
+            if (isDirectory) {
+                if (!fs.existsSync(dest)) {
+                    fs.mkdirSync(dest);
+                }
+                fs.readdirSync(src).forEach((child) => {
+                    copyUpgradeSync(path.join(src, child), path.join(dest, child));
+                });
+            } else {
+                fs.copyFileSync(src, dest);
+            }
+        }
+
+        const spinner = { start: () => console.log(chalk.gray('Updating core files...')), succeed: () => console.log(chalk.green('✔ Core files updated')) };
+        spinner.start();
+        copyUpgradeSync(templateDir, currentDir);
+        spinner.succeed();
+
+        // 3. Merge package.json
+        console.log(chalk.gray('Merging package.json...'));
+        const localPkg = JSON.parse(fs.readFileSync(localPkgPath, 'utf8'));
+        const templatePkg = JSON.parse(fs.readFileSync(path.join(templateDir, 'package.json'), 'utf8'));
+
+        // Update scripts
+        localPkg.scripts = { ...localPkg.scripts, ...templatePkg.scripts };
+
+        // Update dependencies (add new ones, update versions)
+        localPkg.dependencies = { ...localPkg.dependencies, ...templatePkg.dependencies };
+        localPkg.devDependencies = { ...localPkg.devDependencies, ...templatePkg.devDependencies };
+
+        // Ensure we remove CLI deps if they somehow crept in or strictly enforce clean deps
+        if (localPkg.dependencies) {
+            delete localPkg.dependencies['figlet'];
+            delete localPkg.dependencies['inquirer'];
+            delete localPkg.dependencies['chalk'];
+            delete localPkg.dependencies['commander'];
+        }
+
+        fs.writeFileSync(localPkgPath, JSON.stringify(localPkg, null, 2));
+        console.log(chalk.green('✔ package.json merged'));
+
+        console.log(chalk.green('\nUpgrade complete!'));
+        console.log(chalk.cyan('You may need to run `npm install` to update dependencies.'));
+
+    } catch (error) {
+        console.error(chalk.red('Failed to upgrade project:', error));
+        process.exit(1);
+    }
+}
+
+const program = new Command();
+
+program
+    .name('vending-mocha')
+    .description('A personal blogging framework for developers')
+    .version('0.0.0')
+    .addHelpText('before', getAsciiArt());
+
+program.command('new')
+    .description('Create a new Vending Mocha project')
+    .argument('[project-name]', 'Name of the project directory')
+    .action(handleNew);
+
+program.command('upgrade')
+    .description('Upgrade an existing Vending Mocha project')
+    .action(handleUpgrade);
+
+program.parse(process.argv);
+
+if (!process.argv.slice(2).length) {
+    program.outputHelp();
+}

package/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist', 'docs']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

package/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" href="/favicon.ico" type="image/x-icon" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!--app-head-->
+</head>
+
+<body>
+  <div id="root"><!--app-html--></div>
+  <script type="module" src="/src/entry-client.tsx"></script>
+</body>
+
+</html>

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "vending-mocha",
+  "description": "A personal blogging framework for developers.",
+  "version": "0.1.0",
+  "license": "Apache-2.0",
+  "type": "module",
+  "bin": {
+    "vending-mocha": "./bin/cli.js"
+  },
+  "scripts": {
+    "dev": "npm run build:all && vite",
+    "build:client": "tsc -b && vite build --outDir docs",
+    "build:server": "tsc -b && vite build --ssr src/entry-server.tsx --outDir dist/server",
+    "prebuild": "node scripts/generate-posts-data.js && node scripts/generate-projects-data.js",
+    "build": "npm run prebuild && npm run build:client && npm run build:server && node prerender.js && node scripts/generate-rss.js",
+    "build:all": "npm run build && for d in projects/*; do if [ -d \"$d\" ]; then (cd \"$d\" && npm run build); fi; done",
+    "preview": "npm run build:all && vite preview --outDir docs"
+  },
+  "dependencies": {
+    "@types/react-syntax-highlighter": "15.5.13",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.3",
+    "date-fns": "^4.1.0",
+    "figlet": "^1.10.0",
+    "gray-matter": "^4.0.3",
+    "inquirer": "^13.2.5",
+    "lucide-react": "^0.564.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-helmet-async": "^2.0.5",
+    "react-markdown": "^10.1.0",
+    "react-router-dom": "^7.13.0",
+    "react-syntax-highlighter": "16.1.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1"
+  },
+  "overrides": {
+    "react-helmet-async": {
+      "react": "$react"
+    }
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "prettier": "^3.8.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

package/posts/customization-guide.md

@@ -0,0 +1,45 @@
+---
+title: "How to Customize Vending Mocha 🎨"
+date: "2026-02-17 03:00:00"
+summary: "A quick guide on how to update the configuration, styling, and content of your new blog."
+---
+
+## Customization Guide
+
+So you've cloned **Vending Mocha**. What's next? Here is a quick guide to making it your own.
+
+### 1. Update Configuration
+
+Open `src/site.config.ts` and update the following:
+
+- **title**: Your name or site title.
+- **description**: A short bio or site description.
+- **url**: Your website URL (used for SEO).
+- **theme**: Customize colors for light and dark modes.
+
+```typescript
+export const siteConfig = {
+    title: "My Awesome Blog",
+    // ...
+}
+```
+
+### 2. Add Your Projects
+
+Add new `.md` files with frontmatter to `/projects/` to add your projects.
+
+```markdown
+---
+title: "My Project"
+description: "What is it?"
+link: "https://github.com/..."
+status: "active" // active, dead, inactive
+weight: 5 // higher weight projects are displayed first
+---
+```
+
+### 3. Write Posts
+
+Just add new `.md` files to `/posts/`. The filename becomes the slug (e.g., `/posts/my-post.md` -> `/post/my-post`).
+
+That's it! You're ready to deploy. 🚀

package/posts/deploy-to-github-pages.md

@@ -0,0 +1,109 @@
+---
+title: "Deploying to GitHub Pages 🚀"
+date: "2026-02-17 04:00:00"
+summary: "A step-by-step guide to deploying your Vending Mocha blog to GitHub Pages using GitHub Actions."
+---
+
+Deploying your Vending Mocha blog to GitHub Pages is straightforward. We'll use GitHub Actions to automatically build and deploy your site whenever you push changes to the `main` branch.
+
+## Prerequisites
+
+1.  A GitHub account.
+2.  A Vending Mocha project pushed to a GitHub repository.
+
+## Step 1: Configure Your Site
+
+Open `src/site.config.ts` and ensure the `url` property matches your GitHub Pages URL.
+
+If you are using a custom domain:
+```typescript
+export const siteConfig = {
+    title: "My Blog",
+    url: "https://www.example.com", // Your custom domain
+    // ...
+};
+```
+
+If you are using the default GitHub Pages URL (`username.github.io/repo-name`):
+```typescript
+export const siteConfig = {
+    title: "My Blog",
+    url: "https://username.github.io/repo-name", // REPLACE with your actual URL
+    // ...
+};
+```
+
+> **Important:** The `url` setting is critical for asset loading, especially if your site is hosted in a subdirectory (like `/repo-name/`).
+
+## Step 2: Create the GitHub Actions Workflow
+
+Create a new file in your repository at `.github/workflows/deploy.yml` and paste the following content:
+
+```yaml
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches:
+      - main
+    paths-ignore:
+      - 'docs/**' # Don't trigger if only the output folder changes
+
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build project
+        run: npm run build:all
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./docs
+          cname: your-domain.com # Optional - if you are using a custom domain
+```
+
+This workflow does the following:
+1.  Triggers on every push to `main`.
+2.  Sets up Node.js.
+3.  Installs dependencies.
+4.  Builds your site (and any sub-projects).
+5.  Deploys the `docs` folder (the build output) to the `gh-pages` branch.
+
+## Step 3: Configure GitHub Pages Settings
+
+1.  Go to your repository on GitHub.
+2.  Navigate to **Settings** > **Pages**.
+3.  Under **Build and deployment**, select **Deploy from a branch**.
+4.  Under **Branch**, select `gh-pages` and ensure the folder is `/ (root)`.
+5.  Click **Save**.
+
+## Step 4: Push and Verify
+
+Commit and push your changes to GitHub:
+
+```bash
+git add .
+git commit -m "Add deployment workflow"
+git push origin main
+```
+
+Go to the **Actions** tab in your repository to watch the build progress. Once it completes (green checkmark), your site should be live at the URL you configured! 
+
+Happy blogging! ☕