https://github.com/layerdynamics/mdx-to-json
a simple utility to convert and combine mdx to a single json file
https://github.com/layerdynamics/mdx-to-json
Last synced: 5 months ago
JSON representation
a simple utility to convert and combine mdx to a single json file
- Host: GitHub
- URL: https://github.com/layerdynamics/mdx-to-json
- Owner: LayerDynamics
- Created: 2024-08-21T21:46:50.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-21T06:56:05.000Z (about 1 year ago)
- Last Synced: 2025-03-22T21:45:00.716Z (about 1 year ago)
- Language: TypeScript
- Size: 494 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MDX-to-JSON
## Overview
MDX-to-JSON is a React-based web application designed to transform MDX (Markdown with JSX) files into structured JSON format. This tool bridges the gap between rich, interactive MDX content and machine-readable JSON data, making it invaluable for content management systems, documentation platforms, and data processing pipelines that need to work with MDX content programmatically.
## Detailed Functionality
MDX-to-JSON operates through several key processes:
1. **File Upload**: Users can drag and drop multiple MDX files onto the application's interface. The app uses react-dropzone to handle file inputs efficiently.
2. **MDX Parsing**: Each uploaded file is processed using a custom MDX parser built with the unified ecosystem (remark and rehype). This parser:
- Extracts front matter metadata using gray-matter
- Handles custom MDX components and JSX expressions
- Manages special syntax and comments within the MDX content
3. **Content Transformation**: The parsed MDX is transformed into a structured JSON format. This process:
- Converts MDX content to plain text while preserving essential formatting
- Organizes metadata and content into a consistent JSON structure
- Handles edge cases and potential syntax issues in the MDX
4. **Preview Generation**: The app generates a preview of the processed content, allowing users to verify the transformation before finalizing.
5. **JSON Compilation**: Users can combine multiple processed MDX files into a single JSON structure, where each MDX file becomes a key-value pair in the JSON object.
6. **JSON Formatting**: A "Format/Lint JSON" feature is available to clean up and standardize the JSON output, ensuring consistency and readability.
7. **Export**: The final JSON can be saved as a file, ready for use in other systems or applications.
## Key Features
- Intuitive drag-and-drop interface for file uploading
- Support for batch processing of multiple MDX files
- Real-time preview of converted content with syntax highlighting
- Robust error handling and validation to manage various MDX structures
- File management capabilities, including the ability to delete uploaded files
- JSON combination and formatting tools for refined output
- Exportable JSON data for seamless integration with other systems
## Technology Stack
- React: Provides the foundation for the user interface
- TypeScript: Ensures type safety and improves code quality
- Vite: Offers fast build times and efficient development experience
- Styled Components: Enables component-based styling with CSS-in-JS
- react-dropzone: Manages file uploads with drag-and-drop functionality
- unified (remark, rehype): Powers the MDX parsing and transformation pipeline
- gray-matter: Extracts front matter from MDX files
## Prerequisites
Ensure you have the following installed:
- Node.js (v14.0.0 or later)
- npm (v6.0.0 or later)
## Installation
1. Clone the repository:
```
git clone https://github.com/LayerDynamics/mdx-to-json.git
```
2. Navigate to the project directory:
```
cd mdx-to-json
```
3. Install the dependencies:
```
npm install
```
## Usage
1. Start the development server:
```
npm run dev
```
2. Open your browser and visit `http://localhost:5173` (or the port specified by Vite).
3. Drag and drop your MDX files onto the designated area in the application.
4. The app will process each file and display a preview of the converted content.
5. Use the "Combine Files" button to merge all processed files into a unified JSON structure.
6. Click "Format/Lint JSON" to clean and standardize the JSON output.
7. Finally, use "Save JSON" to download the processed data as a JSON file.
## Building for Production
To create a production-ready build, run:
```
npm run build
```
This command generates optimized files in the `dist` directory, ready for deployment to your chosen hosting platform.
## Contributing
We welcome contributions to MDX-to-JSON. To contribute:
1. Fork the repository.
2. Create a new branch: `git checkout -b feature/your-feature-name`.
3. Make your changes and commit them: `git commit -m 'Add some feature'`.
4. Push to the branch: `git push origin feature/your-feature-name`.
5. Submit a pull request with a comprehensive description of your changes.
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
## Contact
For questions, feedback, or issues, please open an issue in the GitHub repository.