vending-mocha 0.1.5 → 0.1.7

package/bin/cli.js

@@ -232,6 +232,39 @@ async function handleNew(projectName, options) {
         updatePackageJson(projectDir, config);
         console.log(chalk.green('✔ package.json updated'));
 
+        // 3. Create .gitignore (since npm pack ignores it)
+        const gitignorePath = path.join(projectDir, '.gitignore');
+        if (!fs.existsSync(gitignorePath)) {
+            const gitignoreContent = `# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+docs
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+`;
+            fs.writeFileSync(gitignorePath, gitignoreContent);
+            console.log(chalk.green('✔ .gitignore created'));
+        }
+
         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}`));
@@ -263,7 +296,7 @@ async function handleUpgrade() {
     }
 
     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('Your content (posts/, projects/, life/) 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([
@@ -329,6 +362,71 @@ async function handleUpgrade() {
         copyUpgradeSync(templateDir, currentDir);
         spinner.succeed();
 
+        // 2.5 Merge site.config.ts
+        try {
+            const userConfigPath = path.join(currentDir, 'src', 'site.config.ts');
+            const templateConfigPath = path.join(templateDir, 'src', 'site.config.ts');
+
+            if (fs.existsSync(userConfigPath) && fs.existsSync(templateConfigPath)) {
+                console.log(chalk.gray('Merging src/site.config.ts...'));
+                const templateConfigRaw = fs.readFileSync(templateConfigPath, 'utf8');
+                const tplMatch = templateConfigRaw.match(/([\s\S]*?)(export\s+const\s+siteConfig\s*=\s*)(\{[\s\S]*\});?\s*$/);
+
+                const userConfigRaw = fs.readFileSync(userConfigPath, 'utf8');
+                const userMatch = userConfigRaw.match(/([\s\S]*?)(export\s+const\s+siteConfig\s*=\s*)(\{[\s\S]*\});?\s*$/);
+
+                if (tplMatch && userMatch) {
+                    const templateConfig = eval('(' + tplMatch[3] + ')');
+                    const userPrefix = userMatch[1] + userMatch[2];
+                    const userConfig = eval('(' + userMatch[3] + ')');
+
+                    function mergeConfigs(target, source) {
+                        for (const key in source) {
+                            if (source[key] !== null && typeof source[key] === 'object' && !Array.isArray(source[key])) {
+                                if (!target[key] || typeof target[key] !== 'object') {
+                                    target[key] = {};
+                                }
+                                mergeConfigs(target[key], source[key]);
+                            } else if (target[key] === undefined) {
+                                target[key] = source[key];
+                            }
+                        }
+                        return target;
+                    }
+
+                    const mergedConfig = mergeConfigs(userConfig, templateConfig);
+
+                    function stringifyConfig(obj, indent = 0) {
+                        if (obj === undefined) return 'undefined';
+                        if (obj === null) return 'null';
+                        if (typeof obj === 'string') return JSON.stringify(obj);
+                        if (typeof obj === 'number' || typeof obj === 'boolean') return String(obj);
+                        if (Array.isArray(obj)) {
+                            if (obj.length === 0) return '[]';
+                            const items = obj.map(item => ' '.repeat(indent + 4) + stringifyConfig(item, indent + 4));
+                            return `[\n${items.join(',\n')}\n${' '.repeat(indent)}]`;
+                        }
+                        if (typeof obj === 'object') {
+                            const entries = Object.entries(obj);
+                            if (entries.length === 0) return '{}';
+                            const lines = entries.map(([key, value]) => {
+                                const safeKey = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/.test(key) ? key : JSON.stringify(key);
+                                return `${' '.repeat(indent + 4)}${safeKey}: ${stringifyConfig(value, indent + 4)}`;
+                            });
+                            return `{\n${lines.join(',\n')}\n${' '.repeat(indent)}}`;
+                        }
+                        return String(obj);
+                    }
+
+                    const outputStr = userPrefix + stringifyConfig(mergedConfig, 0) + ';\n';
+                    fs.writeFileSync(userConfigPath, outputStr);
+                    console.log(chalk.green('✔ src/site.config.ts merged'));
+                }
+            }
+        } catch (e) {
+            console.warn(chalk.yellow('Failed to merge src/site.config.ts: ' + e.message));
+        }
+
         // 3. Merge package.json
         console.log(chalk.gray('Merging package.json...'));
         const localPkg = JSON.parse(fs.readFileSync(localPkgPath, 'utf8'));

package/life/initial-version.md

@@ -0,0 +1,6 @@
+---
+title: "Initial Release"
+date: "2026-02-23"
+color: "#b3169bff"
+description: "Support for blog posts and projects"
+---

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vending-mocha",
   "description": "A personal blogging framework for developers.",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "license": "Apache-2.0",
   "type": "module",
   "bin": {
@@ -11,7 +11,7 @@
     "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",
+    "prebuild": "node scripts/generate-posts-data.js && node scripts/generate-projects-data.js && node scripts/generate-life-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"
@@ -54,4 +54,4 @@
     "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
   }
-}
+}

package/posts/life-in-weeks-feature.md

@@ -0,0 +1,37 @@
+---
+title: "Introducing the Life in Weeks Feature ⏳"
+date: "2026-02-22"
+summary: "A new feature to visualize your life in weeks"
+---
+
+**Life in Weeks** ⏳. This feature allows you to visualize your entire life, past, present, and future, as a grid of small squares 🟩, where each square represents a single week.
+
+This feature was deeply inspired by 💡: the **[Life in Weeks App](https://lifeweeks.app/)** which in turn was inspired by **[Tim Urban's Wait But Why](https://waitbutwhy.com/2014/05/life-weeks.html)**.
+
+## 📝 How to Add Life Events
+
+Adding your life events is simple! ✨ You just need to create Markdown files in your `life/` directory with the relevant frontmatter details. Here's a step-by-step guide:
+
+1.  📁 **Create a file:** In your project's root folder, find the `life/` directory (create it if it doesn't exist). Create a new `.md` file inside, such as `my-birthday.md`.
+2.  ✍️ **Add Frontmatter:** Open the file and add the following frontmatter at the top:
+
+```yaml
+---
+title: "Turned 18!"
+date: "2010-05-15" # for security reasons, we also support YYYY-MM format
+color: "#0d8427ff"
+description: "Finally an adult! Had a huge party with friends."
+tags:
+  - "milestone"
+  - "birthday"
+---
+```
+
+### 📋 Frontmatter Fields Explanation
+- 🏷️ **`title`**: The title of the event (shown on the timeline).
+- 📅 **`date`**: The date of the event in `YYYY-MM-DD` format (or just `YYYY-MM` if you only know the month).
+- 🎨 **`color`** *(optional)*: A custom hex color code for this specific event's block. Defaults to a dark gray (`#333333`) if not provided. The `site.config.ts` handles light/dark mode overrides if applicable!
+- 📜 **`description`** *(optional)*: A more detailed description of the event that will show up when lingering on the specific week.
+- 🔖 **`tags`** *(optional)*: A list of tags categorized for your event.
+
+Once you add the markdown file with these details, our build scripts will pick them up and update your Life in Weeks board automatically. 🚀

