diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md index b92a0cf8..5ec53472 100644 --- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md @@ -1,6 +1,6 @@ # Modules -Modules are the closest thing to content components in the Presentation package. They use the full width space and can used next to each other. +Modules are the closest thing to content components in the Presentation package. They use the full width space and can be used next to each other. Please only use inline Tailwind and Alpinejs in the Modules folder, besides the Atoms and Molecules. If you create something more complex, then you probably need to create Molecules or sometimes even Organisms. diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion new file mode 100644 index 00000000..2b0c6ad5 --- /dev/null +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion @@ -0,0 +1,60 @@ +prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component) { + + @propTypes { + title = PropTypes:String + teaser = PropTypes:String + date = PropTypes:String + url = PropTypes:String + isFeature = PropTypes:Bool + image = PropTypes:FromPrototype { + prototypeName = Sitegeist.Kaleidoscope:Image + } + } + + isFeature = false + + @private { + accentColors = ${['purple', 'blue', 'lightblue', 'green', 'yellow', 'orange', 'red']} + background = ${props.isFeature ? 'accent-' + Array.random(private.accentColors) : 'gradient'} + } + + renderer = afx` +
  • + + + +
    +
    +

    {props.title}

    + +

    {props.date}

    + +

    {props.teaser}

    +
    + + + + Read more + + +
    +     +
    • + ` +} diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion new file mode 100644 index 00000000..c429c98b --- /dev/null +++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion @@ -0,0 +1,86 @@ +prototype(Neos.Presentation:PostGrid) < prototype(Neos.Fusion:Component) { + + @styleguide { + title = "Post Grid" + description = "A grid of posts with a headline. The posts are displayed as cards with an image, a title, a date, a teaser and a link to the full post and can be featured with a highlighted background color." + props { + headline.text = 'Blog' + posts = Neos.Fusion:DataStructure { + 0 { + title = 'First post example title' + teaser = 'This is a teaser for the first post example. It should be a short text that gives a quick overview of the post. It should be a short text that gives a quick overview of the post. This is more text to show the ellipsis on the teaser. It goes on and on and then there is even more text until it finally ends right here and right now.' + date = '01.06.2023' + url = '#' + isFeature = true + image.imageSource = Sitegeist.Kaleidoscope:UriImageSource { + uri = 'https://picsum.photos/1128/640?1' + } + } + 1 { + title = 'Second post example title' + teaser = 'This is a teaser for the second post example. It should be a short text that gives a quick overview of the post.' + date = '01.05.2023' + url = '#' + } + 2 { + title = 'Third post example title' + teaser = 'This is a teaser for the third post example. It should be a short text that gives a quick overview of the post.' + date = '01.04.2023' + url = '#' + image.imageSource = Sitegeist.Kaleidoscope:UriImageSource { + uri = 'https://picsum.photos/720/512?3' + } + } + 3 { + title = 'Fourth post example title' + teaser = 'This is a teaser for the fourth post example. It should be a short text that gives a quick overview of the post.' + date = '01.03.2023' + url = '#' + image.imageSource = Sitegeist.Kaleidoscope:UriImageSource { + uri = 'https://picsum.photos/720/512?4' + } + } + 4 { + title = 'Fifth post example title' + teaser = 'This is a teaser for the fifth post example. It should be a short text that gives a quick overview of the post.' + date = '01.02.2023' + url = '#' + isFeature = true + } + 5 { + title = 'Sixth post example title' + teaser = 'This is a teaser for the sixth post example. It should be a short text that gives a quick overview of the post.' + date = '01.01.2023' + url = '#' + } + } + } + } + + @propTypes { + headline = PropTypes:FromPrototype { + prototypeName = 'Neos.Presentation:Headline' + } + posts = PropTypes:Array { + type = PropTypes:FromPrototype { + prototypeName = 'Neos.Presentation:PostGrid.Teaser' + } + } + } + + renderer = afx` + + + + + + + + + + ` +}