OpenTwig is an open source personal link page generator that creates beautiful, customizable "link in bio" pages. Instead of relying on third-party services, users can define their configuration and instantly create a fully functional static site they own and control.

✨ Features

🎨 Multiple Themes: Choose from 4 built-in themes (default, dark, minimal, colorful)
📱 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
📊 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
📤 Share Functionality: Native Web Share API integration
⚡ CSS Optimization: Automatic CSS minification and autoprefixing
🛠️ CLI Interface: Simple command-line interface with helpful commands

🚀 Quick Start

Installation & Usage

# Create a new project
npx opentwig --init

# Edit the generated config.json with your information
# Then generate your page
npx opentwig

Prerequisites

Node.js (v14 or higher)
npm or yarn

📖 Configuration

OpenTwig uses a simple JSON configuration file (config.json) to define your page. Here's the complete configuration structure:

{
  "theme": "default",
  "url": "https://links.yourwebsite.com",
  "title": "Your Name - opentwig 🌿",
  "name": "Your Name",
  "content": "Hello World! Here is my bio.",
  "minify": true,
  "avatar": {
    "path": "./avatar.png"
  },
  "links": [
    {
      "url": "https://twitter.com",
      "title": "Twitter"
    },
    {
      "url": "https://instagram.com",
      "title": "Instagram"
    }
  ],
  "footerLinks": [
    {
      "title": "Contact",
      "url": "mailto:mail@mail.com"
    },
    {
      "title": "Privacy",
      "content": "Your privacy policy content here..."
    }
  ],
  "share": {
    "title": "Your Name - opentwig 🌿",
    "url": "https://links.yourwebsite.com",
    "text": "Share"
  }
}

Configuration Options

Option	Type	Description
`theme`	string	Theme name (`default`, `dark`, `minimal`, `colorful`)
`url`	string	Your page URL (for Open Graph and QR codes)
`title`	string	Page title (appears in browser tab)
`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
`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

🎨 Themes

OpenTwig includes 4 beautiful themes:

Default: Clean, modern design with subtle shadows and rounded corners
Dark: Dark mode variant of the default theme
Minimal: Simplified, minimalist design
Colorful: Vibrant color scheme

All themes are mobile-responsive and include:

Custom avatar display
Link buttons with hover effects
Modal dialogs for rich content
QR code integration
Share button functionality

🛠️ CLI Commands

# Show help information
npx opentwig --help

# Create sample config.json
npx opentwig --init

# Generate page from config.json
npx opentwig

📁 Output Files

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
og-image.jpg - Open Graph image for social sharing
qr.svg - QR code for mobile sharing

🔧 Development

Project Structure

opentwig/
├── src/
│   ├── index.js              # Main entry point
│   ├── constants.js          # Application constants
│   └── utils/                # Utility functions
│       ├── buildPage.js      # Page building logic
│       ├── generateHTML.js   # HTML generation
│       ├── generateOGImage.js # Open Graph image creation
│       ├── generateQR.js     # QR code generation
│       ├── processCSS.js     # CSS processing and optimization
│       └── ...
├── theme/
│   ├── default/              # Default theme
│   │   ├── index.js         # Theme template
│   │   ├── style.css        # Theme styles
│   │   └── components/      # Reusable components
│   ├── dark/                # Dark theme
│   ├── minimal/             # Minimal theme
│   └── colorful/            # Colorful theme
└── dist/                    # Generated output