AFX Preview
First paragraph
Second paragraph
Read moreDraft
This page is not yet fully completed - we are still working on the content here. Expect some rough edges 🙃
AFX is inspired by JSX. This means you can mostly write HTML and JSX. It also has decorators like Fusion.
<p class="paragraph">
<strong>This is strong</strong><br>
This is just flow content
</p>
Neos.Fusion:Tag {
tagName = 'p'
attributes.class = 'hello'
content = Neos.Fusion:Join {
item_1 = Neos.Fusion:Tag {
tagName = 'strong'
content = 'This is strong'
}
item_2 = Neos.Fusion:Tag {
tagName = 'br'
}
item_3 = 'This is just flow content'
}
}
This is strong
This is just flow content
<article class="hello">
<My.Site:IdGenerator @path="attributes.id" />
<h2 @key="heading" @if={!props.heading}>AFX Preview</h2>
<Neos.Fusion:Loop items="props.items" itemName="item">
<p>{item}</p>
</Neos.Fusion:Loop>
<Neos.Fusion:Augmenter class={props.link == '#top' ? 'int' : 'ext'}>
<Neos.Fusion:Tag
@if={Type.isString(props.link)}
attributes.href={props.link}
{...props.linkProps}
tagName='a'
attributes.rel='bookmark'
>
Read more
</Neos.Fusion:Tag>
</Neos.Fusion:Augmenter>
</article>
Neos.Fusion:Tag {
tagName = 'article'
attributes.class = 'hello'
attributes.id = My.Site:IdGenerator {
}
content = Neos.Fusion:Join {
heading = Neos.Fusion:Tag {
tagName = 'h2'
@if.if_1 = ${!props.heading}
content = 'AFX Preview'
}
item_2 = Neos.Fusion:Loop {
items = 'props.items'
itemName = 'item'
content = Neos.Fusion:Tag {
tagName = 'p'
content = ${item}
}
}
item_3 = Neos.Fusion:Augmenter {
class = ${props.link == '#title' ? 'int' : 'ext'}
content = Neos.Fusion:Tag {
attributes.href = ${props.link}
@apply.spread_1 = ${props.linkProps}
tagName = 'a'
attributes.rel = 'bookmark'
content = 'Read more'
}
}
}
}
heading = null
linkProps = Neos.Fusion:DataStructure {
attributes.title = 'Click me'
attributes.href = '#top'
attributes.class = 'default-link'
attributes.rel = 'help'
}
items = Neos.Fusion:DataStructure {
first = 'First paragraph'
second = 'Second paragraph'
}
link = "https://www.neos.io/"
First paragraph
Second paragraph
Read more