OpenLinks 🚀

OpenLinks is a free, open-source Astro template for creating customizable link-in-bio pages. All configuration is handled via a single JSON file, making it extremely easy to personalize and deploy.

OpenLinks Screenshot

✨ Features

⭐ 100% JSON-driven: Configure your profile, links, theme, and more via OpenLinks.json.
⭐ Customizable themes: Switch between built-in themes or create your own in themes.ts.
⭐ Responsive design: Looks great on mobile and desktop.
⭐ Custom icons support: Add SVG icons to your links.
⭐ TailwindCSS integration: Modern, easily editable styles.
⭐ Adult content warning: Optional +18 warning banner.
⭐ SEO & social meta: Optimized for sharing on social media.
⭐ Easy deployment: Works with Vercel, Netlify, GitHub Pages, and more.

📦 Project Structure

/
├── OpenLinks.json         # Main config (profile, links, theme, etc)
├── themes.ts              # Available themes
├── src/
│   ├── components/        # Reusable Astro components
│   ├── layouts/           # Main layout
│   ├── lib/               # Utilities (e.g. getTheme)
│   ├── pages/             # Astro pages
│   └── styles/            # Global styles and Tailwind
├── public/                # Static files (icons, fonts, avatar)
├── astro.config.mjs       # Astro + Tailwind config
├── package.json           # Dependencies and scripts
└── README.md

🚀 Getting Started

Clone the repository:

git clone https://github.com/E10YDEV/OpenLinks.git
cd OpenLinks

Install dependencies:
```
npm install
```
Customize your page:
- Edit OpenLinks.json to change your profile, links, theme, etc.
- (Optional) Edit themes.ts to add or modify themes.
Start the development server:
```
npm run dev
```
Open http://localhost:4321 in your browser.
Build for production:
```
npm run build
```
Preview the production build:
```
npm run preview
```

⚙ Configuration

Profile & links: All managed in OpenLinks.json.
Themes: Set the "theme" value in the JSON to any available in themes.ts: default, ocean, forest, sunrise, ness, arctic, cherry, brutalism.
Icons: Place your SVGs in public/icons/ and reference the path in each link.

📝 How to Edit `OpenLinks.json`

All your profile information, links, and theme settings are managed in the OpenLinks.json file at the root of the project. Here’s how to customize it:

Example Structure

{
  "name": "Your Name",
  "description": "Short bio or description.",
  "avatar": "/avatar.png",
  "theme": "ocean",
  "links": [
    {
      "title": "GitHub",
      "url": "https://github.com/yourusername",
      "icon": "/icons/github.svg"
    },
    {
      "title": "Twitter",
      "url": "https://twitter.com/yourusername",
      "icon": "/icons/twitter.svg"
    }
  ],
  "adultContent": false
}

Fields

name: Your display name.
description: A short description or tagline.
avatar: Path to your profile image (place it in the public/ folder).
theme: Choose a theme from those available in themes.ts.
links: An array of your links. Each link can have:
- title: The label shown on your page.
- url: The destination URL.
- icon: Path to an SVG icon (place SVGs in public/icons/).
adultContent: Set to true to show a +18 warning banner.

Customizing

Add, remove, or edit links as needed.
Change the theme by updating the "theme" value.
Update your avatar or bio at any time.

After saving changes to OpenLinks.json, your site will update automatically in development mode.

🛠 Available Scripts

| Command | Action | |--------------------|------------------------------------------------| | npm run dev | Start the development server | | npm run build | Build the site for production in /dist | | npm run preview | Preview the production build locally | | npm run astro | Run Astro CLI commands |

🛣 Upcoming Features

OpenLinks is actively developed! Here’s what’s coming soon:

Link sharing system: Easily share and manage your links with others.
Advanced customization: More options to personalize layouts and components.
SVG icon color support: Change the color of your SVG icons directly from your configuration.
More themes: A wider variety of built-in themes to choose from.

Stay tuned for updates and feel free to suggest features or contribute!

🤝 Contributing

Contributions are welcome! If you have ideas for new features, improvements, or bug fixes, feel free to open an issue or submit a pull request.

How to contribute:

Fork the repository.
Create a new branch for your feature or fix.
Make your changes and commit them.
Open a pull request describing your changes.

Please follow the existing code style and include clear commit messages. Thank you for helping make OpenLinks better!

📄 License

MIT. Made with ❤ by E10Y.

Customize, deploy, and share your link-in-bio page in minutes!

OpenLinks

Install / Use

README