Atomic Fusion: Content with TOC

Root.fusion

prototype(Some.Package:Component.ContentWithToc) < prototype(Neos.Fusion:Component) {
    blocks = Neos.Fusion:RawArray

    renderer = afx`
        <nav>
            <ul>
                <Neos.Fusion:Collection collection={props.blocks} itemName="block" @children="itemRenderer">
                    <li>
                        <a href={'#c-' + iterator.cycle}>{block.label}</a>
                    </li>
                </Neos.Fusion:Collection>
            </ul>
        </nav>
        <Neos.Fusion:Collection collection={props.blocks} itemName="block" @children="itemRenderer">
            <div id={'#c-' + iterator.cycle}>
                {block.content}
            </div>
        </Neos.Fusion:Collection>
    `
}
prototype(Some.Package:Component.ContentWithToc.Block) < prototype(Neos.Fusion:RawArray) {
    label = ''
    content = ''
}


root = Some.Package:Component.ContentWithToc {
    blocks {
        0 = Some.Package:Component.ContentWithToc.Block {
            label = 'Content #1'
            content = 'Lorem ipsum dolor #1'
        }
        1 = Some.Package:Component.ContentWithToc.Block {
            label = 'Content #2'
            content = 'Lorem ipsum dolor #2'
        }
        2 = Some.Package:Component.ContentWithToc.Block {
            label = 'Content #3'
            content = 'Lorem ipsum dolor #3'
        }
    }
}