CLAUDE.md ​

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview ​

MOVARO is a VitePress-based documentation and landing site for creator tools. The site is written in Korean with some English content.

Commands ​

  • npm run dev - Start development server
  • npm run build - Build for production
  • npm run preview - Preview production build

Architecture ​

VitePress Configuration ​

  • Main config: .vitepress/config.mts
  • Custom theme: .vitepress/theme/index.ts (extends default VitePress theme)
  • URL rewrites map pages/:path* to :path*

Content Structure ​

All markdown content lives in pages/:

  • pages/index.md - Home page
  • pages/about/ - About pages
  • pages/get-start/ - Getting started guide
  • pages/ttalkkagflow/ - TtalkkagFlow plugin docs (After Effects)
  • pages/json-node-editor/ - JSON Node Editor app docs
  • pages/ttalkkag-canvas/ - Ttalkkag Canvas app docs

Each product section has its own sidebar config as a TypeScript file (e.g., pages/ttalkkagflow/ttalkkagflow-sidebar.ts).

Theme Components ​

Custom Vue components in .vitepress/theme/components/:

  • HomeLayout.vue - Homepage wrapper
  • FeatureShowcase.vue - Feature cards and testimonials carousel
  • AuthButton.vue - Authentication button in navbar
  • ServerStatus.vue - API server status indicator
  • UserProfile.vue - User profile display
  • PromptCard.vue - Prompt card component

API Integration ​

  • api.ts - API URL configuration (dev: localhost:8080, prod: api.movaro.org)
  • Uses VITE_API_URL environment variable for custom API URL

Styling ​

CSS files in .vitepress/theme/css/:

  • style.css - Main styles
  • custom.css - Custom overrides
  • global.css - Global styles
  • global-img.css - Image styles

Uses Pretendard and Paperlogy fonts loaded from CDN.