[FEATURE] Import from bento.me URL

[yoanbernabeu]

🚀 Feature Description

Add the ability to import an existing bento.me page by providing its URL. The app will parse the page and pre-fill the OpenBento builder with the imported content.

💡 Problem / Motivation

Many users already have a bento.me page and want to migrate to OpenBento for more customization and self-hosting. Currently, they need to manually recreate their entire layout, which is tedious and time-consuming.

An import feature would:

• Lower the barrier to adoption
• Save users hours of manual work
• Demonstrate OpenBento as a viable bento.me alternative

📋 Proposed Solution

1. Add "Import from URL" option

In the builder or landing page, add an "Import from bento.me" button that:

• Opens a modal asking for the bento.me URL (e.g., https://bento.me/username)
• Validates the URL format
• Fetches and parses the page
• Pre-fills the builder with extracted data

2. Parse bento.me page structure

Extract the following data:

• Profile: Name, bio, avatar image
• Links: Title, URL, icon/image
• Social links: Platform detection, handles
• Media: Images, embedded content
• Layout: Block positions and sizes (approximate)

3. Technical implementation

Recommended approach - Local dev mode only:

• Feature enabled only when running locally (npm run dev)
• Use a simple local proxy or CORS-anywhere during development
• Disabled on the public demo (no server-side required)
• Users run locally to import → then export and deploy wherever they want

Why local only:

• No need for a backend or serverless functions
• Avoids CORS issues without infrastructure
• Keeps OpenBento fully static and simple
• Users who want to import are likely developers who can run locally

4. Mapping bento.me to OpenBento

bento.me element	OpenBento equivalent
Profile card	UserProfile (name, bio, avatar)
Link cards	LINK blocks
Social icons	SOCIAL or SOCIAL_ICON blocks
Images	MEDIA blocks
Text sections	TEXT blocks
Map embeds	MAP blocks
Spacing	SPACER blocks

🔄 Alternatives Considered

• Manual JSON import: Less user-friendly, requires technical knowledge
• Browser extension: More complex to develop and distribute
• Copy-paste HTML: Error-prone and requires user to inspect page

⚠️ Limitations & Considerations

• CORS: Feature only works in local dev mode (not on hosted demo)
• Rate limiting: bento.me might block automated requests
• Layout accuracy: Exact grid positions may not translate perfectly
• Dynamic content: Some content loaded via JS might not be captured
• Terms of Service: Users should only import their own pages

📝 Additional Context

New files to create:

• services/import/bentoMe.ts - Parser logic
• components/ImportModal.tsx - UI for import flow

Files to modify:

• components/Builder.tsx or components/LandingPage.tsx - Add import button

Environment variable:

• Use VITE_ENABLE_IMPORT=true to enable the feature
• Default: disabled on production builds

✅ Checklist

• I have searched for existing issues to avoid duplicates
• I have read the Contributing Guide

[jojo58fr]

Hello ! L'import depuis bento.me me semble compliqué maintenant, je ne sais pas si c'est récupérable ou non depuis qu'il sont supprimé le site. Est-ce que un import de linktree pourrait être intéressant à la place ? 😮

[jojo58fr]

Hello ! L'import depuis bento.me me semble compliqué maintenant, je ne sais pas si c'est récupérable ou non depuis qu'il sont supprimé le site. Est-ce que un import de linktree pourrait être intéressant à la place ? 😮

#35 (comment)
J'ai essayé de faire un essai plus ou moins de l'import. J'ai considéré qu'on restait sur Vite pour l'import, je pense il faudra encore un peu modifier la chose je pense !