devfolio-page 0.1.4 → 0.2.1

package/README.md

@@ -18,11 +18,11 @@ devfolio-page init
 cd my-portfolio
 nano portfolio.yaml
 
-# Generate the static site
-devfolio-page render
+# Start development server with auto-rebuild
+devfolio-page dev
 
-# Open in browser
-open site/index.html
+# Or generate the static site once
+devfolio-page render
 ```
 
 ## Folder Structure
@@ -48,6 +48,27 @@ Create a new portfolio folder with config and images directory.
 devfolio-page init
 ```
 
+### `devfolio-page dev`
+
+Start development server with file watching and auto-rebuild.
+
+```bash
+devfolio-page dev                       # Start server on port 3000
+devfolio-page dev --port 8080           # Use custom port
+devfolio-page dev --theme modern        # Use a specific theme
+```
+
+**Options:**
+
+- `-p, --port <port>` - Port for dev server (default: 3000)
+- `-t, --theme <theme>` - Theme to use (srcl, modern, dark-academia)
+- `-o, --output <dir>` - Output directory (default: ./site)
+
+The dev server will:
+- Watch `portfolio.yaml` and `images/` for changes
+- Automatically rebuild your site when files change
+- Serve your site at `http://localhost:3000`
+
 ### `devfolio-page render`
 
 Generate a static website. Run from inside your portfolio folder.

package/dist/cli/commands/dev.js

