autoblogger 0.1.15 → 0.1.17

package/README.md

@@ -68,7 +68,47 @@ You'll also need API keys if you want AI features:
 
 ## Installation
 
-### Step 1: Install the package
+### Quick Start (CLI)
+
+The fastest way to set up Autoblogger is with the CLI:
+
+```bash
+npx autoblogger init
+```
+
+This command will:
+
+1. Detect your Next.js project and Prisma setup
+2. Merge the required models into your Prisma schema
+3. Create boilerplate files (`lib/cms.ts`, API route, dashboard page)
+4. Patch your Tailwind config to include Autoblogger's components
+5. Run the database migration
+6. Optionally import existing markdown content
+
+**CLI Options:**
+
+```bash
+npx autoblogger init --yes           # Skip prompts, use defaults
+npx autoblogger init --dry-run       # Preview changes without writing files
+npx autoblogger init --skip-migrate  # Skip database migration
+npx autoblogger init --import=./posts  # Import content after setup
+```
+
+**Import Existing Content:**
+
+If you have markdown or MDX files, import them into the database:
+
+```bash
+npx autoblogger import ./content/posts
+npx autoblogger import ./posts --status=published  # Import as published
+npx autoblogger import ./posts --tag=imported      # Add a tag to all
+```
+
+### Manual Installation
+
+If you prefer to set things up manually:
+
+#### Step 1: Install the package
 
 ```bash
 npm install autoblogger
@@ -76,7 +116,7 @@ npm install autoblogger
 
 This installs Autoblogger and its dependencies (Tiptap editor, AI SDKs, markdown utilities).
 
-### Step 2: Add the database models
+#### Step 2: Add the database models
 
 Autoblogger needs several tables in your database. Copy the models from the package's schema file into your own Prisma schema.
 
@@ -110,7 +150,7 @@ The required models are:
 | `TopicSubscription` | RSS feed subscriptions for auto-drafting |
 | `NewsItem` | Individual RSS items fetched from subscriptions |
 
-### Step 3: Run the migration
+#### Step 3: Run the migration
 
 After adding the models to your schema:
 
@@ -120,7 +160,7 @@ npx prisma migrate dev --name add-autoblogger
 
 This creates the tables in your database.
 
-### Step 4: Generate the Prisma client
+#### Step 4: Generate the Prisma client
 
 ```bash
 npx prisma generate
@@ -273,68 +313,74 @@ The `[[...path]]` syntax is a catch-all route that captures the dashboard's inte
 
 ## Configuring Tailwind
 
-Autoblogger's UI uses Tailwind CSS classes. Add the package's files to your Tailwind content configuration so the classes aren't purged:
+Autoblogger's UI uses Tailwind CSS. Add the package's files to your Tailwind content configuration so the classes aren't purged:
 
 ```javascript
-// tailwind.config.js (or tailwind.config.ts)
+// tailwind.config.js
 module.exports = {
+  presets: [require('autoblogger/styles/preset')],
   content: [
     './app/**/*.{js,ts,jsx,tsx}',
     './components/**/*.{js,ts,jsx,tsx}',
     // Add this line to include Autoblogger's components
     './node_modules/autoblogger/dist/**/*.{js,mjs}',
   ],
+  darkMode: 'class',
   // ... rest of your config
 }
 ```
 
-The dashboard uses semantic color tokens like `bg-card`, `text-muted-foreground`, `border-border`, etc. These come from shadcn/ui conventions. If you're using shadcn, they'll work automatically. Otherwise, add these CSS variables to your globals:
+The `autoblogger/styles/preset` includes:
+- Typography scale (`text-title`, `text-h1`, `text-h2`, `text-h3`, `text-body`, `text-table`)
+- Color tokens (`bg-background`, `text-muted-foreground`, `border-border`, etc.)
+- Border radius utilities
+
+---
+
+## Styling
+
+Autoblogger includes a complete theme with CSS variables, prose styles, and editor styling. Import it in your global CSS:
 
 ```css
-/* globals.css */
+/* app/globals.css */
+@import 'autoblogger/styles/autoblogger.css';
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+```
+
+This provides:
+- **Light and dark mode colors** — shadcn/ui Zinc theme tokens
+- **Typography scale** — Consistent heading and body sizes  
+- **Prose styles** — Article content formatting (headings, paragraphs, lists, code, blockquotes)
+- **Editor styles** — Tiptap focus states and placeholder styling
+- **Animations** — Fade-in effects with reduced motion support
+
+### Customizing
+
+Override any CSS variable after the import:
+
+```css
+@import 'autoblogger/styles/autoblogger.css';
+
 :root {
-  --background: 0 0% 100%;
-  --foreground: 0 0% 3.9%;
-  --card: 0 0% 100%;
-  --card-foreground: 0 0% 3.9%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 0 0% 3.9%;
-  --primary: 0 0% 9%;
-  --primary-foreground: 0 0% 98%;
-  --secondary: 0 0% 96.1%;
-  --secondary-foreground: 0 0% 9%;
-  --muted: 0 0% 96.1%;
-  --muted-foreground: 0 0% 45.1%;
-  --accent: 0 0% 96.1%;
-  --accent-foreground: 0 0% 9%;
-  --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 89.8%;
-  --input: 0 0% 89.8%;
-  --ring: 0 0% 3.9%;
+  --primary: 221 83% 53%;  /* Custom blue primary */
 }
+```
 
