From 2ce277cb3704f9874c081285fb2a69733ae5f9fe Mon Sep 17 00:00:00 2001
From: Dmitrij Kiltau <d.kiltau@muensmedia.de>
Date: Thu, 22 Feb 2024 16:17:38 +0100
Subject: [PATCH 1/5] FEATURE: Add PostGrid with Teaser

---
 .../Resources/Private/Fusion/Module/Readme.md |  2 +-
 .../Molecule/PostGrid/PostGrid.Teaser.fusion  | 64 +++++++++++++
 .../Fusion/Molecule/PostGrid/PostGrid.fusion  | 91 +++++++++++++++++++
 3 files changed, 156 insertions(+), 1 deletion(-)
 create mode 100644 DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
 create mode 100644 DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion

diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Module/Readme.md
index b92a0cf8c..5ec53472d 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 000000000..851a70fe6
--- /dev/null
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
@@ -0,0 +1,64 @@
+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
+        }
+    }
+
+    title = ''
+    teaser = ''
+    date = ''
+    url = ''
+    isFeature = false
+    image = null
+
+    @private {
+        accentColors = ${['purple', 'blue', 'lightblue', 'green', 'yellow', 'orange', 'red']}
+        background = ${props.isFeature ? 'accent-' + Array.random(private.accentColors) : 'gradient'}
+    }
+
+    renderer = afx`
+        <li class={AtomicFusion.classNames('n-post-grid__teaser', {
+            'aspect-[4/3] md:aspect-video xl:aspect-[4/3] md:col-span-2 md:row-span-2': props.isFeature,
+            'aspect-[7/5]': !props.isFeature
+        })}>
+            <a href={props.link} class="w-full h-full cursor-pointer">
+                <Neos.Presentation:Background
+                    variant={private.background}
+                    class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1">
+                    <Sitegeist.Kaleidoscope:Image
+                        @if.hasImage={props.image && props.image.imageSource}
+                        {...props.image} class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover"
+                    />
+
+                    <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25">
+                        <div class="grid p-8 pb-4">
+                            <h2 class={AtomicFusion.classNames('text-white text-2xl font-bold text-balance', {
+                                'sm:text-4xl': props.isFeature
+                            })}>{props.title}</h2>
+
+                            <p class="text-white text-sm mb-8">{props.date}</p>
+
+                            <p class={AtomicFusion.classNames('max-w-md text-white text-sm text-pretty xs:line-clamp-3 sm:line-clamp-2', {
+                                'sm:text-md md:line-clamp-6': props.isFeature
+                            })}>{props.teaser}</p>
+                        </div>
+
+                        <div class={AtomicFusion.classNames('flex items-center gap-2 p-8 pt-4', {
+                            'justify-end': props.isFeature
+                        })}>
+                            <span class="text-white text-sm">Read more</span>
+                            <Neos.Presentation:Atom.AnimatedArrow class="w-4 fill-white" />
+                        </div>
+                    </div>
+                </Neos.Presentation:Background>
+            </a>
+        </li>
+    `
+}
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 000000000..9ee27baae
--- /dev/null
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
@@ -0,0 +1,91 @@
+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 = '#'
+                }
+                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 = '#'
+                    isFeature = true
+                }
+            }
+        }
+    }
+
+    @propTypes {
+        headline = PropTypes:FromPrototype {
+            prototypeName = 'Neos.Presentation:Headline'
+        }
+        posts = PropTypes:Array {
+            type = PropTypes:FromPrototype {
+                prototypeName = 'Neos.Presentation:PostGrid.Teaser'
+            }
+        }
+    }
+
+    headline = Neos.Fusion:DataStructure {
+        text = ''
+    }
+    posts = ${[]}
+
+    renderer = afx`
+        <Neos.Presentation:Spacing size x y attributes.class="n-post-grid">
+            <Neos.Presentation:Spacing y>
+                <Neos.Presentation:Headline {...props.headline} display="headline-lg" class="text-lightblue" />
+            </Neos.Presentation:Spacing>
+
+            <Neos.Presentation:Spacing y="small">
+                <ul class="grid md:grid-cols-2 xl:grid-cols-3 gap-x-4 gap-y-8 mx-0">
+                    <Neos.Fusion:Loop items={props.posts} itemName="post">
+                        <Neos.Presentation:PostGrid.Teaser {...post} />
+                    </Neos.Fusion:Loop>
+                </ul>
+            </Neos.Presentation:Spacing>
+        </Neos.Presentation:Spacing>
+    `
+}

