myaidev-method 0.2.23 → 0.2.24-2

package/src/templates/docs/wordpress-publishing-guide.md

@@ -0,0 +1,208 @@
+# WordPress Publishing Guide
+
+A guide to publishing content to WordPress using the MyAIDev Method.
+
+## Overview
+
+The MyAIDev Method integrates directly with WordPress REST API, allowing you to publish content without leaving your development environment.
+
+## Prerequisites
+
+- WordPress site with REST API enabled
+- Application Password created for your user
+- MyAIDev Method WordPress workflow installed
+
+## Configuration
+
+### Setting Up Credentials
+
+Run the configuration wizard:
+
+```bash
+/myai-configure wordpress
+```
+
+Or manually set environment variables in `.env`:
+
+```env
+WORDPRESS_URL=https://your-site.com
+WORDPRESS_USERNAME=your-username
+WORDPRESS_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx
+WORDPRESS_DEFAULT_STATUS=draft
+```
+
+### Creating an Application Password
+
+1. Log into WordPress admin
+2. Go to Users → Profile
+3. Scroll to "Application Passwords"
+4. Enter a name (e.g., "MyAIDev Method")
+5. Click "Add New Application Password"
+6. Copy the generated password (spaces are OK)
+
+## Publishing Content
+
+### Basic Publishing
+
+```bash
+/myai-wordpress-publish ./content/my-article.md
+```
+
+### With Options
+
+```bash
+/myai-wordpress-publish ./content/my-article.md --status publish --categories "Technology,AI"
+```
+
+### Publishing Options
+
+| Option | Description | Default |
+|--------|-------------|---------|
+| `--status` | Post status (draft, publish, pending) | draft |
+| `--categories` | Comma-separated categories | None |
+| `--tags` | Comma-separated tags | None |
+| `--featured-image` | Path to featured image | None |
+
+## Content Format
+
+### Frontmatter
+
+The publisher reads YAML frontmatter from your markdown files:
+
+```yaml
+---
+title: Your Article Title
+description: Meta description for SEO
+date: 2024-01-15
+author: Your Name
+categories:
+  - Technology
+  - AI
+tags:
+  - machine-learning
+  - automation
+status: draft
+---
+```
+
+### Supported Markdown
+
+- Headings (H1-H6)
+- Bold and italic text
+- Links and images
+- Code blocks
+- Bullet and numbered lists
+- Blockquotes
+
+## Batch Publishing
+
+### Using Content Coordinator
+
+```bash
+# Verify and publish all approved content
+/myai-coordinate-content ./content-queue/
+```
+
+### Workflow
+
+1. Place markdown files in queue directory
+2. Run coordinator to verify quality
+3. Approved content publishes automatically
+4. Reports generated with URLs and status
+
+## Managing Posts
+
+### Search Posts
+
+```javascript
+// Via WordPress client
+const client = new WordPressClient();
+const results = await client.searchPosts('keyword');
+```
+
+### Update Existing Post
+
+```bash
+/myai-wordpress-publish ./content/updated-article.md --post-id 123
+```
+
+### Get Categories
+
+```bash
+# List available categories
+/myai-wordpress-publish --list-categories
+```
+
+## Troubleshooting
+
+### Authentication Failed
+
+**Symptoms:** 401 or 403 errors
+
+**Solutions:**
+1. Verify username is correct
+2. Regenerate Application Password
+3. Check user has publish permissions
+4. Ensure REST API is enabled
+
+### Connection Refused
+
+**Symptoms:** ECONNREFUSED or timeout
+
+**Solutions:**
+1. Verify site URL is correct
+2. Check if site is accessible
+3. Try with/without `www.`
+4. Check for firewall blocks
+
+### Content Not Publishing
+
+**Symptoms:** Draft created but not published
+
+**Solutions:**
+1. Check `--status` flag
+2. Verify user has publish capability
+3. Check for required fields (title, content)
+
+## Security Best Practices
+
+1. **Use Application Passwords** - Never use your main password
+2. **Limit Permissions** - Create a dedicated publishing user
+3. **Secure Storage** - Keep credentials in `.env` (add to `.gitignore`)
+4. **Regular Rotation** - Regenerate passwords periodically
+5. **HTTPS Only** - Always use HTTPS for your WordPress site
+
+## API Reference
+
+### WordPressClient
+
+```javascript
+import { WordPressClient } from 'myaidev-method';
+
+const client = new WordPressClient({
+  siteUrl: 'https://your-site.com',
+  username: 'your-username',
+  appPassword: 'your-app-password'
+});
+
+// Publish post
+const result = await client.publishPost({
+  title: 'My Article',
+  content: 'Article content...',
+  status: 'draft'
+});
+
+// Search posts
+const posts = await client.searchPosts('keyword');
+
+// Update post
+await client.updatePost(postId, { title: 'New Title' });
+
+// Get categories
+const categories = await client.getCategories();
+```
+
+## Related Documentation
+
+- [Content Creation Guide](content-creation-guide.md)
+- [Visual Generation Guide](visual-generation-guide.md)

