{"_id":"@asafarim/complete-md-viewer","_rev":"6-fd971e1c1170623322e3351214c1d4d1","name":"@asafarim/complete-md-viewer","dist-tags":{"latest":"1.1.1"},"versions":{"1.0.0":{"name":"@asafarim/complete-md-viewer","version":"1.0.0","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","_id":"@asafarim/complete-md-viewer@1.0.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"dist":{"shasum":"1608d7be7faea565583ec28f55c79718330daf9e","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.0.0.tgz","fileCount":18,"integrity":"sha512-tqxB3vPHmHa0B6tDTbUbhPMMgQgnaSDo9eLcTAy5V0mSiyaix8I37JSiGKooiEvjPmE7BZCv2EcE8lQ5gum5AA==","signatures":[{"sig":"MEUCIQCRsddsyXsvHrFf0CSG5lpB4wH8rOFcOXa1kOjNCU5BmgIgTuv3xHzX0kjylLWDvLxNXjX0e90G34QsIT8ePXenKu8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7472653},"main":"dist/index.js","type":"module","_from":"file:asafarim-complete-md-viewer-1.0.0.tgz","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\c9a56d01df18493d35d8bbb94db56bcd\\asafarim-complete-md-viewer-1.0.0.tgz","_integrity":"sha512-tqxB3vPHmHa0B6tDTbUbhPMMgQgnaSDo9eLcTAy5V0mSiyaix8I37JSiGKooiEvjPmE7BZCv2EcE8lQ5gum5AA==","repository":{"url":"git+https://github.com/alisafari-it/complete-md-viewer.git","type":"git"},"_npmVersion":"11.4.2","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","directories":{},"_nodeVersion":"20.18.3","dependencies":{"js-yaml":"^4.1.0","remark-gfm":"^3.0.1","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vitest":"^0.34.3","typescript":"^5.0.2","@types/react":"^18.2.15","@types/js-yaml":"^4.0.5","vite-plugin-dts":"^3.5.2","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/complete-md-viewer_1.0.0_1753304468864_0.06756068635698731","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@asafarim/complete-md-viewer","version":"1.0.1","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","_id":"@asafarim/complete-md-viewer@1.0.1","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"dist":{"shasum":"0e169dca3ad52f2521c7330d1f6439a6bd7c5a85","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.0.1.tgz","fileCount":18,"integrity":"sha512-duhC+jNi2KgYIJdmwjsIk/qf8/cqguyPVzq+9CyvMuOQJgCj1XChzwlf9Xk9L6EqDFYb6UG/+6rqO5UiMjryBg==","signatures":[{"sig":"MEYCIQDeP6Y8ygljkFad1yIee4wq6IAAATTNtsjDUNrpPmzpKgIhAPB7SlN/SP6fdTVTs5BYd5tpZel01TjR/LxpD7aIQNQV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7472666},"main":"dist/complete-md-viewer.js","type":"module","_from":"file:asafarim-complete-md-viewer-1.0.1.tgz","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\7175b560a0208f4a44aaf135ea405896\\asafarim-complete-md-viewer-1.0.1.tgz","_integrity":"sha512-duhC+jNi2KgYIJdmwjsIk/qf8/cqguyPVzq+9CyvMuOQJgCj1XChzwlf9Xk9L6EqDFYb6UG/+6rqO5UiMjryBg==","repository":{"url":"git+https://github.com/alisafari-it/complete-md-viewer.git","type":"git"},"_npmVersion":"11.4.2","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","directories":{},"_nodeVersion":"20.18.3","dependencies":{"js-yaml":"^4.1.0","remark-gfm":"^3.0.1","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vitest":"^0.34.3","typescript":"^5.0.2","@types/react":"^18.2.15","@types/js-yaml":"^4.0.5","vite-plugin-dts":"^3.5.2","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/complete-md-viewer_1.0.1_1753305841328_0.5548533559255828","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@asafarim/complete-md-viewer","version":"1.0.2","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","_id":"@asafarim/complete-md-viewer@1.0.2","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"dist":{"shasum":"6c0f739e847976009ca4800f7d94f6f14a4b8ca0","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.0.2.tgz","fileCount":21,"integrity":"sha512-UhWJhX3j/rwmWwP7zEKCdS0ib1N8AsU/RxJk1TXDT5xGUdaqaraz1GOWlkNiNVBcGcd5ApyvC7FsnsT+HJstqQ==","signatures":[{"sig":"MEYCIQD90vknpCA22FfrgOeEMYOM814kvVvQeQhmrlgUrYqlbQIhAP4s7G+7o2Yj3v19gMJbnumjhrN/rYymO+yp20U2FqU7","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7765019},"main":"dist/complete-md-viewer.js","type":"module","_from":"file:asafarim-complete-md-viewer-1.0.2.tgz","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\809e440c9c140e8c9fb7e5acbf4fdced\\asafarim-complete-md-viewer-1.0.2.tgz","_integrity":"sha512-UhWJhX3j/rwmWwP7zEKCdS0ib1N8AsU/RxJk1TXDT5xGUdaqaraz1GOWlkNiNVBcGcd5ApyvC7FsnsT+HJstqQ==","repository":{"url":"git+https://github.com/alisafari-it/complete-md-viewer.git","type":"git"},"_npmVersion":"11.4.2","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","directories":{},"_nodeVersion":"20.18.3","dependencies":{"js-yaml":"^4.1.0","remark-gfm":"^3.0.1","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vitest":"^0.34.3","typescript":"^5.0.2","@types/react":"^18.2.15","@types/js-yaml":"^4.0.5","vite-plugin-dts":"^3.5.2","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/complete-md-viewer_1.0.2_1753307667718_0.31334014914762376","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@asafarim/complete-md-viewer","version":"1.0.3","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","_id":"@asafarim/complete-md-viewer@1.0.3","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"dist":{"shasum":"187d555483655f7f30d43273251210f1f8ef16f9","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.0.3.tgz","fileCount":21,"integrity":"sha512-UP6uG3vz4ot/jgy1YhRsWrlq2WsxHU8p2l6ud+zfuiBCFav34laTzOE4j7/icLuMEZmYpUPfwHQlmv7P0Rj3ng==","signatures":[{"sig":"MEQCIEMnc16xzEOThU8PPsrL4WZ0TW8DOljdMq8NlWpq0GJMAiB4cADyo3+V/LL2lw71OFQoATsKyumUE5m6WshX/9iD+Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7765196},"main":"dist/complete-md-viewer.js","type":"module","_from":"file:asafarim-complete-md-viewer-1.0.3.tgz","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\1c9d21ae94281e3092448329b133e1cc\\asafarim-complete-md-viewer-1.0.3.tgz","_integrity":"sha512-UP6uG3vz4ot/jgy1YhRsWrlq2WsxHU8p2l6ud+zfuiBCFav34laTzOE4j7/icLuMEZmYpUPfwHQlmv7P0Rj3ng==","repository":{"url":"git+https://github.com/alisafari-it/complete-md-viewer.git","type":"git"},"_npmVersion":"11.4.2","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","directories":{},"_nodeVersion":"20.18.3","dependencies":{"js-yaml":"^4.1.0","remark-gfm":"^3.0.1","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vitest":"^0.34.3","typescript":"^5.0.2","@types/react":"^18.2.15","@types/js-yaml":"^4.0.5","vite-plugin-dts":"^3.5.2","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/complete-md-viewer_1.0.3_1753308009401_0.7253753625085495","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@asafarim/complete-md-viewer","version":"1.1.0","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","_id":"@asafarim/complete-md-viewer@1.1.0","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"dist":{"shasum":"278eaa304d2fe2e2015bc5e40dd4e5e2aa86e582","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.1.0.tgz","fileCount":21,"integrity":"sha512-UBGmyQXSWZ7/EcHlNxhEfLjo6q1HCboa84BTycdSs1xsY0gbHoUxLXHLw+tEcSLLCSZhEUKaJL6ZxmZFoWmErw==","signatures":[{"sig":"MEUCIDWhLf2wnm6maqHOCHy43pPcJN6VoNP/AnxczBDBSGFGAiEA7XfuxuW6VxVFgP7giijR905P5xPYlaMWHpWkgZkULHk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7788761},"main":"dist/complete-md-viewer.js","type":"module","_from":"file:asafarim-complete-md-viewer-1.1.0.tgz","types":"dist/index.d.ts","engines":{"node":">=18.0.0"},"scripts":{"lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run","build":"tsc && vite build","preview":"vite preview"},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\be4626330dca88a7f3594026b4804525\\asafarim-complete-md-viewer-1.1.0.tgz","_integrity":"sha512-UBGmyQXSWZ7/EcHlNxhEfLjo6q1HCboa84BTycdSs1xsY0gbHoUxLXHLw+tEcSLLCSZhEUKaJL6ZxmZFoWmErw==","repository":{"url":"git+https://github.com/alisafari-it/complete-md-viewer.git","type":"git"},"_npmVersion":"11.4.2","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","directories":{},"_nodeVersion":"20.18.3","dependencies":{"js-yaml":"^4.1.0","remark-gfm":"^3.0.1","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^4.4.5","eslint":"^8.45.0","vitest":"^0.34.3","typescript":"^5.0.2","@types/react":"^18.2.15","@types/js-yaml":"^4.0.5","vite-plugin-dts":"^3.5.2","@types/react-dom":"^18.2.7","@vitejs/plugin-react":"^4.0.3","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"_npmOperationalInternal":{"tmp":"tmp/complete-md-viewer_1.1.0_1753389858665_0.6270269090650624","host":"s3://npm-registry-packages-npm-production"}},"1.1.1":{"name":"@asafarim/complete-md-viewer","version":"1.1.1","description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","main":"dist/complete-md-viewer.js","types":"dist/index.d.ts","type":"module","peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0","react-router-dom":"^6.0.0"},"dependencies":{"js-yaml":"^4.1.0","react-markdown":"^8.0.7","react-syntax-highlighter":"^15.5.0","remark-gfm":"^3.0.1"},"devDependencies":{"@types/js-yaml":"^4.0.5","@types/react":"^18.2.15","@types/react-dom":"^18.2.7","@types/react-syntax-highlighter":"^15.5.7","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","@vitejs/plugin-react":"^4.0.3","eslint":"^8.45.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.4.3","typescript":"^5.0.2","vite":"^4.4.5","vite-plugin-dts":"^3.5.2","vitest":"^0.34.3"},"keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"author":{"name":"ASafariM"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/alisafari-it/complete-md-viewer.git"},"bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"engines":{"node":">=18.0.0"},"scripts":{"build":"tsc && vite build","preview":"vite preview","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"vitest run"},"_id":"@asafarim/complete-md-viewer@1.1.1","_integrity":"sha512-PfyMDba9dOmQGa1xfA+fHwDNFuUBIPlMI5QvHd0RctCTd5RCZyRQ8g734e7jZictE9M08ocJ/ASpj2xTUoZ2QQ==","_resolved":"C:\\Users\\User\\AppData\\Local\\Temp\\7c9cdcd577dac68e889b0087cf141952\\asafarim-complete-md-viewer-1.1.1.tgz","_from":"file:asafarim-complete-md-viewer-1.1.1.tgz","_nodeVersion":"20.18.3","_npmVersion":"11.4.2","dist":{"integrity":"sha512-PfyMDba9dOmQGa1xfA+fHwDNFuUBIPlMI5QvHd0RctCTd5RCZyRQ8g734e7jZictE9M08ocJ/ASpj2xTUoZ2QQ==","shasum":"dddab5d00b267e53e31c4e43ba1ed602866516cd","tarball":"https://registry.npmjs.org/@asafarim/complete-md-viewer/-/complete-md-viewer-1.1.1.tgz","fileCount":21,"unpackedSize":7794817,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCPl/CjCLci4CkXDWgDLxUQ4wIuxhYVDniumPatqrAYDAIhAO0RzpwsORoz3su7iwW2puEuyhzHWSmd5PXY4Tb7fnoB"}]},"_npmUser":{"name":"asafarim.be","email":"asafarim.it@gmail.com"},"directories":{},"maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/complete-md-viewer_1.1.1_1753394174313_0.9586102885642467"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-23T21:01:08.727Z","modified":"2025-07-24T21:56:14.778Z","1.0.0":"2025-07-23T21:01:09.142Z","1.0.1":"2025-07-23T21:24:01.582Z","1.0.2":"2025-07-23T21:54:27.977Z","1.0.3":"2025-07-23T22:00:09.619Z","1.1.0":"2025-07-24T20:44:18.901Z","1.1.1":"2025-07-24T21:56:14.569Z"},"bugs":{"url":"https://github.com/alisafari-it/complete-md-viewer/issues"},"author":{"name":"ASafariM"},"license":"MIT","homepage":"https://github.com/alisafari-it/complete-md-viewer#readme","keywords":["markdown","viewer","react","documentation","file-explorer","integrated","standalone"],"repository":{"type":"git","url":"git+https://github.com/alisafari-it/complete-md-viewer.git"},"description":"A flexible markdown viewer with support for both standalone and integrated routing usecases","maintainers":[{"name":"asafarim.be","email":"asafarim.it@gmail.com"}],"readme":"# @asafarim/complete-md-viewer\r\n\r\nA flexible, production-ready markdown viewer component for React applications with support for both standalone and integrated use cases. Transform your markdown files into a professional documentation website with an intuitive file tree, responsive design, and beautiful theming.\r\n\r\n## ✨ Features\r\n\r\n- 📁 **Interactive File Tree Navigation** - Browse markdown files with collapsible sidebar\r\n- 📝 **Professional Markdown Rendering** - Syntax highlighting and GitHub Flavored Markdown support\r\n- 🔍 **YAML Front Matter Support** - Rich document metadata display\r\n- 🌗 **Light & Dark Themes** - Seamless theme switching with consistent styling\r\n- 📱 **Mobile Responsive** - Optimized for desktop, tablet, and mobile devices\r\n- 🎨 **Customizable Styling** - Easy theme customization and CSS overrides\r\n- 🔄 **Flexible Integration Options**:\r\n  - **Standalone mode** with built-in router for independent documentation sites\r\n  - **Integrated mode** that works seamlessly with your existing React Router setup\r\n- 🚀 **Production Ready** - Optimized for performance and professional documentation sites\r\n- 🔗 **URL Persistence** - Direct file URLs work correctly on page refresh and browser navigation\r\n- 📂 **Deep Linking** - Share direct links to specific markdown files\r\n\r\n## 🚀 Quick Start\r\n\r\nFor a complete tutorial with screenshots and advanced features, see our [Complete Tutorial](./how-to.md).\r\n\r\n### 🎮 Live Demo\r\n\r\nSee the package in action with our interactive demo application:\r\n- **Live Demo**: [demo-complete-md-viewer.vercel.app](https://demo-complete-md-viewer.vercel.app)\r\n- **Source Code**: [github.com/AliSafari-IT/demo-complete-md-viewer](https://github.com/AliSafari-IT/demo-complete-md-viewer)\r\n\r\nThe demo showcases all features including file tree navigation, theme switching, mobile responsiveness, and YAML front matter support.\r\n\r\n### Basic Setup\r\n\r\n```bash\r\nnpm install @asafarim/complete-md-viewer\r\n# Ensure you have peer dependencies\r\nnpm install react react-dom react-router-dom\r\n```\r\n\r\n### Minimal Example\r\n\r\n```tsx\r\nimport { HashRouter, Routes, Route } from 'react-router-dom';\r\nimport { MarkdownContent, ThemeProvider } from '@asafarim/complete-md-viewer';\r\nimport '@asafarim/complete-md-viewer/dist/style.css';\r\n\r\nfunction App() {\r\n  const [theme, setTheme] = useState('light');\r\n  \r\n  return (\r\n    <ThemeProvider theme={theme} toggleTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\r\n      <HashRouter>\r\n        <Routes>\r\n          <Route \r\n            path=\"/*\" \r\n            element={\r\n              <MarkdownContent \r\n                apiBaseUrl=\"http://localhost:3300\" \r\n                showHomePage={true}\r\n                hideFileTree={false}\r\n              />\r\n            } \r\n          />\r\n        </Routes>\r\n      </HashRouter>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n## 📖 Usage Examples\r\n\r\n### Standalone Mode\r\n\r\nPerfect for dedicated documentation sites. Includes built-in routing and theme management:\r\n\r\n```tsx\r\nimport { StandaloneMarkdownViewer } from '@asafarim/complete-md-viewer';\r\nimport '@asafarim/complete-md-viewer/dist/style.css';\r\n\r\nfunction App() {\r\n  return (\r\n    <StandaloneMarkdownViewer \r\n      apiBaseUrl=\"http://localhost:3300\"\r\n      showHomePage={true}\r\n      hideFileTree={false}\r\n      sidebarCollapsed={true} // Professional collapsed sidebar by default\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### Integrated Mode\r\n\r\nEmbed within your existing React Router application:\r\n\r\n```tsx\r\nimport { BrowserRouter, Routes, Route } from 'react-router-dom';\r\nimport { IntegratedMarkdownViewer } from '@asafarim/complete-md-viewer';\r\nimport '@asafarim/complete-md-viewer/dist/style.css';\r\n\r\nfunction App() {\r\n  return (\r\n    <BrowserRouter>\r\n      <Routes>\r\n        <Route path=\"/\" element={<Home />} />\r\n        <Route path=\"/docs/*\" element={\r\n          <IntegratedMarkdownViewer \r\n            apiBaseUrl=\"http://localhost:3300\"\r\n            basePath=\"/docs\"\r\n            hideFileTree={false}\r\n          />\r\n        } />\r\n      </Routes>\r\n    </BrowserRouter>\r\n  );\r\n}\r\n```\r\n\r\n### Advanced: Custom Components\r\n\r\nFor maximum flexibility, use individual components:\r\n\r\n```tsx\r\nimport { MarkdownContent, FileTree, ThemeProvider } from '@asafarim/complete-md-viewer';\r\nimport '@asafarim/complete-md-viewer/dist/style.css';\r\n\r\nfunction CustomViewer() {\r\n  const [content, setContent] = useState('');\r\n  const [frontMatter, setFrontMatter] = useState({});\r\n  const [theme, setTheme] = useState('light');\r\n  \r\n  return (\r\n    <ThemeProvider theme={theme} toggleTheme={() => setTheme(theme === 'light' ? 'dark' : 'light')}>\r\n      <div className=\"custom-layout\">\r\n        <FileTree \r\n          data={treeData}\r\n          onFileSelect={(path) => loadFile(path)}\r\n        />\r\n        <MarkdownContent \r\n          content={content}\r\n          frontMatter={frontMatter}\r\n        />\r\n      </div>\r\n    </ThemeProvider>\r\n  );\r\n}\r\n```\r\n\r\n## ⚙️ Backend Setup\r\n\r\nThe package requires a simple backend server to serve your markdown files. Here's a minimal Express.js setup:\r\n\r\n```javascript\r\nimport express from 'express';\r\nimport fs from 'fs';\r\nimport path from 'path';\r\nimport cors from 'cors';\r\n\r\nconst app = express();\r\nconst PORT = 3300;\r\nconst mdDocsPath = path.join(process.cwd(), 'markdown-files');\r\n\r\napp.use(cors());\r\n\r\n// API to return folder structure\r\napp.get('/api/folder-structure', (req, res) => {\r\n  const folderStructure = getFolderStructure(mdDocsPath);\r\n  res.json({ nodes: folderStructure });\r\n});\r\n\r\n// API to serve markdown files\r\napp.get('/api/file', (req, res) => {\r\n  const filePath = path.join(mdDocsPath, req.query.path);\r\n  if (fs.existsSync(filePath)) {\r\n    const content = fs.readFileSync(filePath, 'utf-8');\r\n    res.json({ content });\r\n  } else {\r\n    res.status(404).json({ error: 'File not found' });\r\n  }\r\n});\r\n\r\nfunction getFolderStructure(dirPath, relativePath = '') {\r\n  const items = fs.readdirSync(dirPath);\r\n  const result = [];\r\n\r\n  for (const item of items) {\r\n    const itemPath = path.join(dirPath, item);\r\n    const stats = fs.statSync(itemPath);\r\n    const itemRelativePath = path.join(relativePath, item).replace(/\\\\/g, '/');\r\n\r\n    if (stats.isDirectory()) {\r\n      result.push({\r\n        name: item,\r\n        path: itemRelativePath,\r\n        type: 'folder',\r\n        children: getFolderStructure(itemPath, itemRelativePath)\r\n      });\r\n    } else if (item.endsWith('.md')) {\r\n      result.push({\r\n        name: item,\r\n        path: itemRelativePath,\r\n        type: 'file'\r\n      });\r\n    }\r\n  }\r\n  return result;\r\n}\r\n\r\napp.listen(PORT, () => {\r\n  console.log(`Server running at http://localhost:${PORT}`);\r\n});\r\n```\r\n\r\n### Required API Endpoints\r\n\r\n- `GET /api/folder-structure` - Returns the file tree structure\r\n- `GET /api/file?path=<file-path>` - Returns the content of a specific file\r\n\r\n## 🎨 YAML Front Matter Support\r\n\r\nEnhance your markdown files with rich metadata:\r\n\r\n```markdown\r\n---\r\ntitle: \"API Documentation\"\r\ndescription: \"Complete API reference guide\"\r\nauthor: \"Your Name\"\r\ndate: \"2025-01-22\"\r\ncategory: \"Documentation\"\r\ntags: [\"api\", \"reference\", \"guide\"]\r\ntoc: true\r\n---\r\n\r\n# Your markdown content here...\r\n```\r\n\r\nThe front matter will be automatically parsed and displayed in a beautiful metadata section.\r\n\r\n## 📋 API Reference\r\n\r\n### StandaloneMarkdownViewer\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| apiBaseUrl | string | - | API base URL for fetching markdown content |\r\n| showHomePage | boolean | true | Whether to show the home page when no file is selected |\r\n| hideFileTree | boolean | false | Whether to hide the file tree sidebar |\r\n| sidebarCollapsed | boolean | false | Initial state of the sidebar (collapsed/expanded) |\r\n| className | string | - | Custom CSS class name |\r\n| style | object | - | Custom inline styles |\r\n| basePath | string | '/' | Base path for routing |\r\n\r\n### IntegratedMarkdownViewer\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| apiBaseUrl | string | - | API base URL for fetching markdown content |\r\n| showHomePage | boolean | true | Whether to show the home page when no file is selected |\r\n| hideFileTree | boolean | false | Whether to hide the file tree sidebar |\r\n| sidebarCollapsed | boolean | false | Initial state of the sidebar (collapsed/expanded) |\r\n| initialFilePath | string \\| null | null | Initial file path to load for direct navigation |\r\n| className | string | - | Custom CSS class name |\r\n| style | object | - | Custom inline styles |\r\n| basePath | string | '/' | Base path for routing |\r\n\r\n**Note**: The `IntegratedMarkdownViewer` now automatically handles direct URL navigation. When users refresh the page on a specific markdown file URL, the component will extract the file path from the URL and load the correct file automatically.\r\n\r\n## 🔄 Latest Updates (v1.1.0)\r\n\r\n- ✅ **Fixed URL Refresh Issue** - Direct file URLs now work correctly on page refresh\r\n- ✅ **Enhanced Browser Navigation** - Proper handling of back/forward buttons\r\n- ✅ **Improved URL Parsing** - Better extraction of file paths from URLs\r\n- ✅ **Demo Application** - Live demo available at [demo-complete-md-viewer.vercel.app](https://demo-complete-md-viewer.vercel.app)\r\n\r\n### MarkdownContent\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| apiBaseUrl | string | - | API base URL for fetching markdown content |\r\n| showHomePage | boolean | true | Whether to show the home page |\r\n| hideFileTree | boolean | false | Whether to hide the file tree |\r\n| sidebarCollapsed | boolean | false | Control sidebar collapsed state |\r\n| initialFilePath | string \\| null | null | Initial file path to load for direct navigation |\r\n| content | string | - | Direct markdown content (alternative to API fetching) |\r\n| frontMatter | object | - | Front matter metadata object |\r\n| className | string | - | Custom CSS class name |\r\n\r\n### FileTree\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| data | TreeNode[] | - | Tree data structure |\r\n| selectedPath | string | - | Currently selected file path |\r\n| onFileSelect | function | - | Callback when a file is selected |\r\n| className | string | - | Custom CSS class name |\r\n\r\n### ThemeProvider\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| theme | 'light' \\| 'dark' | 'light' | Current theme |\r\n| toggleTheme | function | - | Function to toggle between themes |\r\n| children | ReactNode | - | Child components |\r\n\r\n## 💡 Advanced Features\r\n\r\n### Theme Customization\r\n\r\nOverride CSS variables to customize the appearance:\r\n\r\n```css\r\n:root {\r\n  /* Light theme */\r\n  --smv-bg-primary: #ffffff;\r\n  --smv-text-primary: #333333;\r\n  --smv-accent-primary: #2196f3;\r\n  \r\n  /* Dark theme */\r\n  --smv-bg-primary-dark: #1e1e1e;\r\n  --smv-text-primary-dark: #e0e0e0;\r\n  --smv-accent-primary-dark: #64b5f6;\r\n}\r\n```\r\n\r\n### Mobile Responsiveness\r\n\r\nThe component automatically adapts to different screen sizes:\r\n\r\n- **Desktop**: Professional sidebar with toggle control\r\n- **Tablet**: Compressed sidebar with easy access\r\n- **Mobile**: Overlay sidebar optimized for touch\r\n\r\n### File Structure\r\n\r\nOrganize your markdown files in any directory structure:\r\n\r\n```\r\nmarkdown-files/\r\n├── README.md\r\n├── getting-started/\r\n│   ├── installation.md\r\n│   └── quick-start.md\r\n├── api/\r\n│   ├── overview.md\r\n│   └── endpoints.md\r\n└── guides/\r\n    ├── styling.md\r\n    └── deployment.md\r\n```\r\n\r\n## 🚀 Complete Tutorial\r\n\r\nFor a comprehensive step-by-step guide with screenshots and advanced implementation examples, check out our [Complete Tutorial](./how-to.md). It covers:\r\n\r\n- 📖 **Complete project setup** from scratch\r\n- 🎨 **Advanced styling** and theme customization  \r\n- 📱 **Mobile optimization** techniques\r\n- 🔧 **Production deployment** strategies\r\n- 💡 **Best practices** and troubleshooting\r\n- 🖼️ **Visual examples** with screenshots\r\n\r\n## 🤝 Contributing\r\n\r\nContributions are welcome! Please feel free to submit a Pull Request.\r\n\r\n## 📄 License\r\n\r\nMIT © [ASafariM](https://github.com/alisafari-it)\r\n\r\n## 🔗 Links\r\n\r\n- [GitHub Repository](https://github.com/alisafari-it/complete-md-viewer)\r\n- [npm Package](https://www.npmjs.com/package/@asafarim/complete-md-viewer)\r\n- [Issues & Support](https://github.com/alisafari-it/complete-md-viewer/issues)\r\n\r\n---\r\n\r\n**Transform your markdown files into a professional documentation website today!** 🚀\r\n","readmeFilename":"README.md"}