Directory Site Template - Using "Indie Developers' Toolbox" as an Example

This is a Directory site template built with EdgeOne Pages and the Raindrop.io API. This example uses the theme "Indie Developers' Toolbox for Going Global" to demonstrate how to quickly build a beautiful and practical Directory website.

Features

🎨 Modern UI design with light/dark mode support
🏷️ Smart, tag-based categorization system
🔍 Powerful fuzzy search functionality
📱 Fully responsive design
⚡ High-performance architecture based on Next.js
🔄 Real-time data synchronization (via Raindrop.io)

Getting Started

1. Set up Raindrop.io

Create an account on Raindrop.io.
Visit the Integrations settings page to create an application.
Generate and copy the API token.
Create a .env.local file in the project's root directory and add the token:
```
NEXT_PUBLIC_RAINDROP_API_TOKEN=your_raindrop_api_token_here
```
You can use the .env.local.example file as a template.

2. Add Your Navigation Content

Add bookmarks in Raindrop.io.
Add appropriate tags to each bookmark for categorization.
Add descriptions and notes to provide more context.
Optional: Customize cover images.

3. Local Development

# Install dependencies
npm install
# or
yarn
# or
pnpm install
# or
bun install

# Start the development server
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Visit http://localhost:3000 to view your navigation site.

Customizing the Theme

This project uses Tailwind CSS for styling. You can customize the theme by modifying the following files:

app/globals.css - Global styles
components/Base.tsx - Main layout component
components/common/* - Common components