Add support for local html and CodePen link screenshot

Author: yuanchuan

README.md

@@ -10,7 +10,8 @@ A command-line tool for css-doodle to preview and generate images.
 npm install -g @css-doodle/cli
 ```
 
-After installation, you can use command `css-doodle` or `cssd` in the terminal.
+>[!NOTE]
+> After installation, you can use `cssd` or `css-doodle` command in the terminal.
 
 ## Usage
 
@@ -22,8 +23,8 @@ Options:
   -h, --help     display help for command
 
 Commands:
-  render         Generate an image from css-doodle file
-  preview        Open a window to preview the css-doodle file
+  render         Generate an image from css|cssd|html file or from codepen links
+  preview        Open a window to preview css|cssd file
   generate       Generate code using css-doodle generators
   config         Display/set the configurations
   use            Shorthand to fetch and use a custom version of css-doodle
@@ -34,20 +35,23 @@ Commands:
 ## Commands
 
 ### render
-Generate an image from the css-doodle source file. It'll read from STDIN if no source file specified.
+Generate an image from the css-doodle source file. The source file can be a `.css`, `.cssd`, `.html` file or CodePen link.
 
 * `-o, --output`: Custom output filename of the generated image.
 * `-x, --scale`: Scale factor of the generated image, defaults to 1.
+* `-s, --selector`: CSS selector to target the rendered node, defaults to `css-doodle`.
+* `-d, --delay`: Delay in milliseconds after the image is rendered.
 
 ```bash
 cssd render
 cssd render code.css
 cssd render code.css -o result.png
 cssd render code.css -x 4
