l-put-image

Insert image(s) into MDX files at ==slug== placeholder using the project's image system. Copies to /imgs/, runs convimgs, and inserts ExImg/ImgsGrid components.

Put Image Command

The user wants to insert image(s) into an MDX document where they’ve placed a ==slug== placeholder. This project uses a custom image processing system where images are referenced by slug.

Input

The user provides image path(s) and optionally alt text:

/put-image '/path/to/image.png'
/put-image '/path/to/image.png' 画像の説明テキスト
/put-image '/path/to/image1.png' '/path/to/image2.png'

Your Task

1. Find the Target File

Locate which MDX file contains the ==slug== placeholder:

1. Check git unstaged changes first - Run git diff to see recently modified files
2. Check recently modified MDX files - Use find src/mdx/notes -name "*.mdx" | xargs ls -lt | head -10
3. Search for ==slug== - Use grep to find the exact location

2. Determine Image Destination

For this project, images are processed through the /imgs/ directory (symlinked to Dropbox storage):

• Source storage: /imgs/ directory
• Processed output: /static/images/p/[slug]/ after running pnpm convimgs

3. Generate Suitable Slug/Filename

Create a meaningful slug based on:

• The article context (product name, topic)
• A descriptive identifier from the context or alt text
• Use lowercase with hyphens

Example: oxi-one-front-panel for an image showing OXI ONE’s front panel

4. Copy Image to Storage

1. Copy the image file to /imgs/ directory with the slug-based name
2. Verify the copy succeeded

5. Process the Image

Run pnpm convimgs to generate the optimized variants:

• WebP variants (600w-2000w)
• OGP image
• Blurhash data
• Metadata JSON

6. Generate MDX Image Component

For this project, use the ExImg component with the processed image path:

<ExImg src="/images/p/[slug]/1200w.webp" alt="alt text" />

Or for multiple images, use ImgsGrid:

<ImgsGrid srcs={["/images/p/slug1/1200w.webp", "/images/p/slug2/1200w.webp"]} alts={["Alt 1", "Alt 2"]} />

7. Replace ==slug== Placeholder

Replace the ==slug== text in the MDX file with the generated image component.

8. Verify and Report

• Confirm the replacement was successful
• Show the user what was done:
  • Source image path(s)
  • Generated slug(s)
  • MDX component syntax

Important Notes

• Always preserve the original image file (copy, don’t move)
• Use lowercase filenames with hyphens for word separation
• Keep slugs concise but descriptive
• The image processing system requires images in /imgs/ first
• After processing, images are available at /images/p/[slug]/
• If alt text is in Japanese, use it as-is for accessibility

Arguments

$ARGUMENTS - Image path(s) and optional alt text