@@ -0,0 +1,162 @@
+import chalk from 'chalk';
+import chokidar from 'chokidar';
+import { existsSync } from 'fs';
+import http from 'http';
+import path from 'path';
+import { buildStaticSiteInMemory } from '../../generator/builder.js';
+import { validatePortfolio } from '../helpers/validate.js';
+let isBuilding = false;
+let buildQueued = false;
+let siteCache = new Map();
+async function rebuild(file, options) {
+    // If already building, queue another build
+    if (isBuilding) {
+        buildQueued = true;
+        return;
+    }
+    isBuilding = true;
+    try {
+        console.log();
+        console.log(chalk.dim(`[${new Date().toLocaleTimeString()}]`) + ' File changed: ' + chalk.cyan(file));
+        console.log(chalk.dim('Rebuilding in memory...'));
+        console.log();
+        // Validate and build in memory
+        const portfolio = validatePortfolio('portfolio.yaml');
+        const result = await buildStaticSiteInMemory(portfolio, {
+            theme: options.theme,
+        });
+        // Update cache
+        siteCache = result.files;
+        console.log();
+        console.log(chalk.green('✓') + ` Rebuilt ${result.fileList.length} files in memory`);
+        console.log();
+    }
+    catch (error) {
+        console.error(chalk.red('✗') + ' Build failed:');
+        console.error(error instanceof Error ? error.message : String(error));
+        console.log();
+    }
+    finally {
+        isBuilding = false;
+        // If a build was queued while we were building, run it now
+        if (buildQueued) {
+            buildQueued = false;
+            setTimeout(() => rebuild(file, options), 100);
+        }
+    }
+}
+function startServer(port) {
+    const server = http.createServer(async (req, res) => {
+        try {
+            // Default to index.html
+            let filePath = req.url === '/' ? 'index.html' : (req.url || 'index.html');
+            // Remove leading slash and query string
+            filePath = filePath.replace(/^\//, '').split('?')[0];
+            // Check if file exists in cache
+            if (!siteCache.has(filePath)) {
+                res.writeHead(404);
+                res.end('Not found');
+                return;
+            }
+            // Get file from cache
+            const content = siteCache.get(filePath);
+            // Set content type based on file extension
+            const ext = path.extname(filePath);
+            const contentTypes = {
+                '.html': 'text/html',
+                '.css': 'text/css',
+                '.js': 'application/javascript',
+                '.json': 'application/json',
+                '.png': 'image/png',
+                '.jpg': 'image/jpeg',
+                '.jpeg': 'image/jpeg',
+                '.gif': 'image/gif',
+                '.svg': 'image/svg+xml',
+                '.ico': 'image/x-icon',
+                '.woff': 'font/woff',
+                '.woff2': 'font/woff2',
+                '.ttf': 'font/ttf',
+                '.otf': 'font/otf',
+            };
+            res.writeHead(200, { 'Content-Type': contentTypes[ext] || 'application/octet-stream' });
+            res.end(content);
+        }
+        catch (error) {
+            console.error('Server error:', error);
+            res.writeHead(500);
+            res.end('Internal server error');
+        }
+    });
+    server.listen(port);
+    return server;
+}
+export async function devCommand(file = 'portfolio.yaml', options = {}) {
+    const port = options.port || 3000;
+    // Check if portfolio.yaml exists
+    if (!existsSync(file)) {
+        console.error(chalk.red('✗') + ` File not found: ${file}`);
+        console.log();
+        console.log('Make sure you are in a portfolio directory with a portfolio.yaml file.');
+        console.log('Run ' + chalk.cyan('devfolio-page init') + ' to create a new portfolio.');
+        process.exit(1);
+    }
+    console.log();
+    console.log(chalk.cyan('┌─────────────────────────────────────────────────────────┐'));
+    console.log(chalk.cyan('│') + '  ' + chalk.bold('devfolio.page') + ' - Development Mode                     ' + chalk.cyan('│'));
+    console.log(chalk.cyan('└─────────────────────────────────────────────────────────┘'));
+    console.log();
+    // Initial build
+    console.log(chalk.bold('Building initial site in memory...'));
+    console.log();
+    try {
+        const portfolio = validatePortfolio(file);
+        const result = await buildStaticSiteInMemory(portfolio, {
+            theme: options.theme,
+        });
+        siteCache = result.files;
+        console.log(chalk.green('    ✓') + ` Built ${result.fileList.length} files`);
+    }
+    catch (error) {
+        console.error(chalk.red('✗') + ' Initial build failed:');
+        console.error(error instanceof Error ? error.message : String(error));
+        process.exit(1);
+    }
+    // Start server
+    const server = startServer(port);
+    console.log();
+    console.log(chalk.green('✓') + ' Dev server started!');
+    console.log();
+    console.log('  ' + chalk.bold('Local:') + '    ' + chalk.cyan(`http://localhost:${port}`));
+    console.log('  ' + chalk.bold('Mode:') + '     ' + chalk.dim('In-memory (no site/ folder)'));
+    console.log();
+    console.log(chalk.dim('Watching for changes...'));
+    console.log(chalk.dim('Press Ctrl+C to stop'));
+    console.log();
+    // Watch for file changes
+    const watcher = chokidar.watch([file, 'images/**/*'], {
+        persistent: true,
+        ignoreInitial: true,
+        awaitWriteFinish: {
+            stabilityThreshold: 100,
+            pollInterval: 100,
+        },
+    });
+    watcher.on('change', (changedFile) => {
+        rebuild(changedFile, options);
+    });
+    watcher.on('add', (changedFile) => {
+        rebuild(changedFile, options);
+    });
+    watcher.on('unlink', (changedFile) => {
+        rebuild(changedFile, options);
+    });
+    // Handle process exit
+    process.on('SIGINT', () => {
+        console.log();
+        console.log();
+        console.log(chalk.dim('Shutting down...'));
+        watcher.close();
+        server.close();
+        process.exit(0);
+    });
+}

package/dist/cli/index.js

@@ -5,11 +5,12 @@ import { initCommand } from './commands/init.js';
 import { validateCommand } from './commands/validate.js';
 import { renderCommand } from './commands/render.js';
 import { themesCommand } from './commands/themes.js';
+import { devCommand } from './commands/dev.js';
 const program = new Command();
 program
     .name('devfolio-page')
     .description('Your portfolio as code. Version control it like software.')
-    .version('0.1.4');
+    .version('0.2.1');
 program
     .command('init')
     .description('Create a new portfolio.yaml with interactive prompts')
@@ -28,6 +29,13 @@ program
     .command('themes')
     .description('List available themes with examples')
     .action(themesCommand);
+program
+    .command('dev [file]')
+    .description('Start development server with file watching')
+    .option('-p, --port <port>', 'Port for dev server', '3000')
+    .option('-t, --theme <theme>', 'Theme to use (defaults to YAML theme or srcl)')
+    .option('-o, --output <dir>', 'Output directory', './site')
+    .action((file, options) => devCommand(file || 'portfolio.yaml', options));
 // Show welcome message if no arguments provided
 if (process.argv.length === 2) {
     console.log();
@@ -38,6 +46,7 @@ if (process.argv.length === 2) {
     console.log(chalk.bold('Commands:'));
     console.log();
     console.log('  ' + chalk.cyan('devfolio-page init') + '         Create a new portfolio folder');
+    console.log('  ' + chalk.cyan('devfolio-page dev') + '          Start dev server with auto-rebuild');
     console.log('  ' + chalk.cyan('devfolio-page render') + '       Generate site (uses portfolio.yaml)');
     console.log('  ' + chalk.cyan('devfolio-page themes') + '       List available themes');
     console.log('  ' + chalk.cyan('devfolio-page validate') + ' <file>   Validate a portfolio YAML file');

package/dist/cli/postinstall.js

@@ -11,6 +11,7 @@ log();
 log(chalk.bold('Available commands:'));
 log();
 log('  ' + chalk.cyan('devfolio-page init') + '         Create a new portfolio folder');
+log('  ' + chalk.cyan('devfolio-page dev') + '          Start dev server with auto-rebuild');
 log('  ' + chalk.cyan('devfolio-page render') + '       Generate static site from YAML');
 log('  ' + chalk.cyan('devfolio-page validate') + ' <file>  Validate a portfolio YAML file');
 log('  ' + chalk.cyan('devfolio-page --help') + '       Show all options');

package/dist/generator/builder.js

@@ -33,6 +33,34 @@ export async function buildStaticSite(portfolio, options) {
     return { outputDir, files };
 }
 // =============================================================================
+// In-Memory Build Function (for dev mode)
+// =============================================================================
+export async function buildStaticSiteInMemory(portfolio, options) {
+    const theme = options.theme || portfolio.theme || 'srcl';
+    const themePath = path.join(import.meta.dirname, 'themes', theme);
+    const files = new Map();
+    const fileList = [];
+    // 1. Copy theme assets (CSS, JS)
+    const assetFiles = await copyThemeAssetsInMemory(themePath, portfolio.settings, files);
+    fileList.push(...assetFiles);
+    // 2. Copy fonts
+    const fontFiles = await copyFontsInMemory(files);
+    fileList.push(...fontFiles);
+    // 3. Generate pages based on portfolio structure
+    const hasRichProjects = (portfolio.projects?.length ?? 0) > 0;
+    if (hasRichProjects) {
+        // Multi-page site with project case studies
+        const pageFiles = await generateMultiPageSiteInMemory(portfolio, themePath, theme, files);
+        fileList.push(...pageFiles);
+    }
+    else {
+        // Single-page site (backwards compatible)
+        const pageFiles = await generateSinglePageSiteInMemory(portfolio, themePath, theme, files);
+        fileList.push(...pageFiles);
+    }
+    return { files, fileList };
+}
+// =============================================================================
 // Directory Structure
 // =============================================================================
 async function createDirectoryStructure(outputDir) {
@@ -554,3 +582,254 @@ async function fileExists(filePath) {
         return false;
     }
 }
+// =============================================================================
+// In-Memory Build Helpers
+// =============================================================================
+async function copyThemeAssetsInMemory(themePath, settings, files) {
+    const fileList = [];
+    // Copy CSS
+    const cssPath = path.join(themePath, 'styles.css');
+    if (await fileExists(cssPath)) {
+        const content = await fs.readFile(cssPath);
+        files.set('assets/styles.css', content);
+        fileList.push('assets/styles.css');
+    }
+    // Copy JS
+    const jsPath = path.join(themePath, 'script.js');
+    if (await fileExists(jsPath)) {
+        const content = await fs.readFile(jsPath);
+        files.set('assets/script.js', content);
+        fileList.push('assets/script.js');
+    }
+    return fileList;
+}
+async function copyFontsInMemory(files) {
+    const fileList = [];
+    const srcFontDir = '/Users/louanne/www-sacred/public/fonts';
+    try {
+        const fontFiles = await fs.readdir(srcFontDir);
+        for (const file of fontFiles) {
+            if (file.endsWith('.woff') ||
+                file.endsWith('.woff2') ||
+                file.endsWith('.ttf') ||
+                file.endsWith('.otf') ||
+                file.endsWith('.css')) {
+                const content = await fs.readFile(path.join(srcFontDir, file));
+                files.set(`assets/fonts/${file}`, content);
+                fileList.push(`assets/fonts/${file}`);
+            }
+        }
+    }
+    catch {
+        // Fonts directory doesn't exist or isn't accessible - that's fine
+    }
+    return fileList;
+}
+async function generateSinglePageSiteInMemory(portfolio, themePath, theme, files) {
+    const fileList = [];
+    // Load template and partials
+    const template = await fs.readFile(path.join(themePath, 'template.html'), 'utf-8');
+    const partials = await loadPartials(themePath);
+    // Prepare template data
+    const templateData = prepareTemplateData(portfolio);
+    // Render each partial
+    const renderedPartials = renderPartials(partials, templateData);
+    // Render main template with settings
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const html = Mustache.render(template, {
+        ...templateData,
+        ...renderedPartials,
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        showGrid: settings.show_grid || false,
+        enableHotkeys: settings.enable_hotkeys !== false,
+        animate: settings.animate || 'subtle',
+        hasExperience: (portfolio.sections.experience?.length ?? 0) > 0,
+        hasProjects: (portfolio.sections.projects?.length ?? 0) > 0,
+        hasSkills: portfolio.sections.skills && Object.keys(portfolio.sections.skills).length > 0,
+        hasWriting: (portfolio.sections.writing?.length ?? 0) > 0,
+        hasEducation: (portfolio.sections.education?.length ?? 0) > 0,
+    });
+    files.set('index.html', Buffer.from(html, 'utf-8'));
+    fileList.push('index.html');
+    return fileList;
+}
+async function generateMultiPageSiteInMemory(portfolio, themePath, theme, files) {
+    const fileList = [];
+    // Check if theme has multi-page templates
+    const hasMultiPageTemplates = await fileExists(path.join(themePath, 'templates/homepage.html'));
+    if (!hasMultiPageTemplates) {
+        return generateSinglePageSiteInMemory(portfolio, themePath, theme, files);
+    }
+    // Generate homepage
+    const homepageFiles = await generateHomepageInMemory(portfolio, themePath, theme, files);
+    fileList.push(...homepageFiles);
+    // Generate project pages
+    const projectFiles = await generateProjectPagesInMemory(portfolio, themePath, theme, files);
+    fileList.push(...projectFiles);
+    // Generate projects index
+    const projectIndexFiles = await generateProjectsIndexInMemory(portfolio, themePath, theme, files);
+    fileList.push(...projectIndexFiles);
+    // Generate experiments index
+    const experimentsIndexFiles = await generateExperimentsIndexInMemory(portfolio, themePath, theme, files);
+    fileList.push(...experimentsIndexFiles);
+    // Generate writing index
+    const writingIndexFiles = await generateWritingIndexInMemory(portfolio, themePath, theme, files);
+    fileList.push(...writingIndexFiles);
+    // Copy user images
+    await copyUserImagesInMemory(portfolio, files);
+    return fileList;
+}
+async function generateHomepageInMemory(portfolio, themePath, theme, files) {
+    const templatePath = path.join(themePath, 'templates/homepage.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        name: portfolio.meta.name,
+        title: portfolio.meta.title,
+        location: portfolio.meta.location,
+        timezone: portfolio.meta.timezone,
+        email: portfolio.contact.email,
+        website: portfolio.contact.website,
+        github: portfolio.contact.github,
+        linkedin: portfolio.contact.linkedin,
+        twitter: portfolio.contact.twitter,
+        bio: portfolio.bio,
+        bio_html: parseBio(portfolio.bio),
+        about_short: portfolio.about?.short || '',
+        featured_projects: portfolio.projects?.filter((p) => p.featured) || [],
+        featured_writing: portfolio.sections.writing?.filter((w) => 'featured' in w && w.featured) || [],
+        show_experiments: portfolio.layout?.show_experiments,
+        experiments: portfolio.experiments?.slice(0, 4) || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        showGrid: settings.show_grid || false,
+        enableHotkeys: settings.enable_hotkeys !== false,
+        animate: settings.animate || 'subtle',
+        hasProjects: (portfolio.projects?.length ?? 0) > 0,
+        hasExperiments: (portfolio.experiments?.length ?? 0) > 0,
+        hasWriting: (portfolio.sections.writing?.length ?? 0) > 0,
+    };
+    const html = Mustache.render(template, data);
+    files.set('index.html', Buffer.from(html, 'utf-8'));
+    return ['index.html'];
+}
+async function generateProjectPagesInMemory(portfolio, themePath, theme, files) {
+    if (!portfolio.projects || portfolio.projects.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/project.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const partials = await loadProjectPartials(themePath);
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const fileList = [];
+    for (const project of portfolio.projects) {
+        const sectionsHtml = project.sections
+            .map((section) => renderContentSection(section, partials))
+            .join('\n');
+        const data = {
+            ...project,
+            sections_html: sectionsHtml,
+            site_name: portfolio.meta.name,
+            nav_links: generateNavLinks(portfolio, true, 'project'),
+            colorScheme: settings.color_scheme || defaultColorScheme,
+            showGrid: settings.show_grid || false,
+            enableHotkeys: settings.enable_hotkeys !== false,
+        };
+        const html = Mustache.render(template, data);
+        const filename = `projects/${project.id}.html`;
+        files.set(filename, Buffer.from(html, 'utf-8'));
+        fileList.push(filename);
+    }
+    return fileList;
+}
+async function generateProjectsIndexInMemory(portfolio, themePath, theme, files) {
+    const templatePath = path.join(themePath, 'templates/projects-index.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        site_name: portfolio.meta.name,
+        projects: portfolio.projects || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'projects'),
+    };
+    const html = Mustache.render(template, data);
+    files.set('projects/index.html', Buffer.from(html, 'utf-8'));
+    return ['projects/index.html'];
+}
+async function generateExperimentsIndexInMemory(portfolio, themePath, theme, files) {
+    if (!portfolio.experiments || portfolio.experiments.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/experiments-index.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        site_name: portfolio.meta.name,
+        experiments: portfolio.experiments || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'experiments'),
+    };
+    const html = Mustache.render(template, data);
+    files.set('experiments/index.html', Buffer.from(html, 'utf-8'));
+    return ['experiments/index.html'];
+}
+async function generateWritingIndexInMemory(portfolio, themePath, theme, files) {
+    if (!portfolio.sections.writing || portfolio.sections.writing.length === 0) {
+        return [];
+    }
+    const templatePath = path.join(themePath, 'templates/writing-index.html');
+    if (!(await fileExists(templatePath))) {
+        return [];
+    }
+    const template = await fs.readFile(templatePath, 'utf-8');
+    const settings = portfolio.settings || {};
+    const defaultColorScheme = theme === 'dark-academia' ? 'light' : 'dark';
+    const data = {
+        site_name: portfolio.meta.name,
+        writing: portfolio.sections.writing || [],
+        colorScheme: settings.color_scheme || defaultColorScheme,
+        nav_links: generateNavLinks(portfolio, true, 'writing'),
+    };
+    const html = Mustache.render(template, data);
+    files.set('writing/index.html', Buffer.from(html, 'utf-8'));
+    return ['writing/index.html'];
+}
+async function copyUserImagesInMemory(portfolio, files) {
+    const imagePaths = extractAllImagePaths(portfolio);
+    for (const imgPath of imagePaths) {
+        if (!imgPath) {
+            continue;
+        }
+        // Skip absolute URLs
+        if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
+            continue;
+        }
+        const srcPath = imgPath.startsWith('/')
+            ? path.join(process.cwd(), imgPath)
+            : path.join(process.cwd(), imgPath);
+        try {
+            const content = await fs.readFile(srcPath);
+            files.set(imgPath, content);
+        }
+        catch {
+            // Image doesn't exist - that's okay, it might be a placeholder
+            console.warn(`Warning: Could not copy image ${imgPath}`);
+        }
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devfolio-page",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "description": "Your portfolio as code. Version control it like software.",
   "type": "module",
   "bin": {
@@ -41,6 +41,7 @@
   },
   "dependencies": {
     "chalk": "^5.6.2",
+    "chokidar": "^5.0.0",
     "commander": "^14.0.2",
     "js-yaml": "^4.1.1",
     "marked": "^17.0.1",