From b010cf898afd59bfd7b5e1a8d5125448284b8ac4 Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Thu, 5 Feb 2026 09:04:48 +0000 Subject: [PATCH 1/5] Add AI assistant context files for project documentation - Create .prompts/project-info.prompttemplate with repository architecture - Create CLAUDE.md with development guidelines and build instructions - Include guidance to always build and test changes Co-authored-by: Claude Code / Opus --- .prompts/project-info.prompttemplate | 125 +++++++++++++++++++++++++++ CLAUDE.md | 73 ++++++++++++++++ 2 files changed, 198 insertions(+) create mode 100644 .prompts/project-info.prompttemplate create mode 100644 CLAUDE.md diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate new file mode 100644 index 00000000..ad8cfd8e --- /dev/null +++ b/.prompts/project-info.prompttemplate @@ -0,0 +1,125 @@ +# JSON Forms Website - Project Architecture + +This repository contains the official documentation website for [JSON Forms](https://jsonforms.io), a declarative framework for building JSON-based forms. + +## Technology Stack + +- **Static Site Generator**: Docusaurus 3.x +- **UI Framework**: React 18 with Material-UI (MUI) +- **Content Format**: MDX (Markdown + JSX) +- **Styling**: Infima CSS framework + Emotion CSS-in-JS +- **Deployment**: Netlify + +## Directory Structure + +``` +/ +├── content/ # All content files (markdown/mdx) +│ ├── docs/ # Main documentation +│ │ ├── tutorial/ # Tutorials and getting started guides +│ │ ├── uischema/ # UI Schema documentation +│ │ ├── integrations/ # Framework integrations (React, Angular, Vue) +│ │ └── deprecated/ # Deprecated features documentation +│ ├── examples/ # Interactive feature examples +│ ├── news/ # Blog posts and release announcements +│ ├── community/ # Community content and extensions +│ ├── faq/ # FAQ content +│ └── pages/ # Custom pages (support page, assets) +│ +├── src/ # React components and configuration +│ ├── components/ # React components organized by section +│ │ ├── examples/ # Example demo components +│ │ ├── docs/ # Documentation feature components +│ │ ├── home/ # Homepage component +│ │ ├── common/ # Shared components (Demo, custom renderers) +│ │ └── faq/ # FAQ components +│ ├── sidebars/ # Navigation sidebar configurations +│ │ ├── docs.js # Docs navigation structure +│ │ ├── examples.js # Examples navigation +│ │ ├── community.js # Community navigation +│ │ └── faq.js # FAQ navigation +│ ├── css/ +│ │ └── global.css # Global styles with theme variables +│ └── custom-webpack/ # Custom webpack configuration plugin +│ +├── plugins/ +│ └── custom-blog-plugin.js # Extended blog plugin for homepage integration +│ +├── static/ # Static assets +│ ├── img/ # Images, logos, icons +│ ├── api/ # Generated API documentation +│ └── current-version.js # Version info (generated during build) +│ +├── docusaurus.config.js # Main Docusaurus configuration +├── netlify.toml # Netlify deployment configuration +└── babel.config.js # Babel configuration +``` + +## Content Architecture + +### Documentation (`/content/docs/`) +The main documentation organized into: +- **Core Concepts**: Architecture, UI Schema elements, renderer sets +- **Features**: Labels, i18n, validation, date/time pickers +- **Tutorials**: Step-by-step guides for creating apps and custom renderers +- **Integrations**: React, Angular, and Vue binding documentation + +### Examples (`/content/examples/`) +Interactive examples demonstrating JSON Forms features: +- Basic controls, arrays, layouts +- Categorization and combinators +- Custom controls and renderers + +### News (`/content/news/`) +Blog posts and release announcements using a custom blog plugin. + +## Key Components + +### Demo Component (`src/components/common/Demo.js`) +The central interactive component that: +- Renders JSON Forms with Material-UI +- Displays tabbed views for Schema, UI Schema, and rendered Form +- Provides syntax highlighting for code display + +### Custom Renderers (`src/components/common/`) +- **Rating Control**: Custom star rating renderer +- **Country Control**: Country selection dropdown +- **Region Control**: Region selection dropdown + +### Custom Plugins +- **Custom Webpack Plugin** (`src/custom-webpack/`): Configures chunk splitting for optimized bundles +- **Custom Blog Plugin** (`plugins/custom-blog-plugin.js`): Injects latest blog post into homepage + +## Navigation Structure + +Sidebars are configured in `src/sidebars/` with separate navigation for: +- Documentation pages +- Examples +- Community content +- FAQ + +## Configuration Files + +| File | Purpose | +|------|---------| +| `docusaurus.config.js` | Site config: title, navbar, footer, plugins, themes | +| `netlify.toml` | Deployment: redirects, HTTP headers, CSP | +| `src/sidebars/*.js` | Navigation structure for each content section | + +## Styling + +- **Infima**: Docusaurus default CSS framework +- **CSS Variables**: Theme colors in `src/css/global.css` +- **Primary Color**: `#25c2a0` (teal) +- **CSS Modules**: Component-scoped styles +- **Emotion**: CSS-in-JS for MUI integration + +## Version Management + +The website automatically fetches JSON Forms version information from the GitHub API during build. Version info is stored in `/static/current-version.js` and displayed on the homepage. + +## External Integrations + +- **GitHub API**: Fetches latest release version information +- **Cloudflare Insights**: Analytics +- **Local Search**: `@easyops-cn/docusaurus-search-local` plugin diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 00000000..35b73f35 --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,73 @@ +# CLAUDE.md - AI Assistant Guidelines + +This file provides context and guidelines for AI assistants working on the JSON Forms documentation website. + +## Project Context + +For detailed architecture information, see [.prompts/project-info.prompttemplate](.prompts/project-info.prompttemplate). + +This is a Docusaurus-based documentation website for the JSON Forms library. The site contains documentation, interactive examples, tutorials, and community content. + +## Development Commands + +### Install Dependencies +```bash +npm install +``` + +### Start Development Server +```bash +npm start +``` +This starts the local development server at `http://localhost:3000` with hot-reloading. + +### Build for Production +```bash +npm run build +``` +This generates static files in the `/build` directory. + +### Serve Production Build Locally +```bash +npm run serve +``` +Serves the built site locally to verify the production build. + +### Clear Cache +```bash +npm run clear +``` +Clears the Docusaurus cache if you encounter build issues. + +## Important Guidelines + +### Always Build and Test Changes + +**CRITICAL**: After making any changes to this repository, you MUST: + +1. **Run the build** to ensure there are no compilation errors: + ```bash + npm run build + ``` + +2. **Start the dev server** and verify your changes work correctly: + ```bash + npm start + ``` + +3. **Check for console errors** in the browser when viewing affected pages. + +Do not consider a task complete until the build passes and the changes have been visually verified. + +### Content Guidelines + +- Documentation files use MDX format (Markdown + JSX) +- Place new documentation in `/content/docs/` +- Place new examples in `/content/examples/` +- Update sidebar configurations in `/src/sidebars/` when adding new pages + +### Component Development + +- React components go in `/src/components/` +- Use the existing Demo component pattern for interactive examples +- Follow the CSS Modules pattern for component-specific styles From bb32122c3b4276a09b564b205901ed923c7abdfd Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Thu, 5 Feb 2026 09:20:29 +0000 Subject: [PATCH 2/5] Condense AI context files to essential non-obvious information Co-authored-by: Claude Code / Opus --- .prompts/project-info.prompttemplate | 133 +++------------------------ 1 file changed, 15 insertions(+), 118 deletions(-) diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate index ad8cfd8e..74bd5040 100644 --- a/.prompts/project-info.prompttemplate +++ b/.prompts/project-info.prompttemplate @@ -1,125 +1,22 @@ -# JSON Forms Website - Project Architecture +# JSON Forms Website - Architecture -This repository contains the official documentation website for [JSON Forms](https://jsonforms.io), a declarative framework for building JSON-based forms. +Docusaurus 3.x documentation site for [JSON Forms](https://jsonforms.io). -## Technology Stack +## Key Architectural Decisions -- **Static Site Generator**: Docusaurus 3.x -- **UI Framework**: React 18 with Material-UI (MUI) -- **Content Format**: MDX (Markdown + JSX) -- **Styling**: Infima CSS framework + Emotion CSS-in-JS -- **Deployment**: Netlify +- **Content in `/content/`**: All MDX content lives here, NOT in `/docs/` (Docusaurus default) +- **Sidebars in `/src/sidebars/`**: Navigation configs are separate files, not in docusaurus.config.js +- **Custom Blog Plugin** (`plugins/custom-blog-plugin.js`): Injects latest post into homepage +- **Version fetching**: `build.sh` queries GitHub API, writes to `/static/current-version.js` -## Directory Structure +## Important Patterns -``` -/ -├── content/ # All content files (markdown/mdx) -│ ├── docs/ # Main documentation -│ │ ├── tutorial/ # Tutorials and getting started guides -│ │ ├── uischema/ # UI Schema documentation -│ │ ├── integrations/ # Framework integrations (React, Angular, Vue) -│ │ └── deprecated/ # Deprecated features documentation -│ ├── examples/ # Interactive feature examples -│ ├── news/ # Blog posts and release announcements -│ ├── community/ # Community content and extensions -│ ├── faq/ # FAQ content -│ └── pages/ # Custom pages (support page, assets) -│ -├── src/ # React components and configuration -│ ├── components/ # React components organized by section -│ │ ├── examples/ # Example demo components -│ │ ├── docs/ # Documentation feature components -│ │ ├── home/ # Homepage component -│ │ ├── common/ # Shared components (Demo, custom renderers) -│ │ └── faq/ # FAQ components -│ ├── sidebars/ # Navigation sidebar configurations -│ │ ├── docs.js # Docs navigation structure -│ │ ├── examples.js # Examples navigation -│ │ ├── community.js # Community navigation -│ │ └── faq.js # FAQ navigation -│ ├── css/ -│ │ └── global.css # Global styles with theme variables -│ └── custom-webpack/ # Custom webpack configuration plugin -│ -├── plugins/ -│ └── custom-blog-plugin.js # Extended blog plugin for homepage integration -│ -├── static/ # Static assets -│ ├── img/ # Images, logos, icons -│ ├── api/ # Generated API documentation -│ └── current-version.js # Version info (generated during build) -│ -├── docusaurus.config.js # Main Docusaurus configuration -├── netlify.toml # Netlify deployment configuration -└── babel.config.js # Babel configuration -``` +### Interactive Examples +Use the `Demo` component (`src/components/common/Demo.js`) which renders JSON Forms with Material-UI and provides tabbed Schema/UI Schema/Form views. -## Content Architecture +### Adding New Documentation +1. Create MDX file in `/content/docs/` +2. Add entry to `/src/sidebars/docs.js` -### Documentation (`/content/docs/`) -The main documentation organized into: -- **Core Concepts**: Architecture, UI Schema elements, renderer sets -- **Features**: Labels, i18n, validation, date/time pickers -- **Tutorials**: Step-by-step guides for creating apps and custom renderers -- **Integrations**: React, Angular, and Vue binding documentation - -### Examples (`/content/examples/`) -Interactive examples demonstrating JSON Forms features: -- Basic controls, arrays, layouts -- Categorization and combinators -- Custom controls and renderers - -### News (`/content/news/`) -Blog posts and release announcements using a custom blog plugin. - -## Key Components - -### Demo Component (`src/components/common/Demo.js`) -The central interactive component that: -- Renders JSON Forms with Material-UI -- Displays tabbed views for Schema, UI Schema, and rendered Form -- Provides syntax highlighting for code display - -### Custom Renderers (`src/components/common/`) -- **Rating Control**: Custom star rating renderer -- **Country Control**: Country selection dropdown -- **Region Control**: Region selection dropdown - -### Custom Plugins -- **Custom Webpack Plugin** (`src/custom-webpack/`): Configures chunk splitting for optimized bundles -- **Custom Blog Plugin** (`plugins/custom-blog-plugin.js`): Injects latest blog post into homepage - -## Navigation Structure - -Sidebars are configured in `src/sidebars/` with separate navigation for: -- Documentation pages -- Examples -- Community content -- FAQ - -## Configuration Files - -| File | Purpose | -|------|---------| -| `docusaurus.config.js` | Site config: title, navbar, footer, plugins, themes | -| `netlify.toml` | Deployment: redirects, HTTP headers, CSP | -| `src/sidebars/*.js` | Navigation structure for each content section | - -## Styling - -- **Infima**: Docusaurus default CSS framework -- **CSS Variables**: Theme colors in `src/css/global.css` -- **Primary Color**: `#25c2a0` (teal) -- **CSS Modules**: Component-scoped styles -- **Emotion**: CSS-in-JS for MUI integration - -## Version Management - -The website automatically fetches JSON Forms version information from the GitHub API during build. Version info is stored in `/static/current-version.js` and displayed on the homepage. - -## External Integrations - -- **GitHub API**: Fetches latest release version information -- **Cloudflare Insights**: Analytics -- **Local Search**: `@easyops-cn/docusaurus-search-local` plugin +### Custom Renderers +Example custom renderers exist in `src/components/common/` (rating, country, region controls). From eae7c099ab5492d5bc946afeeedc70566ef37e5e Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Thu, 5 Feb 2026 09:52:39 +0000 Subject: [PATCH 3/5] Refine CLAUDE.md: use npm ci, clarify JSON Forms description Co-authored-by: Claude Code / Opus --- CLAUDE.md | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 35b73f35..34c73bf5 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,18 +1,14 @@ -# CLAUDE.md - AI Assistant Guidelines +# JSON Forms Documentation Website -This file provides context and guidelines for AI assistants working on the JSON Forms documentation website. +Docusaurus-based documentation website for [JSON Forms](https://github.com/eclipsesource/jsonforms), a declarative framework for building JSON Schema based forms. -## Project Context - -For detailed architecture information, see [.prompts/project-info.prompttemplate](.prompts/project-info.prompttemplate). - -This is a Docusaurus-based documentation website for the JSON Forms library. The site contains documentation, interactive examples, tutorials, and community content. +For detailed architecture, see [.prompts/project-info.prompttemplate](.prompts/project-info.prompttemplate). ## Development Commands ### Install Dependencies ```bash -npm install +npm ci ``` ### Start Development Server From ef5ad3aa5e1e004a11c8ac7f7cef03c9465588fd Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Thu, 5 Feb 2026 10:04:09 +0000 Subject: [PATCH 4/5] Remove redundant project description from project-info Co-authored-by: Claude Code / Opus --- .prompts/project-info.prompttemplate | 4 ---- 1 file changed, 4 deletions(-) diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate index 74bd5040..4ffbd7eb 100644 --- a/.prompts/project-info.prompttemplate +++ b/.prompts/project-info.prompttemplate @@ -1,7 +1,3 @@ -# JSON Forms Website - Architecture - -Docusaurus 3.x documentation site for [JSON Forms](https://jsonforms.io). - ## Key Architectural Decisions - **Content in `/content/`**: All MDX content lives here, NOT in `/docs/` (Docusaurus default) From 48fb3327c3490a42670d2d95d3c0777726a8f221 Mon Sep 17 00:00:00 2001 From: Stefan Dirix Date: Thu, 5 Feb 2026 10:29:06 +0000 Subject: [PATCH 5/5] Reorganize AI context: move guidelines to project-info - CLAUDE.md now contains only link to project-info and dev commands - project-info.prompttemplate contains project description, architecture, patterns, and guidelines Co-authored-by: Claude Code / Opus --- .prompts/project-info.prompttemplate | 19 ++++++++++++--- CLAUDE.md | 35 ---------------------------- 2 files changed, 16 insertions(+), 38 deletions(-) diff --git a/.prompts/project-info.prompttemplate b/.prompts/project-info.prompttemplate index 4ffbd7eb..5a41c05d 100644 --- a/.prompts/project-info.prompttemplate +++ b/.prompts/project-info.prompttemplate @@ -1,3 +1,7 @@ +# JSON Forms Documentation Website + +Docusaurus-based documentation website for [JSON Forms](https://github.com/eclipsesource/jsonforms), a declarative framework for building JSON Schema based forms. + ## Key Architectural Decisions - **Content in `/content/`**: All MDX content lives here, NOT in `/docs/` (Docusaurus default) @@ -10,9 +14,18 @@ ### Interactive Examples Use the `Demo` component (`src/components/common/Demo.js`) which renders JSON Forms with Material-UI and provides tabbed Schema/UI Schema/Form views. -### Adding New Documentation -1. Create MDX file in `/content/docs/` -2. Add entry to `/src/sidebars/docs.js` +### Adding Documentation +1. Create MDX file in `/content/docs/` or `/content/examples/` +2. Add entry to the appropriate sidebar in `/src/sidebars/` ### Custom Renderers Example custom renderers exist in `src/components/common/` (rating, country, region controls). + +### Component Development +- React components go in `/src/components/` +- Use the existing Demo component pattern for interactive examples +- Follow CSS Modules pattern for component-specific styles + +## Important Guidelines + +**Always build and test changes**: Run the build to check for compilation errors, then start the dev server and visually verify changes work correctly. Check for console errors in the browser. Do not consider a task complete until the build passes and changes have been visually verified. diff --git a/CLAUDE.md b/CLAUDE.md index 34c73bf5..1b6dd5bb 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -1,7 +1,5 @@ # JSON Forms Documentation Website -Docusaurus-based documentation website for [JSON Forms](https://github.com/eclipsesource/jsonforms), a declarative framework for building JSON Schema based forms. - For detailed architecture, see [.prompts/project-info.prompttemplate](.prompts/project-info.prompttemplate). ## Development Commands @@ -34,36 +32,3 @@ Serves the built site locally to verify the production build. npm run clear ``` Clears the Docusaurus cache if you encounter build issues. - -## Important Guidelines - -### Always Build and Test Changes - -**CRITICAL**: After making any changes to this repository, you MUST: - -1. **Run the build** to ensure there are no compilation errors: - ```bash - npm run build - ``` - -2. **Start the dev server** and verify your changes work correctly: - ```bash - npm start - ``` - -3. **Check for console errors** in the browser when viewing affected pages. - -Do not consider a task complete until the build passes and the changes have been visually verified. - -### Content Guidelines - -- Documentation files use MDX format (Markdown + JSX) -- Place new documentation in `/content/docs/` -- Place new examples in `/content/examples/` -- Update sidebar configurations in `/src/sidebars/` when adding new pages - -### Component Development - -- React components go in `/src/components/` -- Use the existing Demo component pattern for interactive examples -- Follow the CSS Modules pattern for component-specific styles