opentwig 1.0.5 → 1.1.0

package/src/utils/generateOGImage.js

@@ -2,8 +2,37 @@ const sharp = require('sharp');
 const readImageAsBase64 = require('./readImageAsBase64');
 
 module.exports = async function({name, content, avatar}) {
-    const avatarBase64 = avatar && avatar.path ? readImageAsBase64(avatar.path) : null;
-    // Create SVG with the same dimensions and styling as the original HTML
+    const avatarInfo = avatar && avatar.path ? readImageAsBase64(avatar.path) : { isSvg: false, content: '' };
+
+    // If avatar is SVG, we'll inline the markup and use a clipPath to make it circular.
+    // For raster images, keep using a data URI in an <image> element.
+    let avatarElement = '';
+    let avatarDefs = '';
+
+    if (avatarInfo && avatarInfo.isSvg && avatarInfo.content) {
+        // Ensure the inlined SVG has a root <svg> — if not, wrap it.
+        let inlined = avatarInfo.content.trim();
+        if (!/^<svg[\s>]/i.test(inlined)) {
+            inlined = `<svg xmlns=\"http://www.w3.org/2000/svg\">${inlined}</svg>`;
+        }
+
+        // Give the inlined SVG an id so we can reference it with <use>
+        // Remove any existing id attributes to avoid collisions
+        inlined = inlined.replace(/\s(id=\"[^\"]*\")/ig, '');
+        const symbolId = 'avatar-svg';
+
+        // Put the avatar SVG inside a <g> with an id inside <defs>
+        avatarDefs = `<defs><clipPath id="avatar-clip"><circle cx="48" cy="48" r="48"/></clipPath><g id="${symbolId}">${inlined}</g></defs>`;
+
+        // Use a foreignObject to render the SVG content into a 96x96 box and clip it
+        // Some renderers don't allow referencing inline <svg> via <use> with complex markup, so use <g> directly
+        avatarElement = `<g transform="translate(504,267)"><svg x="0" y="0" width="96" height="96" viewBox="0 0 96 96" preserveAspectRatio="xMidYMid slice" clip-path="url(#avatar-clip)">${inlined}</svg></g>`;
+
+    } else if (avatarInfo && avatarInfo.content) {
+        // Raster image data URI
+        avatarElement = `<image href="${avatarInfo.content}" x="504" y="267" width="96" height="96" clip-path="circle(48px at 48px 48px)"/>`;
+    }
+
     const svg = `
         <svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">
             <defs>
@@ -21,25 +50,37 @@ module.exports = async function({name, content, avatar}) {
                     }
                 </style>
             </defs>
-            
+            ${avatarDefs}
+
             <!-- Background -->
             <rect width="1200" height="630" fill="#2d2d2d"/>
-            
+
             <!-- Avatar circle background -->
             <circle cx="552" cy="315" r="48" fill="#dedede"/>
-            
+
             <!-- Avatar image (if provided) -->
-            ${avatarBase64 ? `<image href="${avatarBase64}" x="504" y="267" width="96" height="96" clip-path="circle(48px at 48px 48px)"/>` : ''}
-            
+            ${avatarElement}
+
             <!-- Text content -->
-            <text x="660" y="300" class="name-text">${name}</text>
-            <text x="660" y="325" class="content-text">${content}</text>
+            <text x="660" y="300" class="name-text">${escapeXml(name)}</text>
+            <text x="660" y="325" class="content-text">${escapeXml(content)}</text>
         </svg>
     `;
-    
+
     // Convert SVG to JPG
     const jpgBuffer = await sharp(Buffer.from(svg))
         .jpeg({ quality: 90 })
         .toBuffer();
     return jpgBuffer;
+}
+
+// Minimal XML escaping for text nodes
+function escapeXml(unsafe) {
+    if (!unsafe) return '';
+    return String(unsafe)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&apos;');
 }

package/src/utils/parseArgs.js

@@ -4,18 +4,49 @@ const CONSTANTS = require('../constants');
 
 module.exports = function parseArgs() {
     const args = process.argv.slice(2);
-    
-    for (const arg of args) {
+    const parsedArgs = {
+        mode: 'build',
+        port: null
+    };
+
+    let i = 0;
+    while (i < args.length) {
+        const arg = args[i];
+        
         if (CONSTANTS.CLI_OPTIONS.HELP.includes(arg)) {
             showHelp();
             process.exit(0);
         } else if (CONSTANTS.CLI_OPTIONS.INIT.includes(arg)) {
             createSampleConfig();
             process.exit(0);
+        } else if (CONSTANTS.CLI_OPTIONS.VALIDATE.includes(arg)) {
+            require('../../validateConfig.js')();
+            process.exit(0);
+        } else if (CONSTANTS.CLI_OPTIONS.LIVE.includes(arg)) {
+            parsedArgs.mode = 'live';
+        } else if (CONSTANTS.CLI_OPTIONS.PORT.includes(arg)) {
+            if (i + 1 < args.length) {
+                const portValue = args[i + 1];
+                const portNum = parseInt(portValue);
+                if (!isNaN(portNum) && portNum > 0 && portNum < 65536) {
+                    parsedArgs.port = portNum;
+                } else {
+                    console.error(`${CONSTANTS.MESSAGES.ERROR_PREFIX} Invalid port number: ${portValue}. Please use a port between 1 and 65535.`);
+                    process.exit(1);
+                }
+                i += 2;
+                continue;
+            } else {
+                console.error(`${CONSTANTS.MESSAGES.ERROR_PREFIX} Port option requires a value. Usage: --port <PORT> or -p <PORT>`);
+                process.exit(1);
+            }
         } else {
             console.error(`${CONSTANTS.MESSAGES.UNKNOWN_OPTION} ${arg}`);
             console.error(CONSTANTS.MESSAGES.USE_HELP);
             process.exit(1);
         }
+        i++;
     }
+
+    return parsedArgs;
 };

package/src/utils/readImageAsBase64.js

@@ -2,15 +2,19 @@ const path = require('path');
 const fs = require('fs');
 const cwd = process.cwd();
 
+/**
+ * Read an image and return either a data URI (for raster images) or the raw SVG markup (for SVG files).
+ * Returns an object: { isSvg: boolean, content: string }
+ */
 module.exports = function(filePath) {
 	if (!filePath || typeof filePath !== 'string') {
-		return '';
+		return { isSvg: false, content: '' };
 	}
 
 	const absolutePath = path.join(cwd, filePath);
 	if (!fs.existsSync(absolutePath)) {
 		console.warn(`Avatar file not found: ${absolutePath}. Continuing without avatar.`);
-		return '';
+		return { isSvg: false, content: '' };
 	}
 
 	const extension = path.extname(absolutePath).toLowerCase();
@@ -22,7 +26,7 @@ module.exports = function(filePath) {
 		process.exit(1);
 	}
 
-	// Map extensions to MIME types and return a data URI
+	// Map extensions to MIME types
 	const mimeByExt = {
 		'.png': 'image/png',
 		'.jpg': 'image/jpeg',
@@ -31,7 +35,15 @@ module.exports = function(filePath) {
 		'.webp': 'image/webp',
 		'.svg': 'image/svg+xml'
 	};
+
+	if (extension === '.svg') {
+		// Return raw SVG markup (strip XML prolog if present)
+		let raw = fs.readFileSync(absolutePath, 'utf8');
+		raw = raw.replace(/^\s*<\?xml[^>]*>\s*/i, '');
+		return { isSvg: true, content: raw };
+	}
+
 	const mime = mimeByExt[extension];
 	const base64 = fs.readFileSync(absolutePath, 'base64');
-	return `data:${mime};base64,${base64}`;
+	return { isSvg: false, content: `data:${mime};base64,${base64}` };
 }

package/src/utils/setupWatcher.js

@@ -0,0 +1,69 @@
+const chokidar = require('chokidar');
+
+const debounce = (func, delay) => {
+    let timeoutId;
+    return function(...args) {
+        clearTimeout(timeoutId);
+        timeoutId = setTimeout(() => func.apply(this, args), delay);
+    };
+};
+
+const setupWatcher = (configPath, wss, onConfigChange) => {
+    let watcher = null;
+    let isPaused = false;
+    
+    const handleConfigChange = debounce(async (event, path) => {
+        if (isPaused) return;
+        
+        console.log(`Config file changed: ${event} ${path}`);
+        
+        try {
+            if (onConfigChange) {
+                await onConfigChange(path);
+            }
+            
+            wss.broadcastReload();
+        } catch (error) {
+            console.error('Error handling config change:', error);
+        }
+    }, 500);
+    
+    watcher = chokidar.watch(configPath, {
+        persistent: true,
+        ignoreInitial: true
+    });
+    
+    watcher
+        .on('change', handleConfigChange)
+        .on('error', (error) => {
+            console.error('Watcher error:', error);
+        });
+    
+    console.log(`Watching config file: ${configPath}`);
+    
+    const pause = () => {
+        isPaused = true;
+        console.log('Config watcher paused');
+    };
+    
+    const resume = () => {
+        isPaused = false;
+        console.log('Config watcher resumed');
+    };
+    
+    const close = () => {
+        if (watcher) {
+            watcher.close();
+            watcher = null;
+            console.log('Config watcher closed');
+        }
+    };
+    
+    return {
+        pause,
+        resume,
+        close
+    };
+};
+
+module.exports = setupWatcher;

package/src/utils/showHelp.js

@@ -8,19 +8,32 @@ USAGE:
 OPTIONS:
     --help, -h          Show this help message
     --init, -i          Create a sample config.json file
+    --live, -l          Start live preview with config editor
+    --port, -p PORT   Specify port for live preview (default: 3000)
 
 DESCRIPTION:
     OpenTwig generates a beautiful link in bio page from a config.json file.
     
     To get started:
     1. Run 'npx opentwig --init' to create a sample config.json
-    2. Edit the config.json file with your information
+    2. Edit config.json file with your information
     3. Run 'npx opentwig' to generate your page
+    
+    For live editing:
+    1. Run 'npx opentwig --live' to start live preview
+    2. Edit your config in browser sidebar
+    3. Changes are saved automatically to config.json
+    
+    For custom port:
+    npx opentwig --live --port 3001
 
-EXAMPLES:
+ EXAMPLES:
     npx opentwig --init          # Create sample config
     npx opentwig --help          # Show this help
     npx opentwig                 # Generate page from config.json
+    npx opentwig --live          # Start live preview
+    npx opentwig --live -p 9000   # Live preview on port 9000
+    npx opentwig --live --port 3001  # Live preview on port 3001
 
 For more information, visit: https://github.com/tufantunc/opentwig
 `);

package/src/utils/startLiveServer.js

@@ -0,0 +1,218 @@
+const express = require('express');
+const path = require('path');
+const fs = require('fs');
+const http = require('http');
+const { default: open } = require('open');
+const multer = require('multer');
+const createWSServer = require('./websocketServer');
+const loadConfig = require('./loadConfig');
+const buildPage = require('./buildPage');
+const saveFiles = require('./saveFiles');
+const setupWatcher = require('./setupWatcher');
+const CONSTANTS = require('../constants');
+const { applyDefaults, SAMPLE_CONFIG } = require('./configDefaults');
+
+const startLiveServer = async (customPort) => {
+    const app = express();
+    const server = http.createServer(app);
+    const wss = createWSServer(server);
+    
+    const PORT = customPort || process.env.PORT || CONSTANTS.LIVE_MODE.PORT;
+    const HOST = process.env.HOST || CONSTANTS.LIVE_MODE.DEFAULT_HOST;
+    
+    const cwd = process.cwd();
+    const packageDir = path.join(path.dirname(require.main.filename || process.argv[1]), '..');
+    const configPath = path.join(cwd, CONSTANTS.CONFIG_FILE);
+    
+    app.use(express.json());
+    
+    app.use('/live-ui', express.static(path.join(packageDir, 'src', 'live-ui')));
+    
+    app.get('/', (req, res) => {
+        res.sendFile(path.join(packageDir, 'src', 'live-ui', 'index.html'));
+    });
+    
+    app.use(express.static(path.join(cwd, 'dist')));
+    
+    app.get('/api/config', (req, res) => {
+        try {
+            if (!currentConfig) {
+                if (fs.existsSync(configPath)) {
+                    currentConfig = loadConfig();
+                } else {
+                    currentConfig = applyDefaults(SAMPLE_CONFIG);
+                    fs.writeFileSync(configPath, JSON.stringify(currentConfig, null, 4));
+                }
+            }
+            res.json(currentConfig);
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+    
+    app.post('/api/config', (req, res) => {
+        try {
+            const newConfig = req.body;
+            currentConfig = applyDefaults(newConfig);
+            
+            fs.writeFileSync(configPath, JSON.stringify(currentConfig, null, 4));
+            
+            buildPage(currentConfig).then(({ html, css, ogImage, qrImage }) => {
+                saveFiles(html, css, currentConfig.avatar, ogImage, qrImage);
+                wss.broadcastConfigUpdate(currentConfig);
+            }).catch(error => {
+                console.error('Error building page:', error);
+            });
+            
+            res.json({ success: true, config: currentConfig });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+    
+    const upload = multer({
+        dest: cwd,
+        limits: { fileSize: 5 * 1024 * 1024 }
+    }).single('avatar');
+    
+    app.post('/api/avatar', (req, res) => {
+        upload(req, res, (err) => {
+            if (err) {
+                console.error('Avatar upload error:', err);
+                return res.status(500).json({ success: false, error: err.message });
+            }
+            
+            if (!req.file) {
+                return res.status(400).json({ success: false, error: 'No file uploaded' });
+            }
+            
+            const avatarPath = path.basename(req.file.path);
+            
+            res.json({ success: true, path: avatarPath });
+        });
+    });
+    
+    app.get('/api/themes', (req, res) => {
+        try {
+            const themeDir = path.join(packageDir, 'theme');
+            const themes = fs.readdirSync(themeDir).filter(file => {
+                const themePath = path.join(themeDir, file);
+                return fs.statSync(themePath).isDirectory();
+            });
+            res.json(themes);
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+    
+    app.get('/api/validate', (req, res) => {
+        try {
+            const config = req.query.config ? JSON.parse(req.query.config) : null;
+            
+            if (!config) {
+                return res.json({ valid: false, errors: ['Config is required'] });
+            }
+            
+            const errors = [];
+            const warnings = [];
+            
+            if (!config.url) {
+                errors.push('URL is required');
+            }
+            
+            if (!config.name) {
+                errors.push('Name is required');
+            }
+            
+            if (config.url && !config.url.startsWith('http')) {
+                warnings.push('URL should start with http:// or https://');
+            }
+            
+            if (config.links && config.links.length === 0) {
+                warnings.push('No links configured');
+            }
+            
+            res.json({ 
+                valid: errors.length === 0, 
+                errors, 
+                warnings 
+            });
+        } catch (error) {
+            res.status(500).json({ error: error.message });
+        }
+    });
+    
+    app.get('/api/status', (req, res) => {
+        res.json({
+            connected: true,
+            clientCount: wss.getClientCount(),
+            configPath,
+            configExists: fs.existsSync(configPath)
+        });
+    });
+    
+    app.get('/', (req, res) => {
+        res.sendFile(path.join(packageDir, 'src', 'live-ui', 'index.html'));
+    });
+    
+    server.listen(PORT, HOST, async () => {
+        console.log(`${CONSTANTS.MESSAGES.SUCCESS_PREFIX} Live server running at http://${HOST}:${PORT}`);
+        console.log(`   Config: ${configPath}`);
+        
+        if (fs.existsSync(configPath)) {
+            currentConfig = loadConfig();
+            await buildPage(currentConfig);
+            console.log(`   Page built from existing config`);
+        } else {
+            currentConfig = applyDefaults(SAMPLE_CONFIG);
+            fs.writeFileSync(configPath, JSON.stringify(currentConfig, null, 4));
+            await buildPage(currentConfig);
+            console.log(`   Created sample config`);
+        }
+        
+        console.log(`\n📖 Press Ctrl+C to stop the server`);
+        
+        let browserOpened = false;
+        try {
+            if (typeof open !== 'undefined' && open) {
+                await open(`http://${HOST}:${PORT}`);
+                browserOpened = true;
+            } else {
+                console.log(`   ⚠️  Browser auto-open not available`);
+                console.log(`   Please visit: http://${HOST}:${PORT}`);
+            }
+        } catch (error) {
+            console.log(`   ⚠️  Could not open browser automatically`);
+            console.log(`   Please visit: http://${HOST}:${PORT}`);
+            
+            if (error.code === 'ENOENT') {
+                console.log(`   No browser command found. Please open the URL manually.`);
+            } else if (error.code === 'EACCES') {
+                console.log(`   Permission denied to open browser. Please open the URL manually.`);
+            } else {
+                console.log(`   Error: ${error.message}`);
+            }
+        }
+        
+        if (browserOpened) {
+            console.log(`   ✅ Browser opened successfully`);
+        }
+    });
+    
+    const watcher = setupWatcher(configPath, wss, async (changedPath) => {
+        try {
+            currentConfig = loadConfig();
+            await buildPage(currentConfig);
+            console.log('Page rebuilt from config change');
+        } catch (error) {
+            console.error('Error rebuilding page:', error);
+        }
+    });
+    
+    server.on('close', () => {
+        console.log('\nServer stopped');
+        watcher.close();
+    });
+};
+
+module.exports = startLiveServer;

package/src/utils/websocketServer.js

@@ -0,0 +1,53 @@
+const WebSocket = require('ws');
+
+const createWSServer = (server) => {
+    const wss = new WebSocket.Server({ server, path: '/ws' });
+    
+    wss.on('connection', (ws) => {
+        console.log('Client connected to WebSocket');
+        
+        ws.on('close', () => {
+            console.log('Client disconnected from WebSocket');
+        });
+        
+        ws.on('error', (error) => {
+            console.error('WebSocket error:', error);
+        });
+    });
+    
+    const broadcast = (message) => {
+        const data = JSON.stringify(message);
+        
+        wss.clients.forEach((client) => {
+            if (client.readyState === WebSocket.OPEN) {
+                client.send(data);
+            }
+        });
+    };
+    
+    const broadcastReload = () => {
+        broadcast({ type: 'reload' });
+    };
+    
+    const broadcastConfigUpdate = (config) => {
+        broadcast({ type: 'config-update', config });
+    };
+    
+    const broadcastThemeChange = (theme) => {
+        broadcast({ type: 'theme-change', theme });
+    };
+    
+    const getClientCount = () => {
+        return wss.clients.size;
+    };
+    
+    return {
+        broadcast,
+        broadcastReload,
+        broadcastConfigUpdate,
+        broadcastThemeChange,
+        getClientCount
+    };
+};
+
+module.exports = createWSServer;

package/test-og.js

@@ -0,0 +1,40 @@
+const fs = require('fs');
+const path = require('path');
+
+const render = require('./theme/default');
+
+const sample = {
+  title: 'A <Title> & Test "Quote"',
+  url: 'https://example.com/page?arg=1&other=<bad>',
+  name: "O'Connor & Co <dev>",
+  content: 'This is a description with <tags> & special "characters" and \'quotes\'.',
+  avatar: null,
+  links: [],
+  footerLinks: [],
+  share: {}
+};
+
+const out = render(sample);
+const outPath = path.join(__dirname, 'test-output.html');
+fs.writeFileSync(outPath, out);
+console.log('Wrote', outPath);
+
+// Basic assertions
+function assertContainsEscaped(haystack, raw, escaped) {
+  if (haystack.includes(raw)) {
+    throw new Error(`Found unescaped string: ${raw}`);
+  }
+  if (!haystack.includes(escaped)) {
+    throw new Error(`Did not find escaped string: ${escaped}`);
+  }
+}
+
+// Check several values
+assertContainsEscaped(out, '<Title>', '&lt;Title&gt;');
+// URL should have ampersand escaped and angle brackets escaped
+assertContainsEscaped(out, '&other=<bad>', '&amp;other=&lt;bad&gt;');
+assertContainsEscaped(out, "O'Connor", "O&#39;Connor");
+assertContainsEscaped(out, '"Quote"', '&quot;Quote&quot;');
+assertContainsEscaped(out, "<tags>", '&lt;tags&gt;');
+
+console.log('All assertions passed.');

package/theme/dark/style.css

@@ -189,6 +189,7 @@ body {
         width: 140px;
         height: 140px;
         border-radius: 8px;
+        filter: invert(1);
     }
 }
 