-.dark {
-  --background: 0 0% 3.9%;
-  --foreground: 0 0% 98%;
-  --card: 0 0% 3.9%;
-  --card-foreground: 0 0% 98%;
-  --popover: 0 0% 3.9%;
-  --popover-foreground: 0 0% 98%;
-  --primary: 0 0% 98%;
-  --primary-foreground: 0 0% 9%;
-  --secondary: 0 0% 14.9%;
-  --secondary-foreground: 0 0% 98%;
-  --muted: 0 0% 14.9%;
-  --muted-foreground: 0 0% 63.9%;
-  --accent: 0 0% 14.9%;
-  --accent-foreground: 0 0% 98%;
-  --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
-  --ring: 0 0% 83.1%;
-}
+Or pass custom styles when creating the CMS:
+
+```typescript
+// lib/cms.ts
+export const cms = createAutoblogger({
+  // ... other config
+  styles: {
+    container: 'max-w-3xl mx-auto px-8',
+    title: 'text-4xl font-serif',
+    prose: 'prose prose-lg dark:prose-invert',
+  },
+})
 ```
 
 ---
@@ -447,16 +493,52 @@ import { ARTICLE_STYLES } from 'autoblogger/styles/article'
 
 ---
 
+## CLI Reference
+
+Autoblogger includes a CLI for project setup and content management.
+
+### Commands
+
+| Command | Description |
+|---------|-------------|
+| `npx autoblogger init` | Set up Autoblogger in your Next.js project |
+| `npx autoblogger import <path>` | Import markdown/MDX content into the database |
+
+### Init Options
+
+| Option | Description |
+|--------|-------------|
+| `--yes`, `-y` | Skip prompts and use defaults |
+| `--skip-migrate` | Don't run database migration |
+| `--import=<path>` | Import content from specified path after setup |
+| `--dry-run` | Show what would be done without making changes |
+
+### Import Options
+
+| Option | Description |
+|--------|-------------|
+| `--status=<status>` | Set imported posts status (`draft` or `published`) |
+| `--tag=<tag>` | Add a tag to all imported posts |
+| `--dry-run` | Show what would be imported without making changes |
+
+---
+
 ## AI Models
 
 Autoblogger supports these AI models out of the box:
 
-| ID | Name | Provider | Best For |
-|----|------|----------|----------|
-| `claude-sonnet` | Claude Sonnet 4.5 | Anthropic | Fast, balanced writing |
-| `claude-opus` | Claude Opus 4.5 | Anthropic | Complex, nuanced essays |
-| `gpt-5.2` | GPT-5.2 | OpenAI | General purpose |
-| `gpt-5-mini` | GPT-5 Mini | OpenAI | Quick drafts |
+| ID | Name | Provider | Description |
+|----|------|----------|-------------|
+| `claude-sonnet` | Sonnet 4.5 | Anthropic | Fast, capable, best value |
+| `claude-opus` | Opus 4.5 | Anthropic | Highest quality, slower |
+| `gpt-5.2` | GPT-5.2 | OpenAI | Latest OpenAI flagship |
+| `gpt-5-mini` | GPT-5 Mini | OpenAI | Fast and cost-efficient |
+
+### AI Features
+
+- **URL Context**: Paste a URL into your prompt and the AI will fetch and read the article content
+- **Chat Modes**: Rewrite, expand, shorten, or chat freely with your content
+- **Custom Prompts**: Configure prompt templates in **Settings → AI**
 
 Configure the default model and custom prompts in the dashboard under **Settings → AI**.