diff --git a/.claude/agents/blog-post-reviewer.md b/.claude/agents/blog-post-reviewer.md index ab0165994..013e52ed0 100644 --- a/.claude/agents/blog-post-reviewer.md +++ b/.claude/agents/blog-post-reviewer.md @@ -30,12 +30,14 @@ You review PolicyEngine blog posts to ensure they follow formatting standards, a - **Images**: Reference `/images/posts/filename.jpg` (served from public directory) - **Links**: Use descriptive link text, not bare URLs -### Image Requirements +### Image and Chart Requirements - **Cover image**: Must exist in `src/images/posts/` (loaded via require() at build time) -- **Naming convention**: Cover image filename should match post slug (e.g., `dc-office-ai-coding.md` → `dc-office-ai-coding.png`) +- **Naming convention**: Cover image filename MUST match post slug exactly (e.g., `california-billionaire-tax-marginal-rates.md` → `california-billionaire-tax-marginal-rates.jpg`) - **In-post images**: Must exist in `public/images/posts/` (served at runtime via /images/posts/ URL) -- **Format**: PNG or JPG, optimized for web +- **Interactive charts**: Organized in `public/charts/[post-slug]/` with simple names (phase-in.html, liability.html, mtr.html) +- **Chart references**: `` +- **Format**: PNG or JPG for images, HTML for interactive Plotly charts ### Writing Style diff --git a/.claude/commands/add-blog-post.md b/.claude/commands/add-blog-post.md index e23a7cc43..55cbcebdb 100644 --- a/.claude/commands/add-blog-post.md +++ b/.claude/commands/add-blog-post.md @@ -72,19 +72,33 @@ echo "Description length: ${#DESC} characters" [RSVP link](https://example.com) ``` -## Step 4: Handle Images +## Step 4: Handle Images and Charts ### Cover Image ```bash -# IMPORTANT: Cover image filename MUST match post slug -# Example: dc-office-ai-coding.md → dc-office-ai-coding.png +# IMPORTANT: Cover image filename MUST match post slug exactly +# Example: california-billionaire-tax-marginal-rates.md → california-billionaire-tax-marginal-rates.jpg # Cover images go in src/images/posts/ (loaded via require() at build time) -mv [source-path] src/images/posts/[post-slug].png +mv [source-path] src/images/posts/[post-slug].jpg # Verify it exists -ls -lh src/images/posts/[post-slug].png +ls -lh src/images/posts/[post-slug].jpg +``` + +### Interactive Charts (Plotly HTML) + +```bash +# Charts organized in subfolder matching post slug +mkdir -p public/charts/[post-slug] + +# Simple names: phase-in.html, liability.html, mtr.html, etc. +cp chart1.html public/charts/[post-slug]/phase-in.html +cp chart2.html public/charts/[post-slug]/liability.html + +# Reference in markdown as: +# ``` ### In-Post Images @@ -97,10 +111,11 @@ cp [source-path] public/images/posts/[image-name].jpg # ![Alt text](/images/posts/[image-name].jpg) ``` -**Image Location Summary**: +**File Location Summary**: -- **Cover images**: `src/images/posts/` (webpack require()) -- **In-post images**: `public/images/posts/` (runtime URL serving) +- **Cover image**: `src/images/posts/[post-slug].jpg` (webpack require(), must match slug) +- **Interactive charts**: `public/charts/[post-slug]/simple-name.html` (organized by post) +- **In-post images**: `public/images/posts/[image-name].jpg` (runtime URL serving) ## Step 5: Update posts.json diff --git a/.claude/settings.json b/.claude/settings.json new file mode 100644 index 000000000..ff179d570 --- /dev/null +++ b/.claude/settings.json @@ -0,0 +1,10 @@ +{ + "plugins": { + "autoInstall": { + "PolicyEngine/policyengine-claude": { + "source": "github", + "ref": "master" + } + } + } +}