Visual Sitemap

Integration with Loft Docs

This document will describe a method of adding your sitemap to documentation per Loft Docs.

The File Structure

├── hooks
│   └──
├── sitemap
│   ├── html.twig
│   └── sitemap.json
└── source


  1. Create a hook file called with the following, this will handle the generation during documentation compilation.

    #!/usr/bin/env bash
    docs_vismap=$(type vismap >/dev/null &2>&1 && which vismap)
    if [ "$docs_vismap" ]; then
        cd "$1" && $docs_vismap "$4/sitemap/sitemap.json" --out="$9/sitemap.html" -f --theme="$4/sitemap" && exit 0
        exit 1
  2. Register the hook file. Add the filename to to the pre_hooks var:

    pre_hooks = ""
  3. Create a folder adjacent to source/ called sitemap/.

  4. Create your sitemap json in sitemap/sitemap.json.
  5. Optional, place template overrides in sitemap.
  6. Create a wrapper file called with something like the following; the iframe is the important part. You may add other content as necessary around the iframe.

    # Site Structure
    <a href="sitemap.html" target="_blank">open in a new window</a>
    <iframe src="sitemap.html" height="1200"></iframe>
  7. Now compile your documentation and ensure all is as expected.