Skip to content

CLAUDE.md

Latest commit

 

History

History
74 lines (56 loc) · 3.06 KB

CLAUDE.md

File metadata and controls

74 lines (56 loc) · 3.06 KB

CLAUDE.md

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

Project Overview

Chalkpad is an interactive content creation tool built with ClojureScript and React/Reagent. It allows users to create and edit blocks of markdown and code in a notebook-style interface with syntax highlighting via CodeMirror.

Core Architecture

Technology Stack

  • ClojureScript with Reagent (React wrapper) for UI
  • Shadow-CLJS for build tooling and development server
  • CodeMirror 6 for code editing with syntax highlighting
  • Marked library for markdown rendering

Application Structure

  • src/chalkpad/core.cljs - Main application entry point and mounting logic
  • src/chalkpad/state.cljs - Global state management with atom-based store
  • src/chalkpad/ui/blocks.cljs - Block components (markdown/code blocks) and main editor UI
  • src/chalkpad/ui/codemirror.cljs - CodeMirror integration and text editor component

State Management

The application uses a single global atom !doc in chalkpad.state that contains:

  • :blocks - Vector of block objects with :id, :type (:markdown or :code), :content, :lang (for code), and :editing? flag

Block operations include:

  • add-block! - Add new markdown or code blocks
  • update-block! - Update block properties (content, type, editing state)
  • remove-block! - Delete blocks
  • move-block! - Reorder blocks up/down

Development Commands

Core Commands

  • npm run dev - Start development server with hot reload (shadow-cljs watch)
  • npm run release - Build production bundle (shadow-cljs release)
  • npm run clean - Clean build artifacts
  • npm run repl - Start ClojureScript REPL

Development Workflow

  1. Run npm run dev to start the development server
  2. Navigate to http://localhost:3000 (configured in shadow-cljs.edn :dev-http)
  3. The app auto-reloads on file changes via shadow-cljs hot reload

Build Configuration

  • shadow-cljs.edn - Build configuration with browser target outputting to public/js
  • package.json - NPM dependencies and scripts
  • Entry point: chalkpad.core/init function

UI Components

Block System

  • Markdown blocks: Editable text with live preview using marked library
  • Code blocks: Syntax-highlighted editor supporting JavaScript and ClojureScript
  • Block controls: Move up/down, convert type, delete functionality

CodeMirror Integration

  • Custom Reagent wrapper for CodeMirror 6
  • Language-specific extensions for JavaScript, ClojureScript, and Markdown
  • Bidirectional data binding between editor and application state

Code Conventions

ClojureScript Style

  • Use kebab-case for function and variable names
  • Prefix atoms and mutable references with ! (e.g., !doc, !text)
  • Use defonce for application state to preserve during hot reload
  • Separate UI components into focused, single-responsibility functions

File Organization

  • Keep UI components in ui/ subdirectory
  • Separate state management from UI components
  • Use namespaced keywords for component types (:markdown, :code)