Separate integration from rendering in Metadata components

[bwaidelich]

The current implementation of the Metadata Fusion prototypes is already very easy to extend.
But it's currently not easily possible to refer to image URLs instead of using assets from the Neos.Media package because integration & rendering is intermingled.
Also we currently have some props that are not meant to be part of the public API of the components (for example thumbnail in Neos.Seo:OpenGraphMetaTags).

I would suggest to slim down the components so that they just render the corresponding tags and receive (scalar?) props. And then have the (CR) integration in separate prototypes.

Example

For the OpenGraphMetaTags the rendering component could look like

prototype(Neos.Seo:OpenGraphMetaTags) < prototype(Neos.Fusion:Component) {
    type = ''
    title = ''
    description = ''
    siteName = ''
    locale = ''
    url = ''
    imageUri = ''
    imageWidth = 0
    imageHeight = 0
    imageAltText = ''

    renderer = afx`
        <meta @key="type" property="og:type" content={props.type} />
        <meta @key="title" property="og:title" content={props.title} />
        <meta @key="siteName" property="og:site_name" content={props.siteName} />
        <meta @key="locale" property="og:locale" content={props.locale} @if.set={!String.isBlank(props.locale)} />
        <meta @key="description" property="og:description" content={props.description} @if.set={!String.isBlank(props.description)} />
        <meta @key="url" property="og:url" content={props.url}/>
        <meta @key="image" property="og:image" content={props.imageUri} @if.set={!String.isBlank(props.imageUri)} />
        <meta @key="width" property="og:image:width" content={props.imageWidth} @if.set={props.width > 0 && !String.isBlank(props.imageUri)} />
        <meta @key="height" property="og:image:height" content={props.imageHeight} @if.set={props.height > 0 && !String.isBlank(props.imageUri)} />
        <meta @key="alt" property="og:image:alt" content={props.imageAltText} @if.set={!String.isBlank(props.imageAltText) && !String.isBlank(props.imageUri)} />
    `
}

and the corresponding integration (name to be defined) like:

prototype(Neos.Seo:OpenGraphMetaTags.Integration) < prototype(Neos.Fusion:Component) {
    type = ${q(node).property('openGraphType') || 'website'}
    title = ${q(node).property('openGraphTitle') || q(node).property('titleOverride') || q(node).property('title')}
    description = ${q(node).property('openGraphDescription') || q(node).property('metaDescription')}
    siteName = ${q(site).property('titleOverride') || site.label}
    locale = Neos.Seo:LangAttribute
    url = Neos.Neos:NodeUri {
        node = ${node}
        absolute = true
    }
    image = Neos.Fusion:Case {
        default {
            @position = 'start'
            condition = ${Type.instance(q(node).property('openGraphImage'), 'Neos\Media\Domain\Model\ImageInterface')}
            renderer = ${q(node).property('openGraphImage')}
        }
    }
    imageAltText = ${this.image.caption || this.image.label}

    renderer = Neos.Seo:OpenGraphMetaTags {
          @apply.props = ${props}
          imageUri = Neos.Neos:ImageUri {
              asset = ${props.image}
              preset = ${'Neos.Seo:OpenGraph.' + (props.image.orientation == 'landscape' ? 'Landscape' : 'Square')}
              @if.hasImage = ${Type.instance(props.image, 'Neos\Media\Domain\Model\ImageInterface')}
          }
          # ...
    }
}

(untested)