package/src/templates/infographics/comparison-table.html

@@ -0,0 +1,347 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>{{title}}</title>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: linear-gradient(135deg, {{backgroundColor || '#f8fafc'}} 0%, {{backgroundGradient || '#e2e8f0'}} 100%);
+      min-height: 100vh;
+      padding: 40px;
+    }
+
+    .container {
+      max-width: 900px;
+      margin: 0 auto;
+      background: white;
+      border-radius: 24px;
+      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+      overflow: hidden;
+    }
+
+    .header {
+      background: linear-gradient(135deg, {{accentColor || '#3b82f6'}} 0%, {{accentGradient || '#1d4ed8'}} 100%);
+      color: white;
+      padding: 32px 40px;
+      text-align: center;
+    }
+
+    .header h1 {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 8px;
+    }
+
+    .header .subtitle {
+      font-size: 16px;
+      opacity: 0.9;
+    }
+
+    .content {
+      padding: 40px;
+    }
+
+    .comparison-table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    .comparison-table thead th {
+      padding: 16px 20px;
+      text-align: left;
+      font-weight: 600;
+      font-size: 14px;
+      color: #374151;
+      border-bottom: 2px solid #e5e7eb;
+    }
+
+    .comparison-table thead th:first-child {
+      color: #9ca3af;
+      font-weight: 500;
+    }
+
+    .comparison-table thead th.highlight {
+      background: linear-gradient(135deg, {{highlightColor || '#3b82f6'}} 0%, {{highlightGradient || '#1d4ed8'}} 100%);
+      color: white;
+      border-radius: 12px 12px 0 0;
+    }
+
+    .comparison-table tbody tr {
+      border-bottom: 1px solid #f1f5f9;
+    }
+
+    .comparison-table tbody tr:last-child {
+      border-bottom: none;
+    }
+
+    .comparison-table tbody tr:hover {
+      background: #f8fafc;
+    }
+
+    .comparison-table td {
+      padding: 16px 20px;
+      font-size: 14px;
+      color: #4b5563;
+    }
+
+    .comparison-table td:first-child {
+      font-weight: 500;
+      color: #111827;
+    }
+
+    .comparison-table td.highlight {
+      background: #eff6ff;
+    }
+
+    /* Feature Icons */
+    .check {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: #10b981;
+      color: white;
+      border-radius: 50%;
+      font-size: 14px;
+    }
+
+    .check::before {
+      content: '✓';
+    }
+
+    .cross {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: #ef4444;
+      color: white;
+      border-radius: 50%;
+      font-size: 14px;
+    }
+
+    .cross::before {
+      content: '✕';
+    }
+
+    .partial {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 24px;
+      height: 24px;
+      background: #f59e0b;
+      color: white;
+      border-radius: 50%;
+      font-size: 14px;
+    }
+
+    .partial::before {
+      content: '~';
+    }
+
+    /* Winner Badge */
+    .winner-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+      color: white;
+      padding: 4px 12px;
+      border-radius: 20px;
+      font-size: 12px;
+      font-weight: 600;
+      margin-left: 8px;
+    }
+
+    .winner-badge::before {
+      content: '★';
+    }
+
+    /* Cards Layout Alternative */
+    .cards-layout {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+      gap: 24px;
+    }
+
+    .comparison-card {
+      background: white;
+      border: 2px solid #e5e7eb;
+      border-radius: 16px;
+      padding: 24px;
+      transition: all 0.2s;
+    }
+
+    .comparison-card.featured {
+      border-color: {{accentColor || '#3b82f6'}};
+      box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.2);
+    }
+
+    .card-header {
+      text-align: center;
+      padding-bottom: 20px;
+      border-bottom: 1px solid #e5e7eb;
+      margin-bottom: 20px;
+    }
+
+    .card-title {
+      font-size: 18px;
+      font-weight: 700;
+      color: #111827;
+      margin-bottom: 4px;
+    }
+
+    .card-price {
+      font-size: 32px;
+      font-weight: 700;
+      color: {{accentColor || '#3b82f6'}};
+    }
+
+    .card-price-period {
+      font-size: 14px;
+      color: #6b7280;
+      font-weight: 400;
+    }
+
+    .card-features {
+      list-style: none;
+    }
+
+    .card-features li {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      font-size: 14px;
+      color: #4b5563;
+    }
+
+    .feature-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .feature-icon.yes {
+      background: #dcfce7;
+      color: #16a34a;
+    }
+
+    .feature-icon.yes::before {
+      content: '✓';
+    }
+
+    .feature-icon.no {
+      background: #fee2e2;
+      color: #dc2626;
+    }
+
+    .feature-icon.no::before {
+      content: '✕';
+    }
+
+    .footer {
+      padding: 24px 40px;
+      background: #f8fafc;
+      border-top: 1px solid #e5e7eb;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .note {
+      font-size: 13px;
+      color: #6b7280;
+    }
+
+    .branding {
+      font-size: 12px;
+      color: #9ca3af;
+      font-weight: 500;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="header">
+      <h1>{{title}}</h1>
+      {{#subtitle}}<p class="subtitle">{{subtitle}}</p>{{/subtitle}}
+    </div>
+
+    <div class="content">
+      {{#layout === 'table'}}
+      <table class="comparison-table">
+        <thead>
+          <tr>
+            <th>Feature</th>
+            {{#columns}}
+            <th class="{{class}}">{{name}}{{#winner}}<span class="winner-badge">Best</span>{{/winner}}</th>
+            {{/columns}}
+          </tr>
+        </thead>
+        <tbody>
+          {{#rows}}
+          <tr>
+            <td>{{feature}}</td>
+            {{#values}}
+            <td class="{{class}}">
+              {{#isCheck}}<span class="check"></span>{{/isCheck}}
+              {{#isCross}}<span class="cross"></span>{{/isCross}}
+              {{#isPartial}}<span class="partial"></span>{{/isPartial}}
+              {{#text}}{{text}}{{/text}}
+            </td>
+            {{/values}}
+          </tr>
+          {{/rows}}
+        </tbody>
+      </table>
+      {{/layout === 'table'}}
+
+      {{#layout === 'cards'}}
+      <div class="cards-layout">
+        {{#cards}}
+        <div class="comparison-card {{#featured}}featured{{/featured}}">
+          <div class="card-header">
+            <div class="card-title">{{name}}</div>
+            {{#price}}<div class="card-price">{{price}}<span class="card-price-period">{{period}}</span></div>{{/price}}
+          </div>
+          <ul class="card-features">
+            {{#features}}
+            <li>
+              <span class="feature-icon {{#included}}yes{{/included}}{{^included}}no{{/included}}"></span>
+              {{text}}
+            </li>
+            {{/features}}
+          </ul>
+        </div>
+        {{/cards}}
+      </div>
+      {{/layout === 'cards'}}
+    </div>
+
+    {{#note}}
+    <div class="footer">
+      <span class="note">{{note}}</span>
+      {{#branding}}<span class="branding">{{branding}}</span>{{/branding}}
+    </div>
+    {{/note}}
+  </div>
+</body>
+</html>