{"id":23377967,"url":"https://github.com/beyondjs/mdx-processor","last_synced_at":"2025-04-08T04:49:57.413Z","repository":{"id":257404286,"uuid":"814596097","full_name":"beyondjs/mdx-processor","owner":"beyondjs","description":null,"archived":false,"fork":false,"pushed_at":"2024-12-19T15:10:19.000Z","size":9,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-14T03:34:38.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/beyondjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-13T10:12:14.000Z","updated_at":"2024-12-19T15:10:22.000Z","dependencies_parsed_at":"2025-02-16T03:01:18.789Z","dependency_job_id":null,"html_url":"https://github.com/beyondjs/mdx-processor","commit_stats":null,"previous_names":["beyondjs/mdx-processor"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fmdx-processor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fmdx-processor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fmdx-processor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/beyondjs%2Fmdx-processor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/beyondjs","download_url":"https://codeload.github.com/beyondjs/mdx-processor/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247779763,"owners_count":20994572,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-21T18:33:37.577Z","updated_at":"2025-04-08T04:49:57.396Z","avatar_url":"https://github.com/beyondjs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mdx\n\n# BeyondJS Processor for MDX\n\n## Introduction\n\nBeyondJS is an advanced JavaScript framework designed to unify development practices across different environments like\nbrowsers, Node.js, Deno, and Bun. One of its powerful features is the processor system, which includes support for MDX.\nMDX allows you to write JSX in Markdown documents, enabling you to use React components within your Markdown content.\nThe MDX processor in BeyondJS compiles MDX files, making it easier to integrate rich, interactive content in your\napplications.\n\n## What is a BeyondJS Processor?\n\nA BeyondJS processor is a tool that handles specific types of files within a project. The MDX processor is responsible\nfor compiling MDX files, allowing developers to combine Markdown and JSX seamlessly in their applications.\n\n## Setting Up BeyondJS Processor for MDX\n\n### Creating an MDX Module\n\nTo create a new MDX module in BeyondJS, you need to create a folder for your module and add a `module.json` file to\nconfigure the MDX processor.\n\n### Example `module.json` Configuration\n\n```json\n{\n\t\"name\": \"contents/en\",\n\t\"code\": {\n\t\t\"mdx\": {\n\t\t\t\"files\": [\"*\"]\n\t\t},\n\t\t\"ts\": {\n\t\t\t\"files\": [\"*\"]\n\t\t}\n\t}\n}\n```\n\nIn this configuration:\n\n-   The `mdx` entry specifies that all MDX files (`*`) within the module should be processed using the MDX processor.\n-   The `ts` entry specifies that all TypeScript files (`*`) within the module should be processed using the TypeScript\n    processor.\n\n### Example Directory Structure\n\n```\nmy-mdx-module/\n├── src/\n│   ├── content/\n│   │   └── example.mdx\n│   ├── components/\n│   │   └── MyComponent.tsx\n│   ├── module.json\n```\n\n### Example MDX File (`src/content/example.mdx`)\n\n```mdx\nimport React from 'react';\nimport MyComponent from '../components/MyComponent';\n\n# Hello MDX\n\nThis is an example of an MDX file in BeyondJS.\n\n\u003cMyComponent /\u003e\n```\n\n### Example React Component (`src/components/MyComponent.tsx`)\n\n```tsx\nimport React from 'react';\n\nconst MyComponent: React.FC = () =\u003e (\n\t\u003cdiv\u003e\n\t\t\u003cp\u003eThis is a React component rendered inside an MDX file.\u003c/p\u003e\n\t\u003c/div\u003e\n);\n\nexport default MyComponent;\n```\n\n## Benefits of Using BeyondJS Processor for MDX\n\n1. **Seamless Integration of Markdown and JSX**:\n\n    - Combine the simplicity of Markdown with the power of JSX, enabling rich, interactive content.\n\n2. **Modular Bundling**:\n\n    - Each MDX file is compiled and bundled independently, leading to faster loading times and better performance.\n\n3. **Automatic Compilation**:\n\n    - BeyondJS automatically handles the compilation of MDX files, eliminating the need for manual build steps.\n\n4. **Integration with Other Processors**:\n    - Easily integrate the MDX processor with other processors in BeyondJS, such as TypeScript for JavaScript files and\n      SASS for CSS files.\n\n## Example Usage in a BeyondJS Project\n\nHere's an example of how to set up a BeyondJS project using the MDX processor alongside other processors.\n\n### `module.json` Configuration\n\n```json\n{\n\t\"name\": \"project\",\n\t\"code\": {\n\t\t\"mdx\": {\n\t\t\t\"files\": [\"src/content/*.mdx\"]\n\t\t},\n\t\t\"ts\": {\n\t\t\t\"files\": [\"src/components/*.ts\", \"src/components/*.tsx\"]\n\t\t},\n\t\t\"sass\": {\n\t\t\t\"files\": [\"src/styles/*.scss\"]\n\t\t}\n\t}\n}\n```\n\n### Directory Structure\n\n```\nmy-beyondjs-project/\n├── src/\n│   ├── components/\n│   │   ├── MyComponent.tsx\n│   ├── content/\n│   │   ├── example.mdx\n│   ├── styles/\n│   │   └── main.scss\n├── module.json\n```\n\n### TypeScript Entry File (`src/index.ts`)\n\n```typescript\nimport './styles/main.scss';\nimport ExampleContent from './content/example.mdx';\n\nconsole.log('Hello BeyondJS with MDX!');\n```\n\n## Conclusion\n\nThe BeyondJS processor for MDX simplifies the development process by automating the compilation of MDX files and\nintegrating seamlessly with other processors. This modular approach enhances efficiency, performance, and flexibility,\nallowing developers to build scalable and maintainable applications. By leveraging the MDX processor in BeyondJS, you\ncan create rich, interactive content with ease.\n\n---\n\nThis README provides a comprehensive overview of setting up and using the MDX processor in a BeyondJS project. By\nfollowing these guidelines, you can efficiently manage and render MDX content, enhancing your application's\ncapabilities.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fmdx-processor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbeyondjs%2Fmdx-processor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbeyondjs%2Fmdx-processor/lists"}