Build TOC page with site-wide index

The following instruction can be used for a "chapter" Table of Contents (TOC) and for a site wide TOC like used on the Welcome page of this site.

step 1. Make template for chapter TOC

Put in the root of the templates folder of your theme a file called 'chapter-toc.html.twig' with the following content:

{% extends 'docs.html.twig' %}

{% macro loop(page, parent_loop) %}
    {% for p in page.children.visible %}
        <li class="chapter{{ parent_page }}">
            <a href="{{ p.url }}" {% if p.header.class %}class="{{ p.header.class }}"{% endif %}>
                <span>
                    {{ p.menu }}
                </span>
            </a>
            {% if p.children.count > 0 %}
                <ul>
                    {{ _self.loop(p, parent_loop|default(0)+loop.index) }}
                </ul>
            {% endif %}
        </li>
    {% endfor %}
{% endmacro %}

{% macro version(p) %}
    <li class="chapter-page">
        <a href="{{ p.url }}">{{ p.menu }}</a>
    </li>
{% endmacro %}

{% block content %}
    <style>
        #chapter-pages ul {
            list-style: none;
        }

        #chapter-pages li:before {
            content: "\f111"; /* FontAwesome Unicode */
            font-family: FontAwesome;
            font-size: 9px;
            padding-right: 10px;
            color: #bdbdbd;
            display: inline-block;
        }

        #chapter-pages .chapter-page {
            font-weight: bold;
            margin-top: 10px;
        }

        #chapter-pages a:visited {
            color: #9B59B6;
        }
    </style>

    <div id="body-inner">
        <p>
            {{ page.content }}
        </p>

        <p>
            Contents:
        </p>

        {% if page.collection|defined(false) != false %}

            <div id="chapter-pages">
                <ul class="topics">
                    {% if page.header.content.items|defined(false) == '@root.descendants' %}
                        {% for slug, ver in pages.children %}
                            {{ _self.version(ver) }}
                            {% if ver.children.count > 0 %}
                                <ul>
                                    {{ _self.loop(ver, '') }}
                                </ul>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        {{ _self.loop(page, '') }}
                    {% endif %}
                </ul>
            </div>

        {% endif %}
    </div>
{% endblock %}

Step 2a. Chapter TOC (like the PHP page on this site)

Make a page with the template "chapter-toc"

You can enter text as normal into this document, on the bottom of the document and index of this chapter will be added automatically.

Step 2b. Site Wide TOC (like the Welcome page on this site)

Follow the same steps as in Step 2a. but now we add the the following to the front-matter in the expert options of the page:

content:
    items: '@root.descendants'