package/theme/default/index.js

@@ -4,20 +4,22 @@ const footerLinkComponent = require('./components/footer-link');
 const shareButtonComponent = require('./components/share-button');
 const qrComponent = require('./components/qr');
 const dialogComponent = require('./components/dialog');
+const escapeHTML = require('../../src/utils/escapeHTML');
 
 module.exports = function({title, url, name, content, avatar, links, footerLinks, share}) {
+
   return `<!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <title>${title}</title>
-      <meta name="description" content="${content}">
+      <title>${escapeHTML(title)}</title>
+      <meta name="description" content="${escapeHTML(content)}">
       <link rel="stylesheet" href="./style.css">
-      <meta property="og:title" content="tufantunc | Twitter | Linktree"/>
-      <meta property="og:description" content="Merhaba."/>
-      <meta property="og:url" content="${url}"/>
-      <meta property="og:image" content="${url}/og-image.png"/>
+  <meta property="og:title" content="${escapeHTML(title)}"/>
+  <meta property="og:description" content="${escapeHTML(content)}"/>
+  <meta property="og:url" content="${escapeHTML(url)}"/>
+  <meta property="og:image" content="${escapeHTML(url)}/og-image.jpg"/>
     </head>
     <body>
       <div class="app-bg">
@@ -28,8 +30,8 @@ module.exports = function({title, url, name, content, avatar, links, footerLinks
 
           <div class="profile">
             ${avatarComponent({avatar})}
-            <div class="name">${name}</div>
-            <div class="tagline">${content}</div>
+            <div class="name">${escapeHTML(name)}</div>
+            <div class="tagline">${escapeHTML(content)}</div>
           </div>
 
           <div class="links">