{"id":29905725,"url":"https://github.com/zakarialaoui10/van-mdx","last_synced_at":"2025-08-01T20:00:29.484Z","repository":{"id":305489477,"uuid":"1022357667","full_name":"zakarialaoui10/van-mdx","owner":"zakarialaoui10","description":"Markdown for Vanjs","archived":false,"fork":false,"pushed_at":"2025-07-27T20:42:12.000Z","size":211,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-27T22:22:55.951Z","etag":null,"topics":["javascript","markdown","mdx","moro","preprocessor","remark","unified","vanjs","vite"],"latest_commit_sha":null,"homepage":"","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/zakarialaoui10.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,"zenodo":null}},"created_at":"2025-07-18T23:06:16.000Z","updated_at":"2025-07-27T20:42:16.000Z","dependencies_parsed_at":"2025-07-20T12:35:06.494Z","dependency_job_id":null,"html_url":"https://github.com/zakarialaoui10/van-mdx","commit_stats":null,"previous_names":["zakarialaoui10/van-mdx"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zakarialaoui10/van-mdx","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakarialaoui10%2Fvan-mdx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakarialaoui10%2Fvan-mdx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakarialaoui10%2Fvan-mdx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakarialaoui10%2Fvan-mdx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zakarialaoui10","download_url":"https://codeload.github.com/zakarialaoui10/van-mdx/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zakarialaoui10%2Fvan-mdx/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268290451,"owners_count":24226640,"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","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["javascript","markdown","mdx","moro","preprocessor","remark","unified","vanjs","vite"],"created_at":"2025-08-01T20:00:28.308Z","updated_at":"2025-08-01T20:00:29.454Z","avatar_url":"https://github.com/zakarialaoui10.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# van-mdx\n\nA Markdown preprocessor for [Vanjs](https://vanjs.org/). \nIt combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***\n\n## Demos : \n - ***Hello World*** : \n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/zakarialaoui10/van-mdx/tree/main/examples/hello-world?file=src%2Fcontent%2FArticle.mdx)\n\n## Install : \n\n```bash\nnpm i van-mdx@latest\n```\n\n## Config :\n\n```js\nimport {defineConfig} from \"vite\"\nimport VanMdx from \"van-mdx/vite\"\nexport default defineConfig({\n    plugins : [\n        VanMdx()\n    ]\n})\n```\n\n## Usage :\n\n- ***Article.mdx :***\n```jsx\n---\n title : \"Van-Mdx Starter\" \n name : \"world\"\n __props__ : \n   background : \"tomato\"\n   data : []\n---\n\nimport data from \"./data.js\";\nimport InteractiveComponent from \"./InteractiveComponent.js\";\n\n# Hello {name}\n\n\u003cInteractiveComponent data={data} background={tomato}/\u003e\n```\n\n```js\n// main.js\nimport van from \"vanjs-core\"\nimport InteractiveArticle,{title} from \"./Article.mdx\"\n\nconst {article} = van.tags;\n\nconst Article_1 = article(\n    InteractiveArticle({\n        background : \"yellow\"\n    })\n)\n\nvan.add(\n    Article_1\n)\n```\n\n## Features :\n\n- ***Simple Integration :*** Write Markdown as usual, and inject Vanjs components wherever needed.\n- ***Extensible :***  Create custom interactive components using `Vanjs` and use them in any Markdown file.\n- ***Reusable :*** `Van-Mdx` exports a default functional component, allowing you to call it multiple times with different data, enabling dynamic and versatile use.\n- ***Frontmatter Support :*** Use `YAML` syntax in to include metadata like titles, descriptions, or configurations in your Markdown files, and define props to pass data dynamically to Zikojs components.\n- ***Markdown Support :*** Use standard Markdown syntax for writing content.\n- ***HTML Support :*** Use standard HTML syntax for writing content.\n- ***JSX Syntax :*** Declare component using Vanjs Hyperscript syntax, and render it using JSX\n- ***Props :*** Pass data to components through props, enabling dynamic rendering and customization of content within your Markdown files.\n- ***Attributes:*** \n- ***ESM : :***  Supports ECMAScript Modules (ESM), allowing you to import and export modules\n- ***Expressions :*** Van-Mdx lets you use JS expressions inside curly braces, like Hello {name}. These expressions can be full JS programs, as long as they evaluate to something renderable. For example, you can use an IIFE like this:\n```js\nHello {(()=\u003e{\n    const names = [\"world\", \"everyone\"];\n    const {length} = names\n    return names[Math.floor(Math.random()*length)]\n})()}\n```\n- ***Internal scripts :*** Include JS logic that runs alongside Van-Mdx components but isn't rendered in the output. They can initialize variables or perform side effects...\n- ***Interleaving :*** You can use inline markdown elements inside HTML or Vanjs Components \n```jsx\n\u003cp\u003e\n ***Hello {name}***\n\u003c/p\u003e\n```\n\n\n# ⭐️ Show your support\nIf you appreciate the project, kindly demonstrate your support by giving it a star!\n\n# Licence\nThis projet is licensed under the terms of MIT License","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakarialaoui10%2Fvan-mdx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzakarialaoui10%2Fvan-mdx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzakarialaoui10%2Fvan-mdx/lists"}