x/wiki
1
0
Fork 0
mirror of https://github.com/waynesutton/markdown-site.git synced 2026-01-12 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

New and Updated: ConvexFS Media Library with Bunny CDN integration ,OpenCode AI development tool integration, AI image generation download and copy options

Browse Source
This commit is contained in:
Wayne Sutton
2026-01-10 15:53:27 -08:00
parent d5d8de0058
commit 95cc8a4677
43 changed files with 5941 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
content/blog/docs-opencode.md Normal file
View File

@@ -0,0 +1,195 @@
---
title: "OpenCode Integration"
slug: "docs-opencode"
date: "2026-01-10"
published: true
tags: ["opencode", "plugins", "terminal"]
readTime: "4 min read"
order: 2
showInNav: false
layout: "sidebar"
featuredOrder: 2
blogFeatured: true
rightSidebar: true
showImageAtTop: false
image: /images/opencode.png
authorName: "Markdown"
authorImage: "/images/authors/markdown.png"
showFooter: true
docsSection: true
docsSectionOrder: 6
docsSectionGroup: "Setup"
docsSectionGroupIcon: "Rocket"
---
## OpenCode Integration
OpenCode is an AI-first development tool that works alongside Claude Code and Cursor. This framework includes full OpenCode support with agents, commands, skills, and plugins.
---
### How OpenCode works
```
+------------------+ +-------------------+ +------------------+
| User request |--->| Orchestrator |--->| Specialist |
| "Create a post" | | Agent routes | | Agent executes |
| | | to specialist | | the task |
+------------------+ +-------------------+ +--------+---------+
|
v
+------------------+ +-------------------+ +------------------+
| Result |<---| Skills provide |<---| Commands wrap |
| returned to | | context and | | npm scripts |
| user | | documentation | | for quick access|
+------------------+ +-------------------+ +------------------+
```
1. User makes a request in OpenCode
2. Orchestrator agent analyzes and routes the task
3. Specialist agent (content-writer or sync-manager) handles it
4. Skills provide documentation context
5. Commands offer quick keyboard shortcuts
6. Plugins automate common workflows
### Directory structure
OpenCode configuration lives in `.opencode/` alongside existing `.claude/` and `.cursor/` directories:
```
.opencode/
├── config.json # OpenCode app configuration
├── agent/
│ ├── orchestrator.md # Main routing agent
│ ├── content-writer.md # Content creation specialist
│ └── sync-manager.md # Sync and deployment specialist
├── command/
│ ├── sync.md # /sync command
│ ├── sync-prod.md # /sync-prod command
│ ├── create-post.md # /create-post command
│ ├── create-page.md # /create-page command
│ ├── import.md # /import command
│ └── deploy.md # /deploy command
├── skill/
│ ├── frontmatter.md # Frontmatter syntax reference
│ ├── sync.md # How sync works
│ ├── convex.md # Convex patterns
│ └── content.md # Content management guide
└── plugin/
└── sync-helper.ts # Reminder plugin for content changes
```
### Available commands
Quick commands accessible via `/` prefix in OpenCode:
| Command | Purpose |
| -------------- | ---------------------------------------------- |
| `/sync` | Sync markdown content to development Convex |
| `/sync-prod` | Sync markdown content to production Convex |
| `/create-post` | Create a new blog post with proper frontmatter |
| `/create-page` | Create a new static page |
| `/import` | Import content from an external URL |
| `/deploy` | Full deployment workflow to production |
### Agents
Three specialized agents handle different types of tasks:
**Orchestrator** (primary agent)
- Routes tasks to appropriate specialists
- Handles general code changes directly
- Coordinates multi-step workflows
**Content Writer** (subagent)
- Creates blog posts and pages
- Validates frontmatter
- Knows content directory structure
- Reminds you to run sync
**Sync Manager** (subagent)
- Executes sync commands
- Handles dev vs prod environments
- Troubleshoots sync issues
- Manages deployments
### Skills
Skills provide documentation context to agents:
| Skill | Purpose |
| ----------- | --------------------------------------------- |
| frontmatter | Complete frontmatter syntax for posts/pages |
| sync | How the sync system works end-to-end |
| convex | Convex patterns (indexes, mutations, queries) |
| content | Content management workflows |
### Plugins
The sync-helper plugin provides automation:
```typescript
// When content files change, log a reminder
"file.edited": async (event) => {
if (event.path.startsWith("content/")) {
await client.app.log("info", "Content changed - run /sync to publish")
}
}
```
Plugins hook into OpenCode events like file edits and session idle states.
### Getting started
1. Install OpenCode CLI (see [opencode.ai](https://opencode.ai))
2. Open your project directory
3. OpenCode automatically recognizes the `.opencode/` configuration
4. Use `/sync` after creating content
### Compatibility
This framework works with multiple AI development tools simultaneously:
| Tool | Configuration Directory |
| ----------- | ----------------------- |
| OpenCode | `.opencode/` |
| Claude Code | `.claude/skills/` |
| Cursor | `.cursor/rules/` |
All tools can be used without conflicts. Skills are duplicated (not shared) to ensure each tool works independently.
### Configuration files
| File | Purpose |
| ----------------------- | -------------------------- |
| `opencode.json` | Root project configuration |
| `.opencode/config.json` | App-level settings |
Example `opencode.json`:
```json
{
"name": "markdown-publishing-framework",
"description": "AI-first markdown publishing with Convex real-time sync",
"plugin": []
}
```
### When to use OpenCode vs other tools
| Task | Recommended Tool |
| ---------------------- | ----------------------------- |
| Quick content creation | OpenCode (`/create-post`) |
| Complex code changes | Claude Code or Cursor |
| Sync workflows | OpenCode (`/sync`, `/deploy`) |
| Debugging | Any tool with your preference |
### Resources
- [OpenCode Documentation](https://opencode.ai/docs/)
- [OpenCode Plugins](https://opencode.ai/docs/plugins/)
- [OpenCode SDK](https://opencode.ai/docs/sdk/)
- [OpenCode Workflow Examples](https://github.com/CloudAI-X/opencode-workflow)

108
content/pages/changelog-page.md
View File

@@ -11,6 +11,114 @@ docsSectionOrder: 4
All notable changes to this project.
## v2.18.1
Released January 10, 2026
**README.md streamlined with docs links**
Reduced README from 609 lines to 155 lines. Detailed documentation now lives on the live site at markdown.fast/docs.
**Changes:**
- Added Documentation section with link to markdown.fast/docs
- Added Guides subsection with links to Setup, Fork Configuration, Dashboard, WorkOS, MCP Server, and AgentMail guides
- Simplified Features section to brief summary with link to About page
- Simplified Fork Configuration to quick commands with doc link
- Kept sync commands, setup, and Netlify deployment sections
- Removed sections now covered by live docs
**Files changed:**
- `README.md` - Streamlined from 609 to 155 lines
---
## v2.18.0
Released January 10, 2026
**OpenCode AI development tool integration**
Added full OpenCode support to make the framework compatible with the OpenCode AI-first development tool. This works alongside existing Claude Code and Cursor integrations without conflicts.
**Changes:**
- Created `.opencode/` directory structure with config, agents, commands, skills, and plugins
- 3 specialized agents: orchestrator (main router), content-writer, sync-manager
- 6 commands: /sync, /sync-prod, /create-post, /create-page, /import, /deploy
- 4 skills adapted from .claude/skills/: frontmatter, sync, convex, content
- sync-helper plugin logs reminders when content files change
- Documentation page at /docs-opencode
**Files changed:**
- `opencode.json` - Root OpenCode project configuration
- `.opencode/config.json` - OpenCode app configuration
- `.opencode/agent/*.md` - Agent definitions (3 files)
- `.opencode/command/*.md` - Command definitions (6 files)
- `.opencode/skill/*.md` - Skill documentation (4 files)
- `.opencode/plugin/sync-helper.ts` - Reminder plugin
- `content/pages/docs-opencode.md` - Documentation page
- `files.md` - Added OpenCode Configuration section
---
## v2.17.0
Released January 10, 2026
**ConvexFS Media Library with Bunny CDN integration**
Added a full-featured media library for uploading and managing images in the dashboard. Images are stored on Bunny.net Edge Storage and served via their global CDN. The Image Insert modal now supports selecting from existing media and choosing image sizes.
**Changes:**
- Upload images via drag-and-drop or click to upload
- Copy images as Markdown, HTML, or direct URL
- Bulk select and delete multiple images at once
- Media Library tab in Image Insert modal for selecting existing images
- Size presets: Original, Large (1200px), Medium (800px), Small (400px), Thumbnail (200px), Custom
- Image dimensions displayed before insert with aspect ratio preserved
- File expiration support for automatic cleanup
- Configuration warning when Bunny CDN not set up
**Files changed:**
- `convex/convex.config.ts` - Added ConvexFS component
- `convex/fs.ts` - ConvexFS instance with Bunny CDN config
- `convex/files.ts` - File mutations and queries
- `convex/http.ts` - ConvexFS routes for upload/download
- `src/components/MediaLibrary.tsx` - Media library gallery
- `src/components/ImageUploadModal.tsx` - Enhanced modal with library and sizes
- `src/styles/global.css` - Media library and modal styles
- `content/pages/docs-media-setup.md` - Setup documentation
---
## v2.16.4
Released January 10, 2026
**AI image generation download and copy options**
Added download and copy functionality to the Dashboard AI Agent image generation section. After generating an image with Nano Banana, users can now download the image or copy Markdown/HTML code for embedding.
**Changes:**
- Download button saves generated image to computer with filename from prompt
- MD button copies Markdown code (`![prompt](url)`) to clipboard
- HTML button copies HTML code (`<img src="url" alt="prompt" />`) to clipboard
- Code preview section displays both Markdown and HTML snippets
- Visual feedback when code is copied (button changes to "Copied")
**Files changed:**
- `src/pages/Dashboard.tsx` - Added download/copy handlers and updated UI
- `src/styles/global.css` - Added CSS for action buttons and code preview
---
## v2.16.3
Released January 10, 2026

234
content/pages/docs-media-setup.md Normal file
View File

@@ -0,0 +1,234 @@
---
title: "Media Upload Setup"
slug: docs-media-setup
published: true
showInNav: false
docsSection: true
docsSectionGroup: "Setup"
docsSectionOrder: 5
docsSectionGroupOrder: 1
docsSectionGroupIcon: "Gear"
---
Set up image uploads for the dashboard using ConvexFS and Bunny.net CDN.
## ConvexFS Documentation
This media library is powered by [ConvexFS](https://convexfs.dev/), a virtual filesystem for Convex with CDN integration.
**Resources:**
- [ConvexFS Documentation](https://convexfs.dev/) - Complete setup guides, API reference, and examples
- [ConvexFS GitHub](https://github.com/jamwt/convex-fs) - Source code and issues
For detailed setup instructions including app configuration, garbage collection, file expiration, and advanced features, follow the official ConvexFS documentation.
## Overview
The media library allows you to upload images directly from the dashboard and insert them into your content. Images are stored on Bunny.net Edge Storage and served via their global CDN for fast delivery.
## Prerequisites
- A Bunny.net account
- Convex project deployed
- Access to Convex Dashboard environment variables
## Create Bunny.net account
1. Go to [bunny.net](https://bunny.net) and sign up
2. Bunny offers a 14-day free trial with no credit card required
3. After trial, storage costs around $0.01/GB/month
## Create storage zone
1. In the Bunny Dashboard, go to **Storage** in the sidebar
2. Click **Add Storage Zone**
3. Configure your storage zone:
- **Name**: Choose a unique name (e.g., `mysite-media`)
- **Main Storage Region**: Select the region closest to your users
- **Replication Regions**: Optional, select additional regions for redundancy
4. Click **Create Storage Zone**
## Set up Pull Zone (CDN)
1. After creating the storage zone, click **Connected Pull Zone**
2. Create a new pull zone or connect to an existing one
3. Note your **Pull Zone Hostname** (e.g., `mysite-media.b-cdn.net`)
4. Enable **Token Authentication** under Security settings for signed URLs
## Get API credentials
From your Bunny Dashboard, collect these values:
| Credential | Location |
|------------|----------|
| **API Key** | Account > API > API Key (password icon) |
| **Storage Zone Name** | Storage > [Your Zone] > Name |
| **CDN Hostname** | Storage > [Your Zone] > Connected Pull Zone hostname |
| **Token Key** | Pull Zone > Security > Token Authentication > Token Key |
## Add environment variables
### Local development (.env.local)
Create or edit `.env.local` in your project root:
```bash
BUNNY_API_KEY=your-api-key-here
BUNNY_STORAGE_ZONE=your-zone-name
BUNNY_CDN_HOSTNAME=your-zone.b-cdn.net
BUNNY_TOKEN_KEY=your-token-key
```
### Convex Dashboard
1. Go to your project in the [Convex Dashboard](https://dashboard.convex.dev)
2. Navigate to **Settings** > **Environment Variables**
3. Add each of these variables:
- `BUNNY_API_KEY`
- `BUNNY_STORAGE_ZONE`
- `BUNNY_CDN_HOSTNAME`
- `BUNNY_TOKEN_KEY` (optional, for signed URLs)
4. Click **Save**
## Deploy changes
After setting environment variables:
```bash
npx convex deploy
```
This pushes the ConvexFS configuration with your Bunny credentials.
## Test upload workflow
1. Go to Dashboard > Create > Media
2. Click the upload zone or drag an image
3. Verify the image appears in the grid
4. Click **MD** to copy markdown and paste in a post
## Using in content
### Media Library
Access the Media Library from Dashboard sidebar under **Create > Media**. From here you can:
- Upload multiple images via drag-and-drop
- Copy markdown, HTML, or direct URL
- Select multiple images for bulk delete
- View file sizes
### Bulk delete
To delete multiple images at once:
1. Click the **Select** button in the toolbar
2. Click images to select them (or use **Select All**)
3. Click **Delete (N)** to remove selected images
4. Confirm deletion in the dialog
### Insert in editor
When writing a post or page in the dashboard:
1. Click the **Image** button in the toolbar
2. Choose **Upload New** to upload a new image, or **Media Library** to select an existing image
3. After selecting/uploading, you'll see:
- Image preview with original dimensions (e.g., 1920 x 1080px)
- Alt text field for accessibility
- Size presets: Original, Large (1200px), Medium (800px), Small (400px), Thumbnail (200px), or Custom
4. Choose a size - the display shows the calculated dimensions with aspect ratio preserved
5. Click **Insert** to add the image to your content
### Size options
| Preset | Max Width | Use Case |
|--------|-----------|----------|
| Original | Full size | High-resolution displays |
| Large | 1200px | Hero images, full-width content |
| Medium | 800px | Standard content images |
| Small | 400px | Thumbnails, sidebars |
| Thumbnail | 200px | Grids, galleries |
| Custom | Any | Specific dimensions needed |
When using a size other than Original, images are inserted with explicit width/height attributes to prevent layout shift.
### Frontmatter images
For post header images, upload via Media Library then copy the URL:
```yaml
---
title: "My Post"
image: https://your-zone.b-cdn.net/uploads/12345-image.png
---
```
## Configuration options
In `siteConfig.ts`:
```typescript
media: {
enabled: true, // Toggle media features
maxFileSize: 10, // Max file size in MB
allowedTypes: [ // Allowed MIME types
"image/png",
"image/jpeg",
"image/gif",
"image/webp"
],
}
```
## Troubleshooting
### "Upload failed" error
- Verify all four environment variables are set in Convex Dashboard
- Check that the API key has write permissions
- Ensure the storage zone name matches exactly
### Images not loading
- Verify the CDN hostname is correct
- Check the Pull Zone is connected to your Storage Zone
- Try accessing the image URL directly in browser
### 403 Forbidden errors
- Token authentication may be blocking unsigned requests
- Either disable token auth in Pull Zone settings
- Or ensure `BUNNY_TOKEN_KEY` is set correctly
### Files uploading but not visible
- Check browser console for errors
- Verify the `/fs/upload` route is registered in `http.ts`
- Run `npx convex deploy` to sync configuration
## File organization
Uploaded files are stored at `/uploads/{timestamp}-{filename}`:
```
/uploads/
1704067200000-hero-image.png
1704067201000-screenshot.jpg
1704067202000-diagram.webp
```
Timestamps ensure unique filenames and provide chronological ordering.
## Cost estimate
Bunny.net pricing (as of 2024):
| Service | Cost |
|---------|------|
| Storage | $0.01/GB/month |
| Bandwidth (EU/US) | $0.01/GB |
| Bandwidth (APAC) | $0.03/GB |
For a typical blog with 1GB of images and 10GB monthly bandwidth: ~$0.11/month.