package/prerender.js

@@ -36,9 +36,17 @@ async function prerender() {
     }
     const normalizedBasePath = basePath;
 
-    // 3. Determine routes to prerender
     const routesToPrerender = ['/', '/projects/'];
 
+    // Add life page conditionally
+    const lifePath = toAbsolute('src/life.json');
+    if (fs.existsSync(lifePath)) {
+        const lifeEvents = JSON.parse(fs.readFileSync(lifePath, 'utf-8'));
+        if (lifeEvents.length > 0) {
+            routesToPrerender.push('/life/');
+        }
+    }
+
     // Add blog post routes and pagination
     const postsPath = toAbsolute('src/posts.json');
     if (fs.existsSync(postsPath)) {

package/scripts/generate-life-data.js

@@ -0,0 +1,46 @@
+import fs from 'fs';
+import path from 'path';
+import matter from 'gray-matter';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const lifeDir = path.join(__dirname, '../life');
+const outputFile = path.join(__dirname, '../src/life.json');
+
+function generateLifeData() {
+    if (!fs.existsSync(lifeDir)) {
+        console.log('No life directory found. Creating empty life.json');
+        fs.writeFileSync(outputFile, JSON.stringify([], null, 2));
+        return;
+    }
+
+    const files = fs.readdirSync(lifeDir).filter(file => file.endsWith('.md'));
+    const events = files.map(file => {
+        const filePath = path.join(lifeDir, file);
+        const content = fs.readFileSync(filePath, 'utf-8');
+        const { data } = matter(content);
+
+        if (!data.date) {
+            console.warn(`Warning: File ${file} is missing a 'date' in its frontmatter.`);
+        }
+
+        return {
+            title: data.title || '',
+            date: data.date ? (data.date.length === 7 ? `${data.date}-01` : data.date) : '',
+            isMonthOnly: data.date ? data.date.length === 7 : false,
+            color: data.color || '#333333',
+            description: data.description || '',
+            tags: data.tags || [],
+        };
+    }).filter(event => event.date);
+
+    // Sort by date ascending to find the earliest date
+    events.sort((a, b) => new Date(a.date) - new Date(b.date));
+
+    fs.writeFileSync(outputFile, JSON.stringify(events, null, 2));
+    console.log(`Generated ${events.length} life events in ${outputFile}`);
+}
+
+generateLifeData();

package/src/App.css

@@ -490,4 +490,82 @@ code {
 .prev-link:hover,
 .next-link:hover {
   text-decoration: underline;
+}
+
+/* Life in Weeks */
+.life-page {
+  text-align: center;
+}
+
+.life-visualization {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2rem;
+}
+
+.life-grid-container {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.life-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.life-week {
+  min-width: 18px;
+  height: 24px;
+  border: 1px solid var(--color-life-week, var(--color-border));
+  background-color: transparent;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.1s, border-color 0.2s;
+}
+
+
+.life-week.past {
+  background-color: var(--color-life-week, var(--color-border));
+}
+
+.life-week.event {
+  z-index: 1;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  padding: 0 8px;
+  border-radius: 6px;
+}
+
+.event-label-text {
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  color: #fff;
+}
+
+
+
+.empty-state {
+  margin-top: 4rem;
+  padding: 3rem;
+  background-color: var(--color-card-bg);
+  border-radius: 12px;
+  border: 1px dashed var(--color-border);
+}
+
+.life-section {
+  width: 100%;
+  margin-bottom: 1rem;
+}
+
+.life-section-title {
+  text-align: left;
+  font-size: 1.2rem;
+  color: var(--color-secondary);
+  margin: 0.5rem 0px;
 }

package/src/App.tsx

@@ -2,7 +2,9 @@ import { Routes, Route } from 'react-router-dom';
 import HomePage from './pages/HomePage';
 import BlogPost from './pages/BlogPost';
 import Projects from './pages/Projects';
+import Life from './pages/Life';
 import Footer from './components/Footer';
+import lifeData from './life.json';
 import './App.css';
 import { ThemeProvider } from './context/ThemeContext';
 
@@ -15,6 +17,7 @@ function AppContent() {
           <Route path="/page/:pageNumber" element={<HomePage />} />
           <Route path="/projects" element={<Projects />} />
           <Route path="/post/:slug" element={<BlogPost />} />
+          {lifeData.length > 0 && <Route path="/life" element={<Life />} />}
         </Routes>
       </div>
       <Footer />

package/src/components/SiteHeader.tsx

@@ -1,9 +1,10 @@
 import { useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Home, FolderGit2, Sun, Moon, Menu, X } from 'lucide-react';
+import { Home, FolderGit2, Sun, Moon, Menu, X, Activity } from 'lucide-react';
 import { useTheme } from '../context/ThemeContext';
 import { siteConfig } from '../site.config';
 import projects from '../projects.json';
+import lifeData from '../life.json';
 
 export default function SiteHeader({ showTitle = true }: { showTitle?: boolean }) {
     const { theme, toggleTheme } = useTheme();
@@ -27,6 +28,12 @@ export default function SiteHeader({ showTitle = true }: { showTitle?: boolean }
                             <span>Projects</span>
                         </Link>
                     )}
+                    {lifeData.length > 0 && (
+                        <Link to="/life" onClick={closeMenu}>
+                            <Activity size={18} />
+                            <span>Life</span>
+                        </Link>
+                    )}
                 </nav>
 
                 <div className="header-actions">

package/src/context/ThemeContext.tsx

@@ -34,6 +34,13 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
         root.style.setProperty('--color-card-bg', themeConfig.cardBackground);
         root.style.setProperty('--color-link-hover', themeConfig.linkHover);
         root.style.setProperty('--color-link', themeConfig.linkColor);
+
+        if (themeConfig.lifeWeek) {
+            root.style.setProperty('--color-life-week', themeConfig.lifeWeek);
+        } else {
+            root.style.removeProperty('--color-life-week');
+        }
+
         root.style.setProperty('--font-family', siteConfig.theme.fontFamily);
     }, [theme]);
 

package/src/life.json

@@ -0,0 +1,10 @@
+[
+  {
+    "title": "Initial Release",
+    "date": "2026-02-23",
+    "isMonthOnly": false,
+    "color": "#b3169bff",
+    "description": "Support for blog posts and projects",
+    "tags": []
+  }
+]

package/src/pages/Life.tsx

@@ -0,0 +1,144 @@
+import { useMemo } from 'react';
+import * as ReactHelmetAsync from 'react-helmet-async';
+const helmetAsync = ReactHelmetAsync as any;
+const { Helmet } = helmetAsync.default || helmetAsync;
+import { siteConfig } from '../site.config';
+import lifeData from '../life.json';
+import { differenceInWeeks, parseISO, addWeeks, format } from 'date-fns';
+import SiteHeader from '../components/SiteHeader';
+
+type LifeEvent = {
+    title?: string;
+    date: string;
+    color: string;
+    description: string;
+    tags: string[];
+    isMonthOnly?: boolean;
+};
+
+const WEEKS_IN_YEAR = 52;
+const YEARS_IN_LIFE = 100;
+const TOTAL_WEEKS = WEEKS_IN_YEAR * YEARS_IN_LIFE;
+
+const LIFE_SECTIONS = [
+    { label: 'Childhood', startYear: 0, endYear: 13 },
+    { label: 'Teen Years', startYear: 13, endYear: 20 },
+    { label: '20s', startYear: 20, endYear: 30 },
+    { label: '30s', startYear: 30, endYear: 40 },
+    { label: '40s', startYear: 40, endYear: 50 },
+    { label: '50s', startYear: 50, endYear: 60 },
+    { label: '60s', startYear: 60, endYear: 70 },
+    { label: '70s', startYear: 70, endYear: 80 },
+    { label: '80s', startYear: 80, endYear: 90 },
+    { label: '90s', startYear: 90, endYear: 100 },
+];
+
+export default function Life() {
+    const events: LifeEvent[] = lifeData;
+
+    // The earliest date sets week 0
+    const birthDateStr = events.length > 0 ? events[0].date : null;
+    const birthDate = birthDateStr ? parseISO(birthDateStr) : null;
+    const currentDate = new Date();
+
+    const currentWeekIndex = birthDate ? Math.max(0, differenceInWeeks(currentDate, birthDate)) : 0;
+
+    const weeks = useMemo(() => {
+        const grid = Array.from({ length: TOTAL_WEEKS }, () => ({
+            isPast: false,
+            events: [] as LifeEvent[],
+            date: null as Date | null,
+            index: 0
+        }));
+
+        if (!birthDate) return grid;
+
+        // Populate base week info
+        for (let i = 0; i < TOTAL_WEEKS; i++) {
+            grid[i].index = i;
+            grid[i].isPast = i <= currentWeekIndex;
+            grid[i].date = addWeeks(birthDate, i);
+        }
+
+        // Map events to weeks
+        events.forEach(event => {
+            const eventDate = parseISO(event.date);
+            const weekIndex = differenceInWeeks(eventDate, birthDate);
+            if (weekIndex >= 0 && weekIndex < TOTAL_WEEKS) {
+                grid[weekIndex].events.push(event);
+            }
+        });
+
+        return grid;
+    }, [events, birthDate, currentWeekIndex]);
+
+    return (
+        <div className="blog-container">
+            <Helmet>
+                <title>Life in Weeks | {siteConfig.title}</title>
+                <meta name="description" content="My life visualized in weeks." />
+            </Helmet>
+
+            <SiteHeader />
+            <section className="projects-section">
+                <h2>Life in Weeks</h2>
+                <div className="life-page">
+                    {!birthDate ? (
+                        <div className="empty-state">
+                            <p>No life events found. Add events to the `life/` directory with a past `date` in the frontmatter to start your timeline.</p>
+                        </div>
+                    ) : (
+                        <div className="life-visualization">
+                            <div className="life-grid-container">
+                                <div className="life-sections">
+                                    {LIFE_SECTIONS.map(section => {
+                                        const sectionWeeks = weeks.slice(section.startYear * WEEKS_IN_YEAR, section.endYear * WEEKS_IN_YEAR);
+
+                                        return (
+                                            <div key={section.label} className="life-section">
+                                                <h3 className="life-section-title">{section.label}</h3>
+                                                <div className="life-grid">
+                                                    {sectionWeeks.map((week, index) => {
+                                                        const isEvent = week.events.length > 0;
+                                                        const eventColor = isEvent ? week.events[0].color : undefined;
+
+                                                        let className = "life-week";
+                                                        if (week.isPast) className += " past";
+                                                        if (isEvent) className += " event";
+
+                                                        return (
+                                                            <div
+                                                                key={`${section.label}-${index}`}
+                                                                className={className}
+                                                                title={isEvent ? week.events.map(e => {
+                                                                    const titlePart = e.title || '';
+                                                                    const descPart = e.description ? (titlePart ? `: ${e.description}` : e.description) : '';
+                                                                    const datePart = `(${e.isMonthOnly ? format(parseISO(e.date), 'MMMM yyyy') : format(parseISO(e.date), 'MMMM dd, yyyy')})`;
+                                                                    return `${titlePart}${descPart} ${datePart}`.trim();
+                                                                }).join('\n') : (week.date ? format(week.date, 'MMMM dd, yyyy') : undefined)}
+                                                                style={isEvent ? { backgroundColor: eventColor, borderColor: eventColor } : undefined}
+                                                            >
+                                                                {isEvent && (
+                                                                    <span className="event-label-text">
+                                                                        {week.events[0].title || ''}
+                                                                        {week.events[0].title && week.events[0].description ? `: ${week.events[0].description}` : (week.events[0].description || '')}
+                                                                    </span>
+                                                                )}
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </div>
+                                        );
+                                    })}
+                                </div>
+                            </div>
+
+
+                        </div>
+                    )}
+                </div>
+            </section>
+        </div>
+    );
+}

package/src/posts.json

@@ -1,4 +1,11 @@
 [
+  {
+    "slug": "life-in-weeks-feature",
+    "title": "Introducing the Life in Weeks Feature ⏳",
+    "date": "2026-02-22",
+    "summary": "A new feature to visualize your life in weeks",
+    "weight": 0
+  },
   {
     "slug": "hello-world",
     "title": "Welcome to Vending Mocha ☕",

package/src/site.config.ts

@@ -3,7 +3,7 @@
 export const siteConfig = {
     title: "Vending Mocha",
     url: "https://vendingmocha.com",
-    description: '**Vending Mocha** is a lightweight, strictly typed, and blazing fast personal blogging framework built with React.\n\nIt is designed to be minimal, easy to customize, and deployed within minutes. Create a site, update the config, and start writing!\n\nSimply write your new posts in markdown files and Vending Mocha will publish them as static HTML files to your GitHub Pages site.',
+    description: '**Vending Mocha** is a lightweight, blazing fast personal blogging framework built with React.\n\nIt is designed to be minimal, easy to customize, and deployed within minutes. Create a site, update the config, and deploy to Github Pages!\n\nSimply write your new posts in markdown files and Vending Mocha will publish them as static HTML files to your site.\n\nTo get started:\n`npx vending-mocha@latest new <my-blog>`',
     image: '/images/profile.png',
     contact: {
         github: "https://github.com/kcthota/vending-mocha",
@@ -20,6 +20,7 @@ export const siteConfig = {
             cardBackground: "#eee",
             linkHover: "#000",
             linkColor: "#222",
+            lifeWeek: "#ddd"
         },
         dark: {
             primary: "#fff",
@@ -30,6 +31,7 @@ export const siteConfig = {
             cardBackground: "#373636ff",
             linkHover: "#fff",
             linkColor: "#ccc",
+            lifeWeek: "#bbb",
         },
         fontFamily: "Avenir, Open Sans, sans-serif",
     },

package/vite.config.ts

@@ -12,16 +12,21 @@ const watchMarkdownPlugin = () => ({
       // Use absolute paths or relative checks to ensure we only trigger on relevant files
       const normalizedFile = file.replace(/\\/g, '/')
       if (normalizedFile.endsWith('.md')) {
-        if (normalizedFile.includes('/src/posts/')) {
+        if (normalizedFile.includes('/posts/')) {
           console.log('Post changed, regenerating posts data...')
           exec('node scripts/generate-posts-data.js', (err) => {
             if (err) console.error('Error regenerating posts:', err)
           })
-        } else if (normalizedFile.includes('/src/projects/')) {
+        } else if (normalizedFile.includes('/projects/')) {
           console.log('Project changed, regenerating projects data...')
           exec('node scripts/generate-projects-data.js', (err) => {
             if (err) console.error('Error regenerating projects:', err)
           })
+        } else if (normalizedFile.includes('/life/')) {
+          console.log('Life events changed, regenerating projects data...')
+          exec('node scripts/generate-life-data.js', (err) => {
+            if (err) console.error('Error regenerating life events:', err)
+          })
         }
       }
     }