Admin Interface

Guide to using the Fireship AI Blog admin interface for content management.

Overview

The admin interface provides a comprehensive dashboard for managing your blog content, including creating, editing, and publishing posts.

Accessing Admin

Web Interface

Visit Fireship.ai
Sign in to your account
Navigate to Dashboard → Blog Admin
Select your blog/campaign

Direct Integration

import { FireshipBlogAdmin } from 'fireship-ai-blog/admin';

export default function AdminPage() {
  return (
    <div className="min-h-screen">
      <FireshipBlogAdmin 
        apiKey="your-api-key"
        onSave={(post) => console.log('Post saved:', post)}
        onDelete={(postId) => console.log('Post deleted:', postId)}
      />
    </div>
  );
}

Features

Content Management

✅

Post Creation

• Rich text editor with markdown support
• Image upload and management
• SEO optimization tools
• Category and tag management

✅

Post Editing

• Live preview mode
• Version history
• Auto-save functionality
• Collaborative editing

Publishing Workflow

📁

File Upload

• Drag & drop interface
• Multiple file formats
• Automatic optimization
• CDN integration

📊

Analytics Dashboard

• Page views and engagement
• Popular content analysis
• Reader demographics
• Traffic sources

Post Management

Creating Posts

Click "New Post" in the admin dashboard
Add Title and meta description
Write Content using the rich editor
Add Media (images, videos)
Set Categories/Tags
Configure SEO settings
Preview before publishing
Publish or save as draft

Post Editor Features

# Rich Text Editing
- **Bold** and *italic* formatting
- Headers (H1-H6)
- Lists (ordered/unordered)
- Links and images
- Code blocks with syntax highlighting
- Tables and quotes
- Custom HTML support

# Media Integration
- Image galleries
- Video embeds
- Audio players
- File downloads
- Social media embeds

# SEO Tools
- Meta title optimization
- Description generation
- Keyword analysis
- Schema markup
- Open Graph tags

User Management

Team Collaboration

User Roles

Admin: Full access to all features

Editor: Create and edit content

Author: Create own content only

Contributor: Submit drafts for review

Viewer: Read-only access

Permissions

{
  "admin": ["create", "edit", "delete", "publish", "manage_users"],
  "editor": ["create", "edit", "publish"],
  "author": ["create", "edit_own"],
  "contributor": ["create_draft"],
  "viewer": ["read"]
}

API Integration

Admin API Endpoints

// Get all posts
GET /api/admin/posts
Authorization: Bearer your-admin-token

// Create new post
POST /api/admin/posts
{
  "title": "New Post Title",
  "content": "Post content...",
  "status": "draft",
  "category": "Technology"
}

// Update post
PUT /api/admin/posts/{id}
{
  "title": "Updated Title",
  "status": "published"
}

// Delete post
DELETE /api/admin/posts/{id}

Webhook Integration

// Configure webhooks for events
const webhookConfig = {
  url: 'https://yoursite.com/api/webhooks/blog',
  events: ['post.published', 'post.updated', 'post.deleted'],
  secret: 'your-webhook-secret'
};

// Handle webhook events
export async function POST(req: Request) {
  const event = await req.json();
  
  switch (event.type) {
    case 'post.published':
      // Trigger cache invalidation
      await revalidatePath('/blog');
      break;
    case 'post.updated':
      // Update search index
      await updateSearchIndex(event.data);
      break;
  }
}

Documentation