opentwig 1.0.0 → 1.0.3

package/README.md

@@ -8,7 +8,7 @@ OpenTwig is an open source personal link page generator that creates beautiful,
 - 📱 **Mobile Responsive**: Optimized for all devices with mobile-first design
 - 🚀 **Fast & Lightweight**: Generates static HTML/CSS with minimal dependencies
 - 🔗 **Easy Link Management**: Simple JSON configuration for all your links
-- 🖼️ **Avatar Support**: Custom profile pictures with automatic processing
+- 🖼️ **Optional Avatar Support**: Custom profile pictures with automatic processing (completely optional)
 - 📊 **Open Graph Images**: Auto-generated social media preview images
 - 📱 **QR Code Generation**: Built-in QR codes for easy mobile sharing
 - 🎭 **Modal Dialogs**: Support for rich content in footer links
@@ -38,6 +38,7 @@ npx opentwig
 
 OpenTwig uses a simple JSON configuration file (`config.json`) to define your page. Here's the complete configuration structure:
 
+### With Avatar (Optional)
 ```json
 {
   "theme": "default",
@@ -77,6 +78,39 @@ OpenTwig uses a simple JSON configuration file (`config.json`) to define your pa
 }
 ```
 
+### Without Avatar (Minimal Configuration)
+```json
+{
+  "theme": "default",
+  "url": "https://links.yourwebsite.com",
+  "title": "Your Name - opentwig 🌿",
+  "name": "Your Name",
+  "content": "Hello World! Here is my bio.",
+  "minify": true,
+  "links": [
+    {
+      "url": "https://twitter.com",
+      "title": "Twitter"
+    },
+    {
+      "url": "https://instagram.com",
+      "title": "Instagram"
+    }
+  ],
+  "footerLinks": [
+    {
+      "title": "Contact",
+      "url": "mailto:mail@mail.com"
+    }
+  ],
+  "share": {
+    "title": "Your Name - opentwig 🌿",
+    "url": "https://links.yourwebsite.com",
+    "text": "Share"
+  }
+}
+```
+
 ### Configuration Options
 
 | Option | Type | Description |
@@ -87,12 +121,38 @@ OpenTwig uses a simple JSON configuration file (`config.json`) to define your pa
 | `name` | string | Your display name |
 | `content` | string | Bio/description text |
 | `minify` | boolean | Enable CSS minification (default: `true`) |
-| `avatar` | object | Avatar image configuration |
-| `avatar.path` | string | Path to your avatar image |
+| `avatar` | object | **Optional** Avatar image configuration |
+| `avatar.path` | string | **Optional** Path to your avatar image (supports PNG, JPG, JPEG, WebP) |
 | `links` | array | Array of link objects with `url` and `title` |
 | `footerLinks` | array | Footer links (can be URLs or modal dialogs) |
 | `share` | object | Web Share API configuration |
 
+### 🖼️ Avatar Configuration
+
+The avatar feature is completely optional. If you don't include the `avatar` object in your configuration, no avatar will be displayed on your page.
+
+**Supported image formats:**
+- PNG
+- JPG/JPEG  
+- WebP
+
+**Avatar processing:**
+- Images are automatically optimized and resized
+- Processed avatar is saved as `avatar.png` in the output directory
+- Original aspect ratio is preserved
+- Images are compressed for optimal web performance
+
+**Example avatar configuration:**
+```json
+{
+  "avatar": {
+    "path": "./my-photo.jpg"
+  }
+}
+```
+
+**Note:** If you don't want an avatar, simply omit the `avatar` object from your configuration entirely.
+
 ## 🎨 Themes
 
 OpenTwig includes 4 beautiful themes:
@@ -103,7 +163,7 @@ OpenTwig includes 4 beautiful themes:
 - **Colorful**: Vibrant color scheme
 
 All themes are mobile-responsive and include:
-- Custom avatar display
+- Optional custom avatar display
 - Link buttons with hover effects
 - Modal dialogs for rich content
 - QR code integration
@@ -128,7 +188,7 @@ OpenTwig generates the following files in the `dist/` directory:
 
 - `index.html` - Main HTML page
 - `style.css` - Processed and optimized CSS