From cfc4362f0b48a246feb5cd11c9641c4eff5df912 Mon Sep 17 00:00:00 2001
From: Dmitrij Kiltau <d.kiltau@muensmedia.de>
Date: Mon, 25 Mar 2024 10:08:21 +0100
Subject: [PATCH 2/5] TASK: move example feature

---
 .../Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
index 9ee27baae..e689bff76 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
@@ -45,13 +45,13 @@ prototype(Neos.Presentation:PostGrid) < prototype(Neos.Fusion:Component) {
                     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 = '#'
-                    isFeature = true
                 }
             }
         }

From db523a8e50a3ebdb586f6593c84d126f4707fb1d Mon Sep 17 00:00:00 2001
From: Dmitrij Kiltau <d.kiltau@muensmedia.de>
Date: Mon, 25 Mar 2024 10:13:41 +0100
Subject: [PATCH 3/5] FIX: Animated arrow group hover

---
 .../Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 851a70fe6..54a9e7fe7 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
@@ -24,7 +24,7 @@ prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component)
     }
 
     renderer = afx`
-        <li class={AtomicFusion.classNames('n-post-grid__teaser', {
+        <li class={AtomicFusion.classNames('n-post-grid__teaser group', {
             'aspect-[4/3] md:aspect-video xl:aspect-[4/3] md:col-span-2 md:row-span-2': props.isFeature,
             'aspect-[7/5]': !props.isFeature
         })}>

From d78cffb9a9a27ba34149e02119f1b9f5acb6c1ad Mon Sep 17 00:00:00 2001
From: Dmitrij Kiltau <d.kiltau@muensmedia.de>
Date: Mon, 25 Mar 2024 10:36:41 +0100
Subject: [PATCH 4/5] TASK: Add image hover animation

---
 .../Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index 54a9e7fe7..7d9d39343 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
@@ -31,13 +31,13 @@ prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component)
             <a href={props.link} class="w-full h-full cursor-pointer">
                 <Neos.Presentation:Background
                     variant={private.background}
-                    class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1">
+                    class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1 overflow-hidden">
                     <Sitegeist.Kaleidoscope:Image
                         @if.hasImage={props.image && props.image.imageSource}
-                        {...props.image} class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover"
+                        {...props.image} class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover group-hover:scale-105 will-change-transform duration-700"
                     />
 
-                    <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25">
+                    <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25 z-10">
                         <div class="grid p-8 pb-4">
                             <h2 class={AtomicFusion.classNames('text-white text-2xl font-bold text-balance', {
                                 'sm:text-4xl': props.isFeature

From 60119ca437eeb1dff25657c55f1da9688a3f822f Mon Sep 17 00:00:00 2001
From: Dmitrij Kiltau <d.kiltau@muensmedia.de>
Date: Wed, 27 Mar 2024 13:52:48 +0100
Subject: [PATCH 5/5] FIX: Refactor PostGrid

---
 .../Molecule/PostGrid/PostGrid.Teaser.fusion  | 66 +++++++++----------
 .../Fusion/Molecule/PostGrid/PostGrid.fusion  |  7 +-
 2 files changed, 32 insertions(+), 41 deletions(-)

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
index 7d9d39343..2b0c6ad59 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.Teaser.fusion
@@ -11,12 +11,7 @@ prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component)
         }
     }
 
-    title = ''
-    teaser = ''
-    date = ''
-    url = ''
     isFeature = false
-    image = null
 
     @private {
         accentColors = ${['purple', 'blue', 'lightblue', 'green', 'yellow', 'orange', 'red']}
@@ -24,41 +19,42 @@ prototype(Neos.Presentation:PostGrid.Teaser) < prototype(Neos.Fusion:Component)
     }
 
     renderer = afx`
