Takazudo Modular Docs

Type to search...

to open search from anywhere

l-apply-csv-images-to-md

Apply image fields from Mercari draft data to zmdpreview markdown files. Use when: (1) User says 'apply csv images', (2) After updating draft.json with new images, (3) Need to sync image data from dra...

Apply CSV Images to Markdown Command

Purpose: Apply image fields from Mercari draft data (draft.json) to the corresponding markdown preview files.

Background

Mercari CSV exports do NOT include image URLs. Images are only present in:

  • Draft data (sub-packages/mercari-viewer/draft.json)
  • Product master data (src/data/product-master-data.mjs)

The Mercari MD Preview system requires image slugs in the frontmatter (image1 through image20) to display product images. This command automates the process of:

  1. Reading draft.json to get image URLs for each product
  2. Extracting image slugs from the full URLs
  3. Finding the corresponding markdown files
  4. Updating the frontmatter with the image slugs

Workflow

Step 1: Read Mercari MD Preview Specification

IMPORTANT: Before starting, Claude MUST read and understand the Mercari MD Preview specification:

doc/docs/sub-p/mercari-md-previewer/preview-spec.md

Key points to understand:

  • Image fields: image1 through image20 in frontmatter
  • Image URL format: https://takazudomodular.com/images/p/{slug}/mercari.png
  • Slug extraction: Remove the base URL and /mercari.png to get the slug
  • CSV data lacks images - they come from draft.json

Step 2: Read Draft Data

Read the draft data file:

sub-packages/mercari-viewer/draft.json

Draft data structure:

{
  "id": "product-id-draft",
  "商品名": "Product Name",
  "images": [
    "https://takazudomodular.com/images/p/slug-1/mercari.png",
    "https://takazudomodular.com/images/p/slug-2/mercari.png",
    ...
  ]
}

Step 3: Extract Image Slugs

For each product in draft.json:

  1. Get the images array
  2. Extract slugs from URLs by removing:
  • Base: https://takazudomodular.com/images/p/
  • Suffix: /mercari.png
  1. Result: ["slug-1", "slug-2", ...]

Example transformation:

URL: https://takazudomodular.com/images/p/zudo-stand-40-view1/mercari.png
Slug: zudo-stand-40-view1

Step 4: Find Corresponding Markdown Files

Markdown files are located in:

sub-packages/zmdpreview/docs/products/

Filename pattern:

{product-slug}__{mercari-product-id}.md

Matching strategy:

  1. Extract the base product slug from draft id field (remove -draft suffix)
  2. Use glob pattern to find matching file: {slug}__*.md
  3. Verify the file exists before proceeding

Step 5: Update Markdown Frontmatter

For each markdown file:

  1. Read the current frontmatter
  2. Map image slugs to frontmatter fields:
  • images[0] → image1
  • images[1] → image2
  • …
  • images[19] → image20
  1. Empty remaining image fields with ""
  2. Preserve all other frontmatter fields (especially title)
  3. Write the updated file

Example update:

---
title: "Takazudo Modular: zudo-stand-40（40HP版スタンド）"
image1: "zudo-stand-40-view1"
image2: "zudo-stand-40-view2"
image3: "zudo-stand-40-view3"
image4: "zudo-stand-40-view4"
image5: "zudo-stand-set-exp-40"
image6: "zudo-stand-support-s"
image7: "zudo-stand-angle-s-1"
image8: "zudo-stand-angle-s-2"
image9: ""
image10: ""
# ... remaining fields empty
image20: ""
---

Step 6: Report Results

After processing all products, report:

  • Total products in draft.json
  • Successfully updated markdown files
  • Any errors or missing files
  • List of updated files

Error Handling

Missing markdown file:

  • Log warning: “No markdown file found for product: {product-id}”
  • Continue with next product

Invalid image URL:

  • Log warning: “Invalid image URL format: {url}”
  • Skip that image, continue with remaining images

Read/write errors:

  • Log error with details
  • Stop processing and report to user

Example Output

✅ Processing draft.json...
   Found 4 products

✅ Updating markdown files:
   [1/4] zudo-stand-40__2JH54iyuikc6sgA8MKAWAa.md (8 images)
   [2/4] zudo-stand-60__2JH54m48nRakhgGYDSgwr4.md (8 images)
   [3/4] zudo-stand-40x2__2JH54fwwjBT5zKF9rQgC7M.md (8 images)
   [4/4] zudo-stand-60x2__2JH54cT5VhWoPfBAcMagpZ.md (8 images)

✅ Complete! Updated 4 markdown files with image data.

Implementation Notes

  1. Always read the spec first - Don’t assume the format
  2. Preserve existing frontmatter - Only update image fields
  3. Handle edge cases - Empty images array, missing files, etc.
  4. Use proper path handling - Work with absolute paths from project root
  5. Verify before writing - Check that extracted slugs look correct

When to Use This Command

  • After uploading new products to Mercari and downloading CSV
  • After creating new draft.json entries
  • When markdown files have empty image fields
  • When images have been added/updated in draft data