fxcjahid / laravel-table-of-content
Laravel Table Of Content Generator
2.2.1
2023-04-15 19:14 UTC
Requires
- php: ^7.0||^8.0
- cocur/slugify: ^2.0
- knplabs/knp-menu: ^2.0
- masterminds/html5: ^2.1
README
Generates a Table of Contents from H1...H6 Tags in HTML Content
This package provides a simple library to build a Table-of-Contents from HTML markup. It does so by evaluating your H1...H6 tags. It can also automatically add appropriate id anchor attributes to header tags so that in-page links work.
Features:
- Generates HTML menus and KnpMenu Item Menus
- Add anchor ID attributes to H1...H6 tags in your content where they haven't attributes
- You can specify tag which H1...H6 heading tag levels to include in the TOC
- Uses the flexible KnpMenu Library to generate menus
- PSR-12 compliant
- Composer-compatible
- Unit-tested (95% coverage)
Installation Options
Install with composer :
composer require fxcjahid/laravel-table-of-content
Usage
This package contains two main classes:
fxcjahid\LaravelTableOfContent\MarkupFixer
: Addsid
anchor attributes to any H1...H6 tags that do not already have any (you can specify which header tag levels to use at runtime)fxcjahid\LaravelTableOfContent\Table
: Generates a Table of Contents from HTML markup
Basic Example:
use fxcjahid\LaravelTableOfContent\Table; use fxcjahid\LaravelTableOfContent\MarkupFixer; $content = <<<END <h2>This is heading H2</h2> <h3>This is heading H3</h3> <h4>This is heading H4</h4> <h2>This is heading H1</h2> END; /** * Get Markup tag fixies */ $getFixContent = $markup->fix($content); /** * Get Table Of content * Levels 1-6 (It's will skip heading tag) */ $getTableOfContent = $toc->getTableContent($getFixContent, 2); $htmlOut = "<div class='content'>" . $getFixContent . "</div>"; $htmlOut .= "<div class='toc'>" . $getTableOfContent . "</div>"; return $htmlOut;
This produces the following output:
<div class='content'> <h1 id="this-is-a-header-tag-with-no-anchor-id">This is a header tag with no anchor id</h1> <p>Lorum ipsum doler sit amet</p> <h2 id="foo">This is a header tag with an anchor id</h2> <p>Stuff here</p> <h3 id="bar">This is a header tag with an anchor id</h3> </div> <div class='toc'> <ul> <li class="first last"> <span></span> <ul class="menu_level_1"> <li class="first last"> <a href="#foo">This is a header tag with an anchor id</a> <ul class="menu_level_2"> <li class="first last"> <a href="#bar">This is a header tag with an anchor id</a> </li> </ul> </li> </ul> </li> </ul> </div>
Integration in controller
use fxcjahid\LaravelTableOfContent\Table; use fxcjahid\LaravelTableOfContent\MarkupFixer; /** * Show the articles page. */ public function show(Table $toc, MarkupFixer $markup){ $content = <<<END <h2>This is heading H2</h2> <h3>This is heading H3</h3> <h4>This is heading H4</h4> <h2>This is heading H1</h2> END; /** * Get Markup tag fixies */ $getFixContent = $markup->fix($content); /** * Get Table Of content * Note: without ID arttibutes Table can't generate */ $getTableOfContent = $toc->getTableContent($getFixContent); $htmlOut = "<div class='content'>" . $getFixContent . "</div>"; $htmlOut .= "<div class='toc'>" . $getTableOfContent . "</div>"; echo $htmlOut; }
- This package inspired by https://github.com/caseyamcl/toc