PHPackages perturbatio/livewire-markdown-navigator - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Parsing & Serialization](/categories/parsing) 4. / 5. perturbatio/livewire-markdown-navigator ActiveLibrary[Parsing & Serialization](/categories/parsing) perturbatio/livewire-markdown-navigator ======================================= Render a directory of markdown files in a livewire component 1.1.0(2mo ago)01[1 PRs](https://github.com/Perturbatio/livewire-markdown-navigator/pulls)MITBladePHP ^8.4CI passing Since Apr 3Pushed 1w agoCompare [ Source](https://github.com/Perturbatio/livewire-markdown-navigator)[ Packagist](https://packagist.org/packages/perturbatio/livewire-markdown-navigator)[ Docs](https://github.com/perturbatio/livewire-markdown-navigator)[ GitHub Sponsors](https://github.com/perturbatio)[ RSS](/packages/perturbatio-livewire-markdown-navigator/feed)WikiDiscussions main Synced today READMEChangelog (2)Dependencies (35)Versions (5)Used By (0) Render a directory of markdown files in a livewire component ============================================================ [](#render-a-directory-of-markdown-files-in-a-livewire-component) [![Latest Version on Packagist](https://camo.githubusercontent.com/3003d7f8558ed7979da3635f22d4579870a02ff9914a0536466e97cc7a242529/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f706572747572626174696f2f6c697665776972652d6d61726b646f776e2d6e6176696761746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/perturbatio/livewire-markdown-navigator)[![GitHub Tests Action Status](https://camo.githubusercontent.com/adce505afec5c30b496cdb39fef6daf5075de28c3a018bd8bc3ec49ab04590ea/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f706572747572626174696f2f6c697665776972652d6d61726b646f776e2d6e6176696761746f722f72756e2d74657374732e796d6c3f6272616e63683d6d61696e266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/perturbatio/livewire-markdown-navigator/actions?query=workflow%3Arun-tests+branch%3Amain)[![GitHub Code Style Action Status](https://camo.githubusercontent.com/c1ea1d3dac6d5c28ddfc40539dcc525b25a4f6f02eec9a99f70d329c570559ad/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f706572747572626174696f2f6c697665776972652d6d61726b646f776e2d6e6176696761746f722f6669782d7068702d636f64652d7374796c652d6973737565732e796d6c3f6272616e63683d6d61696e266c6162656c3d636f64652532307374796c65267374796c653d666c61742d737175617265)](https://github.com/perturbatio/livewire-markdown-navigator/actions?query=workflow%3A%22Fix+PHP+code+style+issues%22+branch%3Amain)[![Total Downloads](https://camo.githubusercontent.com/870c015635e55e2e21da1771366cf4156295121491fd54b103c2700c3fc1c768/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f706572747572626174696f2f6c697665776972652d6d61726b646f776e2d6e6176696761746f722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/perturbatio/livewire-markdown-navigator) A livewire component that allows you to view markdown documentation stored in a given disk and path. [![Markdown Navigator Screenshot (Light mode)](./resources/images/doc-render-example.png)](./resources/images/doc-render-example.png)[![Markdown Navigator Screenshot (Dark mode)](resources/images/doc-render-darkmode-example.png)](resources/images/doc-render-darkmode-example.png) Support Spatie's open source work --------------------------------- [](#support-spaties-open-source-work) This package was NOT created by Spatie, but it was created using Spatie's [spatie/laravel-package-tools](https://github.com/spatie/laravel-package-tools), without them, this package probably would have been possible, but I'm not sure I could have been as motivated to make it. But I have used several of their other excellent packages. They invest a lot of resources into creating [best in class open source packages](https://spatie.be/open-source). You can support them by [buying one of our paid products](https://spatie.be/open-source/support-us). They highly appreciate you sending them a postcard from your hometown, mentioning which of their package(s) you are using (and maybe this one too). You'll find their address on [their contact page](https://spatie.be/about-us). They publish all received postcards on [their virtual postcard wall](https://spatie.be/open-source/postcards). Other support ------------- [](#other-support) If you can afford it, the people in Ukraine need help right now, and there are many organisations doing excellent work to provide humanitarian aid, medical supplies, and other support. Consider donating to one of these organisations: - - - There are many other efforts you can support also, including: - - Gamers Outreach is a charity that empowers hospitalized families through play. - - Great Ormond Street Hospital in London, UK Installation ------------ [](#installation) You can install the package via composer: ``` composer require perturbatio/livewire-markdown-navigator ``` Config ------ [](#config) You can publish the config file with: ``` php artisan vendor:publish --tag="livewire-markdown-navigator-config" ``` This is the contents of the published config file: ``` // config for Perturbatio\\LivewireMarkdownNavigator/LivewireMarkdownNavigator return [ 'default_disk' => 'docs', 'permitted_disks' => [ 'docs', ], 'commonmark_options' => [ ], ]; ``` KeyDescriptionDefault Value`default_disk`The default disk to use when no disk is specified. Must be included in the `permitted_disks` array.'docs'`permitted_disks`An array of disk names that the component is allowed to access. This is a security measure to prevent unauthorized access to files on the server.\['docs'\]`commonmark_options`An array of options to pass to the CommonMark parser. This allows you to customize the markdown rendering. For example, you can enable or disable certain markdown features, or add custom extensions.\[\]For more information on the available CommonMark options, see the [league/commonmark documentation](https://commonmark.thephpleague.com/2.x/configuration/). Livewire Component usage ------------------------ [](#livewire-component-usage) See [component documentation](resources/docs/markdown-navigator/README.md). Styles ------ [](#styles) You can publish the assets (CSS) with: ``` php artisan vendor:publish --tag="livewire-markdown-navigator-assets" ``` A copy of the minified CSS AND the tailwind source file will be copied You can include the minified CSS in your app, or import the tailwind source file into your tailwind config. ``` @import 'path/to/public/vendor/livewire-markdown-navigator/markdown-navigator.tailwind.css'; ``` The CSS relies on some colour definitions which are not included in the tailwind source, this is to allow you to define these yourself or inherit them from something like Filament. The colour definitions are as follows: ``` :root { --primary-50: oklch(98.5% 0.158 74.47); --primary-100: oklch(91.5% 0.158 74.47); --primary-200: oklch(84.5% 0.158 74.47); --primary-300: oklch(77.5% 0.158 74.47); --primary-400: oklch(69.5% 0.158 74.47); --primary-500: oklch(62.5% 0.158 74.47); --primary-600: oklch(55.5% 0.158 74.47); --primary-700: oklch(47.5% 0.158 74.47); --primary-800: oklch(40.5% 0.158 74.47); --primary-900: oklch(33.5% 0.158 74.47); --primary-950: oklch(25.5% 0.158 74.47); --gray-50: oklch(0.985 0.002 247.839); --gray-100: oklch(0.967 0.003 264.542); --gray-200: oklch(0.928 0.006 264.531); --gray-300: oklch(0.872 0.01 258.338); --gray-400: oklch(0.707 0.022 261.325); --gray-500: oklch(0.551 0.027 264.364); --gray-600: oklch(0.446 0.03 256.802); --gray-700: oklch(0.373 0.034 259.733); --gray-800: oklch(0.278 0.033 256.848); --gray-900: oklch(0.21 0.034 264.665); --gray-950: oklch(0.13 0.028 261.692); --color-gray-100: var(--gray-100); --color-gray-200: var(--gray-200); --color-gray-300: var(--gray-300); --color-gray-400: var(--gray-400); --color-gray-500: var(--gray-500); --color-gray-600: var(--gray-600); --color-gray-700: var(--gray-700); --color-gray-900: var(--gray-900); --color-gray-950: var(--gray-950); --color-black: #000; --color-white: #fff; } @utility border-primary-50 { border-color: var(--primary-50); } @utility border-primary-100 { border-color: var(--primary-100); } @utility border-primary-200 { border-color: var(--primary-200); } @utility border-primary-300 { border-color: var(--primary-300); } @utility border-primary-400 { border-color: var(--primary-400); } @utility border-primary-500 { border-color: var(--primary-500); } @utility border-primary-600 { border-color: var(--primary-600); } @utility border-primary-700 { border-color: var(--primary-700); } @utility border-primary-800 { border-color: var(--primary-800); } @utility border-primary-900 { border-color: var(--primary-900); } @utility border-primary-950 { border-color: var(--primary-950); } ``` Optionally, you can publish the views using ``` php artisan vendor:publish --tag="livewire-markdown-navigator-views" ``` Usage ----- [](#usage) Usage: ``` ``` ```