Seperation of Presentation and Integration

Component.Organism.Head.fusion

#
# Presentational - prototype that encapsulates rendering of a page header 
# without caring where title and description originate from
#
# Notice:
# - the base prototype is Neos.Fusion:Component
#
prototype(Vendor.Site:Component.Organism.Head) < prototype(Neos.Fusion:Component) { 
    title = ''
    intro = ''
    
    renderer = afx`
        <div class=="header">
            <h1>{props.title}</h1>
            <p class="intro" @if.has={props.intro}>{props.intro}</p>
        </div>
    `
}

Content.Header.fusion

#
# Integrational - prototype that renders a content nodetype using a presentational component
#
# Notice:
# - the name of the prototype has to match the nodetype
# - the base prototype is Neos.Neos:ContentComponent
#
prototype(Vendor.Site:Content.Header) < prototype(Neos.Neos:ContentComponent) {
    renderer = Vendor.Site:Component.Organism.Head {
        title = ${q(node).property('title')}
        intro = ${q(node).property('metaDescriotion')}
    }
}