Bento Link Tree

A modern, responsive bento-style link tree built with SvelteKit, featuring live data integration from various APIs.

Features

• 🎨 Beautiful bento-style grid layout
• 📊 Live GitHub contribution graph
• 🎵 Spotify "Now Playing" integration
• 🐦 Bluesky latest post display
• 🏃 Strava activity tracking
• 📸 Photo cards with camera metadata
• 📧 Contact information cards
• 🔗 GitHub project showcase

Getting Started

Prerequisites

• Node.js 18+ and npm
• API credentials for the services you want to use (see below)

Installation

1. Clone the repository

2. Install dependencies:

   npm install
   

3. Copy the example environment file:

   cp .env.example .env
   

4. Fill in your API credentials in the .env file (see API Setup below)

5. Start the development server:

   npm run dev
   

API Setup

GitHub

1. Go to GitHub Settings > Developer settings > Personal access tokens
2. Generate a new token with public_repo scope (or repo for private repos)
3. Add to .env:
   • GITHUB_TOKEN: Your personal access token
   • GITHUB_USERNAME: Your GitHub username
   • GITHUB_REPO_OWNER: Owner of the repo to display
   • GITHUB_REPO_NAME: Repository name to display

Spotify

1. Go to Spotify Developer Dashboard
2. Create a new app
3. Copy your Client ID and Client Secret
4. To get a refresh token (for "Now Playing" feature):
   • Use the Spotify OAuth flow
   • Or use a tool like this one
5. Add to .env:
   • SPOTIFY_CLIENT_ID: Your Spotify app client ID
   • SPOTIFY_CLIENT_SECRET: Your Spotify app client secret
   • SPOTIFY_REFRESH_TOKEN: Your refresh token (optional, for now playing)

Note: The Spotify "Now Playing" feature requires a user-authorized refresh token. The client credentials flow only works for public data.

Bluesky

1. Go to Bluesky Settings > App Passwords
2. Create a new app password
3. Add to .env:
   • BLUESKY_HANDLE: Your Bluesky handle (e.g., username.bsky.social)
   • BLUESKY_PASSWORD: Your app password

Strava

1. Go to Strava API Settings
2. Create a new application
3. Note your Client ID and Client Secret
4. Complete the OAuth flow to get a refresh token:
   • Visit: https://www.strava.com/oauth/authorize?client_id=YOUR_CLIENT_ID&response_type=code&redirect_uri=http://localhost&scope=activity:read_all
   • After authorization, extract the code from the redirect URL
   • Exchange the code for a refresh token using the Strava API
5. Add to .env:
   • STRAVA_CLIENT_ID: Your Strava app client ID
   • STRAVA_CLIENT_SECRET: Your Strava app client secret
   • STRAVA_REFRESH_TOKEN: Your refresh token

Project Structure

src/
├── lib/
│   ├── api/              # API integration utilities
│   │   ├── github.js     # GitHub API functions
│   │   ├── spotify.js    # Spotify API functions
│   │   ├── bluesky.js    # Bluesky API functions
│   │   ├── strava.js     # Strava API functions
│   │   └── index.js      # API exports
│   └── ...
└── routes/
    └── +page.svelte      # Main bento grid page
    └── +page.server.js   # Server-side data fetching

Customization

Adding New Cards

1. Create API function in src/lib/api/
2. Add data fetching to src/routes/+page.server.js
3. Add card component to src/routes/+page.svelte
4. Style the card in the <style> section

Styling

The cards use CSS Grid with a 2-column layout on desktop. Modify the .bento-grid styles to change the layout.

Environment Variables

All API credentials are stored in .env (not committed to git). See .env.example for all available variables.

Important: Never commit your .env file to version control!

Building for Production

npm run build

Note: This project uses live API data, so it's configured as a dynamic site (not prerendered). For static hosting, you may want to implement caching or use a different deployment strategy.

Troubleshooting

API Errors

• Check that all required environment variables are set
• Verify API tokens are valid and have correct scopes
• Check browser console and server logs for error messages

Spotify "Not Playing"

• Ensure you have a valid SPOTIFY_REFRESH_TOKEN
• The refresh token must be from a user authorization (not client credentials)
• Make sure Spotify is actually playing music

Bluesky Not Loading

• Verify your handle format is correct (e.g., username.bsky.social)
• Check that your app password is valid
• Ensure you're using an app password, not your account password

License

MIT

Contributing

Feel free to submit issues and pull requests!