Semantic Linking Webflow Export

A Next.js application for viewing blog posts exported from Webflow with intelligent semantic linking between related content. Import CSV data, analyze relationships between posts, and export approved links.

Features

• 🔗 Semantic Linking: AI-powered analysis finds related content
• 📊 CSV Import: Dedicated import page with preview and validation
• 💾 Local Database: SQLite storage with Prisma ORM
• 📱 Responsive Viewer: Clean interface with sidebar navigation
• ✅ Link Review: Approve/reject suggested links
• 📥 Export Links: Download approved links as CSV
• 🔄 Database Reset: Clean slate option in header menu
• ⌨️ Keyboard Navigation: Arrow keys for browsing

Tech Stack

• Framework: Next.js 15 with App Router
• Language: TypeScript
• Database: SQLite with Prisma ORM
• Styling: Tailwind CSS
• UI Components: Custom components with Lucide icons
• AI Integration: OpenAI for semantic analysis

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/Dot-Fun/semantic-linking-webflow-export.git
cd semantic-linking-webflow-export/blog-viewer

2. Install dependencies:

npm install

3. Set up the database:

npx prisma migrate dev

4. Configure environment variables:

# Create .env file with:
OPENAI_API_KEY=your_api_key_here

5. Run the development server:

npm run dev

Open http://localhost:3000 to view the application.

Project Structure

blog-viewer/
├── src/
│   ├── app/
│   │   ├── api/          # API routes
│   │   ├── components/   # React components
│   │   └── page.tsx      # Main page
│   └── lib/
│       ├── db.ts         # Prisma client
│       └── utils.ts      # Utility functions
├── prisma/
│   └── schema.prisma     # Database schema
├── scripts/
│   └── import-csv.ts     # CSV import script
└── database/
    └── blog.db           # SQLite database (generated)

Usage

Importing Data

1. Click Import Data in the header
2. Configure the base URL for your blog posts
3. Choose import mode: Replace (clear existing) or Append
4. Upload your CSV file with drag-and-drop
5. Preview the data before importing
6. Click Import to process the file

Analyzing Links

Once posts are imported, the system automatically analyzes content to find semantic relationships between posts.

Reviewing Links

• View suggested links in the main interface
• Click Approve or Reject for each suggestion
• Use Approve All High Confidence for bulk approval
• Export approved links via Export CSV button

API Endpoints

• GET /api/blogs/count - Get total post count
• GET /api/blogs/[index] - Get post by index (0-based)
• GET /api/blogs/post/[id] - Get post by ID
• GET /api/blogs/list - Get all posts (minimal data)
• POST /api/import/csv - Import CSV file
• POST /api/import/csv/preview - Preview CSV before import
• GET /api/analysis/status - Check analysis status
• POST /api/analysis/start - Start semantic analysis
• GET /api/links/[id] - Get links for a post
• PATCH /api/links/[id] - Update link status
• POST /api/database/reset - Reset database

Development

# Run development server
npm run dev

# Type checking
npm run type-check

# Linting
npm run lint

# Format code
npm run format

License

MIT