Takazudo Modular Docs

Type to search...

to open search from anywhere

Mercari Markdown Previewer

Mercari Markdown Previewer

Overview

Mercari Markdown Previewer is a Docusaurus-based documentation viewer that provides a live preview environment for product description markdown files. It enables real-time visualization of how product descriptions will appear, making it easier to edit and format content before syncing back to CSV.

Purpose

When editing product descriptions extracted from Mercari CSV exports, it’s crucial to see how the formatted content will look. This previewer:

  • Provides a clean, styled preview of markdown files
  • Shows all products in an organized sidebar navigation
  • Enables quick navigation between different product descriptions
  • Offers the same styling as the main documentation site

Key Features

Live Preview

  • Real-time rendering of markdown content
  • Support for all markdown formatting features
  • Syntax highlighting for code blocks
  • Proper rendering of lists, tables, and links

Organized Navigation

  • Automatic sidebar generation from product files
  • Products listed alphabetically or by category
  • Search functionality across all products
  • Quick access to any product description

Consistent Styling

  • Uses the same CSS and configuration as the main documentation
  • Familiar interface for users of the main docs
  • Responsive design for various screen sizes

Directory Structure

sub-packages/zmdpreview/
├── package.json
├── docusaurus.config.js      # Docusaurus configuration
├── sidebars.js               # Sidebar configuration
├── src/
│   └── css/
│       └── custom.css        # Custom styling (copied from main)
├── static/                   # Static assets
└── docs/
    └── products/             # Product markdown files
        ├── oxi-one-black__rkJCVU3DDBrbvCV5gSJqed.md
        ├── zudo-rail-40-dual__MHQ75HutwN7fC7zGxhAjk7.md
        └── ... (all product descriptions)

Usage

Starting the Preview Server

cd sub-packages/zmdpreview
pnpm install
pnpm start

The preview server will start at http://zmdviewer.localhost:12188

Viewing Products

Navigate to http://zmdviewer.localhost:12188/docs/products/ to see all product descriptions.

Editing Workflow

  1. Edit Markdown Files: Make changes to files in docs/products/
  2. Live Reload: Changes automatically refresh in the browser
  3. Review Formatting: Check rendering, links, and overall appearance
  4. Save Changes: Files are ready for sync back to CSV

Integration with Product Markdown Sync

The previewer works seamlessly with the Product Markdown Sync tool:

  1. CSV to Markdown: Product Markdown Sync extracts descriptions
  2. Preview: Mercari Markdown Previewer shows formatted content
  3. Edit: Make changes while viewing live preview
  4. Sync Back: Product Markdown Sync updates the CSV

Updated Directory Path

Product markdown files are now stored at:

sub-packages/zmdpreview/docs/products/

This change from /mercari-data/product-body-text/ provides:

  • Better integration with the preview system
  • Automatic sidebar generation
  • Live reload on file changes
  • Centralized location within the sub-package

Technical Details

Docusaurus Configuration

The previewer uses Docusaurus 3.x with:

  • Custom theme configuration matching main docs
  • Automatic sidebar generation from file structure
  • Search plugin for finding products quickly
  • Live reload for development

File Naming Convention

Product files maintain the naming pattern:

{product-slug}__{mercariProductId}.md

Example: oxi-one-black__rkJCVU3DDBrbvCV5gSJqed.md

Markdown Support

Full markdown support including:

  • Headers (H1-H6)
  • Bold, italic, strikethrough
  • Lists (ordered and unordered)
  • Tables
  • Code blocks with syntax highlighting
  • Links and images
  • Blockquotes
  • Horizontal rules

Benefits

For Content Editors

  • Visual feedback while editing
  • Professional documentation interface
  • Easy navigation between products
  • Search functionality

For Developers

  • Familiar Docusaurus environment
  • Customizable styling
  • Extensible with plugins
  • Version control friendly

For Workflow

  • Streamlined editing process
  • Reduced errors from blind editing
  • Faster iteration on content
  • Better quality control