-        <li class={AtomicFusion.classNames('n-post-grid__teaser group', {
+        <li class={AtomicFusion.classNames('group w-full h-full relative', {
             'aspect-[4/3] md:aspect-video xl:aspect-[4/3] md:col-span-2 md:row-span-2': props.isFeature,
             'aspect-[7/5]': !props.isFeature
         })}>
-            <a href={props.link} class="w-full h-full cursor-pointer">
-                <Neos.Presentation:Background
-                    variant={private.background}
-                    class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1 overflow-hidden">
-                    <Sitegeist.Kaleidoscope:Image
-                        @if.hasImage={props.image && props.image.imageSource}
-                        {...props.image} class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover group-hover:scale-105 will-change-transform duration-700"
-                    />
-
-                    <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25 z-10">
-                        <div class="grid p-8 pb-4">
-                            <h2 class={AtomicFusion.classNames('text-white text-2xl font-bold text-balance', {
-                                'sm:text-4xl': props.isFeature
-                            })}>{props.title}</h2>
-
-                            <p class="text-white text-sm mb-8">{props.date}</p>
-
-                            <p class={AtomicFusion.classNames('max-w-md text-white text-sm text-pretty xs:line-clamp-3 sm:line-clamp-2', {
-                                'sm:text-md md:line-clamp-6': props.isFeature
-                            })}>{props.teaser}</p>
-                        </div>
+            <Neos.Presentation:Background
+                variant={private.background}
+                class="w-full h-[fit-content] xs:h-full grid grid-cols-1 xs:grid-rows-1 overflow-hidden">
+                <Sitegeist.Kaleidoscope:Image
+                    @if.hasImage={props.image && props.image.imageSource}
+                    {...props.image}
+                    class="xs:col-start-1 xs:row-start-1 inset-0 w-full h-full object-cover group-hover:scale-105 duration-700"
+                />
+
+                <div class="xs:col-start-1 xs:row-start-1 flex flex-col justify-between bg-black bg-opacity-25 z-10">
+                    <div class="grid p-8 pb-4">
+                        <h2 class={AtomicFusion.classNames('text-white text-2xl font-bold text-balance', {
+                            'sm:text-4xl': props.isFeature
+                        })}>{props.title}</h2>
+
+                        <p class="text-white text-sm mb-8">{props.date}</p>
+
+                        <p class={AtomicFusion.classNames('max-w-md text-white text-sm text-pretty xs:line-clamp-3 sm:line-clamp-2', {
+                            'sm:text-md md:line-clamp-6': props.isFeature
+                        })}>{props.teaser}</p>
+                    </div>
 
-                        <div class={AtomicFusion.classNames('flex items-center gap-2 p-8 pt-4', {
+                    <a href={props.url}
+                       class={AtomicFusion.classNames('flex items-center gap-2 p-8 pt-4', {
                             'justify-end': props.isFeature
-                        })}>
-                            <span class="text-white text-sm">Read more</span>
-                            <Neos.Presentation:Atom.AnimatedArrow class="w-4 fill-white" />
-                        </div>
-                    </div>
-                </Neos.Presentation:Background>
-            </a>
+                    })}>
+                        <span class="absolute inset-0 pointer-events-auto"></span>
+                        <span class="text-white text-sm">Read more</span>
+                        <Neos.Presentation:Atom.AnimatedArrow class="w-4 fill-white" />
+                    </a>
+                </div>
+            </Neos.Presentation:Background>
         </li>
     `
 }
diff --git a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
index e689bff76..c429c98bf 100644
--- a/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
+++ b/DistributionPackages/Neos.Presentation/Resources/Private/Fusion/Molecule/PostGrid/PostGrid.fusion
@@ -68,13 +68,8 @@ prototype(Neos.Presentation:PostGrid) < prototype(Neos.Fusion:Component) {
         }
     }
 
-    headline = Neos.Fusion:DataStructure {
-        text = ''
-    }
-    posts = ${[]}
-
     renderer = afx`
-        <Neos.Presentation:Spacing size x y attributes.class="n-post-grid">
+        <Neos.Presentation:Spacing size x y>
             <Neos.Presentation:Spacing y>
                 <Neos.Presentation:Headline {...props.headline} display="headline-lg" class="text-lightblue" />
             </Neos.Presentation:Spacing>