-- `avatar.png` - Processed avatar image
+- `avatar.png` - Processed avatar image *(only generated if avatar is configured)*
 - `og-image.jpg` - Open Graph image for social sharing
 - `qr.svg` - QR code for mobile sharing
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "opentwig",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "description": "opentwig 🌿 is an open source link in bio page generator.",
   "main": "src/index.js",
   "bin": {

package/src/utils/configDefaults.js

@@ -16,10 +16,7 @@ const DEFAULT_CONFIG = {
     content: 'Hello World! Here is my bio.',
     url: 'https://links.yourwebsite.com',
     
-    // Avatar settings
-    avatar: {
-        path: './avatar.png'
-    },
+    // Avatar settings - no default, user must explicitly define if they want an avatar
     
     // Links settings
     links: [],
@@ -94,19 +91,15 @@ const SAMPLE_CONFIG = {
 const applyDefaults = (config) => {
     const result = { ...config };
     
-    // Apply defaults for each key
+    // Apply defaults for each key (excluding avatar which has special handling)
     Object.keys(DEFAULT_CONFIG).forEach(key => {
-        if (result[key] === undefined || result[key] === null) {
+        if (key !== 'avatar' && (result[key] === undefined || result[key] === null)) {
             result[key] = DEFAULT_CONFIG[key];
         }
     });
     
-    // Special handling for nested objects
-    if (result.avatar && typeof result.avatar === 'object') {
-        result.avatar = { ...DEFAULT_CONFIG.avatar, ...result.avatar };
-    } else if (!result.avatar) {
-        result.avatar = { ...DEFAULT_CONFIG.avatar };
-    }
+    // Special handling for avatar - no defaults, user must explicitly define
+    // If avatar is undefined, null, false, or an object, leave it as is
     
     if (result.share && typeof result.share === 'object') {
         result.share = { ...DEFAULT_CONFIG.share, ...result.share };

package/src/utils/generateOGImage.js

@@ -2,7 +2,7 @@ const sharp = require('sharp');
 const readImageAsBase64 = require('./readImageAsBase64');
 
 module.exports = async function({name, content, avatar}) {
-    const avatarBase64 = readImageAsBase64(avatar.path);
+    const avatarBase64 = avatar && avatar.path ? readImageAsBase64(avatar.path) : null;
     // Create SVG with the same dimensions and styling as the original HTML
     const svg = `
         <svg width="1200" height="630" xmlns="http://www.w3.org/2000/svg">

package/src/utils/processCSS.js

@@ -6,11 +6,18 @@ const postcss = require('postcss');
 const minify = require('postcss-minify');
 
 module.exports = async function(config) {
-    // Check if the theme has a style.css file
-    const cssPath = path.join(cwd, 'theme', config.theme, 'style.css');
-
-    const hasCss = fs.existsSync(cssPath);
-    if (!hasCss) {
+    // Try package directory first (for NPX), then current directory (for local dev)
+    const packageDir = path.dirname(require.main.filename);
+    const currentDir = process.cwd();
+    
+    const cssPaths = [
+        path.join(packageDir, '..', 'theme', config.theme, 'style.css'), // NPX package
+        path.join(currentDir, 'theme', config.theme, 'style.css')         // Local development
+    ];
+    
+    const cssPath = cssPaths.find(p => fs.existsSync(p));
+    
+    if (!cssPath) {
         return null;
     }
 

package/src/utils/readImageAsBase64.js

@@ -9,8 +9,8 @@ module.exports = function(filePath) {
 
 	const absolutePath = path.join(cwd, filePath);
 	if (!fs.existsSync(absolutePath)) {
-		console.error(`File not found: ${absolutePath}`);
-		process.exit(1);
+		console.warn(`Avatar file not found: ${absolutePath}. Continuing without avatar.`);
+		return '';
 	}
 
 	const extension = path.extname(absolutePath).toLowerCase();

package/src/utils/saveFiles.js

@@ -17,8 +17,11 @@ module.exports = function(html, css, avatar,ogImage, qrImage) {
         fs.writeFileSync(path.join(distDir, 'style.css'), css);
     }
 
-    if (avatar != null && avatar.path) {
-        fs.copyFileSync(path.join(cwd, avatar.path), path.join(distDir, 'avatar.png'));
+    if (avatar && avatar.path && fs.existsSync(path.join(cwd, avatar.path))) {
+        // Get the original file extension from the avatar path
+        const originalExtension = path.extname(avatar.path);
+        const avatarFileName = `avatar${originalExtension}`;
+        fs.copyFileSync(path.join(cwd, avatar.path), path.join(distDir, avatarFileName));
     }
 
     // Write the generated OG Image

package/theme/default/components/avatar.js

@@ -1,7 +1,17 @@
-module.exports = function() {
+module.exports = function({avatar}) {
+    // If no avatar is defined or avatar path is not provided, return empty string
+    if (!avatar || !avatar.path) {
+        return '';
+    }
+    
+    // Get the original file extension from the avatar path
+    const path = require('path');
+    const originalExtension = path.extname(avatar.path);
+    const avatarFileName = `avatar${originalExtension}`;
+    
     return `
         <div class="avatar">
-            <img src="./avatar.png" alt="Avatar" />
+            <img src="./${avatarFileName}" alt="Avatar" />
         </div>
     `;
 }