devfolio-page 0.1.3 → 0.2.0

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,165 @@
+import chalk from 'chalk';
+import chokidar from 'chokidar';
+import { existsSync } from 'fs';
+import http from 'http';
+import path from 'path';
+import { renderCommand } from './render.js';
+import fs from 'fs/promises';
+let isBuilding = false;
+let buildQueued = false;
+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...'));
+        console.log();
+        await renderCommand('portfolio.yaml', {
+            theme: options.theme,
+            output: options.output || './site',
+        });
+        console.log();
+        console.log(chalk.green('✓') + ' Rebuild complete!');
+        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(outputDir, port) {
+    const server = http.createServer(async (req, res) => {
+        try {
+            // Default to index.html
+            let filePath = req.url === '/' ? '/index.html' : req.url || '/index.html';
+            // Remove query string
+            filePath = filePath.split('?')[0];
+            const fullPath = path.join(outputDir, filePath);
+            // Security: prevent directory traversal
+            const normalizedPath = path.normalize(fullPath);
+            if (!normalizedPath.startsWith(path.normalize(outputDir))) {
+                res.writeHead(403);
+                res.end('Forbidden');
+                return;
+            }
+            // Check if file exists
+            if (!existsSync(fullPath)) {
+                res.writeHead(404);
+                res.end('Not found');
+                return;
+            }
+            // Read file
+            const content = await fs.readFile(fullPath);
+            // Set content type
+            const ext = path.extname(fullPath);
+            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;
+    const outputDir = path.resolve(options.output || './site');
+    // 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...'));
+    console.log();
+    try {
+        await renderCommand(file, {
+            theme: options.theme,
+            output: outputDir,
+        });
+    }
+    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(outputDir, 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('Output:') + '   ' + chalk.dim(outputDir));
+    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.3');
+    .version('0.2.0');
 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

@@ -474,6 +474,10 @@ async function copyFonts(outputDir) {
 async function copyUserImages(portfolio, outputDir) {
     const imagePaths = extractAllImagePaths(portfolio);
     for (const imgPath of imagePaths) {
+        // Skip undefined or empty paths
+        if (!imgPath) {
+            continue;
+        }
         // Skip absolute URLs
         if (imgPath.startsWith('http://') || imgPath.startsWith('https://')) {
             continue;
@@ -503,7 +507,8 @@ function extractAllImagePaths(portfolio) {
         paths.push(meta.hero_image);
     // Extract from rich projects
     portfolio.projects?.forEach((project) => {
-        paths.push(project.thumbnail);
+        if (project.thumbnail)
+            paths.push(project.thumbnail);
         if (project.hero)
             paths.push(project.hero);
         project.sections.forEach((section) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "devfolio-page",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "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",