+cssd render https://codepen.io/yuanchuan/pen/MQEeJo
 ```
 
 ### preview
-Open a window to preview the css-doodle file.
+Open a window to preview the css-doodle source file. The source file can be either `.css` or `.cssd`.
 
 * `--fullscreen`: Open in fullscreen mode.
 

bin/index.js

@@ -40,15 +40,17 @@ program
 
 program
     .command('render')
-    .description('Generate an image from css-doodle file')
+    .description('Generate an image from css|cssd|html file or from CodePen link')
     .argument('[source]', 'css-doolde source file used to generate the image')
     .option('-o, --output <output>', 'Custom filename of the generated image')
-    .option('-x, --scale <scale>', 'Scale factor of the generated image, defaults to 1')
+    .option('-x, --scale <scale>', 'Scale factor of the generated image, defaults to `2`')
+    .option('-s, --selector <selector>', 'CSS selector to target the rendered node, defaults to `css-doodle`')
+    .option('-d, --delay <delay>', 'Delay in milliseconds after the image is rendered')
     .action(handleRender);
 
 program
     .command('preview')
-    .description('Open a window to preview the css-doodle file')
+    .description('Open a window to preview the css|cssd file')
     .argument('[source]', 'css-doodle source file to preview')
     .option('--fullscreen', 'open the preview in fullscreen mode')
     .action(handlePreview);

lib/handler.js

@@ -1,33 +1,39 @@
 import fs from 'node:fs';
 import path from 'node:path';
-import os from 'node:os';
-import { stdin } from 'node:process';
 import { execSync } from 'node:child_process';
 
 import { config, configPath, configDownloadPath } from './static.js'
+import { generateSVG, generateShape } from './generate.js';
 import { parse } from './parse.js';
 import { preview } from './preview/index.js';
 import { render } from './render.js';
-import { generateSVG, generateShape } from './generate.js';
+import { read } from './read.js';
 
 export async function handleRender(source, options) {
-    let { content, error } = await read(source);
+    const { content, error, type } = await read(source);
     if (error) {
         return console.error(error.message);
     }
     let title = 'image';
     if (source) {
-        let basename = path.basename(source);
-        let extname = path.extname(basename);
+        const basename = path.basename(source);
+        const extname = path.extname(basename);
         title = extname ? basename.split(extname)[0] : basename;
     }
-    let output = await render(content, {
-        title,
-        output: options.output,
-        scale: options.scale
-    });
-    if (output) {
-        console.log(`Saved to ${output}.`);
+    options.title = title;
+    options.type = type;
+
+    try {
+        const start = Date.now();
+        const output = await render(content, options);
+        const time = (Date.now() - start) / 1000;
+
+        if (output) {
+            console.log(`Saved to ${output}. (${time}s)`);
+        }
+    } catch (e) {
+        console.error(e.message);
+        process.exit(1);
     }
 }
 
@@ -45,10 +51,16 @@ export async function handleParse(source) {
 }
 
 export async function handlePreview(source, options) {
-    let { content, error } = await read(source);
+    let { content, error, type } = await read(source);
     if (error) {
         return console.error(error.message);
     }
+    if (type === 'codepen') {
+        return console.error('error: CodePen url is not supported for preview');
+    }
+    if (type === 'html') {
+        return console.error('error: HTML is not supported for preview');
+    }
     if (source === undefined) {
         options.fromStdin = true;
         preview(content, 'css-doodle', options);
@@ -129,48 +141,6 @@ export function handleUpgrade() {
     execSync('npm update -g @css-doodle/cli', { stdio: 'inherit' });
 }
 
-async function read(path) {
-    let content = '';
-    let error = null;
-    if (path === undefined) {
-        console.log('No source file specified, reading from stdin:');
-        let key = os.platform() === 'win32' ? 'CTRL+Z' : 'CTRL+D';
-        console.log(`(Press ${key} to finish input.)\n`);
-        try {
-            content = await readFromStdin();
-            console.log('\n');
-        } catch (e) {
-            error = e;
-        }
-    } else {
-        try {
-            content = fs.readFileSync(path, 'utf8');
-        } catch (e) {
-            error = e;
-        }
-    }
-
-    if (content) {
-        content = content.trim();
-    }
-
-    if (!error && !content) {
-        error = new Error('error: empty input');
-    }
-
-    return { content, error };
-}
-
-function readFromStdin() {
-    return new Promise((resolve, reject) => {
-        let content = '';
-        stdin.setEncoding('utf8');
-        stdin.on('data', c => content += c);
-        stdin.on('end', () => resolve(content));
-        stdin.on('error', reject);
-    });
-}
-
 async function fetchCssDoodleSource(version) {
     let result = '', error;
 

lib/preview/client.html

@@ -4,13 +4,13 @@
     <meta charset="utf-8">
     <title>css-doodle</title>
     <style>
-        html, body {
+        html, body, #container {
             margin: 0;
             padding: 0;
             width: 100%;
             height: 100%;
         }
-        body {
+        body, #container {
             display: grid;
             place-items: center;
             background: #282828;
@@ -66,7 +66,7 @@
                             updateWindow();
                         });
 
-                        doodle.innerHTML = `<style>${data}</style>`;
+                        doodle.innerHTML = `<template>${data}</template>`;
                         doodle.setAttribute('click-to-update', '');
                         container.appendChild(doodle);
                     }
@@ -78,7 +78,6 @@
             return Math.min(Math.max(value, min), max);
         }
 
-
         function updateWindow() {
             let { width, height }  = doodle.getBoundingClientRect();
             document.title = title + ` (${Math.round(width)}x${Math.round(height)})`;

lib/read.js

@@ -0,0 +1,73 @@
+import os from 'node:os';
+import fs from 'node:fs/promises';
+import { stdin } from 'node:process';
+
+export async function read(path) {
+    let result = { content: '', type: '', error: null };
+
+    if (path === undefined) {
+        result.type = 'stdin';
+        console.log('No source file specified, reading from stdin:');
+        let key = os.platform() === 'win32' ? 'CTRL+Z' : 'CTRL+D';
+        console.log(`(Press ${key} to finish input.)\n`);
+        try {
+            result.content = await readFromStdin();
+            console.log('\n');
+        } catch (e) {
+            result.error = e;
+        }
+    }
+    else if (/^(https:\/\/)?codepen\.io/.test(path)) {
+        result.type = 'codepen';
+        let match = path.match(/^(https:\/\/)?codepen\.io\/([^\/]+)\/(pen|details|full)\/([^\/]+)$/) || [];
+        let [user, id] = [match[2], match[4]];
+        if (user && id) {
+            result.content = `https://cdpn.io/${user}/fullpage/${id}?nocache=true&view=fullpage`;
+        } else {
+            result.error = new Error(
+                'error: unsupported CodePen url, should be like https://codepen.io/:user/pen/:id'
+            );
+        }
+    }
+    else if (/\.html$/.test(path)) {
+        let { content, error } = await readFile(path);
+        result = { type: 'html', content, error };
+    }
+    else if (/\.cssd?$/.test(path)) {
+        let { content, error } = await readFile(path);
+        result = { type: 'css', content, error };
+    }
+    else {
+        result.error = new Error('error: invalid input, accept .html, .css, .cssd, and CodePen link');
+    }
+
+    if (result.content) {
+        result.content = result.content.trim();
+    }
+
+    if (!result.error && !result.content) {
+        result.error = new Error('error: empty input');
+    }
+
+    return result;
+}
+
+function readFromStdin() {
+    return new Promise((resolve, reject) => {
+        let content = '';
+        stdin.setEncoding('utf8');
+        stdin.on('data', c => content += c);
+        stdin.on('end', () => resolve(content));
+        stdin.on('error', reject);
+    });
+}
+
+async function readFile(path) {
+    let content = '', error;
+    try {
+        content = await fs.readFile(path, 'utf8');
+    } catch (e) {
+        error = e;
+    }
+    return { content, error };
+}