{"id":31945416,"url":"https://github.com/tufantunc/opentwig","last_synced_at":"2026-02-05T01:06:01.124Z","repository":{"id":315905160,"uuid":"1054392005","full_name":"tufantunc/opentwig","owner":"tufantunc","description":"opentwig 🌿 is an open source link in bio page generator.","archived":false,"fork":false,"pushed_at":"2025-10-06T07:21:55.000Z","size":106,"stargazers_count":2,"open_issues_count":6,"forks_count":6,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-06T09:36:30.178Z","etag":null,"topics":["developer-tools","good-first-issues","hacktoberfest","opensource-alternative"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tufantunc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-09-10T19:09:58.000Z","updated_at":"2025-10-06T07:25:06.000Z","dependencies_parsed_at":"2025-09-21T17:46:00.249Z","dependency_job_id":null,"html_url":"https://github.com/tufantunc/opentwig","commit_stats":null,"previous_names":["tufantunc/opentwig"],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/tufantunc/opentwig","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tufantunc%2Fopentwig","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tufantunc%2Fopentwig/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tufantunc%2Fopentwig/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tufantunc%2Fopentwig/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tufantunc","download_url":"https://codeload.github.com/tufantunc/opentwig/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tufantunc%2Fopentwig/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279018788,"owners_count":26086454,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["developer-tools","good-first-issues","hacktoberfest","opensource-alternative"],"created_at":"2025-10-14T10:56:32.920Z","updated_at":"2026-02-05T01:06:01.115Z","avatar_url":"https://github.com/tufantunc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OpenTwig 🌿\n\n[![npm version](https://img.shields.io/npm/v/opentwig.svg)](https://www.npmjs.com/package/opentwig)\n[![npm downloads](https://img.shields.io/npm/dm/opentwig.svg)](https://www.npmjs.com/package/opentwig)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Node.js Version](https://img.shields.io/node/v/opentwig.svg)](https://nodejs.org/)\n[![GitHub stars](https://img.shields.io/github/stars/tufantunc/opentwig.svg)](https://github.com/tufantunc/opentwig/stargazers)\n[![GitHub issues](https://img.shields.io/github/issues/tufantunc/opentwig.svg)](https://github.com/tufantunc/opentwig/issues)\n[![Coverage](https://img.shields.io/badge/Coverage-60%25-yellow)]()\n\nOpenTwig 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.\n\n## ✨ Features\n\n- 🎨 **Multiple Themes**: Choose from 4 built-in themes (default, dark, minimal, colorful)\n- 📱 **Mobile Responsive**: Optimized for all devices with mobile-first design\n- 🚀 **Fast \u0026 Lightweight**: Generates static HTML/CSS with minimal dependencies\n- 🔗 **Easy Link Management**: Simple JSON configuration for all your links\n- 🖼️ **Optional Avatar Support**: Custom profile pictures with automatic processing (completely optional)\n- 📊 **Open Graph Images**: Auto-generated social media preview images\n- 📱 **QR Code Generation**: Built-in QR codes for easy mobile sharing\n- 🎭 **Modal Dialogs**: Support for rich content in footer links\n- 📤 **Share Functionality**: Native Web Share API integration\n- ⚡ **CSS Optimization**: Automatic CSS minification and autoprefixing\n- 🛠️ **CLI Interface**: Simple command-line interface with helpful commands\n\n## 🚀 Quick Start\n\n### Installation \u0026 Usage\n\n```bash\n# Create a new project\nnpx opentwig --init\n\n# Edit the generated config.json with your information\n# Then generate your page\nnpx opentwig\n\n# Or use live preview with interactive editor\nnpx opentwig --live\n```\n\n### Prerequisites\n\n- Node.js (v14 or higher)\n- npm or yarn\n\n## 🔥 Live Preview Mode (NEW!)\n\nOpenTwig now includes a powerful live preview mode with an interactive configuration editor!\n\n```bash\n# Start live preview with config editor\nnpx opentwig --live\n\n# Or using npm script\nnpm run live\n```\n\n**Features:**\n- 🎨 **Interactive Sidebar Editor** - Edit all config options in a beautiful UI\n- 🔄 **Real-time Preview** - See changes instantly as you edit\n- 💾 **Auto-save** - Changes automatically save to config.json\n- 📱 **Responsive Layout** - Preview on the left, editor on the right\n- 🖼️ **Avatar Upload** - Upload and preview avatar images directly\n- 🎭 **Theme Switcher** - Switch between themes instantly\n- 🔗 **Drag \u0026 Drop Links** - Easily manage your links\n- 📊 **Status Indicator** - Connection status and auto-save status\n- 📥 **Export Config** - Download your config as JSON\n\n**How it works:**\n1. Run `npx opentwig --live` to start the development server\n2. The browser opens automatically showing your page preview\n3. Use the sidebar editor to modify configuration\n4. Changes are auto-saved to `config.json`\n5. Preview updates in real-time\n6. Press `Ctrl+C` to stop the server\n7. Your `dist/` folder is ready for deployment!\n\n## 📖 Configuration\n\nOpenTwig uses a simple JSON configuration file (`config.json`) to define your page. Here's the complete configuration structure:\n\n### With Avatar (Optional)\n```json\n{\n  \"theme\": \"default\",\n  \"url\": \"https://links.yourwebsite.com\",\n  \"title\": \"Your Name - opentwig 🌿\",\n  \"name\": \"Your Name\",\n  \"content\": \"Hello World! Here is my bio.\",\n  \"minify\": true,\n  \"avatar\": {\n    \"path\": \"./avatar.png\"\n  },\n  \"links\": [\n    {\n      \"url\": \"https://twitter.com\",\n      \"title\": \"Twitter\"\n    },\n    {\n      \"url\": \"https://instagram.com\",\n      \"title\": \"Instagram\"\n    }\n  ],\n  \"footerLinks\": [\n    {\n      \"title\": \"Contact\",\n      \"url\": \"mailto:mail@mail.com\"\n    },\n    {\n      \"title\": \"Privacy\",\n      \"content\": \"Your privacy policy content here...\"\n    }\n  ],\n  \"share\": {\n    \"title\": \"Your Name - opentwig 🌿\",\n    \"url\": \"https://links.yourwebsite.com\",\n    \"text\": \"Share\"\n  }\n}\n```\n\n### Without Avatar (Minimal Configuration)\n```json\n{\n  \"theme\": \"default\",\n  \"url\": \"https://links.yourwebsite.com\",\n  \"title\": \"Your Name - opentwig 🌿\",\n  \"name\": \"Your Name\",\n  \"content\": \"Hello World! Here is my bio.\",\n  \"minify\": true,\n  \"links\": [\n    {\n      \"url\": \"https://twitter.com\",\n      \"title\": \"Twitter\"\n    },\n    {\n      \"url\": \"https://instagram.com\",\n      \"title\": \"Instagram\"\n    }\n  ],\n  \"footerLinks\": [\n    {\n      \"title\": \"Contact\",\n      \"url\": \"mailto:mail@mail.com\"\n    }\n  ],\n  \"share\": {\n    \"title\": \"Your Name - opentwig 🌿\",\n    \"url\": \"https://links.yourwebsite.com\",\n    \"text\": \"Share\"\n  }\n}\n```\n\n### Configuration Options\n\n| Option | Type | Description |\n|--------|------|-------------|\n| `theme` | string | Theme name (`default`, `dark`, `minimal`, `colorful`) |\n| `url` | string | Your page URL (for Open Graph and QR codes) |\n| `title` | string | Page title (appears in browser tab) |\n| `name` | string | Your display name |\n| `content` | string | Bio/description text |\n| `minify` | boolean | Enable CSS minification (default: `true`) |\n| `avatar` | object | **Optional** Avatar image configuration |\n| `avatar.path` | string | **Optional** Path to your avatar image (supports PNG, JPG, JPEG, WebP) |\n| `links` | array | Array of link objects with `url` and `title` |\n| `footerLinks` | array | Footer links (can be URLs or modal dialogs) |\n| `share` | object | Web Share API configuration |\n\n### 🖼️ Avatar Configuration\n\nThe avatar feature is completely optional. If you don't include the `avatar` object in your configuration, no avatar will be displayed on your page.\n\n**Supported image formats:**\n- PNG\n- JPG/JPEG  \n- WebP\n- SVG\n\n**Avatar processing:**\n- Images are automatically optimized and resized\n- Processed avatar is saved as `avatar.png` in the output directory\n- Original aspect ratio is preserved\n- Images are compressed for optimal web performance\n\n**Example avatar configuration:**\n```json\n{\n  \"avatar\": {\n    \"path\": \"./my-photo.jpg\"\n  }\n}\n```\n\n**Note:** If you don't want an avatar, simply omit the `avatar` object from your configuration entirely.\n\n## 🎨 Themes\n\nOpenTwig includes 4 beautiful themes:\n\n- **Default**: Clean, modern design with subtle shadows and rounded corners\n- **Dark**: Dark mode variant of the default theme with gradient backgrounds and glassmorphism effects\n- **Minimal**: Simplified, minimalist design with flat styling\n- **Colorful**: Vibrant color scheme with animated gradients and shimmer effects\n\nAll themes are mobile-responsive and include:\n- Optional custom avatar display\n- Link buttons with hover effects\n- Modal dialogs for rich content\n- QR code integration\n- Share button functionality\n\n## 🛠️ CLI Commands\n\n```bash\n# Show help information\nnpx opentwig --help\n\n# Create sample config.json\nnpx opentwig --init\n\n# Generate page from config.json\nnpx opentwig\n\n# Start live preview with config editor\nnpx opentwig --live\n\n# Validate config.json\nnpx opentwig --validate-config\n```\n\n## 📁 Output Files\n\nOpenTwig generates the following files in the `dist/` directory:\n\n- `index.html` - Main HTML page\n- `style.css` - Processed and optimized CSS\n- `avatar.png` - Processed avatar image *(only generated if avatar is configured)*\n- `og-image.jpg` - Open Graph image for social sharing\n- `qr.svg` - QR code for mobile sharing\n\n## 🔧 Development\n\n### Development Setup\n\nIf you want to contribute to OpenTwig or customize it locally:\n\n```bash\n# Clone the repository\ngit clone https://github.com/tufantunc/opentwig.git\ncd opentwig\n\n# Install dependencies\nnpm install\n\n# Test the CLI\nnpm start -- --help\n\n# Create a sample config for testing\nnpm start -- --init\n\n# Test the build process\nnpm start\n\n# Start live preview mode\nnpm run live\n```\n\n### Project Structure\n\n```\nopentwig/\n├── src/\n│   ├── index.js              # Main CLI entry point\n│   ├── constants.js          # Application constants\n│   ├── live-ui/             # Live preview UI\n│   │   ├── index.html       # Live editor page\n│   │   ├── styles.css      # Live editor styles\n│   │   ├── preview.js      # Preview management\n│   │   ├── editor.js       # Config editor logic\n│   │   └── sidebar.js     # Sidebar components\n│   └── utils/                # Core utilities\n│       ├── buildPage.js      # Page building logic\n│       ├── generateHTML.js   # HTML generation\n│       ├── generateOGImage.js # Open Graph image creation\n│       ├── generateQR.js     # QR code generation\n│       ├── processCSS.js     # CSS processing and optimization\n│       ├── startLiveServer.js # Live preview server\n│       ├── websocketServer.js # WebSocket handling\n│       ├── setupWatcher.js   # Config file watcher\n│       └── ...\n├── theme/\n│   ├── default/              # Default theme\n│   │   ├── index.js         # Theme template\n│   │   ├── style.css        # Theme styles\n│   │   └── components/      # Reusable components\n│   ├── dark/                # Dark theme\n│   ├── minimal/             # Minimal theme\n│   └── colorful/            # Colorful theme\n├── .github/                 # GitHub templates\n│   ├── ISSUE_TEMPLATE/      # Issue templates\n│   └── pull_request_template.md # PR template\n└── dist/                    # Generated output (gitignored)\n```\n\n### Key Features Implementation\n\n- **Image Processing**: Uses Sharp for avatar and OG image processing\n- **QR Code Generation**: Uses qrcode library for SVG QR codes\n- **CSS Processing**: PostCSS with autoprefixer and minification\n- **HTML Generation**: Component-based template system\n- **Theme System**: Modular theme architecture with component support\n\n## 🌐 Deployment\n\nSince OpenTwig generates static files, you can deploy to any static hosting service:\n\n- **GitHub Pages**: Push `dist/` folder to a repository\n- **Netlify**: Drag and drop the `dist/` folder\n- **Vercel**: Connect your repository\n- **AWS S3**: Upload files to an S3 bucket\n- **Any web server**: Upload the `dist/` folder to your server\n\n## 🌟 Showcase\n\nCheck out these amazing websites created with OpenTwig! These examples showcase sites made with OpenTwig:\n\n### Featured Sites\n\n- **[Tufan Tunç - My Social Links](https://links.tufantunc.com)** - My social links, used default theme with avatar\n\n### Submit Your Site\n\nHave you created a website with OpenTwig? We'd love to showcase it! You can add your site to our showcase in two ways:\n\n1. **Create an Issue** - Use our [showcase submission template](.github/ISSUE_TEMPLATE/showcase_submission.md)\n2. **Submit a Pull Request** - Add your site directly to the showcase section in this README\n\n#### Guidelines for Showcase Submissions\n\n- ✅ Your site must be live and accessible\n- ✅ Use OpenTwig to generate the site\n- ✅ Keep descriptions concise (1-2 sentences max)\n\n#### What We Look For\n\n- Creative use of themes and customization\n- Different use cases (personal, business, portfolio, etc.)\n- Good examples of various configuration options\n- Sites that inspire other users\n\n## 📝 License\n\nMIT License - see [LICENSE](LICENSE) file for details\n\n## 🤝 Contributing\n\nOpenTwig is open source and welcomes contributions from the community! 🎉\n\n### Ways to Contribute\n\n- 🐛 **Report bugs** using our [bug report template](.github/ISSUE_TEMPLATE/bug_report.md)\n- ✨ **Suggest features** through our [feature request template](.github/ISSUE_TEMPLATE/feature_request.md)\n- 📚 **Improve documentation** using our [documentation improvement template](.github/ISSUE_TEMPLATE/documentation_improvement.md)\n- 🌟 **Submit to showcase** using our [showcase submission template](.github/ISSUE_TEMPLATE/showcase_submission.md)\n- 🎨 **Create themes** - add new visual styles and layouts\n- 🔧 **Fix issues** - tackle open issues and improve the codebase\n- 🌍 **Translate** - help translate documentation and content\n\n### Getting Started\n\n1. **Read our [Contributing Guide](CONTRIBUTING.md)** - Complete guide for contributors\n2. **Check our [Code of Conduct](CODE_OF_CONDUCT.md)** - Community guidelines\n3. **Look for `good first issue` labels** - Perfect for newcomers\n4. **Fork, code, and submit a PR** - Standard open source workflow\n\n### Hacktoberfest 2025\n\n🎃 This repository participates in **Hacktoberfest 2025**! \n\n- Look for issues with `hacktoberfest` and `good first issue` labels\n- Follow our issue and PR templates\n- Make meaningful contributions that benefit the project\n- Review our [Contributing Guide](CONTRIBUTING.md) before starting\n\n### Contributors\n\nWe appreciate all contributors! Contributors will be:\n- Listed here (if desired)\n- Mentioned in release notes for significant contributions\n- Given priority for code reviews and feedback\n\n## 🔗 Links\n\n- [GitHub Repository](https://github.com/tufantunc/opentwig)\n- [NPM Package](https://www.npmjs.com/package/opentwig)\n- [Issues](https://github.com/tufantunc/opentwig/issues)\n- [Discussions](https://github.com/tufantunc/opentwig/discussions)\n\n## 🔧 Config.json Validation\n\nYou can validate your configuration file using the CLI option:\n```bash\nnpx opentwig --validate-config\n```                                 \n### Available Commands               \n- `--help` - Show usage information  \n- `--init` - Create a sample config.json\n- `--validate-config` - Validate the config.json file\n- `build` - Compile the project files\n- `start` - Run the project\n- `test` - Execute the project tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftufantunc%2Fopentwig","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftufantunc%2Fopentwig","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftufantunc%2Fopentwig/lists"}